Cara Menyesuaikan Slider Divi Anda untuk Mengubah Elemen Tertentu dengan Setiap Slide

Kita semua tahu bahwa penggeser sangat bagus untuk memaksimalkan bagian paruh atas situs web Anda. Mereka itu hebat! Pengguna disambut dengan beberapa CTA dan fitur penting yang meluncur ke tampilan tanpa harus menggulir halaman ke bawah. Namun, terkadang terlalu banyak perubahan dalam desain dan konten dari slide ke slide dapat mengalihkan perhatian atau membuat pengunjung kewalahan. Itu sebabnya dalam tutorial ini, saya akan menunjukkan kepada Anda bagaimana menyesuaikan slider Divi Anda untuk mengubah hanya elemen tertentu dengan setiap transisi slide. Ini memungkinkan Anda untuk menjaga konten inti dan komponen desain slider Anda tetap konsisten saat Anda hanya mengubah elemen tertentu (seperti satu kata atau tombol) dengan setiap slide. Pengunjung akan dapat dengan mudah memproses perubahan dan memahami dengan jelas ajakan bertindak Anda.

Mari selami!

Divi Slider Sneak Peek

Simak sekilas desain dan fungsionalitas slider Divi yang akan kita buat dalam tutorial hari ini.

Perhatikan bagaimana ini hanya mengubah satu kata dalam teks isi pada setiap slide.

Perhatikan bagaimana dengan contoh ini, kata teks isi dan warna tombol dan titik berubah dengan setiap slide.

Konsep Dasar Dijelaskan

Secara default, penggeser Divi akan menganimasikan teks deskripsi dengan setiap transisi ke slide baru yang memudar dan sedikit memindahkan konten ke atas ke tempatnya.

Namun, dengan satu baris CSS kustom sederhana, kita dapat menonaktifkan animasi teks ke atas. Dan, jika kita menduplikasi slide, menghilangkan latar belakang, dan hanya mengubah satu elemen (seperti satu kata dalam teks isi), Anda hanya akan melihat satu kata berubah pada setiap slide.

Anda dapat menggunakan konsep ini untuk mengubah hanya teks, tombol, atau warna tertentu tertentu sambil menjaga elemen desain lainnya tetap bermain dengan setiap slide.

Mulai

Berlangganan Saluran Youtube Kami

Untuk tutorial ini, yang Anda perlukan hanyalah Tema Divi yang terinstal dan aktif. Kami akan membangun slider Divi kami dari awal menggunakan pembangun Divi di ujung depan.

Untuk memulai, buat halaman baru dan beri judul pada halaman Anda. Kemudian klik untuk menggunakan Divi Builder dan pilih opsi "Build from Scratch". Kemudian klik tombol “Build on the Front End”.

Sekarang Anda siap untuk memulai dengan desain.

Menyiapkan Konten Slider Divi

Untuk contoh ini, saya akan menggunakan modul slider fullwidth, tetapi tutorial ini juga berlaku untuk modul slider biasa. Mari kita mulai dengan menambahkan bagian lebar penuh dengan modul penggeser lebar penuh ke halaman Anda.

Agar kita dapat melihat perubahan konten pada slider kita, mari kita tambahkan sementara warna background gelap ke bagian fullwidth terlebih dahulu. Buka pengaturan bagian dan beri warna latar belakang hitam (#222222).

Anda belum dapat melihat ini karena warna latar belakang penggeser default menutupinya. Kami akan melingkari kembali untuk menyelesaikan desain latar belakang bagian nanti di tutorial.

Sekarang mari masuk ke pengaturan Fullwidth Slider dan hapus salah satu slide default, hanya menyisakan satu. Kemudian buka pengaturan slide.

Perbarui pengaturan slide sebagai berikut:

Judul: “Situs web yang memberi Anda lebih banyak…”
Teks Tombol: “Mulai”

Di bawah Konten tambahkan html berikut:

Business<span style="color: #EE164D;">.</span>

(Ini menambahkan warna khusus ke titik (atau titik) setelah kata.)

Warna Latar Belakang: rgba(255,255,255,0)

Simpan Pengaturan.

Sekarang duplikat slide dua kali sehingga Anda memiliki total tiga slide.

Buka pengaturan slide kedua. Di bawah Konten, ganti hanya kata "Bisnis" dengan "Uang" dengan menjaga sisa html, judul, dan teks tombol tetap sama. Kami hanya ingin mengubah satu kata ini di setiap slide. Kemudian simpan pengaturan.

Kemudian buka pengaturan slide ketiga. Di bawah Konten, ganti kata "Bisnis" dengan "Sukses" dan simpan pengaturan.

Semua selesai! Itu menangani konten slider kami.

Mengoptimalkan Animasi Teks Deskripsi

Setelah konten slider kami di tempat, kami perlu menonaktifkan animasi kami sehingga teks kami tidak melompat-lompat dengan setiap slide. Untuk melakukan ini, buka pengaturan slider lebar penuh dan tambahkan CSS khusus berikut di bawah Deskripsi Slide:

animation-name: none;

Untuk contoh ini, masuk akal untuk membuat animasi slider kami otomatis dan meningkatkan kecepatan animasi sehingga pengguna dapat melihat perubahan kata di setiap slide lebih cepat. Untuk melakukannya, buka tab desain dan perbarui yang berikut ini:

Animasi Otomatis: AKTIF
Kecepatan Animasi Otomatis (dalam md): 3000

Sekarang lihat hasilnya sejauh ini. Anda seharusnya hanya melihat satu kata dalam konten setiap perubahan slider tanpa animasi ke atas.

Mendesain Slider

Dengan konten dan fungsionalitas kami, kami dapat mulai menata slider kami dengan desain elegan yang indah.

Buka pengaturan slider lebar penuh dan perbarui yang berikut:

Orientasi Teks: kiri
Judul Font: Lato
Judul Font Berat: Ringan
Ukuran Teks Judul: 32px
Judul Teks Bayangan: lihat tangkapan layar
Judul Teks Shadow Blur Strength: 0em (ini pada dasarnya menghilangkan bayangan teks default)

Font Tubuh: Lato
Ukuran Teks Tubuh: 5vw (desktop), 50px (tablet), 40px (smartphone)
Tinggi Garis Tubuh: 1.6em
Bayangan Teks Tubuh: lihat tangkapan layar
Body Text Shadow Blur Strength: 0em (ini pada dasarnya menghilangkan bayangan teks default)

Ukuran Teks Tombol: 16px
Warna latar belakang tombol: #ee164d
Lebar batas tombol: 8px
Warna batas tombol: #ee164d
Radius Perbatasan Tombol: 0px
Jarak Huruf Tombol: 1px
Font Tombol: Lato
Penjajaran Tombol: kanan

Lebar: 70% (desktop), 100% (tablet), 100% (ponsel pintar)
Penyelarasan Modul: tengah

Padding Kustom (desktop): 19vw atas, 8vw bawah
Padding Kustom (tablet): 19vw atas, 4vw bawah. 0px kiri, 0px kanan
Padding Kustom (ponsel cerdas): 30vw atas, 4vw bawah, 0px kiri, 0px kanan

Bayangan Kotak: lihat tangkapan layar
Posisi Horizontal Bayangan Kotak: -190px
Posisi Vertikal Bayangan Kotak: 60px
Warna Bayangan Kotak: rgba (0,16,17,0.7)

Dan untuk satu langkah terakhir, mari kita nonaktifkan elemen slider kita sehingga kita tidak melihat panah atau kontrol slider.

Itu menangani desain slider Divi kami!

Menyesuaikan Gaya Bagian

Sisa desain akan ditambahkan ke bagian kami, termasuk gambar latar belakang kami yang akan berfungsi sebagai latar belakang statis untuk semua slide kami. Menambahkan gambar latar belakang ke bagian lebih baik untuk penggunaan ini karena Anda tidak akan melihat sedikit transisi dari satu gambar ke gambar lain seperti yang Anda lakukan jika Anda menambahkan gambar latar ke modul slider Anda.

Buka pengaturan bagian dan perbarui yang berikut:

Gambar Latar Belakang: [masukkan gambar sekitar 1920px kali 800px]
Warna Kiri Gradien Latar Belakang: rgba (0,16,17,0.45)
Warna kanan gradien latar belakang: rgba (0,16,17,0.92)
Posisi Awal: 34%
Posisi Akhir: 0%
Tempatkan Gradien Di Atas Gambar Latar Belakang: YA

Selanjutnya, beri bagian Anda batas kanan sebagai berikut:

Lebar Perbatasan Kanan: 5vw
Warna Batas Kanan: #001011

Dan terakhir, beri Anda bagian bayangan kotak untuk membantu menyeimbangkan kerangka desain.

Bayangan Kotak: lihat tangkapan layar
Posisi Horizontal Bayangan Kotak: -200px
Posisi Vertikal Bayangan Kotak: -150px
Warna Bayangan Kotak: rgba (0,16,17,0.74)

Itu dia!

Desain Akhir Slider Divi

Berikut adalah desain akhir dari slider Divi kustom.

Dan inilah fungsi dari slide. Perhatikan bagaimana hanya satu kata yang berubah dengan setiap slide.

Desain Akhir di Seluler

Tablet

Smartphone

Bereksperimenlah dengan Mengubah Elemen Lain

Anda dapat bereksperimen dengan mengubah elemen lain dengan setiap slide untuk desain dan fungsionalitas yang lebih kreatif. Misalnya, Anda dapat memberi setiap tombol slide Anda warna yang berbeda dengan setiap slide serta mencocokkan warna periode dengan warna tombol baru di setiap slide.

Inilah yang akan terlihat seperti.

Anda bahkan dapat menjelajahi perubahan pada warna bayangan kotak slide atau elemen desain lainnya. Ada kemungkinan yang tak terhitung jumlahnya!

Pikiran Akhir

Desain dan fungsionalitas slider Divi khusus ini memberikan alternatif yang bagus untuk slider tradisional di luar sana. Inti dari desain tidak berubah, yang selanjutnya menyoroti aspek penting dari CTA Anda yang berubah dengan setiap slide. Sepertinya ini bisa menjadi sesuatu yang dapat Anda uji untuk melihat apakah ini dapat meningkatkan konversi!

Beri tahu saya pendapat Anda di komentar di bawah.

Bersulang!