Cara Mengungkapkan CTA Kolom dalam Keadaan Lengket dengan Divi

Pada titik tertentu saat Anda membuat desain halaman, Anda mungkin menemukan daftar layanan, kursus, atau hal serupa yang ingin Anda bagikan secara interaktif. Desain yang Anda gunakan untuk konten daftar Anda memainkan peran yang sangat penting dalam cara pengunjung Anda mencerna konten. Dan dengan sebagian besar daftar, Anda juga ingin menyertakan ajakan bertindak yang menghubungkan titik-titik. Jika Anda mencari cara kreatif untuk melakukannya, Anda akan menyukai tutorial ini.

Hari ini, kami akan menunjukkan cara mengungkapkan kolom CTA dalam status lengket dengan Divi. Segera setelah CTA menyentuh akhir kolom, efek lengket berhenti, yang memberikan pengalaman yang mudah di mana orang dapat terus membaca item daftar dan memutuskan untuk mengambil tindakan kapan pun mereka mau tanpa harus menggulir ke atas atau ke bawah untuk menemukan CTA . Kami juga akan membagikan file JSON secara gratis!

Mari kita lakukan.

Pratinjau

Sebelum kita masuk ke tutorial, mari kita lihat sekilas hasilnya di berbagai ukuran layar.

Desktop

Seluler

Unduh Tata Letak Bagian CTA Kolom Lengket GRATIS

Untuk meletakkan tangan Anda pada tata letak bagian CTA kolom lengket gratis, Anda harus mengunduhnya terlebih dahulu menggunakan tombol di bawah ini. 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!

Mari Mulai Berkreasi!

Tambahkan Bagian Baru

Warna latar belakang

Mulailah dengan menambahkan bagian baru ke halaman yang sedang Anda kerjakan. Buka pengaturan bagian dan terapkan warna latar belakang putih.

• Warna Latar Belakang: #ffffff

Tambahkan Baris #1

Struktur Kolom

Lanjutkan dengan menambahkan baris baru menggunakan struktur kolom berikut:

Jarak

Tanpa menambahkan modul apa pun, buka pengaturan baris dan terapkan beberapa margin bawah.

• Margin Bawah: 5%

Tambahkan Modul Teks ke Kolom

Tambahkan Konten H2

Tambahkan Modul Teks dengan beberapa konten H2 pilihan Anda.

Pengaturan Teks H2

Pindah ke tab desain modul dan ubah pengaturan teks H2 yang sesuai:

• Judul 2 Font: Alata
• Judul 2 Berat Font: Tebal
• Judul 2 Perataan Teks: Tengah
• Judul 2 Warna Teks: #000000
• Judul 2 Ukuran Teks:
  • Desktop: 55px
  • Tablet: 40px
  • Telepon: 30px

Tambahkan Modul Pembagi ke Kolom

Visibilitas

Tepat di bawah Modul Teks, tambahkan Modul Pembagi dan pastikan opsi "Tampilkan Pembagi" diaktifkan.

• Tampilkan Pembagi: Ya

Garis

Pindah ke tab desain modul dan ubah pengaturan baris sebagai berikut:

• Warna Garis: #3a7a84
• Gaya Garis: Ganda

Perekat

Selesaikan pengaturan modul dengan memodifikasi pengaturan ukuran yang sesuai:

• Berat Pembagi: 10px
• Lebar: 8%
• Penyelarasan Modul: Pusat
• Tinggi: 10px

Tambahkan Baris #2

Struktur Kolom

Lanjutkan dengan menambahkan baris lain tepat di bawah baris sebelumnya menggunakan struktur kolom berikut:

Perekat

Buka pengaturan baris dan ubah pengaturan ukuran sebagai berikut:

• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 2
• Samakan Tinggi Kolom: Ya
• Lebar: 95%
• Lebar Maks: 2580px

Jarak

Hapus semua padding atas dan bawah default berikutnya.

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

Pengaturan Kolom 1

Gambar latar belakang

Kemudian, buka pengaturan kolom 1 dan terapkan gambar latar belakang.

• Ukuran Gambar Latar Belakang: Sampul

Berbatasan

Pindah ke tab desain kolom dan terapkan beberapa sudut membulat.

• Semua Sudut: 20px

Tambahkan Modul Blurb ke Kolom 2

Tambah isi

Saatnya menambahkan modul, dimulai dengan Modul Blurb di kolom 2. Tambahkan beberapa konten pilihan Anda.

Pilih Ikon

Pilih ikon berikutnya.

Warna latar belakang

Kemudian, terapkan warna latar belakang putih.

• Warna Latar Belakang: #FFFFFF

Pengaturan Ikon

Pindah ke tab desain modul dan ubah pengaturan ikon yang sesuai:

• Warna Ikon: #3a7a84
• Penempatan Gambar/Ikon: Kiri

Pengaturan Teks Judul

Kemudian, gaya pengaturan teks judul.

• Judul Judul Level: H3
• Judul Font: Alata
• Judul Font Berat: Tebal
• Warna Teks Judul: #000000
• Ukuran Teks Judul:
  • Desktop: 35px
  • Tablet: 30px
  • Telepon: 20px

Pengaturan Teks Tubuh

Buat beberapa perubahan pada pengaturan teks isi juga.

• Font Tubuh: Karla
• Ukuran Teks Tubuh:
  • Desktop: 17px
  • Tablet: 15px
  • Telepon: 14px
• Tinggi Garis Tubuh: 2.5em

Perekat

Ubah pengaturan ukuran berikutnya.

• Lebar Konten: 100%

Jarak

Dan terapkan beberapa nilai padding khusus ke pengaturan spasi.

• Padding Atas: 20%
• Padding Bawah: 20%
• Padding Kiri: 10%
• Padding Kanan: 10%

Berbatasan

Selanjutnya, kita akan menambahkan beberapa sudut membulat ke pengaturan perbatasan.

• Semua Sudut: 20px

Bayangan Kotak

Dan kami akan menyertakan bayangan kotak halus.

• Kekuatan Buram Bayangan Kotak: 50px
• Warna Bayangan: rgba (59,120,130,0.14)

Animasi

Lanjutkan dengan menghapus animasi default Modul Blurb di pengaturan animasi berikutnya.

• Gambar/Ikon Animasi: Tanpa Animasi

Blurb Judul CSS

Dan selesaikan pengaturan modul dengan menambahkan satu baris kode CSS ke kotak CSS judul uraian di tab lanjutan.

margin-bottom: 20px;

Modul Blurb Klon Dua Kali

Setelah Anda menyelesaikan Modul Blurb pertama, klon Modul Blurb sebanyak yang Anda butuhkan.

Ubah Konten

Ubah konten di setiap modul duplikat.

Tambahkan Modul CTA ke Kolom 1

Tambah isi

Di kolom 1, satu-satunya modul yang kita butuhkan adalah Modul Ajakan Bertindak. Tambahkan beberapa konten pilihan Anda.

Tambahkan Tautan Tombol

Tambahkan tautan tombol berikutnya.

Latar Belakang Gradien

Kemudian, terapkan latar belakang gradien.

• Warna 1: rgba (59,120,130,0.53)
• Warna 2: #112730
• Tipe Gradien: Linier
• Arah Gradien: 161deg

Pengaturan Teks Judul

Pindah ke tab desain modul dan buat perubahan berikut pada pengaturan teks judul:

• Judul Judul Level: H3
• Judul Font: Alata
• Judul Font Berat: Tebal
• Warna Teks Judul: #ffffff
• Ukuran Teks Judul:
  • Desktop: 50px
  • Tablet & Ponsel: 30px

Pengaturan Tombol

Gaya tombol berikutnya.

• Gunakan Gaya Kustom Untuk Tombol: Ya
• Ukuran Teks Tombol:
  • Desktop: 20px
  • Tablet: 17px
  • Telepon: 15px
• Lebar Batas Tombol: 0px
• Radius Perbatasan Tombol: 0px

• Font Tombol: Alata
• Berat Huruf Tombol: Tebal

• Padding Atas: 20px
• Padding Bawah: 20px
• Padding Kiri: 20px
• Padding Kanan: 20px
• Posisi Horizontal Bayangan Kotak: 0px
• Posisi Vertikal Bayangan Kotak: 3px
• Warna Bayangan: #ffffff

Perekat

Pindah ke pengaturan ukuran modul dan terapkan perubahan berikut:

• Lebar:
  • Desktop: 95%
  • Tablet & Telepon: 100%
• Penyelarasan Modul: Pusat

Jarak

Tambahkan beberapa bantalan atas dan bawah khusus juga.

• Padding Atas: 150px
• Padding Bawah: 150px

Berbatasan

Sertakan beberapa sudut membulat juga.

• Semua Sudut: 20px

Ubah Terjemahan

Selesaikan pengaturan modul dengan menerapkan pengaturan transformasi terjemahan berikut:

• Benar:
  • Desktop: -25px
  • Tablet & Ponsel: 0px

Terapkan Efek Lengket ke Modul CTA

Pengaturan Lengket

Sekarang semua elemen sudah terpasang, saatnya menerapkan efek lengket. Buka Modul CTA dan terapkan pengaturan tempel berikut:

• Posisi Lengket:
  • Desktop: Tetap di Atas
  • Tablet & Telepon: Jangan Menempel
• Offset Atas Lengket: 50px
• Batas Lengket Bawah: Kolom
• Offset Dari Elemen Lengket Sekitarnya: Ya
• Default Transisi dan Gaya Lengket: Ya

Kegelapan

Sekarang modul berubah menjadi lengket, kita dapat menerapkan gaya lengket. Buka pengaturan filter dan terapkan pengaturan filter opacity berikut:

• Opasitas Bawaan:
  • Desktop: 0%
  • Tablet & Telepon: 100%
• Opasitas Lengket: 100%

Transisi

Last but not least, kami akan mengubah pengaturan transisi di tab lanjutan. Itu dia!

• Durasi Transisi: 800ms
• Kurva Kecepatan Transisi: Kemudahan

Pratinjau

Sekarang setelah kita melalui semua langkah, mari kita lihat hasil akhir di berbagai ukuran layar.

Desktop

Seluler

Pikiran Akhir

Dalam posting ini, kami telah menunjukkan kepada Anda cara berkreasi dengan opsi lengket Divi. Lebih khusus lagi, kami telah menunjukkan kepada Anda cara menampilkan item daftar dengan indah dengan kolom CTA lengket. Pendekatan ini memungkinkan Anda untuk menampilkan semua item secara visual dan memiliki ajakan bertindak dari dekat sementara pengunjung Anda siap melalui layanan, kursus, atau jenis daftar lainnya. Anda juga dapat mengunduh file JSON secara gratis! Jika Anda memiliki pertanyaan, jangan ragu untuk meninggalkan komentar di bagian komentar di bawah.

Jika Anda ingin mempelajari lebih lanjut tentang Divi dan mendapatkan lebih banyak gratisan Divi, pastikan Anda berlangganan buletin email dan saluran YouTube kami sehingga Anda akan selalu menjadi salah satu orang pertama yang mengetahui dan mendapatkan manfaat dari konten gratis ini.