20+ Tutorial Footer Bermanfaat untuk Divi

Diterbitkan: 2022-01-14

Ada banyak tutorial Divi yang bagus di blog Elegant Themes. Anda dapat belajar melakukan apa saja dengan Divi dengan tutorial ini. Ini termasuk cara mendesain footer yang bagus. Dalam artikel ini, kita akan melihat lebih dari 20 tutorial footer Divi bermanfaat yang dapat Anda gunakan dengan Divi Theme Builder. Semuanya menyertakan petunjuk langkah demi langkah tentang pembuatan footer untuk layar desktop dan seluler. Banyak yang menyertakan unduhan file JSON dan instruksi video.

1. Buat Footer Kustom

Buat Footer Khusus

Tutorial ini memandu Anda melalui proses pembuatan dan pembuatan footer global kustom menggunakan Divi Builder. Ini adalah tutorial yang bagus untuk memulai dengan footer Divi dan Divi Theme Builder.

Lihat Tutorial

2. Jadikan Divi Footer Anda Lengket

Jadikan Divi Footer Anda Lengket

Tutorial Divi ini menunjukkan cara membuat elemen apa pun di footer Divi menempel di bagian bawah layar. Setelah elemen mencapai lokasinya di dalam footer, elemen tersebut berhenti lengket dan tetap berada di lokasi yang semestinya. Ini menunjukkan informasi kontak lengkap di desktop dan informasi sederhana di ponsel. Footer berukuran lebih kecil hingga mencapai lokasinya. Ketika terkunci di tempatnya, ia tumbuh ke ukuran normalnya.

Lihat Tutorial

3. Buat Reveal Footer yang Lengket

Buat Pengungkapan Catatan Kaki Lengket

Yang ini menunjukkan cara membuat footer lengket yang terungkap saat pengguna menggulir ke area footer. Footer dibuka seperti menaikkan tirai atau getaran jendela. Ini biasanya membutuhkan CSS, tetapi tutorial ini menunjukkan bagaimana melakukannya dengan pengaturan Divi.

Lihat Tutorial

4. Jadikan Divi Footer Anda Tetap

Jadikan Divi Footer Anda Tetap

Tutorial ini menunjukkan cara membuat bilah bawah situs web Anda, dengan pemberitahuan hak cipta dan ikon sosial, tetap di tempatnya saat pengguna menggulir. Ini menunjukkan bagaimana melakukannya dengan CSS atau jQuery, dan menunjukkan di mana menggunakan kode.

Lihat Tutorial

5. Tambahkan Desain Latar Belakang Kreatif ke Bilah Footer Bawah

Tambahkan Desain Latar Belakang Kreatif ke Bilah Footer Bawah

Tutorial ini menunjukkan cara menambahkan desain ke bilah footer di bagian bawah footer. Ini menggunakan pembagi dan pengaturan bagian lain untuk menambahkan latar belakang kreatif yang menyatu dengan bagian bawah halaman.

Lihat Tutorial

6. Buat Bilah Footer Lengket Seluler

Buat Bilah Footer Sticky Seluler

Tutorial ini menunjukkan cara membuat bilah footer lengket khusus untuk perangkat seluler. Ini menggunakan opsi lengket bawaan Divi dan membuat 3 desain bilah footer lengket yang berbeda. Bilah footer mencakup 4 tombol navigasi. CSS disertakan.

Lihat Tutorial

7. Buat Pengungkapan Footer Scroll Yang Indah Di Bawah Pembagi Bagian Divi

Buat Gulir Footer yang Indah Mengungkapkan Di Bawah Pembagi Bagian Divi

Yang ini mengajarkan cara membuat pengungkapan footer scroll yang menunjukkan sticky footer. Footer terungkap melalui pembagi bagian sehingga Anda dapat menggunakan desain bergelombang atau gaya pembagi pilihan Anda. Ini termasuk potongan kecil CSS.

Lihat Tutorial

8. Buat Bilah Footer Tetap

Buat Bilah Footer Tetap

Tutorial ini menunjukkan cara membuat bilah footer bawah tetap yang dibuat dengan Divi. Bilah footer tetap di tempatnya dan pas dengan footer saat pengguna menggulir ke bagian bawah halaman. Ini termasuk CSS khusus.

Lihat Tutorial

9. Desain Laci Footer Mengambang

Desain Laci Footer Mengambang

Yang ini menunjukkan cara membuat laci mengambang yang menempel di bagian bawah layar dan terbuka saat pengguna mengklik ikon. Ini bekerja mirip dengan sakelar. Laci dapat menyertakan konten Divi apa pun dan dapat dibuat dengan bagian Divi apa pun. Ini termasuk kode kustom.

Lihat Tutorial

10. Tambahkan Widget Menu Kategori Posting ke Footer Global Anda

Tambahkan Widget Menu Kategori Posting ke Footer Global Anda

Yang ini menunjukkan cara menambahkan widget menu kategori posting WordPress standar ke footer Divi Anda. Ini menunjukkan cara mengatur struktur kategori, membuat beberapa menu, membuat widget, dan kemudian menampilkannya dalam footer global.

Lihat Tutorial

11. Buat Sticky Footer Bar dengan Opsi Sticky Divi

Buat Sticky Footer Bar dengan Opsi Sticky Divi

Tutorial ini menunjukkan cara membuat footer bar yang menempel di bagian bawah layar hingga pengguna mencapai footer. Bilah footer kemudian terkunci pada tempatnya dan berubah warna. Ini menciptakan ajakan bertindak yang menarik. Versi desktop menyertakan informasi kontak dan tombol. Versi telepon hanya menyertakan tombol.

Lihat Tutorial

12. Sorot Detail Kontak Secara Interaktif di Footer Global Anda

Sorot Detail Kontak Secara Interaktif di Footer Global Anda

Tutorial ini menunjukkan cara membuat detail kontak Anda menjadi interaktif. Ini membagi rincian kontak menjadi tiga modul berturut-turut. Saat pengguna mengarahkan kursor ke salah satu modul, modul akan mengembang menjadi lebih besar dari yang lain, mengubah warna, dan mengubah teks untuk menampilkan informasi. Ini termasuk CSS.

Lihat Tutorial

13. Tambahkan Logo Dinamis

Tambahkan Logo Dinamis

Tutorial ini menunjukkan cara menampilkan logo standar secara dinamis di dalam footer Anda. Dengan cara ini, ketika Anda mengubah logo situs web Anda di opsi tema Divi, dan footer secara otomatis berubah agar sesuai.

Lihat Tutorial

14. Hapus Footer dari Halaman Tertentu

Hapus Footer dari Halaman Tertentu

Yang ini menunjukkan cara menggunakan pengaturan Divi Theme Builder untuk mengecualikan footer pada halaman tertentu. Ini menunjukkan beberapa metode termasuk cara menggunakan footer pada halaman tertentu, cara mengecualikannya dari halaman tertentu, dan cara menyembunyikan footer default.

Lihat Tutorial

15. Tambahkan Ikon Sosial

Tambahkan Ikon Sosial

Dalam tutorial ini, Anda akan belajar cara menambahkan ikon sosial di mana saja di footer Divi. Anda juga akan mempelajari cara menggunakan Divi Builder untuk menatanya agar sesuai dengan tata letak Anda.

Lihat Tutorial

16. Tambahkan Tautan Ketentuan Privasi

Tambahkan Persyaratan Privasi Tautan

Dalam tutorial ini, Anda akan mempelajari cara menambahkan tautan ke halaman privasi dan persyaratan Anda ke footer Divi. Ini menunjukkan cara menambahkannya dengan 2 metode berbeda dengan menu WordPress kustom. Metode pertama mencakup modul menu Divi. Yang kedua mencakup modul bilah sisi Divi.

Lihat Tutorial

17. Tambahkan Menu WordPress

Tambahkan Menu WordPress

Tutorial ini menunjukkan cara menambahkan menu WordPress standar yang ditumpuk secara vertikal ke footer Divi Anda menggunakan widget WordPress. Ini langkah-langkah melalui cara membuat menu dan widget, dan cara menggunakannya dengan Divi.

Lihat Tutorial

18. Tambahkan Tahun Hak Cipta Dinamis yang Diperbarui Secara Otomatis

Tambahkan Tahun Hak Cipta Dinamis yang Diperbarui Secara Otomatis

Yang ini menunjukkan cara menggunakan pengaturan Divi untuk menampilkan tahun berjalan secara dinamis untuk membuat pemberitahuan hak cipta di footer Divi Anda. Ini menggunakan modul teks sederhana dengan opsi dinamis. Ini juga menunjukkan cara membuat simbol hak cipta dan cara menambahkan tautan yang dapat diklik untuk nama situs web atau informasi lainnya.

Lihat Tutorial

19. Tambahkan Shortcode dengan 3 Contoh

Tambahkan Shortcode dengan 3 Contoh

Tutorial ini menunjukkan cara menggunakan shortcode di footer Divi Anda. Ini memandu Anda menggunakan 3 plugin berbeda yang menyertakan kode pendek. Ini menunjukkan cara menambahkan kode pendek dengan modul teks dan kode.

Lihat Tutorial

20. Tambahkan Opsi Email

Tambahkan Opsi Email

Yang ini menunjukkan cara menambahkan modul optin email ke footer Divi Anda dan menatanya agar sesuai dengan situs web Anda. Ini menunjukkan beberapa contoh dengan pengaturannya untuk membantu Anda memutuskan tata letak yang paling sesuai dengan kebutuhan Anda.

Lihat Tutorial

21. 4 Elemen Yang Tidak Bisa Hilang dan Cara Menambahkannya

4 Elemen Yang Tidak Bisa Hilang dan Cara Menambahkannya

Tutorial ini membahas elemen paling penting untuk disertakan dalam desain footer. Ini memecah 4 elemen untuk menunjukkan jenis hal yang dapat mereka sertakan. Ini juga menunjukkan cara menambahkannya ke footer Divi Anda.

Lihat Tutorial

22. Buat Footer Layar Penuh

Buat Footer Layar Penuh

Tutorial ini menunjukkan cara membuat tampilan footer sebagai layar penuh. Footer layar penuh menyesuaikan agar sesuai dengan layar terlepas dari ukuran layar atau tingkat zoom yang ditampilkan browser pengguna.

Lihat Tutorial

23. Gunakan Modul Blurb sebagai Item Footer

Gunakan Modul Blurb sebagai Item Footer

Yang ini menunjukkan cara yang menarik untuk menggunakan modul uraian di dalam footer Divi Anda. Daripada hanya menampilkan daftar tautan, modul uraian dapat menambahkan ikon ke daftar, membuat desain yang menarik untuk peluru. Ini juga menunjukkan cara menatanya agar sesuai dengan tata letak Anda.

Lihat Tutorial

24. 5 Tips untuk Membuat Footer yang Mudah Digunakan

5 Tips untuk Membuat Footer yang Mudah Digunakan

Yang ini membahas 5 tips untuk membuat footer Anda ramah pengguna. Ini menunjukkan elemen utama untuk disertakan dan memberikan informasi tentang alat yang dapat Anda gunakan untuk membuatnya lebih baik. Kiat berfungsi untuk footer apa pun, tetapi mencakup informasi tentang membuat penyesuaian di Divi.

Lihat Tutorial

25. 3 Cara untuk Menambahkan Penafian

3 Cara untuk Menambahkan Penafian

Tutorial ini menunjukkan beberapa cara untuk menambahkan penafian ke footer Divi Anda. Tiga metode termasuk penafian statis, penafian lengket, dan penafian animasi.

Lihat Tutorial

Cara Mencari Template Footer Gratis

Ada banyak footer Divi gratis di blog ET. Cukup cari “footer gratis”, “footer Divi gratis”, atau kata kunci serupa. Anda akan menemukan banyak template footer gratis untuk dipilih. Paket template menyertakan header dan footer. Anda dapat menggunakannya bersama-sama atau secara terpisah.

Mengakhiri Pikiran

Itulah tampilan kami pada 20+ tutorial footer Divi yang bermanfaat untuk Divi. Ada banyak cara untuk menyesuaikan footer Divi Anda. 20+ tutorial ini adalah cara yang bagus untuk mempelajari caranya, dan mereka memberikan banyak ide untuk membuatnya sendiri. Mereka menyertakan instruksi tentang cara menggunakan Divi Theme Builder. Beberapa di antaranya menunjukkan cara menggunakan CSS dan jQuery.

Kami ingin mendengar dari Anda. Sudahkah Anda menggunakan salah satu dari 20+ tutorial footer Divi yang bermanfaat ini? Beri tahu kami mana favorit Anda di komentar.