Unduh Desain Bagian Pahlawan Gesek Kolom CTA GRATIS untuk Divi

Bagian pahlawan halaman Anda layak mendapatkan semua perhatian yang bisa didapatnya. Ada banyak cara untuk menata bagian pahlawan Anda, tergantung pada apa situs web Anda dan bagaimana perilaku audiens target Anda. Untuk beberapa situs web, akan berguna untuk menempatkan beberapa kartu CTA kolom tanpa menciptakan pengalaman yang luar biasa. Cara yang bagus untuk mendekatinya adalah dengan membuat kartu CTA gesek kolom. Dalam tutorial Divi hari ini, kami akan menunjukkan cara membuat desain menakjubkan dari awal yang menangani teknik ini. Anda juga dapat mengunduh 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 Bagian Pahlawan GRATIS

Untuk mendapatkan bagian pahlawan gratis, pertama-tama Anda harus mengunduhnya 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!

Berlangganan Saluran Youtube Kami

Mari Mulai Berkreasi!

Tambahkan Bagian Baru

Latar Belakang Gradien

Tambahkan bagian baru ke halaman yang sedang Anda kerjakan, buka pengaturan bagian dan masukkan latar belakang gradien.

• Warna 1: #ffffff
• Warna 2: #f5ede5
• Arah Gradien: 90 derajat
• Posisi Awal: 17%
• Posisi Akhir: 17%

Jarak

Pindah ke tab desain dan tambahkan beberapa bantalan atas dan bawah khusus di berbagai ukuran layar.

• Padding Atas: 5vw (Desktop), 10vw (Tablet), 13vw (Telepon)
• Padding Bawah: 5vw (Desktop), 10vw (Tablet), 13vw (Telepon)

Tambahkan Baris #1

Struktur Kolom

Lanjutkan dengan menambahkan baris baru menggunakan struktur kolom berikut:

Warna latar belakang

Tanpa menambahkan modul apa pun, buka pengaturan baris dan ubah warna latar belakang.

• Warna Latar Belakang: #fff6ed

Perekat

Pindah ke tab desain dan ubah pengaturan ukuran baris juga.

• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 1
• Lebar: 60vw (Desktop), 100% (Tablet & Ponsel)
• Lebar Maks: 100%
• Penjajaran Baris: Kanan

Jarak

Kami juga menambahkan beberapa nilai padding kustom ke pengaturan spasi.

• Padding Atas: 6vw
• Padding Bawah: 6vw
• Padding Kiri: 5.5vw
• Padding Kanan: 24vw

Berbatasan

Buka pengaturan perbatasan berikutnya dan tambahkan batas kiri menggunakan pengaturan berikut:

• Lebar Batas Kiri: 6px
• Warna Batas Kiri: #FFFFFF

Bayangan Kotak

Tambahkan bayangan kotak halus untuk menciptakan kedalaman di bagian pahlawan.

• Kekuatan Buram Bayangan Kotak: 100px
• Warna Bayangan: rgba (0,0,0,0.22)

Kelas CSS

Dan gunakan kelas CSS di tab lanjutan. Nanti di postingan ini, kita akan menggunakan kelas CSS ini untuk menyembunyikan scrollbar.

• Kelas CSS: geser-scrollbar

Elemen Utama

Untuk membuat scroll/swipe horizontal, kita perlu menempatkan kolom secara horizontal. Kami akan melakukannya dengan menambahkan beberapa kode CSS khusus di elemen utama baris.

display: grid;
grid-template-columns: repeat(6, 100%);
grid-column-gap: 2vw;

Meluap

Pindah ke pengaturan visibilitas dan ubah luapan baris.

• Luapan Horisontal: Gulir
• Overflow Vertikal: Tersembunyi

Pengaturan Kolom

Setelah Anda menyelesaikan pengaturan baris, Anda dapat membuka pengaturan kolom pertama.

Latar Belakang Gradien

Tambahkan latar belakang gradien.

• Warna 1: rgba(245.237.229.0.91)
• Warna 2: rgba(219,34,65,0,84)
• Posisi Awal: 35%
• Posisi Akhir: 81%
• Tempatkan Gradien Di Atas Gambar Latar Belakang: Ya

Gambar latar belakang

Bersama dengan gambar latar belakang.

• Ukuran Gambar Latar Belakang: Sampul
• Posisi Gambar Latar Belakang: Tengah
• Pengulangan Gambar Latar Belakang: Tidak Ada Pengulangan

Jarak

Pindah ke tab desain dan tambahkan beberapa nilai padding khusus di berbagai ukuran layar.

• Padding Atas: 4vw (Desktop), 10vw (Tablet), 12vw (Telepon)
• Padding Bawah: 4vw (Desktop), 10vw (Tablet), 12vw (Telepon)
• Padding Kiri: 2vw (Desktop), 5vw (Tablet), 7vw (Telepon)
• Padding Kanan: 2vw (Desktop), 5vw (Tablet), 7vw (Telepon)

Berbatasan

Lanjutkan dengan menambahkan radius batas '20px' ke masing-masing sudut dalam pengaturan batas.

Elemen Utama

Bagian penting lainnya dalam membuat karya ini adalah menambahkan satu baris kode CSS ke elemen utama kolom.

width: 100% !important;

Tambahkan Modul Teks #1 ke Kolom 1

Tambahkan Konten H3

Saatnya mulai menambahkan modul! Anda dapat menambahkan modul sebanyak yang Anda inginkan dan menatanya sesuai keinginan Anda. Namun, jika Anda ingin membuat ulang contoh yang sama persis yang dibagikan di pratinjau posting ini, mulailah dengan Modul Teks dan masukkan beberapa konten H3.

Pengaturan Teks H3

Pindah ke tab desain dan ubah pengaturan teks H3 yang sesuai:

• Judul 3 Font: Poppins
• Judul 3 Berat Font: Ringan
• Judul 3 Warna Teks: #e92640
• Judul 3 Ukuran Teks: 1.5vw (Desktop), 3.5vw (Tablet), 4.5vw (Telepon)

Tambahkan Modul Teks #2 ke Kolom 1

Tambah isi

Modul selanjutnya yang kita butuhkan adalah Modul Teks lainnya. Masukkan beberapa konten paragraf pilihan Anda.

Pengaturan Teks

Buka pengaturan teks berikutnya dan buat beberapa perubahan.

• Font Teks: Poppins
• Berat Font Teks: Ringan
• Warna Teks: #e92640
• Ukuran Teks: 0.8vw (Desktop), 1.9vw (Tablet), 2.8vw (Telepon)

Jarak

Kami juga menambahkan beberapa margin bawah untuk membuat ruang di kartu gesek kolom kami.

• Margin Bawah: 18vw (Desktop), 30vw (Tablet), 42vw (Telepon)

Tambahkan Modul Tombol ke Kolom 1

Tambahkan Salinan

Ke modul berikutnya, yaitu Modul Tombol. Masukkan beberapa salinan pilihan Anda.

Pengaturan Tombol

Pindah ke tab desain dan ubah pengaturan tombol yang sesuai:

• Gunakan Gaya Kustom Untuk Tombol: Ya
• Ukuran Teks Tombol: 0.8vw (Desktop), 1.8vw (Tablet), 2.5vw (Telepon)
• Warna Teks Tombol: #f5ede5
• Lebar Perbatasan Tombol: 1px
• Warna Batas Tombol: #f5ede5
• Radius Perbatasan Tombol: 5px
• Font Tombol: Poppins

Jarak

Tingkatkan ukuran tombol dengan menambahkan beberapa nilai padding khusus di berbagai ukuran layar.

• Padding Atas: 1vw (Desktop), 2vw (Tablet), 3vw (Telepon)
• Padding Bawah: 1vw (Desktop), 2vw (Tablet), 3vw (Telepon)
• Padding Kiri: 3vw (Desktop), 5vw (Tablet), 7vw (Telepon)
• Padding Kanan: 3vw (Desktop), 5vw (Tablet), 7vw (Telepon)

Tambahkan Modul Pembagi ke Kolom 1

Visibilitas

Modul selanjutnya yang kita butuhkan adalah Modul Pembagi. Pastikan opsi 'Tampilkan Pembagi' diaktifkan.

• Tampilkan Pembagi: Ya

Garis

Pindah ke tab desain dan ubah warna garis.

• Warna Garis: #f5ede5

Tambahkan Modul Teks #3 ke Kolom 1

Tambah isi

Modul berikutnya dan terakhir yang kita butuhkan di kolom ini adalah Modul Teks lainnya. Masukkan beberapa konten paragraf pilihan Anda.

Pengaturan Teks

Pindah ke tab desain dan ubah pengaturan teks yang sesuai:

• Font Teks: Poppins
• Berat Font Teks: Ringan
• Warna Teks: #f5ede5
• Ukuran Teks: 0.8vw (Desktop), 1.9vw (Tablet), 2.8vw (Telepon)
• Tinggi Baris Teks: 2.3em

Jarak

Tambahkan beberapa margin atas juga.

• Margin Atas: 2vw

Kloning Kolom hingga 5 Kali & Gunakan Kembali untuk CTA Lainnya

Setelah Anda menyelesaikan kolom pertama dan semua modul di dalamnya, Anda dapat mengkloning seluruh kolom hingga 5 kali, tergantung pada berapa banyak kartu CTA gesek kolom yang ingin Anda tampilkan. Pastikan Anda mengubah semua salinan untuk setiap duplikat kolom bersama dengan tautan tombol.

Tambahkan Baris #2

Struktur Kolom

Ke baris kedua! Kami akan menggunakan baris ini untuk membuat tumpang tindih dengan yang sebelumnya. Pilih struktur kolom berikut:

Perekat

Tanpa menambahkan modul apa pun, buka pengaturan baris dan sesuaikan pengaturan ukuran yang sesuai:

• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 1
• Lebar: 100%
• Lebar Maks: 100%

Jarak

Nanti di postingan, kita akan menambahkan modul yang kita butuhkan dan membuat tumpang tindih atas negatif agar terlihat seperti modul adalah bagian dari baris pertama. Ini berarti kita tidak memerlukan baris kedua untuk mengambil ruang dalam desain kita sama sekali. Itu sebabnya kami menghapus semua padding baris atas dan bawah default.

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

Tambahkan Modul Teks #1 ke Kolom 1

Tambahkan Konten H1

Saatnya mulai menambahkan modul! Mulailah dengan Modul Teks pertama dan masukkan beberapa konten H1 pilihan Anda.

Pengaturan Teks H1

Pindah ke tab desain dan ubah pengaturan teks H1 yang sesuai:

• Font Judul: Poppins
• Warna Teks Judul: #e92741
• Ukuran Teks Judul: 3vw (Desktop), 5vw (Tablet), 7vw (Telepon)

Jarak

Tambahkan beberapa nilai margin berikutnya.

• Margin Atas: -35vw (Desktop), 7vw (Tablet), 10vw (Telepon)
• Margin Kiri: 5vw
• Margin Kanan: 12vw

Tambahkan Modul Teks #2 ke Kolom 1

Tambah isi

Modul kedua yang kita butuhkan adalah Modul Teks lainnya. Masukkan beberapa konten paragraf pilihan Anda.

Pengaturan Teks

Buka tab desain dan ubah pengaturan teks yang sesuai:

• Font Teks: Poppins
• Berat Font Teks: Ringan
• Warna Teks: #e92741
• Ukuran Teks: 0.8vw (Desktop), 1.9vw (Tablet), 2.8vw (Telepon)
• Tinggi Baris Teks: 2.8em

Jarak

Kami juga menambahkan beberapa nilai margin khusus ke Modul Teks.

• Margin Atas: 2vw (Desktop), 7vw (Tablet), 10vw (Telepon)
• Margin Bawah: 2vw (Desktop), 7vw (Tablet), 10vw (Telepon)
• Margin Kiri: 5vw
• Margin Kanan: 13vw (Desktop), 5vw (Tablet & Ponsel)

Tambahkan Modul Tombol ke Kolom 1

Tambahkan Salinan

Modul selanjutnya yang kita butuhkan adalah Button Module. Masukkan beberapa salinan pilihan Anda.

Pengaturan Tombol

Lalu, buka tab desain dan beri gaya pada tombol.

• Gunakan Gaya Kustom Untuk Tombol: Ya
• Ukuran Teks Tombol: 0.9vw
• Warna Teks Tombol: #e92741
• Warna Latar Tombol: #f5ede5
• Lebar Batas Tombol: 0px
• Radius Perbatasan Tombol: 5px
• Font Tombol: Poppins

Jarak

Kami juga meningkatkan ukuran tombol dengan menambahkan beberapa nilai spasi khusus.

• Margin Atas: 2vw
• Margin Kiri: 5vw
• Padding Atas: 1.5vw (Desktop), 2.5vw (Tablet), 3vw (Telepon)
• Padding Bawah: 1.5vw (Desktop), 2.5vw (Tablet), 3vw (Telepon)
• Padding Kiri: 6vw (Desktop), 9vw (Tablet), 15vw (Telepon)
• Padding Kanan: 6vw (Desktop), 9vw (Tablet), 15vw (Telepon)

Bayangan Kotak

Selesaikan desain Modul Tombol dengan menambahkan bayangan kotak halus.

• Posisi Vertikal Bayangan Kotak: 20px
• Kekuatan Buram Bayangan Kotak: 50px
• Kekuatan Penyebaran Bayangan Kotak: -5px
• Warna Bayangan: rgba (0,0,0,0.19)

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 membagikan bagian pahlawan gesek kolom yang indah secara gratis dan kami juga menunjukkan kepada Anda cara membuatnya kembali dari awal. Ini adalah cara yang bagus untuk menampilkan beberapa kartu CTA di bagian pahlawan Anda tanpa memiliki desain yang terlihat terlalu berlebihan. Kami harap Anda menikmati tutorial ini dan jika Anda memiliki pertanyaan atau saran, pastikan Anda meninggalkannya 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.