Cara Membuat Tumpang tindih Arahkan kursor yang Unik untuk Testimonial dengan Divi

Testimonial adalah masalah besar bagi banyak situs web. Mereka menunjukkan keahlian dan pengunjung biasanya mencari mereka jika mereka ingin mengetahui seberapa kredibel sebuah perusahaan atau orang. Itulah mengapa penting untuk memikirkan cara Anda menyajikan testimonial secara visual di situs web Anda.

Dengan Divi, Anda dapat menampilkan testimonial Anda persis seperti yang Anda inginkan. Untuk menginspirasi Anda, kami akan menunjukkan cara membuat cara yang menakjubkan dan unik untuk menampilkan testimoni menggunakan tumpang tindih hover.

Mari kita lakukan!

Pratinjau

Sebelum kita masuk ke tutorial, mari kita lihat hasil akhirnya.

Tambahkan Bagian Baru

Mari kita mulai! Tambahkan halaman baru atau buka yang sudah ada dan tambahkan bagian reguler baru.

Tambahkan Baris Baru 1

Struktur Kolom

Lanjutkan dengan menambahkan baris baru menggunakan struktur kolom berikut:

Perekat

Tanpa menambahkan modul apa pun, buka pengaturan baris dan ubah pengaturan ukuran.

• Jadikan Baris Ini Lebar Penuh: Ya
• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 1

Jarak

Tambahkan beberapa nilai spasi kustom juga.

• Padding Atas: 0px
• Padding Bawah: 0px
• Kolom 2 Padding Kiri: 2vw (Desktop), 3vw (Tablet & Ponsel)
• Kolom 2 Padding Kanan: 11vw (Desktop), 3vw (Tablet & Ponsel)

Tambahkan Modul Gambar ke Kolom 1

Unggah Gambar

Saatnya mulai menambahkan berbagai modul! Mulailah dengan Modul Gambar di kolom pertama. Unggah gambar potret pilihan.

Perataan Gambar

Buka pengaturan gambar dan ubah perataan gambar.

• Perataan Gambar: Kiri

Perekat

Ubah pengaturan ukuran berikutnya.

• Lebar: 78% (Desktop), 70% (Tablet & Ponsel)
• Penyelarasan Modul: Kiri

Tambahkan Modul Teks Hover Overlap ke Kolom 1

Tambah isi

Tepat di bawah Modul Gambar, tambahkan Modul Teks. Tempatkan detail orang tersebut di kotak konten.

Latar Belakang Default

Lanjutkan dengan menambahkan warna latar belakang.

• Warna Latar Belakang: rgba(255,255,255,0)

Arahkan ke Latar Belakang

Tambahkan warna latar belakang lain saat mengarahkan kursor.

• Warna Latar Belakang: #0f1bff

Pengaturan Teks Default

Kemudian, ubah pengaturan teks.

• Warna Teks: #ffffff
• Ukuran Teks: 0px
• Tinggi Baris Teks: 0px

Arahkan Pengaturan Teks

Buat beberapa penyesuaian untuk pengaturan teks saat mengarahkan kursor.

• Ukuran Teks: 19px
• Tinggi Baris Teks: 2em

Pengaturan Teks Judul Default

Pengaturan teks judul perlu dimodifikasi juga.

• Judul 3 Berat Font: Ultra Tebal
• Judul 3 Gaya Font: Huruf Besar
• Judul 3 Warna Teks: #ffffff
• Judul 3 Ukuran Teks: 0px
• Pos 3 Tinggi Baris: 0em

Arahkan Arahkan ke Pengaturan Teks Judul

Tambahkan nilai yang berbeda saat mengarahkan kursor.

• Judul 3 Ukuran Teks: 35px
• Pos 3 Tinggi Baris: 1.1em

Jarak

Selanjutnya, buka pengaturan spasi dan tambahkan beberapa nilai.

• Margin Atas: -100px
• Margin Kiri: 50px
• Margin Kanan: 50px
• Padding Atas: 40px
• Padding Bawah: 60px

Ubah Orientasi Teks

Kembali ke pengaturan teks dan ubah orientasi teks.

• Orientasi Teks: Tengah

Bayangan Kotak Default

Kemudian, tambahkan bayangan kotak default ke modul teks. Bayangan kotak ini akan menjadi bagian dari keseluruhan desain.

• Posisi Horizontal Bayangan Kotak: 1000px
• Posisi Vertikal Bayangan Kotak: -400px
• Kekuatan Buram Bayangan Kotak: 0px
• Kekuatan Penyebaran Bayangan Kotak: 250px
• Warna Bayangan: rgba(175,175,175,0.13)

Arahkan Bayangan Kotak

Untuk membuat efek tumpang tindih hover khusus, tambahkan juga bayangan kotak hover.

• Posisi Horizontal Bayangan Kotak: -73px
• Posisi Vertikal Bayangan Kotak: -49px
• Kekuatan Buram Bayangan Kotak: 0px
• Kekuatan Penyebaran Bayangan Kotak: 10px
• Warna Bayangan: rgba (255,182,12,0.53)

Transisi

Untuk membuat transisi yang mulus, ubah durasi transisi di tab lanjutan.

• Durasi Transisi: 1000ms

Tambahkan Modul Teks Kesaksian ke Kolom 2

Tambah isi

Di kolom kedua, hal pertama yang kita perlukan adalah judul Modul Teks. Silakan dan tambahkan ringkasan testimonial.

Pengaturan Teks Judul

Kemudian, ubah pengaturan teks judul.

• Judul 3 Font: Goudy Bookletter 1911
• Judul 3 Perataan Teks: Kiri
• Judul 3 Ukuran Teks: 3.5vw (Desktop), 40px (Tablet), 30px (Telepon)
• Pos 3 Tinggi Baris: 1.1em

Jarak

Lanjutkan dengan menambahkan beberapa nilai spasi kustom.

• Margin Atas: 7vw (Desktop), 100px (Tablet), 50px (Telepon)

Tambahkan Modul Teks Deskripsi ke Kolom 2

Tambah isi

Tambahkan Modul Teks lain dengan seluruh testimonial tepat di bawah judul Modul Teks.

Pengaturan Teks

Setelah Anda menambahkan testimonial, lanjutkan dan ubah pengaturan teks.

• Tinggi Baris Teks: 2.2em
• Orientasi Teks: Kiri

Jarak

Tambahkan beberapa margin atas kustom juga.

• Margin Atas: 4vw (Desktop), 50px (Tablet & Ponsel)

Tambahkan Baris Baru

Struktur Kolom

Sekarang setelah kita menyelesaikan baris pertama, mari tambahkan baris kedua menggunakan struktur kolom berikut:

Perekat

Buka pengaturan baris dan ubah pengaturan ukuran.

• Jadikan Baris Ini Lebar Penuh: Ya
• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 1

Jarak

Tambahkan beberapa nilai spasi kustom berikutnya.

• Margin Atas: 100px
• Padding Atas: 0px
• Padding Bawah: 0px
• Kolom 1 Padding Kiri: 11vw (Desktop), 3vw (Tablet & Ponsel)
• Kolom 1 Padding Kanan: 2vw (Desktop), 3vw (Tablet & Ponsel)

Modul Teks Klon dari Baris & Tempat Sebelumnya di Kolom 1

Kembali ke baris sebelumnya dan klon kedua modul di kolom 2. Setelah Anda melakukannya, tempatkan duplikat di kolom pertama dari baris baru.

Ubah Orientasi Teks

Ubah orientasi teks kedua modul.

• Orientasi Teks: Kanan

Tambahkan Modul Gambar ke Kolom 2

Unggah Gambar

Selanjutnya, tambahkan Modul Gambar ke kolom kedua dan unggah gambar potret baru.

Perataan Gambar

Ubah perataan gambar modul.

• Penjajaran Gambar: Kanan

Perekat

Lanjutkan dengan mengubah pengaturan ukuran.

• Lebar: 78% (Desktop), 70% (Tablet & Ponsel)
• Penyelarasan Modul: Kanan

Jarak

Tambahkan beberapa nilai spasi kustom juga.

• Margin Atas: 50px (Tablet & Ponsel)

Tambahkan Modul Teks Hover Overlap ke Kolom 2

Tambah isi

Modul terakhir yang kita butuhkan untuk menyelesaikan desain ini adalah Modul Teks di bawah Modul Gambar. Tambahkan detail orang tersebut di kotak konten.

Latar Belakang Default

Kemudian, tambahkan gambar latar belakang ke modul.

• Warna Latar Belakang: rgba(255,255,255,0)

Arahkan ke Latar Belakang

Ubah warna latar belakang saat melayang.

• Warna Latar Belakang: #690cff

Pengaturan Teks Default

Ubah pengaturan teks selanjutnya.

• Warna Teks: #ffffff
• Ukuran Teks: 0px
• Tinggi Baris Teks: 0px
• Orientasi Teks: Tengah

Arahkan Pengaturan Teks

Buat beberapa penyesuaian saat mengarahkan kursor.

• Ukuran Teks: 19px
• Tinggi Baris Teks: 2em

Pengaturan Teks Judul Default

Ubah juga pengaturan teks judul.

• Judul 3 Berat Font: Ultra Tebal
• Judul 3 Warna Teks: #ffffff
• Judul 3 Ukuran Teks: 0px
• Pos 3 Tinggi Baris: 0em

Arahkan Arahkan ke Pengaturan Teks Judul

Dengan beberapa tweak kecil di hover.

• Judul 3 Ukuran Teks: 35px
• Pos 3 Tinggi Baris: 1.1em

Jarak

Lanjutkan dengan masuk ke pengaturan spasi dan tambahkan beberapa nilai khusus.

• Margin Atas: -80px
• Margin Kiri: 50px
• Margin Kanan: 50px
• Padding Atas: 40px
• Padding Bawah: 60px

Bayangan Kotak Default

Tambahkan bayangan kotak default ke Modul Teks.

• Posisi Horizontal Bayangan Kotak: -1000px
• Posisi Vertikal Bayangan Kotak: -420px
• Kekuatan Buram Bayangan Kotak: 0px
• Kekuatan Penyebaran Bayangan Kotak: 250px
• Warna Bayangan: rgba(175,175,175,0.13)

Arahkan Bayangan Kotak

Dan ubah bayangan kotak di hover.

• Posisi Horizontal Bayangan Kotak: -73px
• Posisi Vertikal Bayangan Kotak: -49px
• Kekuatan Buram Bayangan Kotak: 0px
• Kekuatan Penyebaran Bayangan Kotak: 10px
• Warna Bayangan: rgba (12.255.238.0.53)

Transisi

Last but not least, buat transisi yang mulus dengan mengubah durasi transisi.

• Durasi Transisi: 1000ms

Pratinjau

Sekarang kita telah melalui semua langkah, mari kita lihat hasil akhirnya!

Pikiran Akhir

Kami harap posting ini menginspirasi Anda untuk membuat bagian testimonial yang menakjubkan menggunakan tumpang tindih hover! Mereka benar-benar membantu Anda menambahkan dimensi lain ke situs web Anda tanpa harus menghabiskan banyak waktu untuk coding atau mencari tahu. Jika Anda memiliki pertanyaan atau saran, pastikan Anda meninggalkan komentar di bagian komentar di bawah!