Pemula WordPress: Kustomisasi Tingkat Menengah

Untuk melampaui dasar-dasar sederhana di blog Pemula WordPress terakhir saya, selama beberapa minggu terakhir saya telah bekerja untuk membuat ulang salah satu halaman demo ProteusThemes kami. Demo tema Auto lebih spesifik. Sama seperti sebelumnya, rekan-rekan saya memberi saya tugas langkah demi langkah untuk mengarahkan saya ke jalan saya. Ini adalah pelajaran terpenting yang saya pelajari sejauh ini.

Kotak Ikon

Widget Kotak Ikon adalah bahasa visual yang sangat berguna. Ini mungkin tampak jelas, tetapi memiliki nomor telepon perusahaan Anda di sebelah ikon telepon adalah cara sederhana namun efektif untuk meningkatkan pengalaman pengguna situs Anda .

Tugas saya adalah menambahkan kotak ikon ke header beranda. Untuk melakukan ini, di dasbor Anda, Anda harus pergi ke Appearance -> Widgets dan kemudian di dalam ' Theme Sidebars ' pilih ' Header '.

Setelah Anda menemukan ' Header ', arahkan perhatian Anda ke kiri layar, di mana Anda akan melihat daftar ' Widget yang Tersedia '. ProteusThemes: IconBox adalah widget yang Anda cari.

Sekarang Anda memiliki dua pilihan . Anda dapat menarik dan melepas widget ke kanan layar dan menempatkannya di header, atau ketika Anda mengklik widget, Anda akan melihat menu drop-down dari lokasi yang berlaku, Anda cukup memilih ' Header ' dari ini list dan klik tombol biru ' Tambahkan Widget ':

Sekarang Anda akan melihat bahwa ada banyak ikon untuk dipilih di dalam widget, untuk tujuan latihan ini saya memilih telepon. Yang perlu Anda lakukan adalah memberi judul pada Kotak Ikon dan memutuskan informasi mana yang ingin Anda tampilkan di sebelahnya.

Di bawah semua ikon di menu widget, Anda akan melihat opsi untuk ' menyoroti widget ini '. Centang kotak itu jika informasi di Kotak Ikon sangat penting dan Anda ingin lebih menonjol.

Penggeser Halaman Depan

Untuk membuat ulang Demo Otomatis diperlukan penambahan penggeser sebagai fitur di beranda. Untuk mewujudkannya, pilih Pages -> All Pages -> Home ; setelah Anda berada di editor untuk halaman rumah Anda, Anda perlu menemukan menu tarik-turun ' Atribut Halaman s' di sisi kanan layar. Temukan itu, dan ubah ' Template ' menjadi ' Front Page With Slider '.

Setelah Anda mengubah ke ' Front Page With Slider ', akan ada meta baru di bagian bawah layar yang berjudul ' Front page slider ', klik di sini untuk menambahkan gambar dan teks Anda ke slider:

Kode pendek

Membuat ulang bilah geser halaman depan membawa kita dengan baik ke dalam kode pendek . Mengapa? Karena di Auto Demo yang saya buat ulang, ada tombol di dalam slider .

Pada titik ini penting untuk ditekankan bahwa Anda benar-benar perlu menginstal plugin yang direkomendasikan . Kesalahan yang saya lakukan adalah memasukkan shortcode ke dalam 'slide text' tanpa mengaktifkan plugin ProteusThemes Shortcodes . Jika Anda tidak mengaktifkan plugin, kode itu sendiri akan muncul di bilah geser, bukan tombol yang Anda coba buat.

Ada bagian 'Kode Pintas' di semua dokumentasi tema kami yang memberi Anda banyak opsi yang tersedia untuk gaya dan fungsionalitas tombol yang dapat Anda sisipkan. Yang perlu Anda lakukan adalah menyalin dan menempelkan kode ini ke bagian 'teks slide' pada bilah geser. Cukup edit teks tombol dalam kode yang sesuai dengan kebutuhan Anda dan siap digunakan.

Anda tentu saja dapat menggunakan kode pendek di tempat lain selain penggeser. Misalnya jika Anda telah menulis sepotong pemasaran konten untuk mencoba dan menjual sesuatu, gunakan kode pendek untuk membuat tombol CTA yang efektif di bagian bawah posting blog Anda.

Pembuat Halaman

Memahami plugin SiteOrigin's Page Builder sangat penting dalam membuat ulang Auto Demo. Tugas pertama yang harus saya gunakan adalah membuat IconBox ini dengan bagian Popover di bawah header beranda:

Untuk melakukan ini, buka halaman yang ingin Anda edit, dalam kasus saya beranda. Maka Anda perlu mencari menu pembuat halaman , tampilannya seperti ini:

Dari sini, pilih ' Tambah Baris '. Anda kemudian akan melihat opsi yang berkaitan dengan kolom di dalam baris ini. Anda dapat memilih berapa banyak kolom yang Anda inginkan, rasio ukurannya dan apakah Anda menginginkannya dalam urutan ukuran dari kiri ke kanan , atau sebaliknya. Untuk Popover IconBox saya, saya memilih 3 kolom dengan ukuran genap.

Sekarang setelah kolom Anda siap, Anda dapat mulai menambahkan fungsionalitas ke kolom tersebut dengan menambahkan widget. Lakukan ini dengan mengklik kolom yang ingin Anda tambahkan, setelah kolom dipilih, klik tombol ' Tambah Widget ' dari menu di atas.

Bergantung pada widget mana yang Anda pilih, Anda dapat menambahkan fungsionalitas lebih lanjut ke kolom. Di IconBox Popover ' Waktu Pembukaan ' saya misalnya, perlu untuk menambahkan widget Waktu Pembukaan ProteusThemes di dalam IconBox Popover, sehingga informasi yang relevan akan ditampilkan di popover jika kolom diklik.

Satu masalah yang saya miliki setelah membuat baris popover IconBox ini adalah bahwa warna barisnya tidak sama dengan Demo Otomatis, juga tidak meluas ke lebar penuh halaman saya. Sangat mudah untuk menyelesaikan masalah seperti ini. Pertama, arahkan kursor ke ikon kunci inggris kecil di atas baris Anda, lalu pilih ' Edit Baris '. Untuk mengubah warna, langkah selanjutnya adalah memilih ' Desain ' dari menu ' Gaya Baris ', di sini Anda dapat mengubah warna dan pilihan desain lainnya.

Untuk mengubah ukuran baris Anda, pertama-tama pilih ' Layout ' dari menu ' Row Styles '. Ini akan memberi Anda opsi untuk menambahkan padding ke baris. Kemudian, jika Anda ingin baris diperpanjang hingga lebar penuh halaman Anda, pilih drop-down ' Row Layout ' dan pilih ' Full Width '.

Saya menggunakan Page Builder dengan cara yang persis sama untuk membuat kolom halaman unggulan ini:

Untuk melakukan ini, daripada menambahkan Iconbox dengan widget Popover ke kolom, saya memilih widget ProteusThemes: Featured Page . Anda harus bermain-main dengan meletakkan widget yang berbeda ke dalam kolom untuk benar-benar mendapatkan ide tentang seberapa berguna pembuat halaman bagi Anda.

Ini semua untuk saat ini. Lihatlah posting saya sebelumnya untuk beberapa tips yang lebih mendasar. Klik di bawah untuk berlangganan buletin kami dan dapatkan konten semacam ini, dan banyak lagi yang dikirimkan langsung ke kotak masuk Anda…

BERLANGGANAN SEKARANG