Semakin menarik CTA secara visual, semakin besar peluang rasio konversinya. Ada banyak cara untuk mendesain CTA Anda, tetapi dalam artikel ini, kami akan menunjukkan kepada Anda cara membuat template kolom CTA yang mengagumkan dengan gambar semi-transparan dan lapisan kolom. Anda dapat menemukan gambar semi-transparan di folder unduhan di bawah, tetapi silakan gunakan gambar lain. Anda juga dapat mengunduh file JSON secara gratis!
Mari kita pergi.
preview
Sebelum kita menyelami tutorial, mari kita lihat sekilas bagaimana kita melihat berbagai ukuran layar.
Ayo mulai menciptakan!
Tambahkan bagian baru
konteks
Mulailah dengan membuat halaman baru atau menambahkan bagian reguler baru ke halaman yang ada. Lalu pergi ke bagian pengaturan dan tambahkan latar belakang gradien.
- Latar belakang: gradien
- Gradien warna gradien: abu-abu #efefef sangat abu-abu
- Warna latar dua: Putih #ffffff
- Jenis gradien: Radial
- Arah radial: pusat
- Posisi awal: 52%
- Posisi akhir: 50%
jarak
Beralih ke tab Desain dan sesuaikan infill di pengaturan jarak.
- Padding atas dan bawah
- Kantor: 0vw
- Jok Dalam Stoking
- Tablet + Telepon: 70vw
Tambahkan baris baru
Struktur kolom
Lanjutkan menambahkan baris baru menggunakan struktur kolom berikut:
perekat
Kemudian sesuaikan lebar dan lebar maksimum garis.
- Lebar: 100%
- Lebar maks 100%
Tambahkan modul teks
Tambahkan H2 dan konten tekstual
Saatnya menambahkan modul! Pertama, tambahkan modul teks dan masukkan beberapa isi H2 dan paragraf pilihan Anda.
teks
Beralih ke tab desain dan beri gaya teks sebagai berikut:
- Teks font: Buka Sans
- Penyelarasan teks: pusat
- Warna teks: Hijau #5bba1b
- Ukuran teks:
- Kantor: 1.2vw
- Tablet: 2.8vw
- Telepon: 3.6vw
- Spasi huruf teks: 0.2vw
- Tinggi baris teks: 1.8em
Judul Teks 2
Setelah menata teks paragraf, gaya juga teks H2.
- Bagian: H2
- H2 Berat font: Doppio One
- Penjajaran Teks H2: Pusat
- Warna teks H2: #3d3d3d
- H2 Ukuran teks:
- Kantor: 4.4vw
- Tablet: 5.9vw
- Telepon: 6.9vw
jarak
Dan tambahkan padding kecil di bagian atas.
- Top Padding: 212px
Tambahkan modul divisi
jarak penglihatan
Di bawah modul teks, tambahkan modul divisi dan setel visibilitas ke "Ya".
- Visibilitas: ya
Baris
Ubah warna pemisah lalu.
- Warna garis: Abu-abu gelap #545454
perekat
Sekarang, sesuaikan ukuran pemisah sehingga terlihat lebih kecil.
- Berat pemisah: 4px
- Lebar: 9%
- Penyelarasan modul: pusat
jarak
Juga tambahkan margin atas negatif.
- Margin atas:
- Office: -40px
- Tablet + Telepon: -15px
Tambahkan baris baru
Struktur kolom
Lanjutkan dengan menambahkan baris baru dengan tiga kolom berukuran sama. Ini akan menjadi dasar untuk desain kolom CTA.
konteks
Sebelum Anda menambahkan modul, tambahkan gradien ke latar belakang parameter garis.
- Latar belakang: gradien
- 1 gradien warna latar belakang: putih #ffffff
- Warna latar belakang gradien dua: transparan
- Jenis gradien: Radial
- Pusat kemudi radial
- Posisi awal: 42%
- Posisi akhir: 50%
perekat
Sekarang, sesuaikan ukuran garis.
- Lebar: 100%
- Lebar maksimum: 100%
jarak
Lalu pergi ke pengaturan jarak dan tambahkan nilai padding kustom.
- pelapis atas: 22vw
- Lapisan bawah: 10vw
- Padding kiri dan kanan: 10vw
Pengaturan Kolom 1
konteks
Lanjutkan dengan membuka kolom 1 dan menambahkan latar belakang gradien.
- Latar belakang: gradien
- Warna latar belakang gradien: Biru #2a4eed
- Warna latar belakang gradien dua: biru muda #91f5f7
- Jenis gradien: linier
- Arah Gradien: 38deg
- Posisi awal: 23%
Batas
Kemudian tentukan sudut bulat kolom di pengaturan perbatasan.
- Sudut bundar: 2vw di semua sudut
Kotak bayangan
Tambahkan naungan kotak halus juga.
- Box Shadow: Opsi kedua
- Bayangan kotak Posisi horisontal: 6px
- Posisi Vertikal Box Shadow: -10px
- Box Shadow Blur Force: 50px
overflows
Pastikan limpahan kolom juga terlihat.
- Overflow horisontal dan vertikal: terlihat
Pengaturan Kolom 2
konteks
Pergi ke kolom kedua dan tambahkan latar belakang gradien berikut:
- Latar belakang: gradien
- Warna latar gradien satu: #1ba038
- Dua gradien latar belakang warna: #c6f727
- Jenis gradien: linier
- Arah Gradien: 38deg
- Posisi awal: 23%
Batas
Tambahkan juga radius batas ke kolom.
- Sudut bundar: 2vw di keempat sudut
Kotak bayangan
Dengan naungan kotak halus.
- Box Shadow: Opsi kedua
- Bayangan kotak Posisi horisontal: 6px
- Posisi Vertikal Box Shadow: -10px
- Box Shadow Blur Force: 50px
Transformator
Kolom ini sedikit lebih tinggi dari yang lain. Untuk membuat efek ini, kita akan menyesuaikan pengaturan konversi transformasi untuk kolom 2.
- Terjemahan Transformer:
- Kantor: -8vw, sumbu-y
- Tablet + Telepon: 30vw, sumbu Y
overflows
Buat juga terlihat luapan dari kolom ini.
- Overflow horisontal dan vertikal: terlihat
Pengaturan Kolom 3
konteks
Mari kita beralih ke kolom terakhir dan terakhir! Tambahkan latar belakang gradien.
- Latar belakang: gradien
- Warna latar gradien satu: #f0562c
- Dua gradien latar belakang warna: #f1a526
- Jenis gradien: linier
- Arah Gradien: 38deg
- Posisi awal: 23%
Batas
Beralih ke tab Desain dan tambahkan radius batas ke setiap sudut.
- Sudut bundar: 2vw di semua sudut.
Kotak bayangan
Tambahkan naungan kotak juga.
- Box Shadow: Opsi kedua
- Bayangan kotak Posisi horisontal: 6px
- Posisi Vertikal Box Shadow: -10px
- Box Shadow Blur Force: 50px
Transformator
Pada ukuran layar yang lebih kecil, kita perlu mengubah posisi kolom menggunakan nilai konversi transformasi kustom.
- Terjemahan Transformer:
- Tablet + Telepon: 60vw
overflows
Terakhir, sesuaikan pengaturan overflow.
- Overflow horisontal dan vertikal: terlihat
Tambahkan modul gambar
Impor gambar semi-transparan guntingan
Setelah Anda membuat semua parameter kolom, saatnya menambahkan modul. Tambahkan modul gambar ke kolom 1 dan unggah gambar semi transparan pilihan Anda. Anda dapat menemukan gambar yang kami gunakan di folder zip yang dapat Anda unduh di awal artikel ini.
perekat
Buat modul menjadi lebar penuh.
- Beralih ke mode lebar penuh: Ya
jarak
Kemudian tambahkan margin khusus dan isi nilai.
- Margin atas:
- Kantor: -11vw
- Tablet + Telepon: -24vw
- Padding kiri dan kanan:
- Kantor: 5vw
- Tablet + Telepon: 20vw
Ubah tangga menjadi hover
Kami menambahkan efek hover halus ke gambar menggunakan opsi transformasi skala di pengaturan transformasi.
- Transform Scale on Hover: 120% pada kedua sumbu.
Z-Index
Untuk memastikan bahwa gambar muncul di bagian atas kolom, tingkatkan nilai indeks z pada tab Advanced.
- Z-Index: 1
Gandakan dan seret modul gambar
Sekarang kloning modul gambar dua kali dan tempatkan duplikat di dua kolom yang tersisa. Proses ini lebih mudah dalam mode kabel.
- Mulailah dengan menduplikasi modul gambar dua kali
- Kemudian seret modul gambar baru ke kolom 2 dan 3.
- Unduh gambar yang berbeda
Tambahkan modul teks
Tambahkan konten H3
Di bawah gambar di kolom 1, tambahkan modul teks dan masukkan beberapa isi H3 pilihan Anda.
Judul Teks 3
Beralih ke tab desain dan terapkan gaya ke pengaturan teks H3.
- Judul Teks: H3
- H3 Font: Doppio One
- H3 Berat font: tebal
- H3 Alignment: pusat
- H3 Warna Teks: Putih #ffffff
- H3 Ukuran teks:
- Kantor: 1.8vw
- Tablet: 5vw
- Telepon: 6vw
Gandakan dan seret modul teks
Mengkloning modul teks dua kali dan menempatkan duplikat di dua kolom yang tersisa.
- Mulailah dengan menduplikasi modul teks dua kali.
- Kemudian seret di bawah modul gambar di kolom 2 dan 3.
- Mengubah isi di setiap modul teks baru
Tambahkan modul teks
Tambahkan konten
Di bawah modul judul, tambahkan modul teks baru. Tambahkan konten paragraf di area konten.
teks
Sekarang, gaya teks sebagai berikut.
- Teks font: Buka Sans
- Warna teks: Putih #ffffff
- Ukuran teks:
- Kantor: 0.6vw
- Tablet: 2vw
- Telepon: 2.8vw
- Tinggi baris teks: 2.2em
jarak
Untuk memusatkan teks, sesuaikan jarak modul sebagai berikut.
- Margin yang lebih rendah:
- Kantor: 5vw
- Tablet + Telepon: 10vw
- Padding kiri dan kanan
- Kantor: 5vw
- Tablet + Telepon: 14vw
Gandakan dan seret modul teks
Kloning modul teks dua kali dan seret duplikat ke dua kolom yang tersisa.
- Mulailah dengan menduplikasi modul teks dua kali
- Kemudian tempatkan duplikat di kolom 2 dan 3
- Ubah konten setiap duplikat
Tambahkan modul tombol
Tambahkan konten
Mari kita pergi ke modul terakhir! Tambahkan modul tombol ke kolom 1 dengan salinan pilihan Anda.
Menambahkan link
Masukkan tautan dalam opsi tautan modul.
penjajaran
Sekarang luruskan modul tombol.
- Alignment: pusat
Gaya Tombol
Kemudian, panggil tombol sebagai berikut.
- Ukuran teks tombol:
- Kantor: 1vw
- Tablet: 2vw
- Telepon: 3vw
- Warna teks tombol: Biru Terang #2a4eed
- Warna Latar Tombol: Putih #ffffff
- Radius batas tombol: 50vw
- Font tombol: Satu Ganda
- Berat font: Tebal
- Warna tombol: Biru Terang #2a4eed
jarak
Bentuk tombol dan buat tumpang tindih di bagian bawah dengan menambahkan margin kustom dan nilai padding di pengaturan jarak.
- Margin yang lebih rendah:
- Kantor: -1.7vw
- Tablet: -4vw
- Telepon: -6vw
- Pelapis Atas dan Bawah:
- Kantor: 1vw
- Tablet + Telepon: 3vw
- Padding kiri dan kanan
- Kantor: 4vw
- Tablet + Telepon: 10vw
Kotak bayangan
Last but not least, tambahkan naungan kotak halus ke tombol.
- Box shadow: opsi pertama
- Bayangan posisi horizontal kotak: 0px
- Shadow of the box posisi vertikal: 2px
- Box Shadow Blur Force: 50px
Modul duplikat dan seret tombol
Seperti halnya modul-modul sebelumnya, klon tombol dua kali dan tempatkan duplikat di dua kolom baris yang tersisa.
- Kloning modul tombol dua kali
- Tempatkan duplikat di kolom 2 dan 3
Tombol 2 Teks dan warna ikon
Ubah warna ikon tombol dan modul tombol di kolom 2.
- Warna teks tombol: Hijau # 1ba038
- Warna Ikon: # 1ba038
Tombol 3 Teks dan warna ikon
Lakukan hal yang sama dengan tombol di kolom terakhir dan Anda selesai!
- Warna teks tombol: Oranye #f0562c
- Warna Ikon: # f0562c
Untuk selesai
Dalam artikel ini, kami menunjukkan cara menggunakan gambar semi-transparan untuk membuat desain kolom CTA yang menakjubkan. Kami menggunakan pengaturan luapan kolom Divi sehingga gambar dan tombol tumpang tindih dengan mulus. Coba gunakan desain ini di proyek Anda berikutnya Divi dan beri tahu kami bagaimana kelanjutannya di bagian komentar!
