Divi: Tema WordPress terbaik sepanjang masa!

lebih 901.000 unduhan, Divi adalah tema WordPress paling populer di dunia. Sudah lengkap, mudah digunakan dan dilengkapi dengan lebih dari 62 template gratis.

Apakah Anda ingin membuat footer khusus di DIVI?

Salah satu bagian terpenting dari pembuat tema Divi adalah kemampuan untuk menambahkan footer global secara dinamis ke halaman web dan posting Anda. 

Setelah Anda mendesain footer, Anda dapat secara otomatis menambahkannya ke semua jenis halaman atau posting yang Anda inginkan menggunakan pembuat tema Divi. 

Dalam tutorial ini, kami akan membawa Anda langkah demi langkah melalui proses membuat dan menambahkan footer global ke situs web Anda.

penelitian

Sebelum kita masuk ke tutorial, mari kita lihat footer yang akan kita desain.

Biro

Footer khusus di DIVI

Buka Divi Theme Builder dan tambahkan Global Footer

  • Buka Divi > Pembuat Tema dan klik " Tambahkan catatan kaki global« 
Footer khusus di DIVI
  • Untuk memilih " Bangun catatan kaki global« 
Footer khusus di DIVI

Sesuaikan bagian #1

Warna latar belakang

Buka bagian yang dapat Anda temukan di halaman dan ubah warna latar belakang bagian tersebut.

  • Latar belakang: #000000

jarak

Beralih ke tab Gaya lalu ubah pengaturan spasi untuk bagian tersebut.

  • Margin (Atas, Kiri dan Kanan): 6vw
  • Margin Internal (Kiri dan Kanan): 30px

Batas

Kemudian tambahkan batas atas di kiri dan kanan.

  • Persegi panjang bulat kiri atas: 20px
  • Persegi panjang bulat kanan atas: 20px

Kotak bayangan

Sertakan juga bayangan kotak di pengaturan bagian.

  • Kekuatan Buram Bayangan Busur: 135px
  • Warna Huruf Subjudul: rgba(0,0,0,0.18)

Tambahkan baris baru ke bagian tersebut

Struktur kolom

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

Tambahkan modul Teks ke kolom

Tambahkan judul dengan ukuran H2 (Judul 2)

Masukkan modul Teks dengan konten ukuran H2.

Pengaturan teks H2

Beralih ke tab dari Gaya modul dan memodifikasi parameter teks H2 sesuai:

  • Font Header: Poppins
  • Header ringan yang redup: semi-tebal
  • Perataan Teks: Terpusat
  • Warna teks header: #ffffff
  • Ukuran Teks Header: 31px (desktop), 24px (tablet), 18px (ponsel)
  • Tinggi garis tajuk: 1,6 em

perekat

Tambahkan juga lebar maksimum ke modul.

  • Lebar maksimum: 700 piksel

Tambahkan Modul Tombol ke Kolom

Tambahkan teks ke tombol

Masukkan modul Tombol tepat di bawah modul Teks di kolom Anda dan masukkan teks pilihan Anda.

penjajaran

Beralih ke tab dari Gaya modul dan ubah perataan tombol ke tengah.

  • Penjajaran tombol: terpusat

Pengaturan tombol

Lanjutkan dengan menyesuaikan tombol.

  • Gunakan gaya khusus untuk Tombol: Ya
  • Ukuran Teks Tombol: 12px
  • Warna teks tombol: #000000
  • Tombol latar belakang: #FFFFFF
  • Tombol lebar batas: 0 piksel

Baca juga: Cara menampilkan halaman blog sebagai carousel di DIVI

  • Radius Batas Tombol: 100 piksel
  • Jarak huruf tombol: 1 px
  • Font Tombol: Poppins
  • Tombol Cahaya Lembut: Semi Tebal
  • Tombol gaya salin: TT

jarak

Juga tambahkan nilai margin dalam kustom.

  • Margin Internal (Atas dan Bawah): 14px
  • Margin Dalam: Kiri (40px); Kanan (58 piksel)

Bagian 2

Tambahkan bagian "normal" kedua di bawah yang sebelumnya.

Warna latar belakang

Ubah warna latar belakang

  • Latar belakang: #ffffff

jarak

Kemudian hapus semua margin internal (Atas dan Bawah).

  • Margin Internal (Atas dan Bawah): 0px

Perbatasan

Tambahkan juga radius batas ke bagian tersebut.

Buat situs web Anda dengan Elementor dengan mudah

Elementor memungkinkan Anda membuat Mudah dan Gratis desain situs web atau blog apa pun dengan tampilan profesional. Berhentilah membayar banyak untuk situs web yang dapat Anda lakukan sendiri.

  • Persegi Panjang Bulat (Kiri Atas): 20px
  • Persegi Panjang Bulat (Kanan Atas): 20px

Kotak bayangan

Dan selesaikan pengaturan bagian dengan menambahkan bayangan kotak halus.

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

Tambahkan baris baru ke bagian tersebut

Struktur kolom

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

perekat

Tanpa menambahkan modul apa pun, buka pengaturan baris dan ubah sebagai berikut:

  • Gunakan Lebar Talang Kustom: Ya
  • Jarak kolom: 1
  • Menyelaraskan ketinggian kolom: Ya
  • Lebar maksimum: 100%
  • Lebar maksimum: 100%

jarak

Kemudian hapus margin dalam default (Atas dan Bawah) dari baris.

  • Margin Internal (Atas dan Bawah): 0px

Spasi kolom

Lanjutkan dengan membuka pengaturan kolom untuk menambahkan nilai padding kustom.

  • Margin Dalam (Atas dan Bawah): 100px (desktop), 50px (tablet dan ponsel)
  • Margin internal (Kiri dan Kanan): 100 px (desktop), 50 px (tablet dan ponsel)

Tambahkan modul Teks #1 ke kolom

Tambahkan konten

Sekarang kita dapat menambahkan modul ke dalamnya. Tambahkan modul Teks ke kolom dan masukkan konten pilihan Anda.

Pengaturan teks

Beralih ke tab dari Gaya modul dan memodifikasi parameter teks yang sesuai:

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

jarak

Kemudian tambahkan margin khusus (Atas dan Bawah).

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

Tambahkan modul Pemisah ke kolom

Tepat di bawah modul Teks, tambahkan modul Pemisah.

jarak penglihatan

Pastikan opsi " Tampilkan Pemisah Diaktifkan.

  • Tampilkan Pemisah: Ya

Baris

Ubah warna garis menjadi hitam.

  • Warna Label: #000000

perekat

Juga ubah pengaturan ukuran splitter.

  • Lebar maksimum: 15%
  • Perataan teks: Tengah

Tambahkan modul Teks #2 ke kolom

Tambahkan konten

Lanjutkan dengan menambahkan modul Teks lain ke kolom serta konten pilihan Anda.

Menambahkan link

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

Pengaturan teks

Kemudian beralih ke tab Gaya dan ubah pengaturan teks sebagai berikut:

  • Font Teks: Poppins
  • Teks Cahaya Lembut: Jelas
  • Teks Warna Teks: #777777
  • Teks Ukuran teks: 15 px
  • Perataan Teks: Terpusat

jarak

Tambahkan juga margin (Atas dan Bawah).

  • Margin (Atas dan Bawah): 10 px

Modul teks klon #2 sesuai kebutuhan

Setelah Anda menyelesaikan modul Teks kedua, Anda dapat mengkloningnya sebanyak yang Anda butuhkan (bergantung pada berapa banyak elemen footer yang dapat diklik yang ingin Anda sertakan).

Edit konten dan tautan

Apakah Anda ingin menjual produk Anda di internet?

Unduh WooCommerce secara gratis, plugin e-commerce terbaik untuk menjual produk fisik dan digital Anda di WordPress dan dengan mudah membuat toko online Anda. Sempurna untuk pemula.

Pastikan untuk mengedit konten modul dan tautan untuk setiap duplikat.

Kloning seluruh kolom dua kali

Setelah Anda menyelesaikan kolom dan modulnya, Anda dapat mengkloningnya dua kali.

Warna latar kolom 2

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

  • Latar belakang: #f9f9f9

Edit konten dan tautan

Pastikan untuk mengedit semua konten dan tautan di setiap kolom duplikat.

Footer khusus di DIVI

Menambahkan kolom baru

Selanjutnya, tambahkan kolom keempat ke baris.

Warna latar belakang

Ubah warna latar belakang kolom baru.

  • Latar belakang: #0fffc7

jarak

Ubah margin dalam sebagai berikut:

  • Margin Internal (Atas dan Bawah): 70px
  • Margin Internal (Kiri dan Kanan): 50px

Tambahkan modul 'Ikuti kami di media sosial' ke kolom 4

Tambahkan jejaring sosial

Lanjutkan dengan menambahkan modul " Ikuti kami di jejaring sosial di kolom 4 dan masukkan jejaring sosial pilihan Anda.

Setel ulang gaya ikon media sosial

Klik pada Setel Ulang Gaya Elemen Peran untuk masing-masing jejaring sosial.

penjajaran

Kemudian beralih ke tab Gaya dan memodifikasi keselarasan modul.

  • Perataan teks: Tengah

Pengaturan ikon

Ubah juga warna ikon media sosial.

  • Warna Ikon: #000000

Tambahkan Modul Optin Email ke Kolom 4

Masukkan mod" Pilihan Email "di bawah modul" Ikuti kami di jejaring sosial« 

Hapus konten dan judul modul

Akun email

Kemudian tambahkan akun email. Jika Anda tidak menambahkan akun email, modul tidak akan muncul setelah Anda keluar dari pembuat tema.

Hapus warna latar belakang

  • Gunakan warna latar belakang: Tidak

Pengaturan bidang

Beralih ke tab Gaya dan ubah pengaturan bidang sebagai berikut:

  • Bidang Warna Latar Belakang: rgba(0,0,0,0)
  • Bidang Warna Teks: #000000
  • Font Champs: Poppins
  • Bidang Ukuran Teks: 13px
  • Bidang lebar batas: 1 px

Pengaturan tombol

Sesuaikan juga tombol modul Anda.

  • Gunakan gaya khusus untuk Tombol: Ya
  • Ukuran Teks Tombol: 12px
  • Warna teks tombol: #000000
  • Tombol latar belakang: #FFFFFF
  • Lebar Perbatasan: 0px
  • Radius Batas Tombol: 100 piksel
  • Jarak huruf tombol: 1 px
  • Font Tombol: Poppins
  • Tombol Cahaya Redup: Semi Tebal
  • Tombol gaya salin: TT

Lihat juga: Cara membuat formulir kontak lengket di DIVI

  • Padding Tombol (Atas dan Bawah): 15px

Tambahkan Modul Teks Dinamis ke Kolom 4

Modul berikutnya dan terakhir yang kita butuhkan untuk menyelesaikan desain ini adalah modul Teks. 

Aktifkan opsi " Gunakan konten dinamis".

Kemudian pilih opsi " tanggal sekarang".

Dan ubah pengaturan konten dinamis sebagai berikut:

  • Depan: Hak Cipta ©
  • Setelah: | Seluruh hak cipta
  • Format tanggal: Bea Cukai
  • Format tanggal khusus: 20 tahun

Pengaturan teks

Selanjutnya, beralih ke tab gaya dan ubah pengaturan teks:

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

jarak

Lengkapi parameter modul dengan menambahkan margin dan voila!

  • Margin Atas: 50 piksel

Simpan opsi pembuat footer dan tema global

Setelah selesai, pastikan untuk menyimpan pekerjaan Anda sebelum keluar dari pembuat tema Divi.

Footer khusus di DIVI

Segera setelah Anda keluar dari tata letak template, simpan seluruh perubahan pembuat tema Anda dan selesai!

Footer khusus di DIVI

penelitian

Sekarang kita telah melalui semua langkah, mari kita lihat hasilnya.

Footer khusus di DIVI

Unduh DIVI Sekarang!!!

Kesimpulan

Dalam tutorial ini, kami menunjukkan kepada Anda betapa mudahnya membuat footer global kustom yang indah dengan pembuat tema Divi. 

Kami berharap tutorial ini akan menginspirasi Anda untuk membuat footer global yang indah untuk proyek Divi Anda berikutnya. 

Jika Anda memiliki masalah atau saran, temukan kami di bagian komentar untuk mendiskusikannya.

Namun, Anda juga bisa berkonsultasi sumber daya kita, jika Anda memerlukan lebih banyak elemen untuk melaksanakan proyek pembuatan situs Internet Anda, dengan membaca panduan kami di Pembuatan blog WordPress atau yang di Divi: tema WordPress terbaik sepanjang masa.

Namun sementara itu, bagikan artikel ini di berbagai jejaring sosial Anda.

...