Cara Mengganti Logo Klien dengan Testimonial di Arahkan/Klik dengan Divi

Mencari cara untuk menambahkan interaksi ke logo klien dan testimonial yang cocok? Dengan fitur konten responsif Divi, sekarang lebih mudah untuk menampilkan konten yang berbeda dalam status default modul dan saat mengarahkan kursor. Dalam tutorial Divi hari ini, kami akan menunjukkannya dengan menunjukkan kepada Anda cara mengganti logo klien dengan testimonial di hover (desktop) dan klik (tablet dan ponsel). Kami akan menggunakan Modul Blurb untuk membantu kami sampai di sana! Anda juga dapat mengunduh file JSON tata letak secara gratis!

Mari kita lakukan.

Pratinjau

Sebelum kita masuk ke tutorial, mari kita lihat sekilas hasilnya di berbagai ukuran layar.

Desktop

Seluler

Unduh Tata Letak Logo Klien GRATIS

Untuk mendapatkan tata letak logo klien 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!

Mari Mulai Berkreasi!

Tambahkan Bagian Baru

Warna latar belakang

Mulailah dengan menambahkan bagian baru ke halaman baru atau yang sudah ada. Buka pengaturan bagian dan ubah warna latar belakang.

• Warna Latar Belakang: #000000

Jarak

Tambahkan beberapa bantalan atas dan bawah khusus juga.

• Padding Atas: 200px
• Padding Bawah: 200px

Berbatasan

Selesaikan pengaturan bagian dengan menambahkan batas putih.

• Lebar Perbatasan: 1vw
• Warna Perbatasan: #ffffff

Tambahkan Baris #1

Struktur Kolom

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

Perekat

Tanpa menambahkan modul apa pun, buka pengaturan baris dan tambah lebar maksimum baris.

• Lebar Maks: 1500px

Tambahkan Modul Teks ke Kolom

Tambahkan Konten H2 Responsif

Modul pertama yang kita butuhkan di baris ini adalah Modul Teks dengan beberapa konten H2 responsif.

• Desktop: Arahkan kursor ke logo klien untuk melihat apa yang mereka katakan!
• Tablet & Telepon: Klik logo klien untuk melihat apa yang mereka katakan!

Pengaturan Teks H2

Pindah ke tab desain modul dan ubah pengaturan teks H2 sebagai berikut:

• Judul 2 Font: Work Sans
• Judul 2 Perataan Teks: Tengah
• Judul 2 Warna Teks: #ffffff
• Judul 2 Ukuran Teks: 40px (Desktop), 30px (Tablet), 25px (Ponsel)

Tambahkan Modul Pembagi ke Kolom

Visibilitas

Modul berikutnya dan terakhir yang kita butuhkan di baris ini adalah Modul Pembagi. Pastikan opsi 'Tampilkan Pembagi' diaktifkan.

• Tampilkan Pembagi: Ya

Garis

Kemudian, ubah warna garis modul.

• Warna Garis: #ffffff

Perekat

Ubah juga pengaturan ukuran modul.

• Berat Pembagi: 4px
• Lebar: 10%
• Penyelarasan Modul: Pusat

Jarak

Selesaikan pengaturan modul dengan menambahkan beberapa margin atas.

• Margin Atas: 100px

Tambahkan Baris #2

Struktur Kolom

Tambahkan baris lain tepat di bawah yang sebelumnya dan gunakan struktur kolom berikut untuk itu:

Perekat

Buka pengaturan baris dan ubah pengaturan ukuran di berbagai ukuran layar. Pastikan Anda juga menyamakan ketinggian kolom, ini akan membantu langkah selanjutnya; memusatkan isi kolom.

• Samakan Tinggi Kolom: Ya
• Lebar: 100% (Desktop), 80% (Tablet & Ponsel)
• Lebar Maks: 1500px
• Tinggi Min: 500px (Desktop), otomatis (Tablet & Ponsel)

Elemen Utama

Untuk memusatkan konten kolom dari baris Anda, Anda akan 1) perlu mengaktifkan opsi 'Equalize Column Heights' (langkah sebelumnya) dan 2) menambahkan baris kode CSS berikut ke elemen utama baris Anda:

align-items: center;

Tambahkan Modul Blurb ke Kolom

Biarkan Konten Default Kosong

Sekarang, untuk mengganti logo klien di hover, kita akan menggunakan Modul Blurb. Mulailah dengan yang pertama di kolom 1. Pastikan Anda mengosongkan judul default dan isi isi tetapi terus aktifkan opsi arahkan kursor pada keduanya.

Tambahkan Konten di Arahkan kursor

Masukkan beberapa konten tertulis pilihan Anda di kedua bidang hover.

Gambar Standar

Lanjutkan dengan mengunggah logo perusahaan pilihan Anda di pengaturan gambar & ikon.

Hapus Gambar di Arahkan kursor

Kami akan mengganti logo klien saat melayang dengan menghapus seluruhnya dalam status melayang.

Arahkan Warna Latar Belakang

Seperti yang Anda lihat di pratinjau posting ini, kami juga mengubah warna latar belakang modul saat mengarahkan kursor. Jangan gunakan warna latar belakang default dan tambahkan kode warna berikut saat mengarahkan kursor:

• Warna Latar Belakang: #191919

Pengaturan Gambar/Ikon

Pindah ke tab desain modul dan pastikan perataan gambar/ikon berikut berlaku:

• Penjajaran Gambar/Ikon: Tengah

Pengaturan Teks

Karena kita menggunakan warna latar belakang bagian hitam, kita akan mengubah warna teks modul dalam pengaturan teks umum.

• Warna Teks: Cahaya

Pengaturan Teks Judul

Selanjutnya, ubah pengaturan teks judul yang sesuai:

• Judul Judul Level: H3
• Judul Font: Work Sans
• Ukuran Teks Judul: 24px
• Tinggi Baris Judul: 1.4em

Pengaturan Teks Tubuh

Buat beberapa perubahan pada pengaturan teks isi juga.

• Font Tubuh: Buka Sans
• Warna Teks Tubuh: #8c8c8c
• Tinggi Garis Tubuh: 2.5em

Spasi Default

Kemudian, buka pengaturan spasi dan pastikan tidak ada bantalan khusus dalam status default modul.

• Padding Atas: 0px
• Padding Bawah: 0px
• Padding Kiri: 0px
• Padding Kanan: 0px

Spasi Arahkan

Namun, saat mengarahkan kursor, kami membuat beberapa ruang kosong untuk testimonial kami menggunakan nilai berikut:

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

Transisi

Selesaikan pengaturan modul dengan menghapus durasi transisi default. Ini akan memungkinkan testimonial langsung muncul saat mengarahkan/mengklik logo.

• Durasi Transisi: 0ms

Clone Blurb Module Dua Kali & Tempatkan Duplikat di Kolom Tersisa

Setelah Anda menyelesaikan Modul Blurb pertama di kolom 1, Anda dapat mengkloning modul dua kali dan menempatkan duplikat di kolom baris yang tersisa.

Klon Seluruh Baris

Anda sekarang dapat mengkloning baris ini sebanyak yang Anda inginkan, tergantung pada berapa banyak logo klien yang ingin Anda tampilkan.

Ubah Isi Arahkan Setiap Duplikat Modul Blurb

Pastikan Anda mengubah logo klien di setiap Modul Blurb duplikat.

Ubah Logo Setiap Duplikat Modul Blurb

Ubah juga konten hover setiap modul duplikat dan selesai!

Pratinjau

Sekarang setelah kita melalui semua langkah, mari kita lihat hasil akhir di berbagai ukuran layar.

Desktop

Seluler

Pikiran Akhir

Dalam posting ini, kami telah menunjukkan kepada Anda cara menggunakan fitur opsi responsif Divi untuk mengganti logo klien dengan testimonial saat mengarahkan kursor/klik. Ini adalah cara terbaik untuk menghemat ruang di halaman Anda dan membuat desain interaktif di berbagai ukuran layar. Selain menunjukkan tutorialnya, kami juga telah membagikan file JSON secara gratis di awal posting ini! Jika Anda memiliki pertanyaan, 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.