Cara Mengubah Konten di Arahkan ke Membuat CTA Unik di Divi (3 Cara)
Diterbitkan: 2019-09-04Opsi hover bawaan Divi memudahkan untuk mengubah konten modul apa pun saat mengarahkan kursor. Kita dapat mengubah gambar latar belakang, warna, dan bahkan teks saat melayang. Ini membuka pintu bagi cara-cara kreatif untuk menarik perhatian pengguna dan meningkatkan ajakan bertindak tersebut untuk konversi yang lebih baik.
Hari ini, kami akan menunjukkan kepada Anda cara mengubah konten saat mengarahkan kursor ke Divi untuk beberapa ajakan bertindak yang unik. Kami akan menunjukkan cara cerdas untuk mengubah teks tombol (dan ikon) saat mengarahkan kursor. Kami akan menunjukkan cara mengubah judul dan teks tombol dengan elegan dalam modul ajakan bertindak saat mengarahkan kursor. Dan, kami bahkan akan memasukkan beberapa CSS khusus untuk menambahkan beberapa efek transisi unik juga (seperti beralih dan membalik ikon tombol).
Coba lihat!
Sneak Peek
Berikut ini sekilas tentang tiga desain yang akan kita buat hari ini.
#1 Cara Mengubah Konten di Arahkan ke Tombol
#2 Cara Mengubah Latar Belakang dan Isi Isi pada Modul Teks
#3 Cara Mengubah Konten di Arahkan ke Beberapa Elemen dengan Modul Ajakan Bertindak
Unduh Tata Letaknya GRATIS
Untuk mendapatkan desain dari tutorial ini, Anda harus mengunduhnya terlebih dahulu menggunakan tombol di bawah. 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 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.
Anda telah berhasil berlangganan. Silakan periksa alamat email Anda untuk mengonfirmasi langganan Anda dan dapatkan akses ke paket tata letak Divi mingguan gratis!
Untuk mengimpor tata letak ke halaman Anda, cukup ekstrak file zip dan seret file json ke Divi Builder.
Langsung saja ke tutorialnya ya?
Apa yang Anda Butuhkan untuk Memulai
Untuk memulai, Anda perlu melakukan hal berikut:
- Jika belum, instal dan aktifkan Divi Theme yang terpasang (atau Plugin Divi Builder jika tidak menggunakan Divi Theme).
- Buat halaman baru di WordPress dan gunakan Divi Builder untuk mengedit halaman di bagian depan (pembuat visual).
- Muat tata letak Laman Pendaratan Pembuat Kue ke laman tersebut. Kami akan menggunakan tata letak ini untuk desain kami. Anda dapat memuat tata letak dengan memilih "Pilih Tata Letak Premade" saat diminta untuk menggunakan Divi Builder. Atau Anda dapat memilih ikon "Muat dari Perpustakaan" plus dari menu pengaturan di dalam Divi Builder. Untuk info lebih lanjut tentang cara memuat tata letak premade ke halaman Anda, tonton video kami.
Setelah itu, Anda siap untuk mulai mendesain di Divi.
#1 Cara Mengubah Konten di Arahkan ke Tombol
Setelah Anda memiliki tata letak premade Halaman Arahan Cake Maker yang dimuat ke halaman Anda, temukan tombol utama CTA di header atas halaman dan buka pengaturan desain modul tombol.
Mengubah Teks Tombol di Arahkan
Di bawah tab konten, perbarui teks tombol sebagai berikut:
Teks Tombol: “Belanja Sekarang”
Kemudian gunakan opsi hover untuk teks tombol dan masukkan teks tombol pengganti di bawah tab hover sebagai berikut:
Teks Tombol (arahkan kursor): “Ayo”
Teks di bawah teks tombol arahkan kursor akan menggantikan teks tombol default saat mengarahkan kursor ke tombol.
Lebar Tombol
Namun tombolnya inline-block sehingga lebar tombol/tautan akan berubah sesuai dengan jumlah konten (huruf atau spasi) yang dikandung tombol tersebut. Ini tidak bekerja dengan baik untuk efek hover ini karena dengan teks pengganti yang lebih kecil, lebar tombol akan bertambah kecil dan membuat lompatan atau gangguan saat mengarahkan kursor ke tepi tombol. Untuk memperbaikinya, kita perlu menerapkan lebar yang ditetapkan ke tombol. Ini mudah dengan satu cuplikan CSS. Tambahkan CSS berikut ke Elemen Utama dari modul tombol.
width: 200px;
Inilah hasilnya.
Perubahan Tambahan dan Efek Arahkan Arah
Selain mengubah konten pada hover, kita juga dapat membumbui tombol kita dengan kombinasi efek hover yang berbeda.
Saat ini ikon tombol adalah panah kanan yang digunakan saat melayang. Ini bekerja sangat baik dengan teks tombol hover "Let's Go".
Membalik Ikon Tombol saat Melayang
Tetapi Anda juga dapat menambahkan efek flip hover yang bagus untuk ikon tombol. Untuk melakukan ini, pertama-tama buat ikon selalu muncul (tidak hanya saat mengarahkan kursor) dengan memperbarui yang berikut:
Hanya Tampilkan Ikon di Arahkan untuk Tombol: TIDAK
Kemudian tambahkan Kelas CSS ke modul tombol sebagai berikut:
Kelas CSS: ikon tombol-balik
Kemudian buka pengaturan halaman dan tambahkan CSS khusus berikut.
.flip-button-icon:after {
transition: transform 500ms;
}
.flip-button-icon:hover:after {
transform: rotateX(360deg);
}
Inilah hasilnya.
Mengubah Ikon Tombol saat Melayang
Anda juga dapat sepenuhnya mengubah ikon tombol saat mengarahkan kursor. Yang Anda perlukan hanyalah potongan kecil CSS untuk mengganti konten elemen semu :after tempat ikon berada.
Sebelum kita menambahkan css, pertama-tama mari kita pilih ikon tombol yang berbeda untuk ditampilkan pada awalnya, kemudian kita dapat mengubahnya menjadi panah kanan dengan CSS.
Perbarui Ikon Tombol dengan ikon keranjang karena CTA kami adalah "Tampilkan Sekarang".
Lalu buka tab lanjutan dan perbarui properti transformasi CSS saat ini dengan rotasi 180 derajat, bukan 360 derajat. Dan tambahkan unicode baru untuk konten yang menampilkan panah kiri (“\23”).
Cuplikan baru akan terlihat seperti ini:
.flip-button-icon:hover:after {
transform: rotateY(180deg);
content: "\23";
}
Karena kita juga akan memutar ikon 180 derajat, ini akan menampilkan panah kanan sebagai pengganti ikon keranjang saat mengarahkan kursor ke tombol.
Hasil Akhir
Ini adalah hasil akhirnya.
#2 Cara Mengubah Latar Belakang dan Isi Isi pada Modul Teks
Untuk desain berikutnya, turunkan tata letak halaman ke bagian "Layanan Saya". Di sana buka pengaturan baris untuk baris atas dengan dua modul teks.
Perbarui Pengaturan Kolom
Di bawah pengaturan baris, buka pengaturan untuk Kolom 1 dan tambahkan gambar latar belakang saat mengarahkan kursor ke kolom.
Ini akan menggantikan latar belakang putih yang ada secara default.
Juga, tambahkan gradien di atas gambar latar belakang saat melayang juga.
Warna Kiri Gradien Latar Belakang: rgba(255,255,255,0)
Warna Kanan Gradien Latar Belakang: rgba(46,41,142,0.75)
Posisi Awal: 30%
Tempatkan Gradien Di Atas Gambar Latar Belakang: YA
Ini akan memberikan overlay yang bagus yang akan membuat teks pengganti di hover lebih mudah dibaca.
Setelah itu, keluarkan bantalan khusus untuk kolom dengan mengembalikannya ke pengaturan default.
Sesuaikan Modul Teks di Kolom 1
Setelah kolom diperbarui, simpan pengaturan dan buka pengaturan modul teks untuk modul teks di kolom 1. Kemudian perbarui isi isi modul teks saat mengarahkan kursor dengan yang berikut:
<h3>Custom Cakes</h3> <a href="#">Order Now</a>
Ini adalah cara yang bagus untuk menambahkan ajakan bertindak dengan tautan saat mengarahkan kursor.
Selanjutnya, perbarui latar belakang sebagai berikut:
Warna Latar Belakang: #ffffff;
Warna Latar Belakang (arahkan kursor): rgba(255,255,255,0);
Ini menambahkan elemen transisi yang bagus untuk mengungkapkan gambar latar belakang di kolom secara bertahap.
Selanjutnya perbarui pengaturan desain berikut:
Tinggi: 260 piksel
Padding: 30px atas, 30px kiri, 30px kanan
Padding (arahkan kursor): 90px atas
Ini akan menciptakan efek transisi yang bagus yang menurunkan teks secara bertahap saat mengarahkan kursor ke modul teks.
Selanjutnya, perbarui warna teks menjadi putih sebagai berikut:
Warna Teks Tautan: #ffffff
Judul 3 Warna Teks (arahkan kursor): #ffffff
Untuk memperlambat transisi efek hover, perbarui durasi transisi sebagai berikut:
Durasi Transisi: 500ms
Hasil Akhir
Sekarang lihat hasil akhirnya.
#3 Cara Mengubah Konten di Arahkan ke Beberapa Elemen dengan Modul Ajakan Bertindak
Untuk desain berikutnya, kita akan menggunakan modul ajakan bertindak yang mengubah beberapa elemen konten saat mengarahkan kursor. Untuk melakukan ini, turunkan halaman ke bagian Koleksi Populer.
Tambahkan Modul Ajakan Bertindak Baru
Kemudian tambahkan modul ajakan bertindak baru di bawah tombol "belanja sekarang" di baris atas bagian khusus.
Perbarui CTA dengan Mengubah Konten saat Melayang
Selanjutnya, perbarui konten ajakan bertindak sebagai berikut:
Judul: “Penawaran Khusus”
Judul (arahkan kursor): “Diskon 10%”
Teks tombol: “Belanja Sekarang”
Teks tombol (arahkan kursor): “Dapatkan Kesepakatan”
Tubuh: “Cupcake Kustom”
URL Tautan Tombol: #
Simpan pengaturan untuk saat ini.
Salin dan Tempel Gaya Tombol Tata Letak
Kita akan mendapatkan lompatan dalam mendesain tombol untuk CTA kita. Untuk melakukan ini, buka pengaturan tombol untuk modul tombol di atas modul CTA yang disertakan dengan tata letak yang telah dibuat sebelumnya. Kemudian klik ikon titik tiga pada grup opsi tombol dan pilih "salin gaya tombol".
Kemudian buka menu opsi lain pada modul ajakan bertindak yang sedang kita rancang dan pilih "Tempel Gaya Tombol".
Kemudian buka pengaturan modul ajakan bertindak dan perbarui bantalan tombol:
Tombol Padding: 15px atas, 15px bawah, 40px kiri, 40px kanan 
Perbarui Gaya Teks
Setelah itu, perbarui desain judul dan teks isi.
Judul Judul Tingkat: H4
Judul Font: Pacifico
Ukuran Teks Judul: 9vw
Tinggi Baris Judul: 1.3em
Font Tubuh: Buka Sans
Berat Huruf Tubuh: Tebal
Ukuran Teks Tubuh: 18px
Spasi Huruf Tubuh: 1px
Pengaturan Akhir
Selanjutnya, perbarui padding.
Padding: 0px kiri, 0px kanan
Kemudian berikan modul Kelas CSS khusus.
Kelas CSS: fade-cta-title
Buat tombol cta lebar penuh dengan menambahkan CSS khusus berikut ke kotak input CSS Tombol Promo.
Dan perbarui durasi transisi.
Durasi Transisi: 800ms
Terakhir, perbarui warna latar belakang agar transparan secara default dan ubah warna saat melayang.
Warna Latar Belakang: tidak ada (hapus)
Warna Latar Belakang (arahkan kursor): rgba(247,78,72,0.86)
Selanjutnya, hapus dua modul pada baris di atas modul Call to Action kami sehingga menggantikan cta asli dari tata letak.
Hasil Sejauh Ini
Inilah hasilnya sejauh ini. Perhatikan bagaimana teks judul dan teks tombol berubah saat mengarahkan kursor ke modul ajakan bertindak.
Memperhalus Perubahan Konten dengan Animasi
Jika kita ingin memperhalus transisi judul besar di CTA, kita bisa menambahkan animasi sederhana dengan CSS. Karena kita telah menambahkan modul Kelas CSS, yang perlu kita lakukan adalah membuka modal pengaturan halaman dan menambahkan CSS khusus berikut:
.fade-cta-title:hover .et_pb_module_header {
animation-name: fadeinout;
animation-duration: 800ms;
}
@keyframes fadeinout {
from {opacity: 0;}
to {opacity: 1;}
}
Hasil Akhir
Sekarang mari kita lihat hasil akhirnya.
Dan ini dia di ponsel.
Pikiran Akhir
Dalam tutorial ini, kami telah menunjukkan 3 contoh cara mengubah konten secara efektif saat mengarahkan kursor ke Divi. Opsi hover bawaan untuk konten benar-benar membuat proses ini mudah. Dan dengan beberapa cuplikan CSS Anda dapat menambahkan beberapa transisi unik untuk membedakan desainnya. Mudah-mudahan, ini akan memungkinkan Anda untuk meningkatkan ajakan bertindak di situs Anda sendiri untuk lebih banyak konversi dan keterlibatan.
Ingin lebih? Kami memiliki banyak sekali postingan bagus yang akan membantu membawa CTA Anda ke level selanjutnya.
Saya berharap untuk mendengar dari Anda di komentar.
Bersulang!