Apakah Anda ingin mengetahui cara menyesuaikan tema WordPress dengan Plugin Elementor ?
Menyesuaikan tema WordPress Anda adalah salah satu tugas utama saat membangun situs web WordPress. Karena dia mengontrol desain situs web, di sinilah banyak profesional menghabiskan sebagian besar waktu mereka.
Membuat tema WordPress khusus biasanya melibatkan bekerja dengan file tema dan editor kode. Perubahan tata letak terjadi di file template, perubahan desain melalui CSS. Selain itu, Anda harus terus menyegarkan jendela browser untuk menampilkan penyesuaian Anda, yang bisa sedikit merepotkan.
Untungnya, dengan Elementor, proses ini menjadi sangat mudah, jadi Anda mungkin ingin memeriksanya.
Tapi sebelumnya, mari kita temukan bersama Bagaimana menginstal sebuah blog WordPress langkah 7 et Bagaimana menemukan, menginstal dan mengaktifkan tema WordPress di blog Anda.
Lalu, kembali ke alasan kita ada di sini.
Apa itu tema WordPress
Tema WordPress pada dasarnya adalah kumpulan template yang menentukan tampilan visual situs WordPress.
Tema WordPress mencakup semua hal yang memengaruhi desain situs web, mulai dari header dan footer hingga skema warna, tata letak, dan banyak lagi.
Ada banyak tema yang tersedia, baik gratis maupun premium, yang cocok untuk hampir semua industri seperti situs fotografi, situs klub gym, situs salon rambut, situs hukumDan banyak lagi.
Mengapa menyesuaikan tema WordPress?
Salah satu alasan utama untuk membuat website adalah untuk mempromosikan bisnis Anda. Apa cara yang lebih baik untuk melakukannya selain buat situs web unik yang mempromosikan gaya dan desain perusahaan.
Dapatkah Anda membayangkan Amazon, eBay, atau Google apa adanya tanpa desain uniknya?
Tentu tidak, dan itulah salah satu alasan kami ingin menyesuaikan tema WordPress. Kami ingin menjadikannya unik dan menyesuaikan dengan pesan perusahaan kami.
Selain itu, terkadang, atau lebih tepatnya, sering kali, Anda menjalankan tema WordPress yang terganggu oleh desain yang buruk, warna yang tidak serasi, atau tema yang terlalu berat dan hanya memengaruhi kinerja situs. web. Tema WordPress bisa menjadi kuat kecuali untuk hal yang mengganggu Anda. Sesuaikan dan ubah hal ini bisa menyelesaikan semua masalah Anda dan membuat pengalaman pengguna yang lebih baik.
Cara menyesuaikan tema WordPress
Ada beberapa metode untuk menyesuaikan tema WordPress.
- Secara manual, melalui penyesuai WordPress
- Dengan kode
- Dengan Elementor
Cara menyesuaikan tema WordPress secara manual
Anda dapat menyesuaikan tema WordPress pilihan Anda melalui Penyesuai WordPress bawaan. Jika Anda melakukannya tanpa kode, Anda sering kali terbatas pada apa yang dapat Anda ubah. Beberapa Tema WordPress premium memungkinkan Anda lebih banyak opsi penyesuaian, tetapi pada dasarnya tidak banyak opsi desain untuk Anda.
Sebelum kami menyelami lebih dalam area ini, kami ingin menunjukkan bahwa ketika Anda menyesuaikan tema WordPress yang ada, yang terbaik adalah Anda menggunakan tema anak dan bukan tema induk.
Tema anak WordPress
Tema anak adalah tema WordPress yang memiliki fungsi dan karakteristik yang sama persis dengan tema WordPress lainnya, yaitu tema induk. Tema anak digunakan untuk menyesuaikan dan memodifikasi tema dengan aman, tanpa memengaruhi tema induk dan tanpa kehilangan kemampuan untuk memperbaruinya.
Penyesuai tema WordPress
Jadi sekarang kita tahu bahwa yang terbaik adalah bekerja dengan tema anak, mari pelajari cara menyesuaikan tema dengan Penyesuai WordPress. Untuk mengaksesnya, buka dasbor Anda, klik Apparence di sisi kiri dan pilih Personalisasi.
Fitur utama yang dapat Anda modifikasi dengan Penyesuai ini adalah sebagai berikut:
Menambahkan judul situs web, logo dan ikon
Untuk menambah atau mengubah judul, logo atau ikon Anda, Anda cukup pergi ke panel Identity situs web. dan pilih masing-masing elemen ini untuk memodifikasinya.
Mengubah warna tema WordPress
Beberapa Tema WordPress akan memungkinkan Anda mengubah skema warnanya, tetapi tidak semuanya, dan biasanya memang demikian Tema WordPress premium. Jika tema WordPress Anda memungkinkan Anda mengubah skema warna, Anda akan melihat opsi ini saat mengakses Penyesuai.
Menambahkan menu navigasi
Penyesuai juga memungkinkan Anda menambah dan mengubah menu navigasi situs web dengan mudah.
Cara menyesuaikan tema WordPress dengan kode
Anda akan melihat bahwa di bawah tab Appearance, Anda memiliki opsi untuk memilih editor tema. Mengkliknya akan menyambut Anda dengan jendela dengan kode tema. Opsi ini membutuhkan pemahaman yang baik tentang pengkodean CSS dan tidak disarankan untuk pemula.
Di sini Anda akan memiliki akses ke file seperti style.css, fungsi.php, dan ini persis skenario yang Anda perlukan untuk tema anak sehingga Anda tidak merusak situs web Anda.
Cara lain untuk menyesuaikan tema Anda dengan pengkodean adalah mengunggah file menggunakan solusi FTP. Prosesnya melibatkan pembuatan kredensial FTP melalui penyedia hosting Anda, mengunduh dan menginstal solusi FTP (seperti FileZilla), masuk ke akun Anda dan mengedit file Anda, yang kemudian akan Anda unggah melalui hal yang sama. Solusi FTP.
Temukan panduan kami di Cara menginstal WordPress dengan FileZilla
Kecuali Anda terbiasa dengan pengkodean, kami tidak merekomendasikan opsi ini.
Sesuaikan tema WordPress dengan mudah dengan Elementor
Anda dapat melakukan ini langsung dari antarmuka pengguna. Tidak perlu mengubah satu baris kode atau memuat ulang jendela browser, bahkan sekali.
Elementor memungkinkan Anda untuk mengubah setiap elemen situs web dengan cepat dan mudah dengan beberapa klik mouse dan Anda bahkan dapat mengoptimalkan fitur-fitur ini untuk platform seluler.
Elementor membuat proses ini lebih mudah dengan menggunakan konten dinamis dan memungkinkan Anda untuk melihat halaman Anda. Dengan cara ini, Anda dapat langsung melihat bagaimana perubahan desain akan memengaruhi situs web dan konten Anda yang sebenarnya.
Sesuaikan header dan footer
Elementor memungkinkan Anda melengkapi fleksibilitas saat mendesain header dan footer. Kita semua tahu betapa membosankannya hal itu, bahwa Anda memiliki tema WordPress, dan Anda tidak dapat mengubah satu aspek pun dari desain header atau footer. Anda membutuhkan tema khusus, plugin, dll.
Dengan Elementor, itu mudah.
1. Buat template header
Pertama, konfigurasikan template tajuk baru. Untuk melakukan ini, buka Elementor> Template Saya.
Di sini salah satu cara untuk memulai adalah dengan menekan tombol Add New di bagian atas. Di layar berikutnya, gunakan menu drop-down untuk memilih Header sebagai jenis template yang akan dirancang.
Anda juga dapat mencapai layar ini dengan mengklik tab Header dari layar sebelumnya dan kemudian menekan tombol hijau besar yang muncul.
Ini akan memilih dulu header sebagai jenis template. Apa pun itu, Anda perlu menambahkan nama yang sesuai untuk templat tersebut (agar Anda tahu nanti) dan kemudian melanjutkan dengan mengklik Buat Templat.
Ini akan membawamu ke sini.
Dengan Elementor Pro, Anda dapat memilih dari blok header yang telah dirancang sebelumnya. Ini adalah template desain yang dapat Anda gunakan sebagai titik awal untuk desain Anda sendiri, yang akan kami lakukan dalam kasus ini.
Saat Anda mengarahkan kursor ke blok header, klik Menyisipkan memungkinkan Anda untuk segera mulai mendesainnya. Jika tidak, klik gambar terlebih dahulu untuk melihat versi yang lebih besar. Kemudian Anda selalu dapat menekan Menyisipkan di bagian atas
Jika tidak, jika Anda ingin memulai dari awal, tutup saja jendela dengan mengklik X di sudut kanan atas.
2. Ubah desain header dasar
Setelah memasuki header baru, hal pertama yang akan Anda perhatikan adalah logo dan menu yang kita konfigurasikan sebelumnya sudah ada di sana.
Inilah mengapa kami menempatkannya dan kami akan berbicara tentang cara menyesuaikannya. Namun, pertama-tama mari kita lihat cara menyesuaikan bagian header itu sendiri.
Untuk melakukan ini, cukup arahkan kursor ke atasnya dan klik tombol edit di bagian atas. Ini akan membuka daftar opsi pengeditan di sebelah kiri.
Inilah yang dapat Anda kendalikan di menu yang berbeda:
- tata ruang - Kontrol lebar bagian, ukuran ruang antar kolom, tingginya, kolom vertikal dan posisi konten, tag HTML yang ditetapkan dan struktur umum.
- Gaya - Di sini Anda dapat mengubah warna latar termasuk file efek hover, bahkan tambahkan gambar atau video jika Anda mau, tambahkan efek overlay, border dan divider serta ubah pengaturan tipografi.
- Mahir - Bagian ini memungkinkan Anda untuk menambahkan atribut CSS seperti margin, dan indeks z, animasi, ID, dan kelas. Ini juga memungkinkan Anda membuat bagian menjadi lengket dan mengontrol pengaturan responsif serta menambahkan beberapa CSS khusus.
Semua hal di atas cukup jelas, dan Anda akan segera mendapatkan apa yang Anda inginkan.
3. Sesuaikan elemen header
Namun, Anda tidak hanya dapat mengedit bagian header secara keseluruhan, tetapi juga item yang disertakan di dalamnya. Misalnya, untuk menyesuaikan logo situs web, cukup klik di atasnya. Ini juga akan memberi Anda opsi pengeditan di sisi kiri.
Untuk logo, ini memberi Anda opsi berikut:
- Konten - Ubah ukuran gambar, perataan dan tempat yang ditautkan.
- Gaya - Kontrol lebar dan tinggi, tambahkan efek CSS dan efek hover, termasuk batas dan bayangan jika Anda mau.
- Mahir - Di sini Anda akan menemukan opsi yang pada dasarnya sama seperti untuk bagian tajuk.
Gunakan pengaturan untuk menyesuaikan logo seperti yang Anda inginkan untuk ditampilkan dengan baik di header. Perhatikan juga bahwa setiap item memiliki jenis opsinya sendiri, jadi pastikan untuk memeriksa masing-masing.
4. Tambahkan item
Tentu saja, dengan Elementor Anda juga dapat menambahkan item ke tajuk. Cukup klik simbol di kanan atas untuk melihat apa yang tersedia.
Saat mengedit templat tajuk, Elementor secara otomatis menampilkan blok yang relevan di bagian atas daftar, yang paling masuk akal dalam situasi tersebut. Dalam hal ini, yang dimaksud adalah logo situs web, menu navigasi, dan judul situs web.
Jadi misalnya, jika Anda ingin menambahkan judul situs web di sebelah logo, cukup seret dan lepas di atasnya. Namun, template tajuk yang kami pilih saat ini memungkinkan kami untuk menambahkannya di atas atau di bawah logo. Tapi, itu masalah yang akan mudah diselesaikan.
Dalam kasus seperti ini, arahkan kursor ke header dan gunakan simbol plus –+-untuk menambahkan bagian di atas.
Klik di sini pada tombol ungu untuk memilih desain tiga kolom.
Kemudian seret elemen dari bagian tajuk yang ada ke bagian baru dan tambahkan judul situs web di tengah.
Tapi tunggu, gayanya benar-benar berbeda! tidak masalah. Cukup klik kanan pada header yang ada dan pilih Salinan. Kemudian klik kanan pada bagian baru dan klik di sini Tempel Gaya. Elementor kemudian akan menerapkan gaya bagian yang ada, yang dapat Anda tutup nanti.
Anda dapat melakukan proses yang sama dengan elemen header lainnya dan, tentu saja, dengan semua elemen lain yang termasuk dalam Elementor.
Sesuaikan template posting unik
Di Elementor, Anda juga dapat menyesuaikan satu templat posting. Begini caranya:
1. Buat model baru
Membuat template bekerja dengan cara biasa. Namun, kali ini pilih Tunggal sebagai tipe model. Kemudian, di bawah ini, pilih template unik yang ingin Anda edit. Dalam contoh ini, dari Pos.
Jika Anda ingin membuat desain halaman baru, edit halaman 404 Anda (lebih lanjut tentang itu nanti) atau edit jenis posting khusus khususnya, Anda akan memilih yang lain. Dalam kedua kasus tersebut, masukkan nama dan lanjutkan.
Di layar berikutnya, Anda dapat memilih dari template standar seperti biasa. Namun, dalam hal ini kami ingin membuat model baru dari awal. Jadi klik X di kanan atas untuk menutup jendela ini.
2. Konfigurasi pratinjau
Kemudian atur jendela pratinjau ke posting yang ada. Anda dapat melakukan ini dengan mengklik ikon mata di bagian bawah opsi editor, lalu Pengaturan.
Di menu yang terbuka, di bawah Preview konten dinamis, pilih Menerbitkan. Setelah itu, pada baris berikutnya, Anda bisa mencari dan memilih postingan yang sudah ada berdasarkan namanya.
Setelah Anda selesai melakukannya, ketuk Mendaftar & Preview. Meskipun Anda tidak dapat melihat apa pun pada saat ini (karena tidak ada apa pun di halaman tersebut), ini akan memberi tahu Elementor untuk menggunakan data dalam posting ini mulai sekarang. Anda akan segera melihat apa artinya ini.
3. Mari buat bagian Di Atas
Pertama, kami akan membuat bagian di atas. Di sini Anda biasanya akan menemukan hal-hal seperti judul posting dan metadata seperti penulis, tanggal, dan kategori.
Langkah pertama adalah mengklik tanda itu + dan membuat satu bagian kolom.
Saat melakukannya, di bagian tata letak, Anda memiliki opsi untuk mengontrol lebar, tinggi, pemosisian, dan gayanya. Dalam hal ini, tidak banyak yang bisa dilakukan di sini. Selain itu, jangan khawatir, Anda selalu dapat kembali dan membuat perubahan nanti.
Kemudian seret widget judul posting ke bagian baru.
Saat Anda melakukannya, pastikan untuk menggunakan semua opsi yang tersedia untuk menyesuaikan desain dan tata letak sesuai keinginan Anda. Misalnya, berikut adalah pengaturan saya untuk melakukannya:
Ada juga fitur keren yang harus kamu pelajari. Ketika Anda mengklik simbol kunci dari judul posting, Anda dapat menambahkan konten statis sebelum dan sesudah data dinamis Anda.
Misalnya, jika Anda membuat template untuk kategori posting tertentu, seperti berita atau resep, Anda dapat menambahkannya ke judul posting seperti ini:
Dengan begitu, data tersebut akan muncul untuk setiap postingan dalam kategori tersebut. Saya tidak akan menggunakan ini pada saat ini, tetapi saya pikir itu adalah catatan tambahan yang penting untuk Anda.
Di bawah judul posting kita akan memasukkan Pos Info Widget untuk melihat metadata kiriman.
Berikut pengaturan yang saya gunakan:
Selain itu, saya menggunakan opsi gaya untuk membuat desain sesuai dengan sisa halaman. Pastikan Anda melakukan hal yang sama.
4. Siapkan badan pos
Setelah tajuk, saatnya membuat badan halaman. Jika Anda ingin bagian ini memiliki desain yang berbeda dari header, Anda perlu menyiapkan bagian baru. Namun, saya tetap sederhana, jadi saya tidak perlu melakukannya.
Hal pertama yang ingin kami masukkan adalah gambar unggulan. Untuk ini, Anda dapat menempatkan widget dengan nama yang sama di bawah apa yang sudah ada di halaman.
Saya pada dasarnya tidak mengubah pengaturan apa pun, hanya membiarkan semuanya apa adanya.
Kemudian saatnya konten diposting. Di sini juga Anda memiliki blok yang sesuai.
Anda akan melihat bahwa untuk gambar unggulan dan konten posting, Elementor secara otomatis menarik apa yang sudah ada di situs web. Lakukan penyesuaian pada desain blok baru yang Anda butuhkan, misalnya bermain-main dengan pengaturan tipografi.
Selain itu, itu saja. Tidak terlalu banyak pekerjaan yang harus dilakukan di sini sehingga kita dapat melanjutkan ke bagian terakhir.
5. Konfigurasi footer
Dalam kasus ini, kami ingin footer menampilkan profil penulis, opsi berbagi, dan komentar pembaca. Untuk melakukan ini, pertama-tama, kita perlu membuat bagian baru dengan dua kolom. Untuk membuat lebih banyak ruang untuk profil penulis, Anda dapat mengaturnya ke tata letak 66.33.
Setelah itu tempatkan widgetnya Kotak Penulis di bagian kiri.
Pastikan untuk menyesuaikan gaya agar sesuai dengan kebutuhan Anda. Saya menambahkan sedikit warna latar belakang, dan menyesuaikan sedikit pengaturan tipografi.
Setelah itu, saatnya menambahkan blok Tombol Bagikan di sisi kanan.
Anda dapat melihat pengaturan saya pada gambar di atas.
Setelah itu, yang tersisa hanyalah membuat bagian satu kolom lagi ke bawah dan drag dan drop widget Posting Komentar ke dalamnya.
(Ngomong-ngomong, jika Anda kesulitan menemukan widget ini, cukup gunakan fungsi pencarian).
Lakukan penyesuaian pada bagian komentar yang Anda rasa perlu (saya biarkan apa adanya) dan Anda siap untuk memposting. Inilah desain yang sudah jadi:
Sesuaikan template arsip
1. Konfigurasikan template arsip WordPress Anda
Sekarang Anda sudah mengetahui solusi untuk membuat model baru. Satu-satunya perbedaan adalah bahwa dalam hal ini Anda akan memilih arsip sebagai tipe model.
Setelah itu, seperti biasa, Anda mendapatkan sejumlah blok untuk dipilih atau Anda juga dapat membuat model sendiri dari awal. Namun, untuk arsip Anda kira-kira hanya memiliki dua widget Elementor yang penting sih.
2. Tentukan judul arsip
Blok pertama yang ingin saya bicarakan adalah judul arsip Judul Arsip.
Selain pengaturan biasa di bawah Gaya dan Lanjutan, Anda dapat menemukan opsi penting saat mengeklik simbol kunci di bawah Judul.
Di sini Anda dapat mengaktifkan dan menonaktifkan apakah Elementor menampilkan jenis arsip pada halaman seperti bagian yang tertulis Penulis: di bawah. Ini terjadi melalui tombol di bawah Sertakan Konteks.
Omong-omong, seperti biasa, Anda dapat melihat pratinjau arsip yang berbeda menggunakan pengaturan pratinjau (Simbol Mata> Pengaturan). Dengan cara ini Anda dapat melihat desain untuk kategori unik, tag, penulis, dan lainnya. Ingatlah itu.
3. Gunakan blok publikasi arsip
Widget penting kedua untuk arsip adalah Postingan Arsip. Ini membawa semua posting milik arsip apa pun di satu halaman. Ketika Anda memilih templat, mereka sudah ada di sana, tetapi Anda juga dapat dengan mudah menambahkannya sendiri dengan blok ini.
Mari kita lihat opsi yang diberikannya untuk menyesuaikan halaman arsip Anda:
- Kulit - Pilih untuk menampilkan posting Anda dalam desain gaya klasik atau kartu.
- Kolom - Menentukan jumlah kolom di mana posting Anda ditampilkan.
- Tunjukkan Gambar - Aktifkan gambar unggulan di halaman arsip
- Masonry – Menampilkan item dalam desain pasangan bata atau tidak.
- Image Size - Ukuran gambar yang harus digunakan Elementor pada halaman arsip.
- Judul - Ingin menampilkan judul postingan atau tidak?
- Tag HTML Judul - Jika ya, tag HTML apa yang harus dibungkus di sekitarnya?
- Kutipan - Sertakan kutipan dari posting Anda atau hanya tampilkan judulnya.
- Panjang Kutipan - Tentukan panjang ekstrak.
- Metadata - Mendefinisikan metadata posting yang tersedia untuk pengunjung.
- Pemisah Antara - Simbol pemisah antara informasi metadata.
- Baca Selengkapnya - Sertakan tautan "baca lebih lanjut", ya atau tidak?
- Lencana - Memungkinkan Anda menambahkan lebih banyak informasi ke posting, seperti kategori dan tag.
- Badge taksonomi - Di sini Anda dapat memutuskan informasi apa yang akan disertakan.
- Avatar – Dengan ini Anda dapat mengubah gambar profil penulis artikel
Selain yang di atas, Anda memiliki beberapa opsi lagi. Dibawah Paging, Anda dapat menentukan bagaimana paging arsip harus ditangani. Misalnya, cara menampilkannya, jumlah halaman yang akan disertakan dan perataan teks.
Anyway, Advanced memungkinkan Anda mengatur pesan untuk ditampilkan saat pengunjung membuka arsip kosong. Segala sesuatu yang lain harus akrab. Perhatikan bahwa opsi gaya berubah tergantung pada kulit yang Anda pilih.
4. Kontrol jumlah publikasi per arsip
Catatan singkat tentang templat arsip. Untuk mengubah jumlah posting yang muncul di arsip (atau di halaman blog Anda), Anda perlu melakukannya di WordPress di bawah Pengaturan> Membaca.
Di sini, cukup masukkan jumlah posting yang Anda ingin dilihat pengunjung Anda.
personalisasi lancar Tema WordPress dengan Elementor
Menyesuaikan tema WordPress adalah roti dan mentega dari banyak profesional. Meskipun ini biasanya melibatkan banyak pengkodean dan pengeditan file, dengan Elementor ini tidak lagi diperlukan.
Seperti yang Anda lihat di atas, plugin ini adalah editor tema WordPress yang lengkap. Ini memungkinkan Anda untuk menyesuaikan setiap bagiannya dari antarmuka penggunanya. Anda dapat mengedit header situs web, footer, templat halaman dan posting, templat arsip, dan banyak lagi.
Dengan kemampuan untuk menggunakan konten dinamis dan melihat pratinjau bagian mana pun dari situs web Anda, Anda dapat menerapkan semua penyesuaian trendi
Singkatnya, Elementor memudahkan untuk menyesuaikan tema WordPress Anda. Daripada bersusah payah membuat perubahan dengan lusinan file dan ratusan baris kode, Anda dapat melakukan semuanya dengan cepat di satu tempat.
Dapatkan Elementor Pro Sekarang!
Kesimpulan
Itu ada ! Itu saja untuk artikel ini yang menunjukkan kepada Anda cara menyesuaikan tema WordPress dengan Elemen Pembuat Halaman. Jika Anda memiliki kekhawatiran tentang cara menuju ke sana, beri tahu kami di dalam komentar.
Namun, Anda juga bisa berkonsultasi sumber daya kita, jika Anda memerlukan lebih banyak elemen untuk melaksanakan proyek pembuatan situs Internet Anda, dengan membaca panduan kami di Pembuatan blog WordPress atau yang di Divi: tema WordPress terbaik sepanjang masa.
Namun sementara itu, bagikan artikel ini di berbagai jejaring sosial Anda.
...
