Membuat Slide-in CTA dengan Divi's Row Alignment & Animation Settings

Setiap minggu, kami memberi Anda paket tata letak Divi baru dan gratis yang dapat Anda gunakan untuk proyek Anda berikutnya. Untuk salah satu paket tata letak, kami juga membagikan kasus penggunaan yang akan membantu Anda membawa situs web Anda ke tingkat berikutnya. Minggu ini, sebagai bagian dari inisiatif desain Divi kami yang berkelanjutan, kami akan menunjukkan kepada Anda cara membuat CTA slide-in dengan penyelarasan baris dan pengaturan animasi Divi menggunakan Paket Tata Letak Perusahaan Pembersihan.

Untuk membantu melakukan ini, kita akan mulai dengan menghapus semua animasi yang sudah ada. Dengan begitu, kita dapat menyorot ajakan bertindak yang masuk.

Mari kita lakukan!

Pratinjau

Mari kita lihat tiga contoh berbeda yang akan kita tangani dalam posting ini:

Unggah Halaman Landing Perusahaan Pembersih

Tambahkan Halaman Baru & Beralih ke Visual Builder

Seperti yang disebutkan sebelumnya, kita akan menggunakan Paket Tata Letak Perusahaan Pembersihan untuk membuat tutorial ini tetapi jangan ragu untuk menggunakan pendekatan ini untuk situs web apa pun yang Anda buat. Tambahkan halaman baru, masukkan judul halaman Anda dan segera beralih ke Visual Builder.

Unggah Halaman Landing Perusahaan Pembersih

Setelah Anda melakukannya, Anda akan melihat tiga opsi muncul di layar Anda. Anda dapat mulai membangun dari awal, memilih tata letak yang dibuat sebelumnya atau mengkloning halaman yang sudah ada. Pilih opsi kedua.

Cari Paket Tata Letak Perusahaan Pembersihan, pilih tata letak halaman arahan dan unggah ke halaman Anda.

Menghapus semua Pengaturan Animasi di Halaman

Cari Bagian di Halaman

Setelah tata letak diunggah ke halaman Anda, lanjutkan dan temukan bagian berikut.

Hapus Animasi

Buka pengaturannya dan hapus animasi yang sudah ada.

Perluas Gaya ke Semua Bagian

Untuk menghemat waktu, kita akan memperluas gaya animasi ini ke semua elemen desain di halaman. Kita akan mulai dengan bagian di halaman kita dengan mengklik kanan, memilih 'Extend Animation Styles'. Jadikan itu berlaku untuk semua bagian di seluruh halaman dan klik 'Perpanjang'.

Perluas Gaya ke Semua Baris

Ulangi langkah yang sama, tetapi sebagai gantinya, buat itu berlaku untuk semua baris di seluruh halaman.

Perluas Gaya ke Semua Modul

Terakhir, buat itu berlaku untuk semua modul di halaman juga.

Membuat CTA #1

Tambahkan Baris Baru

Lokasi

Mari mulai membuat CTA slide-in pertama! Tambahkan baris baru di bagian bawah bagian berikut:

Struktur Kolom

Pilih struktur kolom berikut untuk baris yang baru saja Anda tambahkan:

Penjajaran Baris

Kita akan mendorong baris ke kiri untuk membantu menciptakan efek slide-in.

• Penjajaran Baris: Kiri

Perekat

Kami juga akan mengurangi lebar baris kami.

• Gunakan Lebar Kustom: Ya
• Lebar Kustom: 500px

Jarak

Dan untuk menghilangkan ruang putih yang tidak perlu, hapus padding atas dan bawah baris.

• Padding Atas: 0px
• Padding Bawah: 0px

Tambahkan Modul Ajakan Bertindak

Tambahkan Salinan

Sekarang kita dapat menambahkan Modul Ajakan Bertindak! Tambahkan beberapa konten pilihan.

Tambahkan Tautan

Tambahkan tautan ke Modul CTA Anda selanjutnya. Jika Anda belum memiliki tautan untuk dialihkan, Anda cukup memasukkan '#'. Tanpa menambahkan sesuatu ke kotak ini, Anda tidak akan dapat melihat tombolnya, jadi pastikan Anda tidak membiarkannya kosong.

Hapus Warna Latar Belakang

Modul CTA secara default memiliki warna latar belakang. Silakan dan hapus di pengaturan latar belakang.

Salin Bagian Gradien

Buka bagian yang berisi latar belakang gradien biru. Tanpa mengubah apa pun, klik kanan dan salin pengaturannya.

Tempel Gradien di Modul CTA

Tempelkan latar belakang gradien ini pada Modul CTA.

Pengaturan Teks Judul

Buka pengaturan Modul CTA lagi, buka pengaturan teks judul dan buat beberapa perubahan agar sesuai dengan paket tata letak:

• Judul Font: Ubuntu
• Judul Font Berat: Tebal
• Judul Teks Ukuran: 24px (Desktop & Tablet), 16px (Telepon)
• Tinggi Baris Judul: 1.2em

Pengaturan Teks Tubuh

Ubah bobot font tubuh juga.

• Berat Huruf Tubuh: Semi Tebal

Pengaturan Tombol

Ubah pengaturan tombol selanjutnya.

• Gunakan Gaya Kustom untuk Tombol: Ya
• Ukuran Teks Tombol: 18px
• Warna Teks Tombol: #557df3
• Warna Latar Tombol: #FFFFFF
• Lebar Perbatasan Tombol: 10px
• Warna Batas Tombol: #FFFFFF
• Radius Perbatasan Tombol: 0px
• Font Tombol: Ubuntu
• Berat Huruf: Tebal

Jarak

Tingkatkan bantalan modul juga.

• Padding Atas: 80px
• Padding Bawah: 80px
• Padding Kiri: 50px
• Padding Kanan: 50px

Berbatasan

Kemudian, tambahkan beberapa radius batas kanan atas dan kanan bawah di pengaturan perbatasan.

• Kanan Atas: 100px
• Kanan Bawah: 100px

Bayangan Kotak

Untuk membuat lebih dalam, kita akan menambahkan bayangan kotak yang halus.

• Kekuatan Buram Bayangan Kotak: 71px
• Kekuatan Penyebaran Bayangan Kotak: -5px

Animasi

Last but not least, berikan Modul CTA Anda efek animasi.

• Arah Animasi: Kanan
• Intensitas Animasi: 100%
• Animasi Mulai Opacity: 100%
• Kurva Kecepatan Animasi: Linear

Membuat CTA #2

Klon CTA #1 Baris & Buat Perubahan

Baris Klon

Untuk membuat contoh kedua, lanjutkan dan klon baris pertama.

Seret ke Bagian

Gulir ke bawah halaman dan tempatkan duplikatnya di sini:

Hapus Bagian Atas Padding

Buka pengaturan bagian tempat Anda meletakkan baris dan hapus padding atas.

• Padding Atas: 0px

Hapus Bagian Radius Batas Kiri Atas

Buka pengaturan Perbatasan berikutnya dan hapus radius batas kiri atas juga.

Hapus Radius Batas Kanan Atas CTA

Kemudian, buka Modul CTA dan hapus radius batas kanan atas untuk memungkinkan bagian dan modul menyatu.

Ubah Animasi

Untuk CTA slide-in ini, kita akan menggunakan animasi yang berbeda. Jangan ragu untuk bermain-main dengan opsi animasi lainnya juga.

• Arah Animasi: Pusat
• Animasi Mulai Opacity: 100%
• Kurva Kecepatan Animasi: Linear

Membuat CTA #3

Klon CTA #1 Baris & Buat Perubahan

Baris Klon

Untuk membuat contoh terakhir, kita akan mengkloning baris sekali lagi.

Seret ke Bagian

Tempatkan duplikat di bagian berikut:

Ubah Perataan Baris

Buka pengaturan baris modul dan ubah perataan ke kanan.

• Penjajaran Baris: Kanan

Hapus Latar Belakang Gradien CTA

Hapus juga latar belakang gradien modul.

Gunakan Warna Latar Sebagai gantinya

Gunakan warna latar belakang sebagai gantinya.

• Warna Latar Belakang: #f2835a

Ubah Warna Teks Tombol

Untuk mencocokkan warna latar belakang, ubah juga warna teks tombol.

• Warna Teks Tombol: #f2835a

Hapus Radius Perbatasan CTA

Kami mengubah Modul CTA menjadi persegi dengan menghapus semua radius batas yang diberikan.

Ubah Animasi

Ubah pengaturan animasi selanjutnya.

• Arah Animasi: Bawah
• Intensitas Animasi: 100%
• Animasi Mulai Opacity: 100%
• Kurva Kecepatan Animasi: Linear

Hapus Bagian Bawah Padding

Last but not least, kita akan mendorong modul ke bagian bawah bagian dengan menghapus bantalan bawah bagian yang ditempatkan dan selesai!

• Padding Bawah: 0px

Pratinjau

Mari kita lihat terakhir pada tiga contoh CTA slide-in yang telah kita buat.

Pikiran Akhir

Dalam posting ini, kami telah menunjukkan kepada Anda cara membuat CTA slide-in menggunakan Paket Tata Letak Perusahaan Pembersih Divi. Kami telah memulai dengan menghapus animasi yang sudah ada di halaman. Setelah itu, kami telah membuat tiga CTA slide-in untuk menarik perhatian. Posting blog ini adalah bagian dari inisiatif desain Divi kami di mana kami mencoba memasukkan sesuatu ke kotak peralatan desain Anda setiap minggu. Jika Anda memiliki pertanyaan atau saran, pastikan Anda meninggalkan komentar di bagian komentar di bawah!