Cara Membuat Tab Testimonial Kustom dengan Divi (Unduh GRATIS!)

Diterbitkan: 2020-11-04

Bagi banyak bisnis, testimonial adalah salah satu argumen utama untuk mendapatkan klien baru. Itu berarti memberikan sedikit perhatian ekstra pada testimonial di situs web Anda tidak akan pernah sia-sia. Di dalam Divi, ada banyak cara berbeda untuk membagikan testimonial, misalnya menggunakan Modul Testimonial Divi. Tetapi jika Anda mencari pendekatan yang lebih interaktif, Anda akan menyukai tutorial ini. Kami akan menunjukkan cara membuat tab testimonial khusus di dalam Divi. Setelah seseorang mengarahkan Modul Blurb di sebelah kiri, testimoni yang sesuai akan muncul di sebelah kanan. Efek transisi dalam desain ini juga mulus, yang membantu Anda memberikan nuansa kustomisasi ekstra ke situs web Anda. Anda juga dapat mengunduh file JSON secara gratis!

Mari kita lakukan.

Pratinjau

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

Desktop

tab testimoni

Seluler

tab testimoni

Unduh Tata Letak Tab Testimonial Khusus GRATIS

Untuk mendapatkan tata letak tab testimonial kustom 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

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.

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 yang sedang Anda kerjakan. Buka pengaturan bagian dan tambahkan warna latar belakang.

  • Warna Latar Belakang: #ffefdb

tab testimoni

Jarak

Pindah ke tab desain bagian dan tambahkan beberapa nilai margin dan padding kustom.

  • Margin Atas: 5%
  • Margin Bawah: 5%
  • Margin Kiri: 5%
  • Margin Kanan: 5%
  • Padding Kiri: 5%
  • Padding Kanan: 5%

tab testimoni

Berbatasan

Sertakan beberapa sudut membulat juga.

  • Semua Sudut: 20px

tab testimoni

Tambahkan Baris #1

Struktur Kolom

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

tab testimoni

Jarak

Tanpa menambahkan modul apa pun, buka pengaturan baris dan tambahkan beberapa margin bawah.

  • Margin Bawah: 3%

tab testimoni

Tambahkan Modul Teks ke Kolom

Tambahkan Konten H2

Saatnya menambahkan modul, dimulai dengan Modul Teks yang berisi beberapa konten H2.

tab testimoni

Pengaturan Teks H2

Pindah ke tab desain modul dan ubah pengaturan teks H2 yang sesuai:

  • Judul 2 Font: Montserrat
  • Judul 2 Berat Font: Semi Tebal
  • Judul 2 Ukuran Teks: 31px
  • Spasi Judul 2 Huruf: -1px

tab testimoni

Tambahkan Modul Pembagi ke Kolom

Visibilitas

Tepat di bawah Modul Teks, kami menambahkan Modul Pembagi. Pastikan opsi "Tampilkan Pembagi" diaktifkan.

  • Tampilkan Pembagi: Ya

tab testimoni

Garis

Pindah ke tab desain modul dan ubah warna garis menjadi putih.

  • Warna Garis: #ffffff

tab testimoni

Perekat

Ubah juga pengaturan ukuran.

  • Berat Pembagi: 10px
  • Lebar: 14%
  • Tinggi: 10px

tab testimoni

Berbatasan

Dan selesaikan pengaturan modul dengan menambahkan beberapa sudut membulat ke pengaturan perbatasan.

  • Semua Sudut: 10px

tab testimoni

Tambahkan Baris #2

Struktur Kolom

Ke baris berikutnya. Gunakan struktur kolom berikut:

tab testimoni

Perekat

Tanpa menambahkan modul apa pun, buka pengaturan baris dan samakan tinggi kolom dalam pengaturan ukuran.

  • Samakan Tinggi Kolom: Ya

tab testimoni

Pengaturan Kolom 2

Warna latar belakang

Kemudian, buka pengaturan kolom 2 dan terapkan warna latar belakang.

  • Warna Latar Belakang: #fffbf9

tab testimoni

tab testimoni

Jarak

Pindah ke tab desain kolom dan terapkan beberapa padding atas dan bawah pada ukuran layar yang lebih kecil.

  • Bantalan Atas:
    • Desktop: Tidak ada
    • Tablet & Ponsel: 300px
  • Lapisan Bawah
    • Desktop: Tidak ada
    • Tablet & Ponsel: 300px

tab testimoni

Berbatasan

Sertakan beberapa sudut membulat juga.

  • Semua Sudut: 10px

tab testimoni

Tambahkan Modul Blurb #1 ke Kolom 1

Tambah isi

Saatnya menambahkan modul, dimulai dengan Modul Blurb pertama di kolom 1. Tambahkan beberapa konten pilihan Anda.

tab testimoni

Unggah Gambar Rasio 1:1

Unggah gambar dengan rasio 1:1 berikutnya.

tab testimoni

Warna latar belakang

Kemudian, terapkan warna latar belakang berikut:

  • Warna Latar Belakang: #d5d6ea

tab testimoni

Pengaturan Gambar

Lakukan perubahan pada pengaturan gambar juga.

  • Penempatan Gambar/Ikon: Kiri
  • Sudut Bulat Gambar: 100px

tab testimoni

Pengaturan Teks Judul

Kemudian, ubah pengaturan teks judul yang sesuai:

  • Judul Font: Montserrat
  • Judul Font Berat: Semi Tebal
  • Spasi Huruf Judul: -1px

tab testimoni

Pengaturan Teks Tubuh

Kami juga mengubah pengaturan teks isi.

  • Font Tubuh: Lato
  • Ukuran Teks Tubuh: 13px

tab testimoni

Jarak

Selanjutnya, kita akan menambahkan beberapa ruang di sekitar konten modul kita dengan menerapkan nilai padding berikut:

  • Padding Atas: 5%
  • Padding Bawah: 5%
  • Padding Kiri: 5%
  • Padding Kanan: 5%

tab testimoni

Berbatasan

Tambahkan beberapa sudut membulat juga.

  • Semua Sudut: 10px

tab testimoni

Animasi

Secara default, ada efek animasi yang diterapkan pada gambar Modul Blurb. Kami menghapus animasi ini di pengaturan animasi.

  • Gambar/Ikon Animasi: Tanpa Animasi

tab testimoni

ID CSS

Untuk membuat desain tab testimonial, kita perlu menambahkan beberapa kode di akhir tutorial ini. Untuk mempersiapkannya, kami akan menambahkan ID CSS ke tab lanjutan Modul Blurb.

  • ID CSS: testimonial-person-1

tab testimoni

Gambar Blurb & Judul CSS

Kami juga menggunakan dua baris kode CSS di tab lanjutan. Satu untuk gambar blurb dan yang lainnya untuk judul blurb. 

width: 25% !important;
margin-top: 25px;

tab testimoni

Modul Blurb Klon Tiga Kali

Setelah Anda menyelesaikan Modul Blurb pertama, Anda dapat mengkloningnya tiga kali.

tab testimoni

Ubah Konten & Gambar

Pastikan Anda mengubah konten dan gambar untuk setiap Modul Blurb duplikat.

tab testimoni

Ubah Warna Latar Belakang

Seiring dengan warna latar belakang.

  • Duplikat 1: #ffed6
  • Duplikat 2: #d7ecd9
  • Duplikat 3: #f5d5cb

tab testimoni

Ubah ID CSS

Dan, tentu saja, ID CSS. Gunakan penomoran berurutan.

  • Duplikat 1: testimonial-orang-2
  • Duplikat 2: testimonial-orang-3
  • Duplikat 3: testimonial-orang-4

tab testimoni

Tambahkan Modul Teks Kutipan ke Kolom 2

Tambahkan Kutipan ke Kotak Konten

Ke kolom kedua. Di sana, modul pertama yang kita butuhkan adalah Modul Teks dengan karakter kutipan.

tab testimoni

Pengaturan Teks

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

  • Font Teks: Tampilan Playfair
  • Warna Teks: #ffefdb
  • Ukuran Teks: 200px
  • Tinggi Baris Teks: 1em

tab testimoni

Posisi

Ubah posisi modul juga.

  • Posisi: Absolut
  • Lokasi: Kiri Atas
  • Offset Horisontal: 5%

tab testimoni

Tambahkan Modul Teks Kesaksian ke Kolom 2

Tambahkan Konten Kesaksian

Ke Modul Teks berikutnya. Yang ini akan didedikasikan untuk testimonial pertama kami. Testimonial yang Anda tempatkan di kotak konten harus sesuai dengan Modul Blurb pertama di kolom 1.

tab testimoni

Pengaturan Teks

Ubah pengaturan teks modul yang sesuai:

  • Font Teks: Lato
  • Warna teks: #000000
  • Ukuran Teks: 20px
  • Tinggi Baris Teks: 2.1em
  • Perataan Teks: Tengah

tab testimoni

Perekat

Pastikan lebar diatur ke "100%" juga.

  • Lebar: 100%

tab testimoni

Jarak

Kemudian, tambahkan beberapa nilai margin dan padding kustom ke pengaturan spasi.

  • Margin Atas: 30%
  • Padding Kiri: 10%
  • Padding Kanan: 10%

tab testimoni

ID CSS

Dan tambahkan ID CSS ke tab lanjutan. Nomor di akhir ID CSS ini harus cocok dengan nomor di akhir ID CSS Modul Blurb yang sesuai.

  • ID CSS: testimonial-salin-1

tab testimoni

Modul Teks Klon Tiga Kali

Setelah Anda menyelesaikan Modul Teks testimonial pertama, Anda dapat mengkloningnya tiga kali.

tab testimoni

Ubah Konten Testimonial

Pastikan Anda mengubah konten testimonial di modul duplikat.

tab testimoni

Ubah ID CSS

Bersama dengan ID CSS. Pastikan Anda mengikuti urutan yang berurutan.

  • Duplikat 1: testimonial-salinan-2
  • Duplikat 2: testimonial-salinan-3
  • Duplikat 3: testimonial-salin-4

tab testimoni

Tambahkan Kelas CSS ke Modul Teks Testimonial Pertama

Dan kita perlu menambahkan kelas CSS ke testimonial yang ingin kita aktifkan di awal. Dalam hal ini, itu yang pertama.

  • Kelas CSS: show-testimonial

tab testimoni

Tambahkan Modul Kode Di Bawah Modul Pembagi (Baris #1)

Sekarang kita memiliki semua elemen di tempat, saatnya untuk membuat keajaiban terjadi. Tambahkan Modul Kode baru tepat di bawah Modul Pembagi di baris pertama bagian.

tab testimoni

Tambahkan Kode CSS

Masukkan baris kode CSS berikut di antara tag gaya seperti yang Anda lihat di layar cetak di bawah ini. 

.show-testimonial {
visibility: visible !important;
opacity: 1 !important;
top: 0 !important;
}

.testimonial-active {
transform: translateX(-10%);
}

[id*="testimonial-person"]{
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;

cursor: context-menu;
}

[id*="testimonial-copy"] {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
transition: all 0.3s ease;

position: absolute!important;
top: -100px;
bottom: auto;
left: 0;
right: auto;

visibility: hidden;
opacity: 0;
}

tab testimoni

Tambahkan Kode JQuery

Selanjutnya, letakkan baris kode JQuery berikut di antara tag skrip seperti yang Anda lihat di layar cetak di bawah dan selesai! 

jQuery(function($){
$(document).ready(function(){

$('#testimonial-person-1').addClass('testimonial-active');

$('[id*="testimonial-person"]').hover(function() {

var $selector = $(this).attr('id').replace('person', 'copy');
var $testimonial = $('#' + $selector);

$('[id*="testimonial-copy"]').removeClass('show-testimonial');
$testimonial.addClass('show-testimonial');

$('[id*="testimonial-person"]').removeClass('testimonial-active');
$(this).addClass('testimonial-active');

});

});
});

tab testimoni

Pratinjau

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

Desktop

tab testimoni

Seluler

tab testimoni

Pikiran Akhir

Dalam posting ini, kami telah menunjukkan kepada Anda cara membuat desain testimonial interaktif untuk semua jenis situs web yang Anda buat. Lebih khusus lagi, kami telah menunjukkan kepada Anda cara membuat tab testimonial khusus yang dipicu setelah seseorang mengarahkan salah satu Modul Blurb di sebelah kiri. Anda juga dapat mengunduh file JSON secara gratis! Jika Anda memiliki pertanyaan atau saran, 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.