Satu-satunya hal pengunjung selalu mencari a situs jaringan, ini testimoni. Mereka mewakili kredibilitas dan memengaruhi proses pengambilan keputusan calon pelanggan saat mengunjungi Anda situs jaringan.
Selain memastikan Anda memiliki testimonial yang kuat untuk dibagikan, daya tarik visual mereka juga memainkan peran penting. Dalam tutorial ini, kami akan menunjukkan kepada Anda 3 cara fantastis untuk menyesuaikan modul testimonial Divi hanya dengan menggunakan opsi bawaan.
penelitian
Sebelum kita mendalami tutorial, mari kita lihat hasil akhirnya dalam berbagai ukuran layar.
Biro
mobil
Buat kembali contoh # 1
Tambahkan bagian baru
Mari kita mulai dengan contoh pertama! Buat halaman baru dan tambahkan bagian biasa.
Tambahkan baris baru
Struktur kolom
Lanjutkan menambahkan baris baru menggunakan struktur kolom berikut:
perekat
Tanpa menambahkan lebih banyak modul, buka parameter garis dan buat beberapa perubahan pada parameter ukuran.
- Jadikan garis ini lebar penuh: Ya
- Gunakan lebar selokan khusus: Ya
- Lebar selokan: 1
Tambahkan modul gambar ke kolom 1
Unggah gambar
Saatnya mulai menambahkan modul! Modul pertama yang kita perlukan adalah modul Gambar di kolom 1. Lanjutkan dan unggah gambar persegi pilihan Anda.
filter
Kemudian pergi ke pengaturan filter dan mainkan dengan efek yang berbeda.
- Saturasi: 40%
- Kontras: 126%
Tambahkan modul tombol ke kolom 1
Tambahkan salinan
Modul kedua dan terakhir yang kita perlukan di kolom 1 adalah modul tombol. Tambahkan salinan pilihan.
Pengaturan tombol
Lalu pergi ke pengaturan tombol dan ubah tampilan tombol Anda.
- Gunakan gaya khusus untuk tombol: Ya
- Ukuran teks tombol: 14px
- Warna 1: # 5400ff
- Warna 2: # 00fff6
- Arah Gradien: 100deg
- Lebar batas tombol: 0px
- Berat font: Ultra Bold
- Gaya Huruf: huruf besar
jarak
Tambahkan juga nilai spasi kustom.
- Top Padding: 10px
- Lapisan bawah: 10px
- Padding kiri: 30px
- Jok Kanan: 30px
Kotak bayangan
Dan akhiri dengan naungan kotak halus.
- Box Shadow Blur Force: 80px
- Warna bayangan: rgba (0,0,0,0,3)
Tambahkan modul testimonial ke kolom 2
Tambahkan konten
Pada kolom kedua, modul yang kita butuhkan hanyalah modul testimonial. Tambahkan beberapa isi ke berbagai bidang dan wilayah isi.
Warna latar belakang
Kemudian tambahkan warna latar belakang yang sedikit transparan.
- Warna latar belakang: rgba (255,255,255,0.96)
Pengaturan Ikon Testimonial
Ubah pengaturan untuk ikon testimonial juga.
- Warna Ikon Testimonial: # 0c0c0c
- Warna latar ikon testimonial: rgba (245,245,245,0)
Pengaturan teks tubuh
Kemudian ubah pengaturan teks isi.
- Fon Tubuh: Verdana
- Tinggi badan: 1.7em
jarak
Lanjutkan dengan menambahkan margin kustom dan nilai padding yang berbeda di pengaturan jarak.
- Margin atas: 15vw (desktop dan tablet), 0vw (telepon)
- Margin bawah: 50px (tablet dan telepon)
- Margin kiri: -10vw (desktop dan tablet), 0vw (telepon)
- Margin kanan: 5vw
- Lapisan teratas: 70px
- Lapisan bawah: 70px
- Padding kiri: 50px
- Jok Kanan: 50px
Batas
Tambahkan juga batas kiri.
- Lebar batas kiri: 7px
- Warna batas kiri: # 5400ff
Kotak bayangan
Terakhir, tambahkan bayangan kotak halus untuk membentuk modul kesaksian.
- Box Shadow Blur Force: 80px
- Kekuatan propagasi bayangan kotak: -10px
- Warna bayangan: rgba (0,0,0,0,49)
Kloning kedua modul dan tempatkan duplikat di kolom 3 dan 4
Setelah selesai mengedit modul di kolom 1 dan 2, Anda dapat mengkloningnya dan menempatkan duplikat di dua kolom lainnya.
Ganti gambar
Jangan lupa untuk mengubah gambar testimonial kedua Anda.
Ubah latar belakang gradien
Juga mengubah latar belakang gradien tombol.
- Warna 1: # ff001d
- Warna 2: # 3700ff
- Arah Gradien: 100deg
Ubah warna batas kesaksian
Dan kaitkan warna perbatasan dengan latar belakang gradien tombol baru.
- Warna batas kiri: # ff001d
Buat kembali contoh # 2
Tambahkan bagian baru
Mari lanjutkan ke contoh kedua! Tambahkan bagian reguler baru ke halaman Anda.
Tambahkan baris baru
Struktur kolom
Tanpa membuat perubahan apa pun pada bagian tersebut, tambahkan baris baru menggunakan struktur kolom berikut:
perekat
Lanjutkan dengan membuka parameter garis dan mengubah parameter ukuran.
- Jadikan garis ini lebar penuh: Ya
- Gunakan lebar selokan khusus: Ya
- Lebar selokan: 1
jarak
Kemudian tambahkan nilai isian khusus ke baris dan kolom.
- Padding kiri: 200px (desktop), 30px (tablet), 25px (telepon)
- Bantalan di sebelah kanan: 200px (desktop), 30px (tablet), 25px (telepon)
- Kolom 1 Padding di sebelah kiri: 5px (desktop), 0px (tablet dan telepon)
- Kolom 1 Padding di sebelah kanan: 2.5px (desktop), 0px (tablet dan telepon)
- Kolom 2 Padding di sebelah kiri: 2.5px (desktop), 0px (tablet dan telepon)
- Kolom 2 Padding di sebelah kanan: 2.5px (desktop), 0px (tablet dan telepon)
- Kolom 3 Padding di sebelah kiri: 2.5px (desktop), 0px (tablet dan telepon)
- Kolom 3 Padding di sebelah kanan: 5px (desktop), 0px (tablet dan telepon)
Tambahkan modul video ke kolom 1
Tautan video
Modul pertama yang kita perlukan di kolom 1 adalah modul video. Tautkan video ini ke video testimonial Anda.
Hamparan gambar
Tambahkan juga overlay gambar.
Tambahkan modul testimonial ke kolom 1
Tambahkan konten
Modul kedua dan terakhir yang dibutuhkan pada kolom 1 adalah modul testimonial. Mulailah dengan menambahkan detail kesaksian.
Nonaktifkan ikon testimonial
Kemudian matikan ikon testimonial di pengaturan item.
- Tampilkan ikon testimonial: Tidak
Warna latar belakang
Tambahkan latar belakang putih.
- Warna latar: #ffffff
Pengaturan teks tubuh
Juga ubah pengaturan teks isi.
- Teks berwarna badan: # 000000
- Penspasian body letter: -0.5px
- Tinggi badan: 1.7em
jarak
Dan tambahkan margin kustom dan nilai padding di pengaturan jarak.
- Margin bawah: 30px (tablet dan telepon)
- Padding: 50px
- Lapisan bawah: 50px
- Padding kiri: 80px
- Jok Kanan: 80px
Batas
Kami juga memberikan modul sudut membulat di kiri bawah dan kanan '30px'.
Kotak bayangan
Akhirnya, untuk memberikan kedalaman, kami memberikan modul Testimonial bayangan kotak halus.
- Box Shadow Blur Force: 80px
- Kekuatan propagasi bayangan kotak: -10px
- Warna bayangan: rgba (0,0,0,0,3)
Kloning modul tiga kali dan letakkan duplikat di kolom lainnya
Setelah Anda selesai mengedit dua modul di kolom 1, tiru dua kali dan letakkan duplikat di dua kolom yang tersisa.
Edit tautan video, konten, dan hamparan gambar
Jangan lupa ganti link videonya ya isi dan hamparan gambar dari testimonial baru Anda.
Buat kembali contoh # 3
Tambahkan bagian baru
Mari lanjutkan ke contoh ketiga! Tambahkan bagian reguler baru ke halaman Anda.
Tambahkan baris baru
Struktur kolom
Lanjutkan menambahkan baris baru menggunakan struktur kolom berikut:
Kolom 1 Warna Latar Belakang
Lalu pergi ke pengaturan latar belakang dan tambahkan warna latar belakang ke kolom pertama.
- Kolom 1 Warna Latar Belakang: # f9f9f9
Kolom 2 Warna Latar Belakang
Kolom kedua membutuhkan latar belakang putih.
- Kolom 2 Warna Latar Belakang: #ffffff
perekat
Lalu pergi ke parameter ukuran dan hapus lebar selokan.
- Gunakan lebar selokan khusus: Ya
- Lebar selokan: 1
jarak
Tambahkan nilai spasi khusus berikutnya.
- Padding terbaik: 0px
- Bawah Pelapis: 0px
- Padding kiri: 0px
- Jok Kanan: 0px
- Kolom 1 Bantalan Atas: 100px
- Kolom 1 Bantalan Bawah: 100px
- Kolom 1 Padding kiri: 50px
- Kolom 1 Padding di sebelah kanan: 50px
- Kolom 2 Bantalan Atas: 100px
- Lapisan bawah kolom 2: 100px
- Kolom 2 Padding kiri: 50px
- Kolom 2 Padding di sebelah kanan: 50px
Batas
Dan berikan setiap perbatasan '20px'.
Kotak bayangan
Last but not least, beri garis Anda bayangan kotak.
- Box Shadow Blur Force: 80px
Tambahkan modul testimonial ke kolom 1
Tambahkan konten
Saatnya mulai menambahkan modul! Modul pertama yang kita perlukan di kolom 1 adalah modul testimonial. Tambah isi.
Unggah gambar
Lanjutkan dengan mengunggah gambar di pengaturan gambar.
Nonaktifkan ikon testimonial
Kemudian matikan ikon testimonial.
- Tampilkan ikon testimonial: Tidak
Nonaktifkan warna latar belakang
Matikan juga warna background.
- Gunakan warna latar: Tidak
Pengaturan teks tubuh
Lanjutkan dengan membuka tab Desain dan buat beberapa perubahan pada pengaturan teks isi.
- Polisi Tubuh: Abril Fatface
- Teks berwarna badan: # 000000
- Ukuran teks isi: 20px
Tambahkan modul teks ke kolom 1
Tambahkan konten
Modul kedua yang kita perlukan di kolom 1 adalah modul teks. Tambahkan salinan testimonial ke area konten.
jarak
Lalu pergi ke tab Desain dan tambahkan margin atas dan bawah kustom.
- Margin atas: 50px
- Margin bawah: 50px
Tambahkan modul gambar ke kolom 1
Unduh logo perusahaan
Modul ketiga dan terakhir yang kita perlukan di kolom pertama adalah modul gambar. Anda dapat menggunakan modul ini untuk menambahkan logo perusahaan yang terkait dengan testimonial.
Kloning semua modul dan tempat duplikat di kolom 2
Setelah Anda selesai mengedit semua modul di kolom 1, Anda dapat menyalin dan menyalinnya. Setelah Anda selesai melakukannya, tempatkan duplikat di kolom kedua.
Ubah gambar dan salinan testimonial
Pastikan untuk mengubah konten kesaksian dengan gambar.
akhirnya
Itu saja untuk tutorial ini, saya harap ini memungkinkan Anda untuk menawarkan beberapa variasi
