Cara Menambahkan Widget Menu Kategori Posting ke Divi Global Footer Anda

Saat Anda membuat footer khusus di dalam Pembuat Tema Divi, ada beberapa cara untuk mendekati penambahan item footer. Anda bisa menggunakan footer berbasis modul, di mana Anda menambahkan item footer halaman di dalam Modul Teks dengan tautan yang tepat, tetapi Anda juga dapat memutuskan untuk menambahkan widget footer yang berbeda ke desain Anda, menggunakan Modul Sidebar Divi, dan menatanya menggunakan built-in Divi pilihan. Dalam tutorial hari ini, kami akan menunjukkan kepada Anda bagaimana cara menggunakan opsi kedua. Lebih khusus lagi, kami akan menunjukkan cara menambahkan widget menu kategori posting ke footer Anda. Gaya desain yang kami gunakan cocok dengan Paket Tata Letak Resep Makanan dengan sempurna. Kami akan mulai dengan menambahkan kategori posting yang berbeda ke situs web kami. Kami kemudian akan membangun menu footer di dalam WordPress. Selanjutnya, kita akan membuat widget kita dan yang tak kalah pentingnya, kita akan menambahkan widget ke footer Divi yang dibuat khusus di dalam Divi Theme Builder. Anda juga dapat mengunduh file JSON secara gratis!

Mari kita lakukan.

Pratinjau

Sebelum kita masuk ke tutorial, mari kita lihat sekilas hasilnya di berbagai ukuran layar.

Desktop

Seluler

Unduh Template Footer Global secara GRATIS

Untuk mendapatkan template footer global gratis, Anda harus mengunduhnya terlebih dahulu menggunakan tombol di bawah. Untuk mendapatkan akses ke unduhan, Anda harus berlangganan daftar email Divi Daily kami dengan menggunakan formulir di bawah ini. Sebagai pelanggan baru, Anda akan menerima lebih banyak kebaikan Divi dan paket Tata Letak Divi gratis setiap hari Senin! Jika Anda sudah ada dalam daftar, cukup masukkan alamat email Anda di bawah ini dan klik unduh. Anda tidak akan "berlangganan ulang" atau menerima email tambahan.

Unduh File

Unduh Gratis

Bergabunglah dengan Divi Newsletter dan kami akan mengirimkan email kepada Anda salinan Paket Tata Letak Halaman Arahan Divi terbaik, ditambah banyak sumber daya, tip, dan trik Divi yang luar biasa dan gratis. Ikuti dan Anda akan menjadi master Divi dalam waktu singkat. Jika Anda sudah berlangganan cukup ketik alamat email Anda di bawah ini dan klik unduh untuk mengakses paket tata letak.

UNDUH

Anda telah berhasil berlangganan. Silakan periksa alamat email Anda untuk mengonfirmasi langganan Anda dan dapatkan akses ke paket tata letak Divi mingguan gratis!

1. Siapkan Kategori Posting untuk Situs Web Anda

Buka Kategori Postingan Anda

Di bagian pertama tutorial ini, kita akan memastikan semua kategori posting sudah diatur sebelum kita mulai menambahkannya ke menu footer kustom. Untuk melakukannya, navigasikan ke kategori posting Anda di dalam backend WordPress Anda.

Atur Struktur Kategori Postingan Pilihan Anda

Siapkan semua kategori posting berbeda yang ingin Anda sertakan di footer Anda jika Anda belum melakukannya. Untuk tutorial ini, kita memerlukan tiga kelompok kategori posting yang berbeda karena kita akan menyertakan tiga widget menu kategori posting yang berbeda di footer kustom kita.

2. Buat Beberapa Kategori Menu WordPress

Buka Menu

Selanjutnya, kita akan membuat menu terpisah untuk setiap grup kategori postingan. Arahkan ke menu di dalam pengaturan tampilan situs web WordPress Anda.

Buat Menu Footer Pertama

Tambahkan menu footer pertama dan dengan memberinya nama yang dapat dikenali.

• Nama Menu: Menu Footer #1

Tambahkan Kategori Posting

Tambahkan grup kategori posting pertama Anda ke menu baru ini.

Buat Menu Footer Kedua & Ketiga Untuk Kategori Posting Lainnya

Lakukan hal yang sama untuk dua grup kategori posting lainnya.

• Nama Menu: Menu Footer #2

• Nama Menu: Menu Footer #3

3. Buat Widget Footer

Pergi ke Widget

Sekarang setelah kita memiliki kategori posting dan menu kategori posting, kita dapat menempatkannya di dalam widget area footer kita. Untuk melakukannya, navigasikan ke widget di backend WordPress Anda.

Tambahkan Menu Footer #1 ke Area Footer #1

Di sana, tambahkan widget menu navigasi pertama ke Area Footer #1 Anda. Di dalam menu navigasi, pilih menu footer pertama yang Anda buat di bagian sebelumnya dari tutorial ini.

Tambahkan Menu Footer #2 ke Area Footer #2

Tempatkan menu kategori posting kedua di area footer kedua.

Tambahkan Menu Footer #3 ke Area Footer #3

Dan menu footer ketiga di area footer ketiga.

Tambahkan Posting Terbaru ke Area Footer #4

Widget terakhir yang kita butuhkan, yang akan kita tambahkan ke area footer keempat, adalah widget recent posts. Widget ini akan secara dinamis menampilkan 5 posting terakhir Anda sebagai tautan.

3. Bangun Footer Global Di Dalam Pembuat Tema Divi

Buka Divi Theme Builder Anda & Mulai Buat Template Footer

Sekarang setelah kategori posting, menu kategori posting, dan widget kami tersedia, saatnya untuk beralih ke Divi! Buka Divi Theme Builder Anda dan mulailah membuat footer global atau kustom.

Pengaturan Bagian

Warna latar belakang

Begitu berada di dalam template footer, Anda akan melihat sebuah bagian. Buka bagian itu dan tambahkan warna latar belakang ke dalamnya. Gaya yang kami gunakan di seluruh desain ini cocok dengan Paket Tata Letak Resep Makanan dengan sempurna, tetapi pendekatannya akan bekerja dengan semua jenis desain yang Anda pilih.

• Warna Latar Belakang: #ff7864

Gambar latar belakang

Tambahkan gambar latar belakang berikutnya. Jika Anda ingin menggunakan yang sama persis seperti dalam tutorial ini, Anda dapat menemukannya di folder yang dapat Anda unduh di awal tutorial ini.

• Ukuran Gambar Latar Belakang: Sesuai

Jarak

Pindah ke tab desain bagian dan hapus semua padding atas dan bawah default berikutnya.

• Padding Atas: 0px
• Padding Bawah: 0px

Tambahkan Baris #1

Struktur Kolom

Lanjutkan dengan menambahkan baris baru menggunakan struktur kolom berikut:

Latar Belakang Gradien

Tanpa menambahkan modul apa pun, buka pengaturan baris dan terapkan latar belakang gradien.

• Warna 1: rgba (10,10,10,0,05)
• Warna 2: rgba(10,10,10,0.18)

Perekat

Pindah ke tab desain baris dan ubah pengaturan ukuran sebagai berikut:

• Gunakan Lebar Talang Kustom: Ya
• Lebar selokan: 1
• Samakan Tinggi Kolom: Ya
• Lebar Maks: 1680px

Jarak

Hapus semua padding atas dan bawah default berikutnya.

• Padding Atas: 0px
• Padding Bawah: 0px

Pengaturan Kolom 1

Jarak

Kemudian, buka pengaturan kolom 1 dan tambahkan beberapa nilai padding khusus di tab desain.

• Padding Atas: 5%
• Padding Bawah: 5%
• Padding Kiri: 5%
• Padding Kanan: 5%

Berbatasan

Kami juga menggunakan batas kanan di desktop.

• Lebar Perbatasan Kanan:
  • Desktop: 2px
  • Tablet & Ponsel: 0px
• Warna Tepi Kanan: #ff7864

Pengaturan Kolom 2

Jarak

Selanjutnya, buka pengaturan kolom 2 dan terapkan nilai padding berikut:

• Padding Atas: 5%
• Padding Bawah: 5%
• Padding Kiri: 5%
• Padding Kanan: 5%

Tambahkan Modul Gambar ke Kolom 1

Unggah Logo

Saatnya menambahkan modul, dimulai dengan Modul Gambar di kolom 1. Unggah logo pilihan Anda dan gaya sesuka Anda.

Tambahkan Modul Teks ke Kolom 2

Tambahkan Konten H2

Di kolom kedua, kami menambahkan Modul Teks dengan beberapa konten H2 deskriptif.

Pengaturan Teks H2

Pindah ke tab desain dan ubah pengaturan teks H2 yang sesuai:

• Judul 2 Font: Cormorant Garamond
• Judul 2 Berat Font: Sedang
• Judul 2 Warna Teks: #ffffff
• Judul 2 Ukuran Teks:
  • Desktop & Tablet: 40px
  • Telepon: 35px
• Pos 2 Tinggi Baris: 1.3em

Tambahkan Baris #2

Struktur Kolom

Ke baris berikutnya. Di baris ini, kita akan menempatkan semua widget kita. Pilih struktur kolom berikut:

Warna latar belakang

Tanpa menambahkan modul apa pun, buka pengaturan baris dan terapkan warna latar belakang.

• Warna Latar Belakang: rgba(10,10,10,0.05)

Perekat

Pindah ke tab desain dan ubah pengaturan ukuran sebagai berikut:

• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 1
• Samakan Tinggi Kolom: Ya
• Lebar Maks: 1680px

Jarak

Hapus semua padding atas dan bawah default juga.

• Padding Atas: 0px
• Padding Bawah: 0px

Spasi Semua Kolom

Kemudian, buka kolom satu per satu dan terapkan nilai padding berikut ke masing-masing kolom:

• Padding Atas: 5%
• Padding Bawah: 5%
• Padding Kiri: 5%
• Padding Kanan: 5%

Batas Kolom 1

Selanjutnya, kita akan menambahkan perbatasan ke kolom 1.

• Lebar Perbatasan Kanan:
  • Desktop & Tablet: 2px
  • Telepon: 0px
• Warna Tepi Kanan: #ff7864

Batas Kolom 2

Kami menggunakan batas yang sama, dengan beberapa nilai responsif yang berbeda, untuk kolom kedua.

• Lebar Perbatasan Kanan:
  • Desktop: 2px
  • Ponsel & Tablet: 0px
• Warna Tepi Kanan: #ff7864

Batas Kolom 3

Dan last but not least, kami akan menambahkan batas kanan ke kolom ketiga juga.

• Lebar Perbatasan Kanan:
  • Desktop & Tablet: 2px
  • Telepon: 0px
• Warna Tepi Kanan: #ff7864

Tambahkan Modul Sidebar ke Kolom 1

Saatnya menambahkan widget menu kategori posting kami! Untuk melakukan itu, kita akan menggunakan Modul Sidebar bawaan Divi. Tambahkan satu ke kolom pertama baris.

Pilih Area Footer #1

Pilih area footer pertama. Ini terkait dengan menu kategori posting pertama yang kami buat.

• Area Widget: Area Footer #1

Tata Letak

Pindah ke tab desain modul dan nonaktifkan pemisah batas.

• Tampilkan Pemisah Batas: Tidak

Pengaturan Teks Tubuh

Ubah juga pengaturan teks isi.

• Font Tubuh: Montserrat
• Berat Huruf Tubuh: Sedang
• Warna Teks Tubuh: #ffffff
• Ukuran Teks Tubuh: 13px

Jarak

Dan selesaikan pengaturan modul dengan menambahkan beberapa padding atas dan bawah ke pengaturan spasi.

• Padding Atas: 5%
• Padding Bawah: 5%

Modul Bilah Sisi Klon Dua Kali & Tempatkan Duplikat di Kolom 2 & 3

Setelah Anda menyelesaikan Modul Sidebar pertama, Anda dapat mengkloningnya dua kali dan menempatkan duplikatnya di kolom 2 dan 3.

Ubah Area Footer

Ubah area widget untuk setiap duplikat untuk menampilkan menu kategori posting berbeda yang telah Anda buat.

• Area Widget: Area Footer #2

• Area Widget: Area Footer #3

Tambahkan Modul Sidebar ke Kolom 4

Sekarang, di kolom terakhir, kami menambahkan Modul Sidebar baru.

Pilih Area Footer #4

Dalam modul ini, kami memilih area footer keempat yang kami buat yang berisi posting terbaru kami.

• Area Widget: Area Footer #4

Pengaturan Teks Judul

Pindah ke tab desain modul dan ubah pengaturan teks judul sebagai berikut:

• Judul Font: Cormorant Garamond
• Warna Teks Judul: #ffffff
• Ukuran Teks Judul: 30px

Pengaturan Teks Tubuh

Buat beberapa perubahan pada pengaturan teks isi juga.

• Font Tubuh: Montserrat
• Berat Huruf Tubuh: Sedang
• Warna Teks Tubuh: #dddddd
• Ukuran Teks Tubuh: 13px

Jarak

Dan selesaikan pengaturan modul, dan tutorial ini, dengan menambahkan beberapa bantalan atas dan bawah khusus ke pengaturan jarak modul. Itu dia! Pastikan Anda menyimpan semua perubahan Divi Theme Builder sebelum melihat hasilnya di situs web Anda.

• Padding Atas: 5%
• Padding Bawah: 5%

Pratinjau

Sekarang setelah kita melalui semua langkah, mari kita lihat hasil akhir di berbagai ukuran layar.

Desktop

Seluler

Pikiran Akhir

Dalam tutorial ini, kami telah menunjukkan cara menggabungkan Divi Theme Builder dengan widget footer WordPress dan Modul Sidebar Divi. Lebih khusus lagi, kami telah menunjukkan kepada Anda cara menambahkan widget menu kategori posting ke footer global Anda untuk mempermudah perjalanan navigasi pengunjung Anda. Pendekatan ini akan membantu Anda menata item footer menggunakan opsi bawaan Divi sambil menjaga menu footer dan widget di dalam backend WordPress Anda. Anda juga dapat mengunduh file JSON secara gratis! Jika Anda memiliki pertanyaan atau saran, jangan ragu untuk meninggalkan komentar di bagian komentar di bawah.

Jika Anda ingin mempelajari lebih lanjut tentang Divi dan mendapatkan lebih banyak gratisan Divi, pastikan Anda berlangganan buletin email dan saluran YouTube kami sehingga Anda akan selalu menjadi salah satu orang pertama yang mengetahui dan mendapatkan manfaat dari konten gratis ini.