Footer adalah bagian situs yang paling diremehkan. Tapi, seharusnya tidak seperti ini. Ada 2 keuntungan utama menggunakan footer situs web
- membantu navigasi situs web
- membantu dengan SEO, dengan meningkatkan tautan internal
Dan jika Anda berpikir bahwa orang tidak menggulir ke bawah dan footer tidak terlihat, coba tebak lagi
Sebuah studi oleh Chartbeat mengungkapkan bahwa mereka melakukan scroll. Dan mereka telah menganalisis 25 juta sesi di seluruh web. Yang lebih menarik adalah kenyataan bahwa banyak pengunjung menggulir ke bawah halaman sebelum selesai memuat, yang berarti bahwa tidak ada bagian dari artikel biasa yang dilihat oleh 100% pemirsa dan bagian paling atas halaman sebenarnya memiliki tingkat tampilan sekitar 20% lebih rendah daripada . Ini benar-benar mengejutkan saya, lihat saja grafik di bawah ini
Sekarang, tanpa basa-basi lagi, mari kita lihat apa yang akan kita bicarakan di artikel ini
- Apa yang bisa Anda sertakan di footer WordPress Anda,
- Inspirasi kaki,
- Cara membuat dan mengedit footer WordPress Anda di Customizer dan Block Editor,
- Bagaimana Anda dapat membuat perubahan footer pada kode tema atau menggunakan CSS
Apakah kita sepakat?
Ayo berguling
Apa yang bisa Anda sertakan di footer WordPress Anda?
Berikut adalah daftar hal-hal yang dapat masuk ke dalam footer situs web Anda
- Halaman yang tidak sesuai dengan menu utama Anda, tetapi Anda ingin membuatnya lebih mudah ditemukan,
- Kebijakan Privasi dan Syarat & Ketentuan,
- Klaim hak cipta,
- peta situs,
- Ikon media sosial,
- Penghargaan dan lencana,
- Tautan ke informasi perusahaan. halaman tentang kami, tim, karier, dewan penasihat, dll
- Tautan program afiliasi dan loyalitas,
- artikel blog terbaru,
- Tautan ke sumber daya. blog, basis pengetahuan, kursus, podcast, dll
- Acara Mendatang,
- Tautan layanan pelanggan,
- Tautan ke aplikasi Google Play dan App Store,
- berlangganan buletin,
dan daftarnya pasti bisa berlanjut
Sekarang, jangan sertakan semua hal di atas, jika tidak, Anda akan memiliki footer yang gemuk. Tempatkan diri Anda pada posisi pelanggan. Apa yang menurut mereka berguna?
Sekarang, ingin melihat beberapa footer asli?
Footer untuk menginspirasi Anda
- Hubspot (salah satu CRM paling populer di luar sana) – mereka memiliki 5 bagian footer utama. fitur produk populer, alat gratis, perusahaan, pelanggan, dan mitra. Secara pribadi, saya suka alat gratis terdaftar di sana, ini jalan pintas yang bagus. Setiap kali saya melakukan riset, jika data pelanggan dan kemitraan tidak jelas di menu utama, saya sangat senang saat menemukannya di footer. Ini adalah pola untuk menemukan data partner di footer
- Planable (produk SaaS media sosial) – mereka menempatkan logo dan profil sosial mereka di dalam footer. Fokus mereka adalah pada fitur dan sumber daya produk
- National Geographic – selain menyebutkan situs utama mereka, saya senang karena mereka memiliki opsi untuk "Pitch a story". Ini adalah fitur yang dapat digunakan oleh sebagian besar surat kabar, serta situs yang menerima artikel tamu. Biasanya "Tulis untuk kami", "Berkontribusi", atau "Buat Cerita" adalah opsi yang ditampilkan di footer
- Patagonia (pakaian luar ruangan) – Saya suka bahwa mereka menekankan pada tautan bermanfaat layanan pelanggan (pengembalian, login, perbaikan, dll. )
- Blue Apron – suka salinannya di sini. “Masak apa”. Itu sentuhan yang bagus. menggunakan gambar untuk memperkenalkan blog
- Baru – menggunakan footer untuk memamerkan liputan pers. Juga, mereka menempatkan tombol Google Play dan App Store
- Coachella (festival musik) – mereka berhasil menggunakan desain untuk menarik perhatian ke footer
Berkedip jika Anda berhasil sampai di sini
Di bab selanjutnya saya akan menunjukkan kepada Anda beberapa metode mengedit footer di WordPress
Biasanya, desain footer dikendalikan oleh tema Anda. Jika Anda menggunakan paket berbayar untuk tema Anda, mungkin ada banyak penyesuaian yang tersedia. Untuk tema gratis, opsinya agak terbatas
Mari kita pergi
1. Mengelola footer WordPress di Theme Customizer
Cara membuat footer di dalam WordPress Customizer
Yang ini mudah
- Masuk ke Dasbor Admin WordPress
- Buka Penampilan -> Sesuaikan. Anda akan dibawa ke Penyesuai tema WordPress yang telah Anda pasang dan aktifkan
- Temukan bagian yang didedikasikan untuk footer
Saya akan menggunakan tema SkylineWP sebagai contoh.
Dalam opsi pengaturan Anda dapat melakukan penyesuaian berikut
- mengubah latar belakang footer,
- tambahkan kolom dan baris baru,
- mengubah warna teks,
- memutuskan elemen mana yang perlu ditampilkan di perangkat seluler atau tidak,
Penyesuai khusus ini juga memiliki beberapa templat footer. Klik "Pilih desain footer" untuk menemukannya
Cukup mudah, bukan begitu?
Sekarang, mari kita lanjutkan ke
Cara menata footer WordPress di Customizer
Sekarang, saya akan menjelaskan lebih mendalam tentang perubahan yang dapat Anda lakukan pada footer Anda. Penyesuai dapat berbeda dari satu tema ke tema lainnya, tetapi logika di baliknya tetap sama. Jadi, meskipun saya menggunakan tema SkylineWP, Anda akan dapat mengenali proses yang saya gunakan di Penyesuai lain
Sebelum membahas detailnya, saya ingin menunjukkan beberapa elemen struktural. Setiap bagian situs web masuk ke dalam satu blok. Ada blok "Tentang kami", blok "Portofolio", dll. Blok dapat memiliki baris. Baris dipecah menjadi kolom. Di dalam kolom dan baris, Anda dapat menambahkan bagian kecil lainnya dari konten yang disebut komponen, dalam kasus SkylineWP. Komponen tersebut dapat berupa gambar, video, daftar, dll. Blok ini berbeda dengan blok Gutenberg yang kita bicarakan sebelumnya
Sekarang ini sudah jelas (atau begitulah yang saya harap), mari lakukan beberapa pengeditan
Bagaimana cara mengubah tata letak footer?
Mari kita mulai dengan memilih seluruh blok footer. Anda akan melihat beberapa opsi pengeditan di sisi kiri. Pilih "Tata Letak"
Di sini Anda bisa
- sesuaikan lebar bagian Anda. Apakah Anda ingin beralih dari satu sisi layar ke sisi lainnya, dan menempati seluruh lebar layar? . Ini juga berlaku untuk template yang saya gunakan sebagai contoh
- sesuaikan ketinggian footer. Ketinggian footer penting untuk memberikan ruang negatif yang cukup di sekitar elemen footer, yang akan membuatnya lebih terlihat, lebih mudah dibaca, dan oleh karena itu, lebih berguna
- sesuaikan spasi atas dan bawah, artinya jarak dari konten hingga margin bagian,
- tambahkan tajuk,
- menambahkan baris baru
Footer kami saat ini memiliki satu baris dengan banyak widget. Jika Anda memilih baris, menu di sebelah kanan akan memberi Anda opsi untuk menambahkan kolom baru. Jadi, sebagai aturan, saat baris dipilih, kolom dapat ditambahkan. Saat Anda memilih blok, Anda dapat menambahkan baris ke dalamnya
Bagaimana cara mengubah warna dan font di footer?
Mari kita mulai dengan memilih konten teks di footer, di pratinjau situs web. Saat Anda membuat pilihan, opsi pengeditan teks akan tersedia di menu Penyesuai. Di bawah opsi "Gaya", pilih "Warna teks" untuk mengubah warna
Jika Anda ingin mengubah ukuran font, keluarga font, dan berat font, Anda dapat melakukannya di dalam “Typography
Semudah itu
Dari opsi "Konten" Anda dapat mengubah perataan teks
Sekarang, jika Anda ingin membuat perubahan pada seluruh teks blok footer, bukan di bagian footer tertentu, Anda dapat melakukannya di dalam pengaturan "Lanjutan"
Jika Anda ingin membuat perubahan pada keseluruhan tipografi situs web, Anda dapat memilih "Edit default tema", di bawah pengaturan "Lanjutan". Pilihan kedua akan masuk ke menu utama, dan pilih "Typography" di bawah "General settings"
Di sini Anda dapat membuat penyesuaian tipografi pada heading, body text, link, dan blockquotes
Bagaimana cara mengubah latar belakang footer?
Mulailah dengan memilih seluruh blok footer Anda di pratinjau situs web. Selanjutnya, buka "Gaya"
Anda akan melihat beberapa opsi di sana
- mengubah warna latar belakang
- tambahkan gambar, video, atau tampilan slide sebagai latar belakang
- menambahkan latar belakang gradien
- menambahkan hamparan
Kedengarannya mudah sejauh ini?
Berpikir begitu
Penyesuai cukup intuitif
2. Cara menggunakan widget footer di WordPress
Metode lain untuk melakukan perubahan pada footer di WordPress adalah dengan menggunakan widget. Di WordPress, widget adalah blok konten yang dapat Anda tambahkan ke footer, sidebar, dan area lainnya. Ini disebut area widget
Sekarang, Anda dapat memvisualisasikan area widget dan mengonfigurasinya di Dasbor WordPress
- Dari Dasbor, buka “Penampilan-> Widget”
- Di tengah layar Anda akan melihat area widget tema yang tersedia
Berikut adalah area widget yang tersedia untuk tema Skyline
- Gunakan tanda “+” untuk menambahkan elemen ke area widget pilihan Anda. Elemen ini sebenarnya disebut blok Gutenberg. Mari pilih area widget Footer 1
- Klik pada "+" untuk membuka penyisip blok.
- Anda dapat mengetikkan nama blok (mis. Kalender, Kategori, Gambar, Logo, dll. ) atau klik "Jelajahi semua" untuk melihat blok yang tersedia dengan lebih baik
- Gulir ke bawah hingga Anda menemukan elemen footer yang ingin ditambahkan, atau ketikkan namanya di bilah pencarian
- Klik pada blok yang Anda perlukan untuk menambahkannya ke area widget footer. Saya akan menambahkan blok tombol dan kalender. Anda dapat mulai mengetik teks di dalam tombol
- Jika Anda ingin menyesuaikan blok di dalam footer, Anda perlu mengkliknya untuk memilihnya. Selanjutnya, Anda akan melihat panel pengeditan blok di sisi kanan layar. Setiap blok akan memiliki beberapa opsi pengeditan. Dalam kotak tombol Anda dapat menyesuaikan ukuran, warna teks dan latar belakang, tipografi, batas, dan lainnya
- Setelah selesai, tekan saja tombol "Perbarui" di kanan atas
3. Bagaimana mengelola footer WordPress di dalam Editor Blok
Sekarang, Penyesuai adalah bagian dari pengalaman WordPress lama. Tapi WordPress sekarang berada di era Gutenberg, di mana semuanya berbasis blok
Untuk tujuan latihan ini saya akan menggunakan tema default WordPress, Twenty Twenty Two
Saat Anda menggunakan Editor WordPress Default (alias Gutenberg) untuk mendesain situs Anda, Anda tidak lagi memiliki widget klasik atau Penyesuai
Cara menambahkan blok footer ke halaman menggunakan Editor Blok
Mari masuk ke halaman
Seperti yang saya katakan sebelumnya, pengalaman WordPress baru bergantung pada blok. semuanya adalah satu blok, dari paragraf dan gambar, hingga kategori dan galeri
Alur kerjanya mudah. Mulailah dengan mengklik tanda “+” di kiri atas untuk membuka penyisip blok
Sekarang, pilih blok atau ketik nama blok ke dalam bilah pencarian, lalu seret dan lepas ke halaman di mana pun Anda mau
https. // colibriwp. com/blog/wp-content/uploads/2021/11/Screen-Recording-2022-07-01-at-03. 29. 53. 92-PM. mp4
Sekarang, beberapa blok dapat membuat pola, atau semacam bagian situs web. Perhatikan pola tepat di sebelah item menu blokir?
Pola-pola ini ditempatkan di dalam beberapa kategori. Anda juga dapat melihat kategori footer di sana. Mari kita pilih
Saya akan menyeret pola footer ke halaman
Sekarang, footer ini memiliki beberapa blok di dalamnya. blok judul situs, tagline situs, dan blok ikon sosial
Masing-masing dapat diedit secara terpisah di panel pengeditan blok di sisi kanan. Cukup klik pada blok mana saja untuk memilihnya
Setiap blok dapat memiliki penyesuaiannya sendiri, mulai dari warna teks dan latar belakang, hingga batas dan tipografi
Sekarang, opsi di Editor Default cukup mendasar. Dan jika Anda benar-benar ingin membangun situs web yang layak, Anda perlu meningkatkannya sedikit. Anda dapat melakukannya dengan pembuat halaman seperti Kubio
misalnya, mari bandingkan pengeditan tombol di Editor Gutenberg versus Editor Kubio
Tombol memblokir panel pengeditan di dalam Editor Default
Tombol memblokir panel pengeditan dengan Kubio
https. // colibriwp. com/blog/wp-content/uploads/2021/11/Screen-Recording-2022-07-01-at-03. 47. 58. 71-PM. mp4
4. Cara menata footer WordPress Anda menggunakan CSS di dalam Customizer
Kami kembali ke Penyesuai, kawan. Masih bekerja dengan tema Skyline
Dari Dashboard WordPress, pilih Appearance -> Customize. Selanjutnya, Anda harus mengidentifikasi item Pengaturan di dalam menu yang muncul. Dalam kasus SkylineWP, ini adalah "Pengaturan Umum". Selanjutnya, pilih "CSS tambahan"
Anda akan melihat jendela terbuka tempat Anda dapat menempelkan kode Anda
Semua perubahan yang akan Anda lakukan akan terlihat di pratinjau situs web di sebelah kanan
Jangan lupa untuk menekan "Terbitkan" saat Anda ingin siaran langsung
Sekarang, katakanlah Anda bukan pecandu CSS tetapi Anda ingin menghapus teks “Didukung oleh WordPress” yang muncul di footer. Anda memerlukan satu baris kode untuk itu. Anda hanya perlu menempelkannya di ruang putih seperti yang ditunjukkan di bawah ini. Untuk metode yang lebih komprehensif tentang topik ini, artikel Cara Menghapus “Proudly Powered by WordPress” dari orang-orang WPklik .
5. Cara mengedit kode footer WordPress
Jika Anda tidak puas dengan footer Anda saat ini dan Anda tidak dapat menyesuaikannya sesuai keinginan, tetapi Anda tahu kodenya, maka ini untuk Anda
Penting – metode pengeditan footer WordPress ini adalah yang paling rumit
Sangat disarankan agar Anda tidak melakukan modifikasi langsung di bagian footer. baris kode php. Sebaliknya, Anda harus mengamati salah satu praktik terbaik ini
Anda harus membuat tema anak dan menerapkan perubahan pada kode file footer yang sesuai, di tema anak tersebut. Periksa sumber daya ini tentang cara membuat tema anak
Anda harus membuat cadangan file tema Anda. Jika tema rusak, Anda hanya perlu mengembalikan ke versi tema sebelumnya yang tersimpan di cadangan
Opsi aman lainnya adalah mengomentari kode di footer. file php. Anda tidak perlu menghapus baris kode yang ada. Komentari kodenya sebagai gantinya
Sekarang, mari kita lihat bagaimana Anda dapat mengubah footer. file php
- Pastikan Anda masuk ke dasbor Admin WordPress
- Di menu sebelah kiri, buka Penampilan -> Editor. Klik Editor
- Pada daftar file tema di sisi kanan, cari file bernama Theme Footer (footer. php). Klik di atasnya
- Baris kode akan ditampilkan sebagai berikut
- Sekarang, saatnya mempraktikkan keterampilan pengkodean Anda
Dan itu saja
Karena itu, kami harap pengeditan footer situs web tidak lagi memiliki banyak rahasia untuk Anda. Mengamati beberapa praktik terbaik dan prinsip desain, Anda harus dapat menyesuaikan footer situs web Anda dengan cara yang benar. Terlebih lagi, Anda harus memiliki kesempatan tambahan untuk membuat pengunjung mengingat situs web Anda. Dan kembali ke sana, di masa depan
Sekarang, jika Anda menyukai artikel ini, dan ingin mempelajari lebih lanjut tentang cara mendesain situs web WordPress, pastikan untuk berlangganan saluran Youtube kami dan ikuti kami di Twitter dan Facebook
Ingin memulai bisnis Anda?
Dapatkan pembaruan dua bulanan
- merancang situs web WordPress yang menakjubkan
- membangun kehadiran online
- mempromosikan situs web Anda
Alamat email.
Centang jika Anda berusia lebih dari 18 tahun dan ingin menerima hadiah eksklusif, berita tentang WordPress dan produk kami, melalui email. Anda dapat berhenti berlangganan kapan saja. Lihat Kebijakan Privasi dan Ketentuan Penggunaan kami untuk informasi lebih lanjut
Bagikan di Facebook
Menciak
Alina Belascu
+ postingan
Alina adalah pemasar digital dengan hasrat untuk desain web. Ketika dia tidak menyusun strategi dia melakukan fotografi, mendengarkan podcast tentang sejarah dan psikologi, dan bermain dengan 2 anjing dan kucingnya.