Cara Meningkatkan CTA Anda dengan Efek Gulir "Memenangkan Putaran"

Itu selalu menyenangkan untuk memenangkan hadiah. Itu sebabnya perusahaan memasarkan produk dan layanan mereka secara online dengan memberikan barang gratis. Ini bisa berupa kupon untuk makanan penutup gratis dengan pesanan pertama Anda, atau e-book gratis saat Anda berlangganan daftar email. Namun terkadang, bahkan yang gratis dapat diabaikan di web. Menambahkan efek gulir “winning spin” yang elegan mungkin merupakan cara yang bagus untuk memberikan perhatian yang layak kepada CTA Anda sambil menciptakan interaksi yang menarik bagi pengunjung.

Dalam tutorial ini, kami akan menunjukkan kepada Anda cara meningkatkan CTA Anda dengan efek gulir "winning spin" di Divi. Saat pengguna menggulir halaman ke bawah, hadiah pemenang berputar ke tampilan untuk mengungkapkan penawaran gratis dengan cara yang unik. Dan Anda dapat menggunakan ini untuk mempromosikan hampir semua penawaran gratis yang dapat Anda pikirkan.

Mari kita mulai.

Sneak Peek

Berikut ini sekilas desain yang akan kita buat dalam tutorial ini.

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 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!

Untuk mengimpor tata letak bagian ke Perpustakaan Divi Anda, navigasikan ke Perpustakaan Divi.

Klik tombol Impor.

Di popup portabilitas, pilih tab impor dan pilih file unduhan dari komputer Anda.

Kemudian klik tombol impor.

Setelah selesai, tata letak bagian akan tersedia di Divi Builder.

Langsung saja ke tutorialnya ya?

Apa yang Anda Butuhkan untuk Memulai

Untuk memulai, Anda perlu melakukan hal berikut:

1. Jika belum, instal dan aktifkan Tema Divi.
2. Buat halaman baru di WordPress dan gunakan Divi Builder untuk mengedit halaman di bagian depan (pembuat visual).
3. Pilih opsi “Choose a Premade Layout”.
   
4. Pilih Tata Letak Beranda Bakery dan klik untuk menggunakan tata letak.
   

Setelah itu, Anda akan siap untuk mulai membuat CTA dengan efek gulir "winning spin" di Divi.

Bagian 1: Membuat Efek Gulir "Memenangkan Putaran"

Untuk memulai, gunakan tampilan lapisan dari menu pengaturan bawah dalam Divi Builder. Ini akan membantu mengelola elemen desain kita dengan lebih baik.

Tambahkan Bagian, Baris, dan Kolom

Tata letak premade dilengkapi dengan beberapa bagian dengan konten. Kami akan menambahkan bagian baru ke halaman tempat kami ingin CTA berada. Untuk tutorial ini, tambahkan bagian reguler baru langsung di bawah bagian berlabel "Layanan".

Di dalam bagian, tambahkan baris dua kolom.

Pengaturan Baris

Sebelum menambahkan modul apa pun, buka pengaturan baris, dan perbarui yang berikut:

• Lebar Talang: 1
• Lebar: 94%
• Padding: 10px atas, 10px bawah
• Lebar Perbatasan: 1px
• Warna Perbatasan: rgba (0,0,0,0.12)

Di bawah tab lanjutan, tambahkan CSS Kustom berikut ke Elemen Utama:

display:flex;
align-items: center;

Batas Kolom 1

Setelah pengaturan Baris selesai, buka pengaturan untuk kolom 1 dan tambahkan batas kanan sebagai berikut:

• Lebar Batas Kanan: 1px
• Warna Batas Kanan: rgba(0,0,0,0.12)

Membuat Panah dan Teks Spinner menggunakan modul uraian

Selanjutnya kita akan membuat panah pemintal dan teks yang akan berfungsi sebagai panah yang menunjuk ke pilihan pemenang.

Tambahkan Modul Blurb

Tambahkan modul uraian baru ke kolom kiri.

Konten Buram

Kemudian perbarui konten uraian dengan judul dan ikon baru.

• Judul: Anda Menang
• Ikon: Panah Kanan (lihat tangkapan layar)

Desain kabur

Di bawah tab desain, perbarui yang berikut ini:

• Warna Ikon: #a06d51
• Penempatan Gambar/Ikon: Kiri
• Ikon Ukuran Font: 80px (desktop), 50px (tablet), 40px (ponsel)
• Judul Font: Patua One
• Judul Font Berat: Tebal
• Judul Teks Ukuran: 40px (desktop), 25px (tablet), 20px (ponsel)
• Spasi Huruf Judul: 1px
• Tinggi Baris Judul: 2em

Kabur CSS Kustom

Selanjutnya, alihkan urutan konten uraian sehingga panah berada di kanan, bukan kiri dengan menambahkan CSS khusus berikut ke elemen utama:

direction: rtl !important;

Kemudian keluarkan padding default di bawah judul uraian dengan menambahkan CSS khusus ini Judul Blurb:

padding-bottom: 0px

Membuat Pilihan Hadiah dengan Beberapa Blurb

Di kolom kanan kita akan menambahkan pilihan hadiah kita yang akan berputar dan akhirnya menentukan pemenang. Untuk melakukan ini, kita akan membuat dan memposisikan 4 modul uraian dengan judul dan gambar.

Membuat Blurb 1

Untuk membuat uraian pertama kami di kolom 2, duplikat uraian singkat dari kolom 1 dan seret ke kolom 2.

Buka pengaturan untuk duplikasi uraian di kolom 2 dan keluarkan CSS khusus untuk elemen utama:

Ini akan membawa ikon kita kembali ke kiri.

Perbarui Judul dan Gambar

Kemudian perbarui judul dan gambar sebagai berikut:

• Judul: Kue GRATIS!
• Gambar: unggah gambar (sekitar 100px kali 100px)

Blurb 1 Desain

Kemudian perbarui pengaturan desain sebagai berikut:

• Lebar Gambar: 80px (desktop), 50px (tablet), 40px (ponsel)
• Lebar Konten: 92%
• Lebar: 100%

Transformasi Asal

Kita akan memutar blurb menggunakan opsi transformasi rotasi, jadi penting untuk memilih transform-origin yang masuk akal untuk cara blurb harus diputar. Kami tidak akan merotasi yang pertama, tetapi ini akan berfungsi sebagai template yang baik untuk kedepannya.

Perbarui transform-origin untuk uraian sebagai berikut:

• Transform Origin: tengah kanan

Anda juga harus mengeluarkan animasi gambar/ikon.

Posisi Absolut

Di bawah tab lanjutan, berikan uraian dan posisi absolut sebagai berikut:

• Posisi: Absolut
• Lokasi: kanan tengah

Membuat Blurb 2

Untuk membuat blurb kedua, duplikat blurb 1.

Memutar Blurb 2

Kemudian tambahkan rotasi transformasi sebagai berikut:

• Transformasi Rotasi Z-Axis: 25deg

Anda akan melihat uraian uraian sekarang diputar keluar dari area tampilan baris.

Membuat dan Memutar Blurb 3

Untuk membuat uraian ketiga, duplikat uraian 2. Kemudian perbarui rotasi transformasi sebagai berikut:

• Transformasi Rotasi Z-Axis: 50deg

Membuat dan Memutar Blurb 4

Untuk membuat uraian keempat, duplikat uraian 3. Kemudian perbarui rotasi transformasi sebagai berikut:

• Transformasi Rotasi Z-Axis: 75deg

Perbarui Judul dan Gambar Blurb

Setelah Anda selesai menambahkan 4 uraian, kembali dan perbarui judul dan gambar untuk masing-masing uraian sesuai kebutuhan.

Rotasi Gulir Kolom

Untuk menambahkan efek gulir, kita akan memutar seluruh kolom yang menampung 4 uraian yang diputar.

Buka pengaturan untuk kolom 2 dan perbarui yang berikut ini:

• Transform Origin: tengah kanan

Di bawah tab lanjutan, buka tab efek gulir berputar dan perbarui yang berikut ini:

• Aktifkan Rotasi: YA
• Rotasi Mulai: -75% (pada 15%)

Kemudian perbarui pemicu efek gerakan ke "Top of Element".

Perbarui Baris dengan Overflow Tersembunyi

Sekarang kembali ke pengaturan baris dan sembunyikan luapan konten dengan memperbarui pengaturan baris berikut:

• Luapan Horisontal: Tersembunyi
• Overflow Vertikal: Tersembunyi

Bagian 2: Membuat CTA Hadiah

Untuk bagian terakhir dari tutorial ini, kita akan membuat CTA yang akan menampilkan informasi tentang hadiah dan sebuah tombol. Dan, kita akan menambahkan efek gulir untuk menampilkan CTA setelah animasi "winning spin" selesai. Ini akan meniru jenis efek kejutan.

Tambahkan Baris

Untuk memulai, tambahkan baris satu kolom langsung di bawah baris yang baru saja kita buat.

Tambahkan Modul Teks

Untuk menambahkan konten CTA kami, kami akan menyalin modul teks dari tata letak premade pada halaman. Cari dan salin modul teks dengan judul “Belanja Online”.

Kemudian rekatkan ke baris yang baru saja Anda buat.

Desain Teks

Perbarui desain teks sebagai berikut:

• Font Teks: PT Sans
• Berat Font Teks: Tebal
• Ukuran Teks Teks: 16px
• Tinggi Baris Teks: 2em
• Perataan Teks: Tengah

Tambahkan Tombol CTA

Selanjutnya temukan tombol di bagian atas tata letak premade dan salin.

Kemudian tempel langsung di bawah modul teks.

Efek Gulir Baris

Untuk menampilkan CTA setelah “winning spin” memilih hadiah, buka pengaturan baris dan perbarui efek Scroll berikut:

Di bawah tab Fading in and Out…

• Aktifkan Fading In and Out: YA
• Mulai Opacity: 0% (pada 50%)
• Mid Opacity: 100% (pada 55%)

Hasil Akhir

Pikiran Akhir

Semoga, efek gulir "putaran yang menang" ini memberi Anda beberapa ide segar tentang cara mendesain CTA yang lebih menarik di situs Anda sendiri. Membangunnya membutuhkan sedikit kemahiran menggunakan opsi transformasi dan efek gulir Divi. Tetapi setelah selesai, tata letaknya sangat mudah diperbarui dengan konten unik Anda sendiri.

Saya berharap untuk mendengar dari Anda di komentar.

Bersulang!