Unduh Tata Letak Testimonial Gerak GRATIS untuk Divi

Bukan rahasia lagi bahwa testimonial adalah bagian penting dari banyak bisnis di luar sana dan situs web mereka. Mereka menambahkan rasa kredibilitas ke layanan yang Anda berikan atau produk yang Anda tawarkan. Membayar perhatian khusus pada cara Anda menampilkan testimonial Anda sering terbayar. Dengan Divi, ada banyak cara untuk menata bagian testimonial Anda, bahkan ada Modul Testimonial yang didedikasikan untuk itu. Namun, jika Anda mencari cara unik untuk menambahkan interaksi ke testimonial Anda, Anda akan menyukai posting ini. Kami membagikan tata letak testimonial gerakan kustom yang indah yang dibuat dengan efek gulir baru Divi. Kami juga akan membuat ulang desain langkah demi langkah!

Mari kita lakukan.

Pratinjau

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

Desktop

Seluler

Unduh Tata Letak Testimoni Gerak GRATIS

Untuk mendapatkan tata letak testimonial gerak bebas, Anda harus mengunduhnya terlebih dahulu menggunakan tombol di bawah ini. 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 yang sedang Anda kerjakan. Buka pengaturan bagian dan ubah warna latar belakang menjadi hitam.

• Warna Latar Belakang: #000000

Jarak

Pindah ke tab desain bagian dan tambahkan beberapa bantalan atas dan bawah khusus di berbagai ukuran layar.

• Padding Atas: 10% (Desktop), 20% (Tablet), 30% (Ponsel)
• Padding Bawah: 10% (Desktop), 20% (Tablet), 30% (Ponsel)

Tambahkan Baris #1

Struktur Kolom

Lanjutkan dengan menambahkan baris pertama menggunakan struktur kolom berikut:

Tambahkan Modul Teks ke Kolom

Tambahkan Konten H2

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

Pengaturan Teks H2

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

• Judul 2 Font: Pertanyaan
• Judul 2 Perataan Teks: Tengah
• Judul 2 Ukuran Teks: 85px (Desktop), 45px (Tablet), 35px (Telepon)
• Spasi Judul 2 Huruf: 2px
• Pos 2 Tinggi Baris: 1.1em

Tambahkan Modul Pembagi ke Kolom

Visibilitas

Kemudian, tambahkan Modul Pembagi tepat di bawah Modul Teks dan pastikan opsi 'Tampilkan Pembagi' diaktifkan.

• Tampilkan Pembagi: Ya

Pengaturan Jalur

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

• Warna Garis: #161616
• Gaya Garis: Padat
• Posisi Garis: Atas

Perekat

Ubah juga pengaturan ukuran.

• Berat Pembagi: 14px
• Lebar: 13% (Desktop), 20% (Tablet), 30% (Ponsel)
• Penyelarasan Modul: Pusat

Tambahkan Baris #2

Struktur Kolom

Ke baris berikutnya! Baris ini akan didedikasikan untuk testimonial pertama kami. Gunakan struktur kolom berikut:

Gambar Latar Belakang Desktop

Kemudian, unggah gambar latar belakang desktop biru yang dapat Anda temukan di folder unduhan yang dapat Anda unduh di awal posting ini.

• Ukuran Gambar Latar Belakang: Sesuai
• Posisi gambar latar belakang: Tengah

Gambar Latar Belakang Tablet & Ponsel

Kami menggunakan versi gambar latar belakang biru yang diputar pada ukuran layar yang lebih kecil. Anda dapat menemukan gambar latar belakang ini di folder unduhan juga.

• Ukuran Gambar Latar Belakang: Sesuai
• Posisi Gambar Latar Belakang: Tengah

Perekat

Pindah ke tab desain baris dan ubah lebar maksimal dalam pengaturan ukuran.

• Lebar Maks: 2000px

Jarak

Buat beberapa perubahan pada pengaturan spasi juga.

• Margin Atas: 100px
• Padding Atas: 15%
• Padding Bawah: 15%

Efek Gulir Gerak Horisontal

Lalu, buka tab lanjutan dan aktifkan beberapa gerakan horizontal di efek gulir.

• Aktifkan Gerakan Horizontal: Ya
• Mulai Offset: -4
• Offset Tengah: 0 (pada 50%)
• Offset Akhir: 0
• Pemicu Efek Gerak: Elemen Atas

Efek Gulir Memudar dan Keluar

Kami akan menambahkan efek gulir masuk dan keluar khusus juga.

• Aktifkan Fading In and Out: Ya
• Mulai Opacity: 0% (pada 19%)
• Mid Opacity: 100% (dari 25% menjadi 88%)
• Opacity Akhir: 0% (pada 93%)
• Efek Pemicu Gerak: Elemen Atas

Tambahkan Modul Teks ke Kolom

Tambah isi

Modul pertama yang kita butuhkan di baris ini adalah Modul Teks. Tempatkan konten testimonial di kotak konten.

Pengaturan Teks

Pindah ke tab desain dan ubah pengaturan teks yang sesuai:

• Font Teks: Pertanyaan
• Berat Font Teks: Tebal
• Warna Teks: #ffffff
• Ukuran Teks: 50px (Desktop), 30px (Tablet), 25px (Ponsel)
• Tinggi Baris Teks: 1.5em
• Perataan Teks: Tengah

Perekat

Kemudian, ubah lebar di berbagai ukuran layar di tab desain.

• Lebar: 63% (Desktop), 100% (Tablet & Ponsel)
• Penyelarasan Modul: Pusat

Tambahkan Modul Orang ke Kolom

Tambah isi

Ke modul berikutnya, yaitu Modul Person. Tambahkan nama, posisi, dan tautan media sosial.

Unggah Gambar

Unggah gambar persegi pilihan Anda selanjutnya.

Pengaturan Ikon

Pindah ke tab desain dan ubah warna ikon di pengaturan ikon.

• Warna Ikon: #2b302e

Gambar

Ubah gambar menjadi lingkaran dengan menambahkan beberapa sudut membulat.

• Semua Sudut: 100px

Pengaturan Teks Judul

Kemudian, ubah pengaturan teks judul sebagai berikut:

• Judul Font: Pertanyaan
• Judul Font Berat: Tebal
• Warna Teks Judul: #ffffff
• Ukuran Teks Judul: 24px

Pengaturan Teks Tubuh

Buat beberapa perubahan pada pengaturan teks isi juga.

• Font Tubuh: Pertanyaan
• Warna Teks Tubuh: #ffffff
• Ukuran Teks Tubuh: 15px

Pengaturan Teks Posisi

Kami juga memodifikasi pengaturan teks posisi.

• Font Posisi: Pertanyaan
• Warna Teks Posisi: #1b66ff
• Posisi Ukuran Teks: 17px

Perekat

Seiring dengan lebar di berbagai ukuran layar.

• Lebar: 25% (Desktop), 100% (Tablet & Ponsel)
• Penyelarasan Modul: Pusat

Jarak

Arahkan ke pengaturan spasi berikutnya dan tambahkan beberapa margin atas.

• Margin Atas: 100px

Elemen Utama

Untuk memastikan semua konten selaras di Modul Person kami, kami akan pergi ke tab lanjutan dan menambahkan dua baris kode CSS ke elemen utama modul.

display: flex;
align-items: center;

Gambar Anggota

Kami akan menggunakan beberapa lebar khusus untuk elemen gambar anggota pada ukuran layar yang lebih kecil juga.

Tablet:

width: 20% !important;

Telepon:

width: 30% !important;
margin-right: 5%;

Baris Klon #2

Setelah Anda menyelesaikan baris yang berisi testimonial, Anda dapat mengkloning seluruh baris satu kali.

Ubah Gambar Latar Baris

Kita perlu membuat beberapa perubahan pada baris duplikat ini, dimulai dengan gambar latar belakang di desktop dan ukuran layar yang lebih kecil. Anda dapat menemukan versi merah dari gambar latar belakang di folder unduhan.

Ubah Spasi Baris

Tambahkan beberapa margin atas negatif ke baris berikutnya.

• Margin Atas: -15%

Ubah Warna Teks Posisi Modul Orang

Dan selesaikan pengaturan baris duplikat dengan mengubah warna teks posisi di pengaturan Modul Orang.

• Warna Teks Posisi: #ff233e

Klon Baris Terakhir

Setelah Anda menyelesaikan baris testimonial duplikat, Anda dapat mengkloningnya.

Ubah Gambar Latar Baris

Ubah gambar latar belakang baris menggunakan versi kuning yang dapat Anda temukan di folder unduhan.

Ubah Warna Teks Posisi Modul Orang

Ubah warna teks posisi dalam pengaturan Modul Orang juga dan selesai!

• Warna Teks Posisi: #ffbc1b

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 membagikan tata letak testimonial gerakan yang indah yang dapat Anda unduh secara gratis! Kami telah menggunakan latar belakang khusus dan dapat menyorot setiap kesaksian dengan efek gulir Divi. Kami juga telah membuat ulang desainnya, selangkah demi selangkah! 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.