Bagaimana cara membuat footer berbeda di wordpress?

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

Bagaimana cara membuat footer berbeda di wordpress?

Bagaimana cara membuat footer berbeda di wordpress?

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

 

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 nyata?

 

  • 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

Bagaimana cara membuat footer berbeda di wordpress?

  • Planable (produk SaaS media sosial) – mereka menempatkan logo dan profil sosial mereka di dalam footer. Fokus mereka adalah pada fitur dan sumber daya produk
    Bagaimana cara membuat footer berbeda di wordpress?
  • 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
    Bagaimana cara membuat footer berbeda di wordpress?
  • Patagonia (pakaian luar ruangan) – Saya suka bahwa mereka menekankan pada tautan bermanfaat layanan pelanggan (pengembalian, login, perbaikan, dll. )
    Bagaimana cara membuat footer berbeda di wordpress?
  • Blue Apron – suka salinannya di sini. “Masak apa”. Itu sentuhan yang bagus. menggunakan gambar untuk memperkenalkan blog
    Bagaimana cara membuat footer berbeda di wordpress?
  • Baru – menggunakan footer untuk memamerkan liputan pers. Juga, mereka menempatkan tombol Google Play dan App Store
    Bagaimana cara membuat footer berbeda di wordpress?
  • Coachella (festival musik) – mereka berhasil menggunakan desain untuk menarik perhatian ke footer
    Bagaimana cara membuat footer berbeda di wordpress?

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

 

 

 

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.

Bagaimana cara membuat footer berbeda di wordpress?

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

Bagaimana cara membuat footer berbeda di wordpress?

Cukup mudah, bukan begitu?

Sekarang, mari kita lanjutkan ke

 

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 tadi

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"

Bagaimana cara membuat footer berbeda di wordpress?

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"

Bagaimana cara membuat footer berbeda di wordpress?

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"

Bagaimana cara membuat footer berbeda di wordpress?

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"

 

Bagaimana cara membuat footer berbeda di wordpress?

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

 

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”
    Bagaimana cara membuat footer berbeda di wordpress?
  • Di tengah layar Anda akan melihat area widget tema yang tersedia

Berikut adalah area widget yang tersedia untuk tema Skyline

Bagaimana cara membuat footer berbeda di wordpress?

  • 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.
    Bagaimana cara membuat footer berbeda di wordpress?
  • 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
    Bagaimana cara membuat footer berbeda di wordpress?
  • 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
    Bagaimana cara membuat footer berbeda di wordpress?
  • 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
    Bagaimana cara membuat footer berbeda di wordpress?
  • Setelah selesai, tekan saja tombol "Perbarui" di kanan atas

 

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

 

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

Bagaimana cara membuat footer berbeda di wordpress?

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?

Bagaimana cara membuat footer berbeda di wordpress?

Pola-pola ini ditempatkan di dalam beberapa kategori. Anda juga dapat melihat kategori footer di sana. Mari kita pilih

Bagaimana cara membuat footer berbeda di wordpress?

Saya akan menyeret pola footer ke halaman

Bagaimana cara membuat footer berbeda di wordpress?

Sekarang, footer ini memiliki beberapa blok di dalamnya. blok judul situs, tagline situs, dan blok ikon sosial

Bagaimana cara membuat footer berbeda di wordpress?

Masing-masing dapat diedit secara terpisah di panel pengeditan blok di sisi kanan. Cukup klik pada blok mana saja untuk memilihnya

Bagaimana cara membuat footer berbeda di wordpress?

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

Bagaimana cara membuat footer berbeda di wordpress?

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

 

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"

Bagaimana cara membuat footer berbeda di wordpress?

Anda akan melihat jendela terbuka tempat Anda dapat menempelkan kode Anda

Bagaimana cara membuat footer berbeda di wordpress?

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 .

 

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

Bagaimana cara membuat footer berbeda di wordpress?

  • 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

[sibwp_form id=1]

Bagikan di Facebook

Menciak

Bagaimana cara membuat footer berbeda di wordpress?

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.

Metode 2. Cara Mengubah Footer Hak Cipta di WordPress .
Masuk ke dasbor WordPress
Buka Penampilan > Sesuaikan
Lihat apakah Anda memiliki opsi Footer
Jika ya, pilih Footer > Bar Bawah. Dari sana, Anda dapat menonaktifkan footer atau memasukkan teks Anda sendiri
Jika Anda memiliki opsi Area Hak Cipta
Pertama-tama, kita membungkus kode sidebar dinamis di dalam elemen .
Daftarkan Sidebar Dinamis
Letakkan Widget di dalamnya
Tampilkan Widget yang ditempatkan di dalam Dynamic Sidebar ke frontend menggunakan tema kita

Bagaimana cara membuat header yang berbeda pada setiap halaman di WordPress?

Bagaimana menerapkan header WordPress yang berbeda per halaman? .
Langkah 1. Aktifkan Header Halaman
Langkah 2. Sesuaikan Header Halaman
Langkah 3. Publikasikan untuk menyimpan apa yang telah Anda lakukan

Bagaimana cara menyesuaikan catatan kaki saya?

Klik dua kali header atau footer yang ingin Anda edit, atau pilih Header atau Footer, lalu pilih Edit Header atau Edit Footer . Tambahkan atau ubah teks untuk header atau footer atau lakukan salah satu hal berikut. Untuk menghapus header atau footer halaman pertama Pilih Halaman Pertama Berbeda.