Cara Menggunakan Modul Blurb sebagai Item Footer dengan Divi

Modul blurb adalah pilihan bagus untuk footer Divi. Mereka dapat menampilkan gambar atau ikon dalam tata letak yang berbeda dan mereka memiliki banyak penyesuaian. Mereka sangat ideal untuk tautan dengan ikon untuk membuat peluru bergaya. Untungnya, tidak sulit untuk membuat jenis tautan ini menggunakan modul uraian Divi. Pada artikel ini, kita akan melihat cara menggunakan modul uraian untuk item footer di footer Divi Anda.

Pratinjau

Sebelum kita mulai, mari kita lihat bagaimana tampilan footer kita di desktop dan smartphone.

Desktop dengan Item Footer Modul Blurb

Berikut versi desktop dari footer yang akan kita buat. Kami menggunakan uraian di sudut kanan atas untuk membuat tautan.

Ponsel dengan Item Footer Modul Blurb

Berikut tampilan footer dengan uraian kami di smartphone.

Unduh Templat Divi Footer

Pertama, Anda memerlukan template footer untuk Divi Theme Builder. Anda dapat membuatnya sendiri atau menggunakan salah satu footer gratis yang disediakan oleh Elegant Themes di blog. Anda dapat menemukannya dengan mencari di blog untuk "footer gratis". Unduh dan unzip folder di komputer Anda.

Untuk contoh saya, saya menggunakan Template Header dan Footer gratis untuk Paket Tata Letak Kecerdasan Buatan Divi.

Berlangganan Saluran Youtube Kami

Unggah Templat Divi Footer Anda

Untuk mengunggah file JSON Anda, buka Divi > Theme Builder di dasbor WordPress. Pilih Portabilitas dan klik tab Impor modal yang terbuka. Klik Pilih File dan arahkan ke file di komputer Anda dan pilih. Klik Impor Template Pembuat Tema Divi dan tunggu file untuk diimpor. Hapus header jika Anda tidak ingin menggunakannya. Klik Simpan Perubahan .

Anda sekarang siap untuk menyesuaikan footer Divi baru Anda. Anda dapat mengedit footer dari sini di bagian belakang, atau Anda dapat memilihnya di dalam Visual Builder di bagian depan. Saya akan mengedit footer di bagian belakang karena header memiliki menu khusus, dan terbuka di builder secara default.

Saya juga menggunakan halaman arahan dari Paket Tata Letak Kecerdasan Buatan untuk elemen halaman saya. Tata letak dan header keduanya memiliki banyak antrian desain untuk ditarik. Saya terutama menyukai desain menu di template header dan footer Artificial Intelligence. Saya akan menggunakan semua ini untuk membantu saya mendesain tautan uraian di footer.

Gunakan Modul Blurb sebagai Item Footer

Saya akan mengganti tautan di dua bagian yang disebut Apa yang Kami Lakukan dan Sumberdaya . Ini akan memberi kita tautan yang kita inginkan dan menyorotnya dengan ikon. Saya akan menggunakan judul pertama dan mengurangi jumlah tautan. Kami akan menata yang pertama dan kemudian mengkloningnya untuk membuat sisanya.

Pertama, hapus modul di salah satu dari dua kolom. Kami akan mengubahnya menjadi tata letak dua kolom, jadi kami hanya membutuhkan satu kolom untuk modul uraian kami sebagai item footer.

Buka pengaturan Baris dan pilih tata letak dua kolom .

Terakhir, hapus modul teks yang menyertakan tautan. Kami hanya membutuhkan modul judul.

Arahkan kursor ke area yang ingin Anda tambahkan modulnya dan pilih ikon plus . Pilih modul uraian dari daftar.

Siapkan Modul Blurb

Modul uraian mencakup judul, teks isi, dan gambar. Kami akan menggunakan judul sebagai tautan. Teks isi dapat digunakan untuk deskripsi singkat. Saya akan menghapusnya untuk tutorial ini. Jika Anda ingin menggunakannya, saya sarankan untuk membuat teks sesingkat mungkin dan hanya menggunakan beberapa uraian. Di tempat gambar, kita akan menggunakan ikon.

Saya telah menambahkan nama tautan dan menghapus teks isi. Selanjutnya, pilih Gunakan Ikon di bawah Gambar & Ikon. Pilih ikon Anda di dalam pemilih ikon. Tambahkan URL ke bidang URL Tautan Judul di bawah bagian Tautan. Biarkan sisa pengaturan tautan pada defaultnya. Ini semua yang akan kita lakukan pada tab ini.

• Judul: nama tautan Anda
• Ikon: Kunci Pas Ganda
• Judul Tautan URL: tautan Anda

Di tab Desain, masukkan #db0eb7 untuk warna ikon . Atur Penempatan Gambar/Ikon ke Kiri.

• Warna Ikon: #db0eb7
• Penempatan Gambar/Ikon: Kiri

Untuk Image/Icon Width , pilih Desktop dan atur ke 20px.

• Gambar Desktop/Lebar Ikon: 20px

Pilih Telepon di bawah Lebar Gambar/Ikon dan atur ke 15px.

• Gambar Ponsel/Lebar Ikon: 15px

Atur Lebar Perbatasan Gambar/Ikon ke 1px dan warna ke #39c0ed.

• Lebar Batas Gambar/Ikon: 1px
• Warna Batas Gambar/Ikon: #39c0ed

Tambahkan 10px ke keempat sisi Image/Icon Padding .

• Padding Gambar/Ikon: 10px (Atas, Bawah, Kiri, Kanan)

Gulir ke bawah ke Teks Judul . Atur font menjadi Archivo dan warnanya menjadi putih.

• Judul Font: Archivo
• Warna Teks Judul: #ffffff

Gulir ke Spasi dan tambahkan 14vh ke Left Padding .

• Padding Desktop, Kiri: 14vh

Pilih ikon telepon dan tambahkan 4vh ke Left Padding . Nomor ini dapat disesuaikan agar sesuai dengan panjang judul Anda.

• Bantalan Telepon, Kiri: 4vh

Tab Lanjutan

Selanjutnya, kita akan menambahkan beberapa CSS khusus ke judul, sehingga berada di tengah dengan ikon. Buka tab Advanced dan tambahkan 12px padding atas ke Judul Blurb.

• Tab lanjutan Judul Blurb CSS Kustom: padding-top:12px

Gandakan Modul Blurb

Selanjutnya, buat tiga salinan modul uraian dengan mengklik tombol Duplikat Modul tiga kali. Ini akan memungkinkan kita menggunakan modul uraian untuk item footer sebagai pengganti tautan teks.

Buka modul uraian kedua dan tambahkan judul tautan, pilih ikon baru, dan tambahkan URL. Buka tab Design dan ubah Image/Icon Border Color menjadi #db0eb7.

• Judul: nama tautan Anda
• Ikon: Kunci Pas Tunggal
• Judul Tautan URL: tautan Anda
• Warna Batas Gambar/Ikon: #db0eb7

Buka modul uraian ketiga dan tambahkan judul tautan, pilih ikon baru, dan tambahkan URL. Buka tab Design dan ubah Image/Icon Border Color menjadi #f59910.

• Judul: nama tautan Anda
• Ikon: Gigi Tunggal
• Judul Tautan URL: tautan Anda
• Warna Batas Gambar/Ikon: #f59910

Buka modul uraian keempat dan tambahkan judul tautan, pilih ikon baru, dan tambahkan URL. Buka tab Design dan ubah Image/Icon Border Color menjadi #db0eb7. Ini sudah diatur ke warna ini karena Anda telah mengkloning modul pertama.

• Judul: nama tautan Anda
• Ikon: Roda Gigi Ganda
• Judul Tautan URL: tautan Anda
• Warna Batas Gambar/Ikon: #db0eb7

Hasil

Berikut ini adalah modul uraian Divi kami sebagai item footer untuk versi desktop dan telepon dari tata letak saya.

Desktop dengan Item Footer Modul Blurb

Beginilah tampilan footer versi desktop kami.

Ponsel dengan Item Footer Modul Blurb

Berikut tampilan footer pada smartphone.

Mengakhiri Pemikiran tentang Cara Menggunakan Item Footer Modul Blurb

Itulah tampilan kami tentang cara menggunakan modul uraian untuk item footer di footer Divi Anda. Blurb adalah pilihan bagus untuk tautan. Mereka mudah digunakan dan memiliki banyak opsi penyesuaian dengan gambar dan ikon. Gunakan ikon dengan atau tanpa batas dan buat sebesar yang Anda inginkan. Ikon yang kami gunakan di sini berfungsi sempurna dengan desain menu header.

Kami ingin mendengar dari Anda. Sudahkah Anda menggunakan modul uraian untuk item footer di situs web Divi Anda? Beri tahu kami tentang pengalaman Anda di komentar.