Loncat ke Konten Utama

3 cara yang berbeda untuk menyesuaikan modul testimonial di Divi

Apakah Anda mencari tema dan plugin WordPress terbaik?

Unduh plugin terbaik dan tema WordPress di Envato dan buat situs web Anda dengan mudah. Sudah lebih dari 49.720.000 unduhan. [EKSKLUSIF]

Satu-satunya hal yang selalu dicari pengunjung di situs web adalah testimonial. Mereka mewakili kredibilitas dan mempengaruhi proses pengambilan keputusan pelanggan potensial ketika mengunjungi situs web Anda.

Selain memastikan bahwa Anda memiliki cerita yang kuat untuk dibagikan, daya tarik visualnya juga memainkan peran penting. Dalam hal ini Tutoriel, kami akan menunjukkan kepada Anda 3 cara fantastis untuk menyesuaikan modul testimonial Divi hanya menggunakan opsi bawaan.

penelitian

Sebelum terjun ke tutorial, mari kita lihat hasil akhir dalam ukuran layar yang berbeda.

Biro

contoh modul 1 modifikasi testimonial.jpg

contoh modul modifikasi 2 testimony.jpg

contoh modul modifikasi 3 testimonial.jpg

mobil

mobile example.jpg

Buat Contoh # 1

contoh pertama testimonial divi.png

Tambahkan bagian baru

Mari kita mulai dengan contoh pertama! Buat halaman baru dan tambahkan bagian biasa.

tambahkan bagian di divi.jpg

Tambahkan baris baru

Struktur kolom

Lanjutkan menambahkan baris baru menggunakan struktur kolom berikut:

tambahkan kolom baru di divi.jpg

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
  • Selokan lebar: 1

pengaturan dimensi divi.jpg

Tambahkan modul gambar ke kolom 1

Unggah gambar

Saatnya untuk mulai menambahkan modul! Modul pertama yang kita perlukan adalah modul Gambar di kolom 1. Silakan dan unduh gambar persegi pilihan Anda.

unduh gambar divi.jpg

filter

Kemudian pergi ke pengaturan filter dan mainkan dengan efek yang berbeda.

  • Saturasi: 40%
  • Kontras: 126%

image configuration.jpg

Tambahkan modul tombol ke kolom 1

Tambahkan salinan

Modul kedua dan terakhir yang kita butuhkan di kolom 1 adalah modul tombol. Tambahkan salinan pilihan.

buat salinan image.jpg

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

pengaturan tombol divi.jpg

jarak

Juga tambahkan nilai spasi khusus.

  • Top Padding: 10px
  • Padding bawah: 10px
  • Padding kiri: 30px
  • Jok Kanan: 30px

inner padding configuration.jpg

Kotak bayangan

Dan akhiri dengan naungan kotak halus.

  • Box Shadow Blur Force: 80px
  • Warna warna: rgba (0,0,0,0,3)

konfigurasi bayangan divi.jpg

Tambahkan modul testimonial ke kolom 2

Tambahkan konten

Pada kolom kedua, satu-satunya modul yang akan kita butuhkan adalah modul testimonial. Tambahkan konten ke bidang yang berbeda dan area konten.

tambahkan testimonial module.jpg

Warna latar belakang

Kemudian tambahkan warna latar belakang yang sedikit transparan.

  • Warna latar belakang: rgba (255,255,255,0.96)

background image configuration.jpg

Pengaturan ikon testimonial

Juga ubah pengaturan ikon testimonial.

  • Warna ikon testimonial: # 0c0c0c
  • Warna latar belakang ikon testimonial: rgba (245,245,245,0)

konfigurasi bagian dari testimonial icon.jpg

Pengaturan teks tubuh

Kemudian ubah pengaturan teks isi.

  • Fon Tubuh: Verdana
  • Tinggi badan: 1.7em

modul parameter teks tubuh testimonial.jpg

jarak

Lanjutkan menambahkan margin khusus yang berbeda dan isi nilai dalam pengaturan spasi.

  • 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
  • Padding bawah: 70px
  • Padding kiri: 50px
  • Jok Kanan: 50px

mengatur konfigurasi divi module testimonial.jpg

Divi: Tema WordPress terbaik sepanjang masa!

lebih 554.000 unduhan, Divi adalah tema WordPress paling populer di dunia. Sudah lengkap, mudah digunakan dan dilengkapi dengan lebih dari 62 template gratis. [Direkomendasikan]

batas

Tambahkan juga batas kiri.

  • Lebar batas kiri: 7px
  • Warna batas kiri: # 5400ff

konfigurasi batas kiri divi.jpg

Kotak bayangan

Terakhir, tambahkan bayangan kotak halus untuk membentuk modul kesaksian.

  • Box Shadow Blur Force: 80px
  • Kekuatan penyebaran bayangan kotak: -10px
  • Warna warna: rgba (0,0,0,0,49)

modul konfigurasi bayangan testimonial.jpg

Kloning kedua modul dan tempatkan duplikat di kolom 3 dan 4

Setelah Anda selesai mengedit modul kolom 1 dan 2, Anda dapat mengkloning dan menempatkan duplikat di dua kolom yang tersisa.

klon dua modul divi.jpg

Ubah gambar

Jangan lupa untuk mengubah citra kesaksian kedua Anda.

edit gambar divi.jpg

Ubah latar belakang gradien

Juga mengubah latar belakang gradien tombol.

  • Warna 1: # ff001d
  • Warna 2: # 3700ff
  • Arah Gradien: 100deg

ubah latar belakang modul divi terdegradasi, testimonial.jpg

Ubah warna batas kesaksian

Dan kaitkan warna perbatasan dengan latar belakang gradien tombol baru.

  • Warna batas kiri: # ff001d

modul kesaksian divi

Buat Contoh # 2

contoh 2 pembuatan bagian testimonial.png

Tambahkan bagian baru

Mari kita pergi ke contoh kedua! Tambahkan bagian reguler baru ke halaman Anda.

pemilihan bagian baru divi.jpg

Tambahkan baris baru

Struktur kolom

Tanpa membuat perubahan apa pun pada bagian tersebut, tambahkan baris baru menggunakan struktur kolom berikut:

pilih tata letak untuk modul testimonial divi.jpg

perekat

Lanjutkan dengan membuka parameter garis dan mengubah parameter ukuran.

  • Jadikan garis ini lebar penuh: Ya
  • Gunakan lebar selokan khusus: Ya
  • Selokan lebar: 1

modul spasi testimonial divi.jpg

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)

kustomisasi garis margin divi.jpg

Tambahkan modul video ke kolom 1

Tautan video

Modul pertama yang kita butuhkan di kolom 1 adalah modul video. Tautkan video ini ke video testimonial Anda.

tambahkan modul video.jpg

Hamparan gambar

Tambahkan juga hamparan gambar.

untuk mengkonfigurasi overlay gambar di divi.jpg

Tambahkan modul testimonial ke kolom 1

Tambahkan konten

Modul kedua dan terakhir yang dibutuhkan di kolom 1 adalah modul testimonial. Mulailah dengan menambahkan rincian kesaksian.

tambahkan modul testimonial ke kolom 1.jpg

Nonaktifkan ikon testimonial

Kemudian, nonaktifkan ikon testimonial di pengaturan item.

  • Tampilkan ikon testimonial: Tidak

menonaktifkan klon di testimonial divi.jpg

Warna latar belakang

Tambahkan latar belakang putih.

  • Warna latar: #ffffff

atur color.jpg latar belakang

Pengaturan teks tubuh

Juga ubah pengaturan teks isi.

  • Teks berwarna badan: # 000000
  • Penspasian body letter: -0.5px
  • Tinggi badan: 1.7em

konfigurasikan warna modul font testimonial.jpg

Buat Toko Online Anda dengan mudah

Unduh WooCommerce gratis, plugin e-commerce terbaik untuk menjual produk fisik dan digital Anda di WordPress. [GRATIS]

jarak

Dan tambahkan margin khusus dan isi nilai dalam pengaturan spasi.

  • Margin bawah: 30px (tablet dan telepon)
  • Padding: 50px
  • Padding bawah: 50px
  • Padding kiri: 80px
  • Jok Kanan: 80px

konfigurasikan padding.jpg

batas

Kami juga memberikan sudut modul membulat di kiri bawah dan kanan '30px'.

rounded borders configuration.jpg

Kotak bayangan

Akhirnya, untuk memberikan kedalaman, kami memberikan modul Testimonial bayangan kotak halus.

  • Box Shadow Blur Force: 80px
  • Kekuatan penyebaran bayangan kotak: -10px
  • Warna warna: rgba (0,0,0,0,3)

pembuatan testimonial modul perbatasan divi.jpg

Kloning modul tiga kali dan letakkan duplikat di kolom lainnya

Setelah Anda selesai mengedit dua modul di kolom 1, clone mereka dua kali dan letakkan duplikat di dua kolom yang tersisa.

modul testimonial divi blogpascher.jpg

Edit tautan video, konten, dan overlay gambar

Ingatlah untuk mengubah tautan video, konten, dan gambar dari testimonial baru Anda.

ubah tautan video modul contoh testimonial 2.jpg

Buat Contoh # 3

buat contoh 3 modul divi testimonials.png

Tambahkan bagian baru

Mari kita pergi ke contoh ketiga! Tambahkan bagian reguler baru ke halaman Anda.

pemilihan bagian divi.jpg

Tambahkan baris baru

Struktur kolom

Lanjutkan menambahkan baris baru menggunakan struktur kolom berikut:

pilih tata letak kolom berlipat ganda.jpg

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

konfigurasi pengaturan garis divi.jpg

Kolom 2 Warna Latar Belakang

Kolom kedua akan membutuhkan latar belakang putih.

  • Kolom 2 Warna Latar Belakang: #ffffff

konfigurasi warna pada divi.jpg

perekat

Lalu pergi ke parameter ukuran dan hapus lebar selokan.

  • Gunakan lebar selokan khusus: Ya
  • Selokan lebar: 1

konfigurasi modul spacing testimonial divi misalnya 3.jpg

jarak

Tambahkan nilai spasi khusus selanjutnya.

  • 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

konfigurasi pengaturan jarak kolom pada divi.jpg

batas

Dan berikan masing-masing perbatasan '20px'.

konifgurasi perbatasan di divi.jpg

Kotak bayangan

Last but not least, beri garis Anda bayangan kotak.

  • Box Shadow Blur Force: 80px

modul testimonial contoh konfigurasi 3.jpg

Tambahkan modul testimonial ke kolom 1

Tambahkan konten

Saatnya untuk mulai menambahkan modul! Modul pertama yang kita butuhkan di kolom 1 adalah modul testimonial. Tambahkan konten.

tambahkan modul testimonial divi contoh 3.jpg

Unggah gambar

Lanjutkan dengan mengunggah gambar dalam pengaturan gambar.

unduh modul pembuat divi image testimonial.jpg

Nonaktifkan ikon testimonial

Kemudian, nonaktifkan ikon testimonial.

  • Tampilkan ikon testimonial: Tidak

menonaktifkan ikon testimonial divi contoh 3.jpg

Nonaktifkan warna latar belakang

Juga, matikan warna latar belakang.

  • Gunakan warna latar: Tidak

nonaktifkan background color.jpg

Pengaturan teks tubuh

Lanjutkan dengan membuka tab Desain dan membuat beberapa perubahan pada pengaturan teks tubuh.

  • Polisi Tubuh: Abril Fatface
  • Teks berwarna badan: # 000000
  • Ukuran teks isi: 20px

modul teks parameter tubuh testimonial divi.jpg

Tambahkan modul teks ke kolom 1

Tambahkan konten

Modul kedua yang kita butuhkan di kolom 1 adalah modul teks. Tambahkan salinan testimonial ke area konten.

tambahkan modul teks ke kolom 1 divi contoh 3.jpg

jarak

Lalu, buka tab Desain dan tambahkan margin atas dan bawah khusus.

  • Margin atas: 50px
  • Margin bawah: 50px

contoh kesaksian modul konfigurasi lokasi 3.jpg

Tambahkan modul gambar ke kolom 1

Unduh logo perusahaan

Modul ketiga dan terakhir yang kita butuhkan di kolom pertama adalah modul gambar. Anda dapat menggunakan modul ini untuk menambahkan logo dari masyarakat yang terkait dengan kesaksian.

modul kesaksian divi

Kloning semua modul dan tempat duplikat di kolom 2

Setelah selesai mengedit semua modul di kolom 1, Anda dapat menyalin dan menyalinnya. Setelah selesai, letakkan duplikat di kolom kedua.

modul kesaksian divi

Ubah gambar dan salinan kesaksian

Pastikan untuk mengubah konten kesaksian dengan gambar.

ubah ikon dan konten testimonial divi.jpg

akhirnya

Itu saja untuk tutorial ini, saya harap ini akan memungkinkan Anda untuk mengusulkan beberapa varian

Tinggalkan komentar

Alamat email Anda tidak akan dipublikasikan. Bidang yang harus diisi ditandai *

Situs ini menggunakan Akismet untuk mengurangi yang tidak diinginkan. Pelajari lebih lanjut tentang bagaimana data komentar Anda digunakan.

Kembali ke atas
2 saham
saham2
menciak
Register
Ada apa