Apakah Anda ingin memasukkan slider testimonial ringkas untuk header Divi?
Menambahkan testimonial ke situs Anda adalah cara yang efektif untuk membangun kredibilitas bisnis Anda (atau merek Anda) dan membangun kepercayaan dengan pengguna. pengunjung.
Slider testimonial adalah alat yang berguna untuk menampilkan testimonial di satu tempat. Dengan mengingat hal itu, masuk akal untuk menambahkan penggeser testimonial yang ringkas ke tajuk Anda sehingga testimonial ini adalah salah satu hal pertama yang dilihat pengguna ketika mereka mengunjungi situs Anda. situs web.
Dalam tutorial ini, kami akan menunjukkan cara membuat slider testimonial ringkas untuk menampilkan testimonial singkat di header situs jaringan.
Untuk melakukan ini, kita akan memodifikasi Modul Divi Slider dengan cara yang menyenangkan dan unik.
Ayo mulai!
Tetapi sebelum Anda dapat menemukan panduan kami di Divi, Tema WordPress Terbaik di Dunia dan Paling Mudah Digunakan
penelitian
Berikut adalah slider testimonial ringkas yang akan kita buat menggunakan modul Slider Divi.
Dan inilah penggeser testimonial yang sama yang ditambahkan ke tajuk global.
Dan inilah tampilannya di ponsel.
Buat halaman baru dengan Divi Builder
Untuk memulai, Anda perlu melakukan hal berikut:
Dari dasbor WordPress, buka Halaman> Tambah Baru untuk membuat halaman baru.
Berikan judul yang masuk akal bagi Anda dan klik Gunakan Divi Builder
kemudian klik Mulai Membangun (Bangun Dari Awal)
Setelah itu, Anda akan memiliki kanvas kosong untuk mulai mendesain di Divi.
Cara Membuat Slider Testimonial Ringkas di Divi
Tambahkan Modul Baris dan Slider Baru
Untuk memulai, tambahkan baris satu kolom ke bagian.
Kemudian tambahkan modul Slider ke baris.
Edit slide
Di bawah pengaturan slider, hapus slide kedua default di bawah tab Konten, lalu klik untuk mengubah pengaturan slide yang tersisa.
Konten slide
Di bawah tab Konten dari pengaturan slide, perbarui yang berikut ini:
- Judul: “Donec solicitudin molestie malesuada. Vivamus suscipit tortor eget.
- Tombol: Baca Semua
- Tubuh: — Tatiana Gagelman
Setelah selesai, simpan pengaturan slide.
Baca juga: Divi: Cara Menggunakan Pengaturan Topeng Latar Belakang dan Opsi Transformasi Pola
Perbarui pengaturan penggeser
Gandakan slide dan sembunyikan kontrol
Setelah memperbarui slide pertama dengan isi, duplikat slide ini untuk membuat satu atau beberapa slide tambahan.
Kemudian di bawah grup opsi Elemen, sembunyikan kontrol penggeser dengan memperbarui yang berikut ini:
- Tampilkan Kontrol: TIDAK
Perbarui latar belakang semua slide
Selanjutnya, kita akan menambahkan latar belakang yang akan digunakan untuk semua slide.
Untuk menambahkan latar belakang, perbarui yang berikut ini:
- Gradien Latar Belakang:
- Gradien Berhenti 0%: #000000
- Gradien Berhenti 100%: #000000
- Gambar latar belakang:
- Ukuran: Cocok
- Posisi: Kiri Tengah
- Campuran: Luminositas
Pengaturan penggeser
Di bawah tab Mendesain, perbarui berikut ini:
penutup
- Gunakan Hamparan Latar Belakang: YA
- Warna Hamparan Latar Belakang: rgba(0,0,0,0.7)
Teks judul
- Judul:
- Tingkat Pos: H4
- Font: Josefin Sans
- Berat Font: Sedang
- Perataan Teks: kiri
- Ukuran Teks: 16px (Desktop dan Tablet), 14px (Telepon)
- Tinggi Garis: 1,5em
Tubuh teks
- Tubuh :
- Font: Josefin Sans
- Perataan Teks: kiri
- Warna Teks: #aaaaaa
- Spasi Huruf: 0,05em
tombol
- Gunakan Ukuran Khusus Untuk Tombol: YA
- Tombol:
- Ukuran Teks: 1em
- Warna Teks: Default (Desktop), #000 (Hover)
- Warna Latar Belakang (Desktop): rgba(255,255,255,0.19)
- Warna Latar Belakang (Hover): #ffffff
- Lebar Perbatasan: 0 piksel
- Spasi Huruf: 0,05em
- Font: Josefin Sans
- Margin: 0px (Atas dan Bawah)
- Padding: 0px (Atas dan Bawah), 0,6em (Kiri dan Kanan)
Isi otomatis dan animasi
Selanjutnya, perbarui jarak penggeser menjadi ringkas dan atur kecepatan animasi otomatis yang diinginkan.
- Margin: 0px (Atas dan Bawah)
- Padding: 1em (Atas dan Bawah), 5% (Kiri dan Kanan)
- Animasi Otomatis: AKTIF
- Kecepatan Animasi Otomatis: 3500
CSS khusus
Di bawah tab Advanced, tambahkan CSS khusus berikut untuk memperbarui gaya setiap elemen penggeser (judul, tombol, dan panah)
Judul slide
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;Ini akan memastikan bahwa judul slide tidak akan membuat jeda baris pada layar yang lebih kecil.
Tombol geser
position:absolute;
bottom: 1em;
right: 6%;Ini memberi tombol posisi mutlak sehingga berada jauh di bawah judul dan di sebelah kanan slide, membuat penggeser lebih ringkas.
Tarik panah
font-size: 30px;
margin-top: -15px;Itu hanya membuat panah navigasi slider lebih kecil untuk mengakomodasi ukuran slider yang ringkas.
Tip: Tambahkan warna latar belakang yang sama ke kolom untuk transisi slide yang lebih mulus
Untuk melakukan ini, buka pengaturan kolom induk penggeser dan tambahkan warna latar belakang berikut:
- Latar belakang: #000000
Menambahkan gambar latar belakang penulis ke slide
Jika Anda ingin menyertakan gambar latar belakang penulis untuk slide, Anda dapat melakukannya dengan menambahkan gambar latar belakang ke setiap slide.
Setelah Anda menambahkan gambar latar belakang ke slide, gambar latar belakang akan mewarisi gaya yang sudah ada di bawah pengaturan slider (bukan slide).
Hasil
Lihat hasil akhirnya.
Menambahkan penggeser testimonial ringkas ke templat tajuk
Simpan modul di perpustakaan Divi
Sebelum kita dapat menambahkan slider testimonial ringkas ke header global, pertama-tama kita harus mendaftarkan modul di perpustakaan Divi.
Anda dapat melakukannya dengan mengarahkan kursor ke modul Slider dan mengklik tombol " Tambahkan ke Perpustakaan“. Kemudian beri nama untuk tata letak dan klik tombol " Simpan ke Perpustakaan".
Menambahkan tata letak modul testimonial yang ringkas ke templat tajuk
Edit Tajuk Khusus
Setelah modul slider testimonial baru telah disimpan ke perpustakaan, kami siap untuk menambahkannya ke header kustom.
Akses ke Divi > Pembuat Tema, lalu klik ikon yang memungkinkan Anda untuk mengubah " Header Kustom".
Masukkan modul slider testimonial yang disimpan dari perpustakaan
Di editor tata letak tajuk, klik untuk menambahkan modul penggeser testimonial ringkas tempat Anda ingin menampilkannya.
Dalam mode “SisipkanModul”, pilih tab “Tambahkan Dari Perpustakaan”. Temukan slider testimonial ringkas yang Anda simpan sebelumnya di perpustakaan dan pilih.
Setelah dimuat, simpan perubahannya.
Lihat juga: Divi: Cara menampilkan modul Fullwidth Header di layar penuh
Hasil akhir
Di bawah ini adalah bilah geser testimonial yang ditambahkan ke tajuk global.
Di sini kami memiliki slider testimonial tanpa gambar latar belakang penulis.
Dan inilah tampilannya di ponsel.
Unduh DIVI sekarang!!!
Kesimpulan
Slider testimonial yang ringkas dapat menjadi tambahan baru pada header apa pun situs jaringan berupaya meningkatkan kredibilitas layanannya di tempat yang paling terlihat di situs webnya.
Anda juga dapat menggunakannya untuk mengarahkan ulang pengunjung ke halaman testimonial atau halaman penjualan untuk meningkatkan konversi. Kami harap ini bermanfaat bagi Anda dalam proyek Divi 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.
...
