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
Buka Divi Theme Builder dan tambahkan Global Footer
- Buka Divi > Pembuat Tema dan klik " Tambahkan catatan kaki global«
- Untuk memilih " Bangun catatan kaki global«
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.
- 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
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.
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.
Segera setelah Anda keluar dari tata letak template, simpan seluruh perubahan pembuat tema Anda dan selesai!
penelitian
Sekarang kita telah melalui semua langkah, mari kita lihat hasilnya.
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.
...
