Apakah Anda ingin membuat bagian Testimonial dalam bentuk kotak? di halaman web Anda dengan modul Testimonial dari Divi ?
Tata letak kotak ideal untuk isi yang harus tetap dijaga bersama. Testimonial adalah contoh yang bagus untuk ini. Di dalam Divi, testimonial dibuat dengan modul baru untuk setiap testimonial. Tapi untungnya, menampilkannya dalam kotak itu sederhana.
Pada artikel ini, kita akan melihat bagaimana mengatur testimonial dalam bentuk grid dengan modul Testimoni de Divi. Kami akan melihat dua tata letak berbeda, sehingga Anda dapat memilih salah satu yang paling sesuai dengan kebutuhan Anda.
Mari kita mulai!
penelitian
Berikut adalah ikhtisar tentang apa yang akan kita lakukan dalam tutorial ini.
Tata Letak Kotak
Pengaturan alternatif
Desain tata letak pertama dengan Divi
Kami akan menunjukkan detail dari kedua tata letak, tetapi tata letak kedua akan menggunakan modul dari yang pertama.
Buat garis
Pertama, buat baris baru dan pilih a tata letak 3 kolom.
Kemudian buka parameter garis dengan mengklik ikon roda giginya.
Pilih tab Mendesain dan aktifkan Gunakan Talang Kustom Witdh dan atur ke 1.
- Gunakan Lebar Talang Kustom: Ya
- Lebar Talang: 1
Kemudian gulir ke bawah ke Jarak dan ubah pengaturan spasi sebagai berikut. Tutup baris. Kita akan membuat baris kedua, tetapi kita akan menyelesaikan baris ini terlebih dahulu dan kemudian mengkloningnya.
- Padding (Atas dan Bawah): 0px
Tambahkan modul "Kesaksian"
Kemudian tambahkan modul testimoni di kolom kiri.
Pengaturan konten modul
Kemudian tambahkan isi dari kesaksian tersebut. Ini termasuk nama penulis, jabatan, nama perusahaan, isi jenazah dan foto orang yang memberikan kesaksian.
- Pengarang : nama pengarang
- Judul Pekerjaan: Posisi yang dipegang di perusahaan
- Perusahaan: nama perusahaan
- Isi Tubuh: testimonial
- Gambar: gambar yang dipilih
Parameter desain modul
Kemudian pilih tab Mendesain.
Ikon Kutipan
Ubah pengaturan ikon. Warna ikon juga akan digunakan untuk nama orang tersebut. Ini akan sama untuk semua modul.
- Warna Ikon Kutipan: #fd335a
- Warna Latar Ikon Kutipan: #ffffff
Gambar
Kemudian gulir ke bawah ke Gambar dan ubah pengaturan berikut:
- Lebar Batas Gambar: 4 piksel
- Warna Batas Gambar: #000645
Teks Tubuh
Kemudian gulir ke bawah ke teks tubuh dan ubah fontnya
- Font Tubuh: Roboto Mono
Teks Penulis
Kemudian gulir ke bawah ke Teks Penulis.
- Font Penulis : Oswald
- Berat Huruf: Semi Tebal
- Gaya Huruf: TT
- Warna Teks: #fd335a
Teks Posisi
Kemudian gulir ke bawah ke Teks Posisi (judul pekerjaan) dan mengubah font.
- Font Posisi: Roboto Mono
Teks Perusahaan
Kemudian gulir ke bawah ke Teks Perusahaan dan mengubah font juga.
- Font Perusahaan: Roboto Mono
Batas
Terakhir, gulir ke bawah ke Batas dan ubah perbatasan sebagai berikut:
- Lebar Perbatasan: 24px
- Warna Perbatasan: #000645
Duplikat modul Testimonial
layanan, duplikat modul dua kali dan seret dua modul kloning ke kolom lain di baris.
Sesuaikan modul Testimonial kedua
Buka mereka pengaturan modul Testimonial kedua dan memodifikasi konten.
Gambar
Kemudian pilih tab Desing dan gulir ke Gambar. Ubah warna perbatasan.
- Warna Batas Gambar: #acf8f5
Batas
Terakhir, gulir ke bawah ke Batas dan mengubah warna.
- Warna Batas: #acf8f5
Sesuaikan Modul Kesaksian Ketiga
Buka mereka pengaturan modul Testimonial ketiga dan mengedit konten.
Gambar
Lalu pergi ke tab Mendesain, gulir ke Gambar dan mengubah warna perbatasan.
- Warna Batas Gambar: #fccaa0
Batas
Terakhir, gulir ke bawah ke Batas dan ubah warna border agar sesuai dengan Image Border. Tutup pengaturan modul.
- Warna Batas: #fccaa0
Garis duplikat
layanan, duplikat baris dengan mengklik opsi duplikat yang muncul saat Anda mengarahkan kursor ke garis. Karena kita menambahkan 0px ke padding atas dan bawah, baris baru ini secara otomatis menyentuh garis di atasnya. Kami akan membuka setiap modul di bagian kedua untuk mengubah konten dan warnanya.
Sesuaikan modul Testimonial keempat
Buka mereka pengaturan modul Testimonial kedua dan memodifikasi konten.
Gambar
Kemudian gulir ke bawah ke Gambar dan ubah warna batas menjadi #6eea9d.
- Warna Batas Gambar: #6eea9d
Perbatasan
Terakhir, gulir ke bawah ke Batas dan ubah warna border menjadi #6eea9d agar sesuai dengan Border gambar. Tutup pengaturan modul.
- Warna Perbatasan: #6eea9d
Sesuaikan modul Testimonial kelima
Buka mereka pengaturan modul Testimonial kelima dan memodifikasi isinya.
Gambar
Kemudian gulir ke bawah ke Gambar dan ubah warna tepi menjadi #fff67f.
- Warna Batas Gambar: #fff67f
Batas
Terakhir, gulir ke bawah ke Batas dan ubah warna border agar sesuai dengan Image Border. Tutup pengaturan modul.
- Warna Batas: #fff67f
Sesuaikan Modul Kesaksian Keenam
Terakhir, buka pengaturan dari modul Kesaksian keenam dan mengganti isinya.
Gambar
Kemudian gulir ke bawah ke Gambar dan ubah warna tepi menjadi #593a94.
- Warna Gambar Perbatasan: #593a94
Batas
Terakhir, gulir ke bawah ke Batas dan ubah warnanya agar sesuai dengan Perbatasan gambar. Tutup pengaturan modul.
- Warna Perbatasan: #593a94
Hasil
Inilah hasil yang kita miliki sejauh ini.
Desain tata letak kedua dengan Divi
Kotak testimonial yang kami buat berfungsi dengan baik jika ukuran testimonialnya kira-kira sama.
Bagaimana jika Anda memiliki testimonial pendek dan panjang? Untuk ini, kisi dengan ukuran berbeda untuk kolom sangat ideal. Kita bisa menempatkan testimonial dengan informasi terbanyak di kolom besar.
Untuk contoh ini. kami akan membuat kolom baru dengan pengaturan spasi yang sama dan menggunakan testimonial yang sama seperti sebelumnya, tetapi dengan jumlah teks yang bervariasi.
Buat garis alternatif
pertama, tambahkan satu baris ke 2 kolom dengan kolom 1/3 ke kiri dan kolom 2/3 di sebelah kanan.
Kemudian buka pengaturan baris, buka tab Mendesain, gulir ke Perekat dan pilih Gunakan Lebar Talang Kustom. Ubah lebar talang menjadi 1.
- Gunakan Lebar Talang Kustom: YA
- Lebar Talang: 1
Kemudian gulir ke bawah ke Jarak.
- Padding (Atas dan Bawah): 0px
kemudian, duplikat garis.
Pilih opsi tata letak baris kedua dan pilih tata letak dengan sisa 2/3 et 1/3 kanan.
Tambahkan empat modul Testimonial
Anyway, buat atau seret modul Testimonial Anda ke garis. Kami menggunakan modul yang sama seperti pada contoh sebelumnya, tetapi konten telah dimodifikasi untuk membuat ukuran yang berbeda.
Modul beradaptasi dengan lebar kolomnya seperti pada contoh sebelumnya, tetapi masing-masing memiliki ketinggian yang berbeda karena konten tubuhnya. Ini menciptakan jarak yang canggung di grid. Untungnya, mudah untuk memperbaikinya.
Buka pengaturan modul pertama dan buka tab Mendesain. Gulir ke Perekat dan masukkan 100% untuk "Tinggi".
Ulangi ini untuk setiap modul .
- Tinggi: 100%
Hasil akhir
Tata Letak Kotak
Berikut adalah tampilan tata letak grid kami. Ini berfungsi dengan baik jika testimonial memiliki ukuran yang sama.
Pengaturan alternatif
Berikut adalah tata letak alternatif. Ini sangat ideal untuk testimonial dengan berbagai ukuran.
Unduh DIVI Sekarang!!!
Kesimpulan
Ini adalah tampilan kami tentang cara membuat bagian testimonial dalam format kotak dengan modul Testimoni dari Divi. Pengaturan baris dan modul Divi bekerja sama dengan sempurna untuk membuat kisi dari beberapa baris dan kolom.
Contoh yang kami tunjukkan di sini dapat dengan mudah diperluas untuk membuat kisi yang lebih besar. Konsep juga bekerja dengan jenis modul Divi lainnya.
Kami harap tutorial ini akan menginspirasi Anda untuk proyek Divi Anda berikutnya. Jika Anda memiliki masalah atau saran, temukan kami di bagian komentar untuk mendiskusikannya.
Anda juga dapat berkonsultasi sumber daya kita, jika Anda membutuhkan lebih banyak elemen untuk melaksanakan proyek pembuatan situs Internet Anda.
Jangan ragu untuk juga berkonsultasi dengan panduan kami di Pembuatan blog WordPress atau yang di Divi: tema WordPress terbaik sepanjang masa.
Namun sementara itu, bagikan artikel ini di berbagai jejaring sosial Anda.
...
