Dapatkan Hosting Instan dengan Elementor dan Elementor Pro

dengan CDN, SSL dan cadangan.

Mulai hari ini

Cara Membuat Footer Kustom Dengan Divi Builder

Rifat Divi Tutorials Apr 11, 2022

Sebagai hasil dari Divi Theme Builder, era baru dalam pembuatan situs web telah dimulai. Dengan fungsi baru ini, Anda dapat menambahkan footer global secara dinamis ke halaman dan artikel Anda. Untuk menambahkan footer ke halaman atau posting mana pun, cukup gunakan Pembuat Tema Divi (yang disertakan dengan tema Divi). Sekarang, dalam artikel ini, kami akan menunjukkan cara membuat dan menambahkan footer global ke situs web Anda. Selain itu, Anda dapat mengunduh file JSON secara gratis!

Pratinjau

Pertama-tama mari kita lihat bagaimana footer global terlihat di berbagai ukuran layar sebelum kita mulai.

Prosedur Desain

Pertama, masuk ke Dashboard WordPress Anda. Di Opsi Tema Divi Anda, navigasikan ke Pembuat Tema.

Di sana, Anda memiliki opsi untuk menggunakan footer global yang sudah ada sebelumnya atau membuat yang baru dari awal menggunakan perpustakaan Divi. Kami akan membuat footer kustom dari awal dalam pelajaran ini, jadi lanjutkan dan pilih opsi satu.

Buat Situs Web Luar Biasa

Dengan Elementor pembuat halaman gratis terbaik

Mulai sekarang

Bagian No 1

Warna BG

Saatnya berkreasi sekarang! Buka bagian di halaman dan ubah warna latar belakang bagian.

  • Warna Latar Belakang: #00000

Jarak

Selanjutnya, perbarui penspasian bagian sesuai dengan nilai berikut.

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

Berbatasan

Langkah selanjutnya adalah menambahkan border pada bagian atas, kiri, dan kanan.

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

Bayangan Kotak

Bayangan kotak juga harus disertakan dalam pengaturan bagian.

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

Tambahkan Baris Baru

Sekarang tambahkan baris satu kolom baru ke bagian tersebut.

Tambahkan Modul Teks Baru

Selanjutnya, tambahkan modul teks dan tambahkan beberapa salinan ke modul itu.

Pengaturan Teks H2

Ubah pengaturan teks H2 di tab desain modul sesuai kebutuhan:

  • 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

Ukuran Modul Teks

Modul juga harus memiliki lebar maksimum.

  • Lebar Maks: 700 piksel

Tambahkan Modul Tombol

Tepat di bawah Modul Teks, tambahkan Modul Tombol dan isi dengan salinan apa pun yang Anda suka.

Penjajaran Tombol

Ubah perataan tombol ke tengah pada tab desain modul.

  • Penjajaran Tombol: Tengah

Pengaturan Tombol

Sekarang mari kita gaya tombolnya.

  • Gunakan Gaya Kustom Untuk Tombol: Ya
  • Ukuran Teks Tombol: 12px
  • Warna Teks Tombol: #00000
  • Warna Latar Tombol: #FFFFFF
  • Lebar Batas Tombol: 0px
  • Radius Perbatasan Tombol: 100px
  • Jarak Huruf Tombol: 1px
  • Font Tombol: Poppins
  • Berat Huruf Tombol: Semi Tebal
  • Gaya Font Tombol: Huruf Besar

Spasi Tombol

Saatnya menambahkan beberapa bantalan khusus.

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

Bagian No 2

Warna latar belakang

Bab normal berikutnya ada di sini! Pilih warna latar belakang putih untuk bagian tersebut.

  • Warna Latar Belakang: #ffffff

Jarak

Lepaskan semua bantalan dari atas dan bawah.

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

Berbatasan

Bagian tersebut juga harus memiliki radius batas yang ditambahkan ke dalamnya.

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

Bayangan Kotak

Sekarang selesaikan pengeditan bagian dengan menambahkan bayangan kotak.

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

Tambahkan Baris Baru

Sekarang Anda dapat menambahkan baris baru ke bagian Anda dengan mengikuti petunjuk berikut:

Ukuran Baris

Buka pengaturan baris dan aktifkan baris untuk memenuhi seluruh layar tanpa menambahkan modul tambahan.

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

Spasi Baris

Lepaskan bantalan baris di bagian atas dan bawah.

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

Spasi Kolom

Buka pengaturan kolom dan tambahkan nilai padding khusus untuk lebar layar yang berbeda.

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

Modul Teks 1

Sekarang atau tidak sama sekali untuk penambahan modul! Tambahkan Modul Teks standar ke kolom 1 dan isi dengan apa pun yang Anda pilih.

Pengaturan Teks

Ubah pengaturan teks di tab desain modul sesuai kebutuhan:

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

Jarak

Langkah selanjutnya adalah menambahkan beberapa margin atas dan bawah yang unik.

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

Visibilitas Modul Pembagi

Modul Pembagi dapat ditambahkan tepat di bawah Modul Teks jika opsi 'Tampilkan Pembagi' dicentang.

  • Tampilkan Pembagi: Ya

Garis

Sekarang ubah warnanya.

  • Warna Garis: #00000

Perekat

Ukuran pembagi juga dapat diubah.

  • Lebar: 15%
  • Penyelarasan Modul: Pusat

Modul Teks 2

Modul Teks sekarang dapat ditambahkan ke kolom.

Tautan

Sertakan URL ke halaman tempat Anda ingin mengarahkan modul ini.

Pengaturan Teks

Pada tab desain, sesuaikan pengaturan teks sebagai berikut:

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

Jarak

Juga sertakan beberapa ruang di bagian atas dan bawah halaman.

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

Modul Teks 2 Kloning

Dimungkinkan untuk mengkloning Modul Teks kedua di kolom dalam jumlah yang tidak terbatas setelah selesai dibuat (tergantung pada berapa banyak item footer yang dapat diklik yang ingin Anda sertakan).

Ubah Tautan

Untuk setiap salinan, pastikan untuk memperbarui konten dan tautan modul.

Kolom Klon Dua Kali

Anda dapat mengkloning kolom dua kali setelah Anda selesai membangunnya dan semua modulnya.

Perubahan Warna Kolom 2 BG

Anda dapat mengkloning kolom dua kali setelah Anda selesai membangunnya dan semua modulnya.

  • Kolom 2 Warna Latar Belakang: #f9f9f9

Tambahkan Kolom Baru

Kolom keempat kemudian harus ditambahkan.

Warna latar belakang

Warnai latar belakang kolom baru.

  • Warna Latar Belakang: #0fffc7

Jarak

Selain nilai padding di kolom.

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

Ikon Media Sosial

Tambahkan Modul Ikuti Media Sosial ke Kolom 4 untuk melengkapi tabel.

Penyelarasan

Pada tab Desain, sesuaikan posisi modul.

  • Penyelarasan Modul: Pusat

ikon

Sekarang ubah warna ikon.

  • Warna Ikon: #00000

Modul Email

Lanjutkan dengan memasukkan modul keikutsertaan email di kolom 4, lalu hapus judul dan isi isi. Selanjutnya, tautkan akun email pribadi. Jika akun email tidak ditambahkan, modul tidak akan muncul setelah Anda keluar dari pembuat.

Juga, hapus BG dari modul email.

Pengaturan Bidang

Buka tab desain dan buat penyesuaian berikut pada bidang:

  • Warna Latar Belakang Bidang: rgba(0,0,0,0)
  • Warna Teks Bidang: #00000
  • Font Bidang: Poppins
  • Ukuran Teks Bidang: 13px
  • Lebar Perbatasan Bidang: 1px
  • Warna Perbatasan Bidang: #00000

Tombol

Sekarang ubah gaya tombol.

  • Gunakan Gaya Kustom Untuk Tombol: Ya
  • Ukuran Teks Tombol: 12px
  • Warna Teks Tombol: #00000
  • Warna Latar Tombol: #FFFFFF
  • Lebar Batas Tombol: 0px
  • Radius Perbatasan 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

Terakhir, kita perlu menambahkan Modul Teks untuk menyelesaikan desain ini. Di kotak konten, pilih opsi konten dinamis. Dari sana lakukan perubahan berikut.

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

Pengaturan Teks

Dari tab desain, ubah pengaturan berikut.

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

Jarak

Anda selesai dengan pengaturan modul jika Anda menambahkan beberapa margin atas.

  • Margin Atas: 50px

Pratinjau Akhir

Mari kita lihat hasil akhir pada berbagai ukuran layar sekarang setelah kita menyelesaikan semua proses.

Pikiran Penutup

Kami telah mengajari Anda cara menggunakan Pembuat Tema baru Divi untuk membuat footer global khusus yang menakjubkan dalam panduan ini. Dengan bantuan modul dan opsi desain Pembuat Tema dan Divi , Anda dapat membuat situs web yang indah dalam hitungan jam. Ini adalah tujuan kami bahwa Anda akan menggunakan tutorial ini untuk membangun beberapa footer global Divi yang indah di masa depan. Jangan ragu untuk meninggalkan pertanyaan atau komentar di bagian komentar di bawah!