Cara Membuat Footer Kustom dengan Pembuat Tema Divi

Divi Theme Builder menandai era baru dan mengubah cara kami mendesain situs web. Salah satu bagian terpenting dari fitur ini adalah kemampuan untuk menambahkan footer global secara dinamis ke halaman dan postingan Anda. Setelah Anda mendesain footer, Anda dapat secara otomatis menambahkannya ke halaman atau posting apa pun yang Anda inginkan menggunakan Pembuat Tema Divi. Sekarang dalam tutorial ini, kami akan memandu Anda langkah demi langkah melalui proses membuat dan menambahkan footer global ke situs web Anda. Anda juga dapat mengunduh file template JSON secara gratis!

Mari kita lakukan.

Pratinjau

Sebelum kita masuk ke tutorial, mari kita lihat sekilas desain footer global di berbagai ukuran layar.

Desktop

Seluler

Unduh Footer Global Kustom GRATIS

Untuk mendapatkan footer global kustom 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!

Berlangganan Saluran Youtube Kami

1. Buka Pembuat Tema Divi

Mulailah dengan membuka Pembuat Tema di Opsi Tema Divi Anda.

2. Tambahkan & Bangun Footer Global

Di sana, Anda dapat menambahkan footer global dari perpustakaan Divi Anda atau mulai membuatnya dari awal. Dalam tutorial ini, kita akan membuat footer kustom dari awal, jadi lanjutkan dan pilih opsi pertama.

Tambahkan Bagian #1

Warna latar belakang

Saatnya mulai berkreasi! Buka bagian yang dapat Anda temukan di halaman dan ubah warna latar belakang bagian.

• Warna Latar Belakang: #000000

Jarak

Ubah pengaturan spasi bagian berikutnya.

• Margin Atas: 6vw
• Margin Kiri: 6vw
• Margin Kanan: 6vw
• Padding Kiri: 30px
• Padding Kanan: 30px

Berbatasan

Tambahkan beberapa batas kiri dan kanan atas berikutnya.

• Kiri Atas: 20px
• Kanan Atas: 20px

Bayangan Kotak

Sertakan bayangan kotak di pengaturan bagian juga.

• Kekuatan Buram Bayangan Kotak: rgba(0,0,0,0.18)
• Warna Bayangan: rgba (0,0,0,0.18)

Tambahkan Baris Baru ke Bagian

Struktur Kolom

Lanjutkan dengan menambahkan baris ke bagian Anda menggunakan struktur kolom berikut:

Tambahkan Modul Teks ke Kolom

Tambahkan Konten H2

Tambahkan Modul Teks dengan beberapa konten H2.

Pengaturan Teks H2

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

• Judul 2 Font: Poppins
• Judul 2 Berat Font: Semi Tebal
• Judul 2 Perataan Teks: Tengah
• Judul 2 Warna Teks: #ffffff
• Judul 2 Ukuran Teks: 31px (Desktop), 24px (Tablet), 18px (Ponsel)
• Pos 2 Tinggi Baris: 1.6em

Perekat

Tambahkan beberapa lebar maksimal ke modul juga.

• Lebar Maks: 700px

Tambahkan Modul Tombol ke Kolom

Tambahkan Salinan

Tambahkan Modul Tombol tepat di bawah Modul Teks di kolom Anda dan masukkan beberapa salinan pilihan Anda.

Penyelarasan

Pindah ke tab desain modul dan ubah perataan tombol ke tengah.

• Penjajaran Tombol: Tengah

Pengaturan Tombol

Lanjutkan dengan menata tombol.

• Gunakan Gaya Kustom Untuk Tombol: Ya
• Ukuran Teks Tombol: 12px
• Warna Teks Tombol: #000000
• Warna Latar Tombol: #FFFFFF
• Lebar Batas Tombol: 0px

• Radius Batas Tombol: 100px
• Jarak Huruf Tombol: 1px
• Font Tombol: Poppins
• Berat Huruf Tombol: Semi Tebal
• Gaya Font Tombol: Huruf Besar

Jarak

Tambahkan beberapa nilai padding khusus juga.

• Padding Atas: 14px
• Padding Bawah: 14px
• Padding Kiri: 40px
• Padding Kanan: 58px

Tambahkan Bagian #2

Warna latar belakang

Ke bagian reguler berikutnya! Pilih warna latar belakang bagian putih.

• Warna Latar Belakang: #ffffff

Jarak

Hapus semua bantalan atas dan bawah berikutnya.

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

Berbatasan

Tambahkan beberapa radius perbatasan ke bagian juga.

• Kiri Atas: 20px
• Kanan Atas: 20px

Bayangan Kotak

Dan selesaikan pengaturan bagian dengan menambahkan bayangan kotak halus.

• Kekuatan Buram Bayangan Kotak: 135px
• Warna Bayangan: rgba (0,0,0,0.18)

Tambahkan Baris Baru ke Bagian

Struktur Kolom

Setelah Anda menyelesaikan pengaturan bagian, tambahkan baris baru menggunakan struktur kolom berikut:

Perekat

Tanpa menambahkan modul apa pun, buka pengaturan baris dan biarkan baris memenuhi seluruh lebar layar.

• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 1
• Samakan Tinggi Kolom: Ya
• Lebar: 100%
• Lebar Maks: 100%

Jarak

Hapus padding atas dan bawah default baris berikutnya.

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

Spasi Kolom

Lanjutkan dengan membuka pengaturan kolom dan tambahkan beberapa nilai padding khusus di berbagai ukuran layar.

• Padding Atas: 100px (Desktop), 50px (Tablet & Ponsel)
• Padding Bawah: 100px (Desktop), 50px (Tablet & Ponsel)
• Padding Kiri: 50px
• Padding Kanan: 50px

Tambahkan Modul Teks #1 ke Kolom

Tambah isi

Saatnya mulai menambahkan modul! Tambahkan Modul Teks biasa ke kolom 1 dan masukkan beberapa konten pilihan Anda.

Pengaturan Teks

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

• Font Teks: Poppins
• Berat Font Teks: Tebal
• Warna Teks: #000000
• Ukuran Teks: 17px
• Perataan Teks: Tengah

Jarak

Tambahkan beberapa margin atas dan bawah kustom berikutnya.

• Margin Atas: 10px
• Margin Bawah: 30px

Tambahkan Modul Pembagi ke Kolom

Visibilitas

Tepat di bawah Modul Teks, tambahkan Modul Pembagi dan pastikan opsi 'Tampilkan Pembagi' diaktifkan.

• Tampilkan Pembagi: Ya

Garis

Ubah warna garis menjadi hitam.

• Warna Garis: #000000

Perekat

Ubah juga pengaturan ukuran pembagi.

• Lebar: 15%
• Penyelarasan Modul: Pusat

Tambahkan Modul Teks #2 ke Kolom

Tambah isi

Lanjutkan dengan menambahkan Modul Teks lain ke kolom.

Tambahkan Tautan

Tambahkan tautan ke halaman yang Anda inginkan untuk dirujuk oleh modul ini.

Pengaturan Teks

Kemudian, pindah ke tab desain dan ubah pengaturan teks sebagai berikut:

• Font Teks: Poppins
• Berat Font Teks: Ringan
• Warna Teks: #777777
• Ukuran Teks: 15px
• Perataan Teks: Tengah

Jarak

Tambahkan beberapa margin atas dan bawah juga.

• Margin Atas: 10px
• Margin Bawah: 10px

Modul Teks Klon #2 Sebanyak yang Dibutuhkan

Setelah Anda menyelesaikan Modul Teks kedua di kolom, Anda dapat mengkloningnya sebanyak yang Anda butuhkan (tergantung pada berapa banyak item footer yang dapat diklik yang ingin Anda sertakan).

Ubah Konten & Tautan

Pastikan Anda mengubah konten modul dan tautan untuk setiap duplikat.

Klon Seluruh Kolom Dua Kali

Setelah Anda menyelesaikan kolom dan modulnya, Anda dapat mengkloning seluruh kolom dua kali.

Warna Latar Belakang Kolom 2

Kemudian, buka pengaturan kolom 2 dan ubah warna latar belakang.

• Kolom 2 Warna Latar Belakang: #f9f9f9

Ubah Konten & Tautan

Pastikan Anda mengubah semua konten dan tautan di setiap kolom duplikat.

Tambahkan Kolom Baru

Kemudian, tambahkan kolom keempat ke baris.

Warna latar belakang

Ubah warna latar belakang kolom baru.

• Warna Latar Belakang: #0fffc7

Jarak

Bersama dengan nilai padding kolom.

• Padding Atas: 70px
• Padding Bawah: 70px
• Padding Kiri: 50px
• Padding Kanan: 50px

Tambahkan Modul Ikuti Media Sosial ke Kolom 4

Tambahkan Jejaring Sosial

Lanjutkan dengan menambahkan Modul Ikuti Media Sosial ke kolom 4.

Setel Ulang Gaya Jejaring Sosial

Setel ulang gaya item untuk setiap jejaring sosial yang Anda tambahkan.

Penyelarasan

Kemudian, pindah ke tab desain dan ubah perataan modul.

• Penyelarasan Modul: Pusat

Pengaturan Ikon

Ubah warna ikon juga.

• Warna Ikon: #000000

Tambahkan Modul Optin Email ke Kolom 4

Hapus Konten

Lanjutkan dengan menambahkan Modul Email Optin ke kolom 4 dan hapus judul dan isi isi.

Akun email

Tambahkan akun email berikutnya. Tanpa menambahkan akun email, modul tidak akan muncul setelah Anda keluar dari pembuat.

Hapus Warna Latar Belakang

Lanjutkan dengan menghapus warna latar belakang modul.

• Gunakan Warna Latar Belakang: Tidak

Pengaturan Bidang

Pindah ke tab desain dan ubah pengaturan bidang sebagai berikut:

• Warna Latar Belakang Bidang: rgba(0,0,0,0)
• Warna Teks Bidang: #000000
• Bidang Font: Poppins

• Ukuran Teks Bidang: 13px
• Lebar Perbatasan Bidang: 1px
• Warna Batas Bidang: #000000

Pengaturan Tombol

Gaya tombol modul Anda juga.

• Gunakan Gaya Kustom Untuk Tombol: Ya
• Ukuran Teks Tombol: 12px
• Warna Teks Tombol: #000000
• Warna Latar Tombol: #FFFFFF
• Lebar Batas Tombol: 0px

• Radius Batas Tombol: 100px
• Jarak Huruf Tombol: 1px
• Font Tombol: Poppins
• Berat Huruf Tombol: Semi Tebal
• Gaya Font Tombol: Huruf Besar

• Padding Atas: 15px
• Padding Bawah: 15px

Tambahkan Modul Teks Dinamis ke Kolom 4

Konten Dinamis

Modul berikutnya dan terakhir yang kita butuhkan untuk menyelesaikan desain ini adalah Modul Teks. Aktifkan opsi konten dinamis di kotak konten.

Kemudian, pilih opsi 'Tanggal Saat Ini'.

• Konten Dinamis: Tanggal Saat Ini

Dan ubah pengaturan konten dinamis sebagai berikut:

• Sebelum: Hak Cipta ©
• Setelah: | Seluruh hak cipta
• Format Tanggal: Kustom
• Format Tanggal Kustom: 20 tahun

Pengaturan Teks

Kemudian, lanjutkan ke tab desain dan ubah pengaturan teks yang sesuai:

• Font Teks: Poppins
• Warna Teks: #000000
• Ukuran Teks: 16px

Jarak

Selesaikan pengaturan modul dengan menambahkan beberapa margin atas dan selesai!

• Margin Atas: 50px

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 kepada Anda betapa mudahnya membuat footer global kustom yang indah dengan Pembuat Tema baru Divi. Opsi desain dan modul bawaan Pembuat Tema dan Divi membantu Anda menghemat banyak waktu dan membuat situs web yang menakjubkan dalam waktu singkat. Kami harap tutorial ini menginspirasi Anda untuk membuat footer global yang indah untuk proyek Divi Anda yang akan datang. 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.