Cara Membuat CTA Unik dengan Pola Latar Belakang & Opsi Masker Divi

Diterbitkan: 2022-05-25

Pola latar belakang dan opsi topeng baru Divi memudahkan untuk membuat bagian ajakan bertindak (CTA) yang menarik dan unik di situs web Anda. Anda dapat menggabungkan gambar, gradien, pola, dan topeng dengan banyak opsi penyesuaian untuk membuat desain latar belakang unik yang akan menarik perhatian pengunjung Anda.

Dalam tutorial ini, kami akan menunjukkan cara membuat bagian CTA unik dengan pola latar belakang baru dan opsi topeng Divi.

Mari kita mulai!

Sneak Peek

Berikut adalah preview dari bagian CTA yang akan kita desain dalam tutorial ini.

Apa yang Anda Butuhkan untuk Memulai

Sebelum kita mulai, instal dan aktifkan Tema Divi dan pastikan Anda memiliki Divi versi terbaru di situs web Anda.

Mari kita melompat masuk.

Cara Membuat CTA Unik dengan Pola Latar Belakang dan Opsi Topeng Divi

Buat Halaman Baru dengan Tata Letak Premade

Untuk tutorial kami, kami akan menggunakan tata letak premade dari perpustakaan Divi. Untuk desain ini, kami akan menggunakan Halaman Arahan Toko Es Krim dari paket tata letak Toko Es Krim.

Buat halaman baru, tambahkan judul, lalu pilih opsi Gunakan Divi Builder.

Kami akan menggunakan tata letak premade dari perpustakaan Divi untuk contoh ini, jadi pilih Browse Layouts.

Topeng Pola Latar Belakang CTA Divi Jelajahi Tata Letak

Cari dan pilih tata letak Halaman Landing Toko Es Krim.

Divi CTA Background Pattern Mask Temukan Tata Letak

Pilih Gunakan Tata Letak Ini untuk menambahkan tata letak ke halaman Anda.

Masker Pola Latar Belakang CTA Divi Gunakan Tata Letak

Sekarang kita siap untuk membangun desain kita.

Memodifikasi Layout untuk Background Pattern dan Mask

Kami akan memodifikasi rasa bagian CTA bulan dari tata letak ini. Mari buat beberapa perubahan pada tata letak kita untuk pola latar belakang dan desain topeng.

Pengaturan Baris

Buka Pengaturan Baris, lalu pilih Desain.

Di bawah Ukuran, samakan tinggi kolom.

Samakan Tinggi Kolom: Ya

Masker Pola Latar Belakang Divi CTA Menyamakan Ketinggian Kolom

Di bawah Spasi, lepaskan bantalan atas untuk membawa kerucut ke bagian atas.

Padding Atas: 0px

Divi CTA Latar Belakang Pola Masker Padding Atas

Pengaturan Kolom 1

Di bawah tab Konten untuk pengaturan baris, pilih pengaturan Kolom 1. Di bawah Latar Belakang, hapus latar belakang oranye.

Topeng Pola Latar Belakang CTA Divi Hapus Latar Belakang

Pengaturan Kolom 2

Sekarang, pilih pengaturan Kolom 2. Desain aslinya memiliki beberapa jarak yang tidak kita perlukan, jadi mari kita singkirkan itu. Di bawah Desain, navigasikan ke Spasi dan hapus padding atas.

Masker Pola Latar Belakang CTA Divi Hapus Padding

Kemudian pilih Lanjutan dan tambahkan CSS khusus berikut ke Elemen Utama sehingga teks "flavor of the month" kita berada di tengah secara vertikal.

margin:auto;

Divi CTA Background Pattern Mask Custom CSS

Pengaturan Bagian

Buka Pengaturan Bagian. Di bawah Desain, pilih Padding. Sesuaikan bantalan bagian sehingga kerucut atas sejajar dengan bagian paling atas halaman.

Lapisan: 0px

Divi CTA Background Pattern Mask Tambahkan Padding

Menambahkan Pola Latar Belakang dan Topeng ke Bagian CTA

Sekarang tata letak kita telah dimodifikasi, kita dapat menambahkan pola latar belakang dan topeng kita. Ada opsi tak terbatas untuk pola latar belakang dan topeng dengan opsi baru Divi, yang berarti Anda dapat membuat desain unik untuk bagian CTA Anda hanya dengan beberapa klik. Ikuti bersama untuk mempelajari cara mendesain latar belakang yang menarik dengan pengaturan ini.

Warna Latar Belakang, Pola, dan Pengaturan Topeng

Arahkan ke pengaturan Latar Belakang Bagian.

Di bawah tab warna, tambahkan latar belakang oranye

Warna: #FFA256

Topeng Pola Latar Belakang CTA Divi Tambahkan Warna Latar Belakang

Di bawah tab Pola, atur bentuk dan warna pola.

Bentuk: Confetti
Warna: #FF7D14

Topeng Pola Latar Belakang CTA Divi Tambahkan Pola Latar Belakang

Sekarang mari kita tambahkan topengnya. Pilih tab mask, lalu tambahkan pengaturan sebagai berikut:

Bentuk: Corner Blob
Warna Topeng: #FFFFFF
Transformasi Topeng: Horizontal
Rasio Aspek Topeng: Lanskap
Ukuran Masker: Penutup

Pengaturan Masker Pola Latar Belakang CTA Divi

Penyesuaian Desain

Sekarang setelah latar belakang kita ada, mari kita buat beberapa penyesuaian akhir pada desain.

Buka pengaturan tombol "Beli" dan ubah perataan di bawah tab Desain.

Penjajaran Tombol: Kiri

Divi CTA Latar Belakang Pola Topeng Sejajarkan Tombol

Ubah warna latar belakang status hover untuk tombol "Beli" sehingga menonjol dengan latar belakang oranye.

Latar Belakang Tombol saat Arahkan: #FF7D14

Divi CTA Pola Latar Belakang Topeng Ubah Warna Arahkan

Kami juga akan menyesuaikan tata letak baris untuk menambahkan lebih banyak ruang antara latar belakang oranye dan bagian "Rasa Bulan Ini" di sebelah kanan. Ubah tata letak dari 1:1 menjadi 3:2.

Divi CTA Background Pattern Mask Memodifikasi Tata Letak

Dan sekarang desain desktop selesai dan Anda telah belajar cara membuat bagian CTA yang unik dengan opsi pola latar belakang dan topeng Divi!

Membuat Bagian CTA Responsif

Saat bagian CTA kami dilihat di ponsel atau tablet, konten di kolom 2 akan ditumpuk di bawah kolom 1. Ini dapat menyebabkan beberapa masalah keterbacaan dengan desain kami. Mari buat beberapa penyesuaian untuk mengoptimalkan konten dan desain kita untuk layar yang lebih kecil menggunakan pengaturan responsif bawaan Divi.

Karena kita ingin teks muncul sebelum tombol, salin teks "Sorot Rasa Bulan Ini" ke modul teks "Cokelat Oranye Juli". Pastikan Anda hanya menambahkan teks ini ke versi ponsel dan tablet.

Ubah teks “Orange Chocolate” menjadi H3.

Divi CTA Background Pattern Mask Pengaturan Teks Responsif

Selanjutnya, kita akan membuat beberapa perubahan pada teks agar terlihat menonjol pada background ini. Buka tab Desain dan buat perubahan berikut:

H2 (Ponsel dan Tablet) Warna Teks: #000000
H2 (Ponsel dan Tablet) Ukuran Teks: 30px
H3 (Ponsel dan Tablet) Warna Teks: #000000
H4 (Ponsel dan Tablet) Warna Teks: #000000

Divi CTA Background Pattern Mask Pengaturan Teks Responsif

Sekarang buka pengaturan modul teks "Flavor of the Month" asli dan ubah visibilitasnya sehingga hanya akan terlihat di perangkat desktop. Ini akan membuat modul teks asli bersembunyi di perangkat yang lebih kecil. Teks Flavour of the Month akan muncul di atas tombol, dengan teks lain di halaman.

Nonaktifkan di: Ponsel dan Tablet

Divi CTA Background Pattern Mask Pengaturan Visibilitas Responsif

Selanjutnya buka pengaturan baris lalu buka pengaturan kolom 1. Lepaskan bantalan kanan dan kiri.

Padding kanan: 0px
Padding kiri: 0px

Divi CTA Background Pattern Mask Responsif Hapus Padding

Buka pengaturan bagian, lalu latar belakang, lalu edit pengaturan topeng

Transformasi Topeng: Balikkan
Rasio Aspek Topeng: Potret

Divi CTA Background Pattern Mask Responsive Modify Mask

Dan sekarang Anda telah membuat bagian CTA yang sepenuhnya responsif dengan latar belakang unik berkat opsi Pola Latar Belakang dan Topeng Divi.

Hasil Akhir

Mari kita lihat hasil akhirnya.

Pikiran Akhir

Merancang bagian ajakan bertindak yang unik dan menarik sangat mudah, berkat pola latar belakang dan opsi topeng Divi yang kuat. Bebaskan kreativitas Anda dengan bereksperimen dengan berbagai warna, pola, topeng, dan kombinasi pengaturan. Sangat mudah untuk mendesain, dan Anda dapat menyesuaikan pengaturan hingga Anda menemukan tampilan yang sempurna hanya dengan beberapa klik. Yang terpenting, itu dibangun langsung ke Divi! Tidak perlu lagi mendesain grafis latar belakang di program lain. Anda dapat menerapkan pengaturan latar belakang ke bagian, baris, dan modul lain untuk desain yang lebih unik. Jika Anda ingin mempelajari lebih lanjut tentang pola latar belakang dan fitur topeng Divi, lihat tutorial kami untuk bagian pahlawan dengan topeng dan pola latar belakang dan pelajari cara menggabungkan pembuat gradien Divi dengan topeng dan pola latar belakang.

Bagaimana Anda menggunakan pola latar belakang dan opsi topeng Divi di situs web Anda? Beri tahu kami apa yang telah Anda buat di komentar di bawah!