Menggunakan Gambar Transparan untuk Membuat Kolom CTA yang Indah Tumpang Tindih dengan Divi

Semakin menarik secara visual CTA, semakin tinggi peluang untuk tingkat konversi yang lebih baik. Ada banyak cara untuk mendesain CTA Anda, tetapi dalam posting ini, kami akan menunjukkan cara membuat desain kolom CTA yang indah dengan gambar semi-transparan dan kolom yang tumpang tindih. Anda dapat menemukan gambar semi-transparan di folder unduhan di bawah ini, tetapi jangan ragu untuk menggunakan gambar lain. 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 Tata Letak Kolom CTA GRATIS

Untuk mendapatkan tata letak kolom CTA gratis, Anda harus mengunduhnya terlebih dahulu 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

Mulailah dengan membuat halaman baru atau menambahkan bagian reguler baru ke halaman yang ada. Kemudian, masuk ke pengaturan bagian dan tambahkan latar belakang gradien.

• Latar Belakang: Gradien
• Warna Gradien Latar Belakang Satu: Abu-abu Sangat Terang #efefef
• Warna Gradien Latar Belakang Dua: Putih #ffffff
• Tipe Gradien: Radial
• Arah Radial: Pusat
• Posisi Awal: 52%
• Posisi Akhir: 50%

Jarak

Pindah ke tab desain dan sesuaikan padding dalam pengaturan spasi.

• Padding Atas dan Bawah
  • Desktop: 0vw
• Lapisan Bawah
  • Tablet + Telepon: 70vw

Tambahkan Baris Baru

Struktur Kolom

Lanjutkan dengan menambahkan baris baru menggunakan struktur kolom berikut:

Perekat

Kemudian, sesuaikan lebar dan lebar maksimum baris.

• Lebar: 100%
• Lebar Maks 100%

Tambahkan Modul Teks

Tambahkan H2 dan Konten Teks

Saatnya menambahkan modul! Pertama, tambahkan modul teks dan masukkan beberapa konten H2 dan paragraf pilihan Anda.

Teks

Pindah ke tab desain dan gaya teks sebagai berikut:

• Font Teks: Buka Sans
• Perataan Teks: Tengah
• Warna Teks: Hijau #5bba1b
• Ukuran teks:
  • Desktop: 1.2vw
  • Tablet: 2.8vw
  • Telepon: 3.6vw
• Spasi Surat Teks: 0.2vw
• Tinggi Baris Teks: 1.8em

Judul 2 Teks

Setelah menata teks paragraf, gaya teks H2 juga.

• Judul: H2
• Berat Huruf H2: Doppio One
• Perataan Teks H2: Tengah
• Warna Teks H2: Abu-abu Sangat Gelap #3d3d3d
• Ukuran Teks H2:
  • Desktop: 4.4vw
  • Tablet: 5.9vw
  • Telepon: 6.9vw

Jarak

Dan tambahkan beberapa padding atas.

• Padding Atas: 212px

Tambahkan Modul Pembagi

Visibilitas

Di bawah modul teks, tambahkan modul pembagi dan atur visibilitas ke 'Ya'.

• Visibilitas: Ya

Garis

Ubah warna pembagi berikutnya.

• Warna Garis: Abu-abu Gelap #545454

Perekat

Sekarang, sesuaikan ukuran pembagi agar terlihat lebih kecil.

• Berat Pembagi: 4px
• Lebar: 9%
• Penyelarasan Modul: Pusat

Jarak

Tambahkan beberapa margin atas negatif juga.

• Batas atas:
  • Desktop: -40px
  • Tablet + Telepon: -15px

Tambahkan Baris Baru

Struktur Kolom

Lanjutkan dengan menambahkan baris baru dengan tiga kolom berukuran sama. Ini akan menjadi dasar dari desain kolom CTA.

Latar belakang

Sebelum menambahkan modul apa pun, tambahkan gradien ke latar belakang ke pengaturan baris.

• Latar Belakang: Gradien
• Warna Latar Belakang Gradien Satu: Putih #ffffff
• Gradien Warna Latar Belakang Dua: Transparan
• Tipe Gradien: Radial
• Pusat Arah Radial
• Posisi Awal: 42%
• Posisi Akhir: 50%

Perekat

Sekarang, sesuaikan ukuran baris.

• Lebar: 100%
• Lebar Maks: 100%

Jarak

Buka pengaturan spasi berikutnya dan tambahkan beberapa nilai padding khusus.

• Padding Atas: 22vw
• Padding Bawah: 10vw
• Padding Kiri dan Kanan: 10vw

Pengaturan Kolom 1

Latar belakang

Lanjutkan dengan membuka pengaturan kolom 1 dan menambahkan latar belakang gradien.

• Latar Belakang: Gradien
• Warna Gradien Latar Belakang Satu: Biru #2a4eed
• Warna Gradien Latar Belakang Dua: Biru Muda#91f5f7
• Tipe Gradien: Linier
• Arah Gradien: 38deg
• Posisi Awal: 23%

Berbatasan

Beri kolom sudut membulat di setting border selanjutnya.

• Sudut Bulat: 2vw di semua sudut

Bayangan Kotak

Tambahkan bayangan kotak halus juga.

• Bayangan Kotak: Opsi Kedua
• Posisi Horizontal Bayangan Kotak: 6px
• Posisi Vertikal Bayangan Kotak: -10px
• Kekuatan Buram Bayangan Kotak: 50px

Meluap

Pastikan luapan kolom juga terlihat.

• Luapan Horisontal dan Vertikal: Terlihat

Pengaturan Kolom 2

Latar belakang

Pindah ke kolom kedua dan tambahkan latar belakang gradien berikut:

• Latar Belakang: Gradien
• Warna Gradien Latar Belakang Satu: #1ba038
• Warna Gradien Latar Belakang Dua: #c6f727
• Tipe Gradien: Linier
• Arah Gradien: 38deg
• Posisi Awal: 23%

Berbatasan

Tambahkan beberapa radius perbatasan ke kolom juga.

• Sudut Bulat: 2vw keempat sudut

Bayangan Kotak

Bersamaan dengan bayangan kotak yang halus.

• Bayangan Kotak: Opsi Kedua
• Posisi Horizontal Bayangan Kotak: 6px
• Posisi Vertikal Bayangan Kotak: -10px
• Kekuatan Buram Bayangan Kotak: 50px

Mengubah

Kolom ini duduk sedikit lebih tinggi dari yang lain. Untuk membuat efek ini, kami akan menyesuaikan pengaturan transformasi terjemahan untuk kolom 2.

• Ubah Terjemahan:
  • Desktop: -8vw, sumbu y
  • Tablet + Telepon: 30vw, sumbu y

Meluap

Buat luapan kolom ini juga terlihat.

• Luapan Horizontal dan Vertikal: Terlihat

Pengaturan Kolom 3

Latar belakang

Ke kolom berikutnya dan terakhir! Tambahkan latar belakang gradien.

• Latar Belakang: Gradien
• Warna Gradien Latar Belakang Satu: #f0562c
• Warna Gradien Latar Belakang Dua: #f1a526
• Tipe Gradien: Linier
• Arah Gradien: 38deg
• Posisi Awal: 23%

Berbatasan

Pindah ke tab desain dan tambahkan beberapa radius batas ke setiap sudut.

• Sudut Bulat: 2vw di semua sudut.

Bayangan Kotak

Tambahkan bayangan kotak juga.

• Bayangan Kotak: Opsi Kedua
• Posisi Horizontal Bayangan Kotak: 6px
• Posisi Vertikal Bayangan Kotak: -10px
• Kekuatan Buram Bayangan Kotak: 50px

Mengubah

Pada ukuran layar yang lebih kecil, kita perlu memposisikan ulang kolom menggunakan nilai terjemahan transformasi kustom.

• Ubah Terjemahan:
  • Tablet + Telepon: 60vw

Meluap

Terakhir, sesuaikan pengaturan overflow.

• Luapan Horizontal dan Vertikal: Terlihat

Tambahkan Modul Gambar

Unggah Gambar Cut-Out, Semi-Transparan

Setelah Anda menyelesaikan semua pengaturan kolom, saatnya untuk 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 posting ini.

Perekat

Buat modul dengan lebar penuh.

• Paksa Lebar Penuh: Ya

Jarak

Tambahkan beberapa margin kustom dan nilai padding berikutnya.

• Batas atas:
  • Desktop: -11vw
  • Tablet + Telepon: -24vw
• Bantalan Kiri dan Kanan:
  • Desktop: 5vw
  • Tablet + Telepon: 20vw

Transform Skala pada Arahkan

Kami menambahkan efek hover halus ke gambar menggunakan opsi skala transformasi dalam pengaturan transformasi.

• Transform Scale on Hover: 120% pada kedua sumbu.

Z-Indeks

Untuk memastikan gambar muncul di atas kolom, kami akan meningkatkan nilai indeks z di tab lanjutan.

• Z-Indeks: 1

Duplikat dan Seret Modul Gambar

Sekarang, kloning modul gambar dua kali dan tempatkan duplikat di dua kolom yang tersisa. Proses ini lebih mudah dalam tampilan wireframe.

• Pertama, duplikat modul gambar dua kali
• Kemudian, seret modul gambar baru ke kolom 2 dan 3
• Unggah gambar yang berbeda

Tambahkan Modul Teks

Tambahkan konten H3

Di bawah gambar di kolom 1, tambahkan modul teks dan masukkan beberapa konten H3 pilihan Anda.

Judul 3 Teks

Pindah ke tab desain dan gaya pengaturan teks H3.

• Teks Judul: H3
• Font H3: Doppio One
• Berat Huruf H3: Tebal
• Penjajaran H3: Pusat
• Warna Teks H3: Putih #ffffff
• Ukuran Teks H3:
  • Desktop: 1.8vw
  • Tablet: 5vw
  • Telepon: 6vw

Duplikat dan Seret Modul Teks

Kloning modul teks dua kali dan tempatkan duplikat di dua kolom yang tersisa.

• Pertama, duplikat modul teks dua kali
• Kemudian, seret ke bawah modul gambar di kolom 2 dan 3
• Ubah konten di setiap modul teks baru

Tambahkan Modul Teks

Tambah isi

Di bawah modul judul, tambahkan modul teks baru. Tambahkan beberapa konten paragraf ke kotak konten.

Teks

Sekarang, gaya teks sebagai berikut.

• Font Teks: Buka Sans
• Warna Teks: Putih #ffffff
• Ukuran teks:
  • Desktop: 0.6vw
  • Tablet: 2vw
  • Telepon: 2.8vw
• Tinggi Baris Teks: 2.2em

Jarak

Untuk memusatkan teks, sesuaikan jarak modul sebagai berikut.

• Margin Bawah:
  • Desktop: 5vw
  • Tablet + Telepon: 10vw
• Padding Kiri dan Kanan
  • Desktop: 5vw
  • Tablet + Telepon: 14vw

Duplikat dan Seret Modul Teks

Kloning modul teks dua kali dan seret duplikatnya ke dua kolom yang tersisa.

• Pertama, duplikat modul teks dua kali
• Kemudian, tempatkan duplikat di kolom 2 dan 3
• Ubah konten di setiap duplikat

Tambahkan Modul Tombol

Tambah isi

Ke modul terakhir! Tambahkan modul tombol ke kolom 1 dengan beberapa salinan pilihan Anda.

Tambahkan Tautan

Sisipkan tautan di opsi tautan modul.

Penyelarasan

Sekarang, sejajarkan modul tombol.

• Penjajaran: Pusat

Gaya Tombol

Kemudian, gaya tombol sebagai berikut.

• Ukuran Teks Tombol:
  • Desktop: 1vw
  • Tablet: 2vw
  • Telepon: 3vw
• Warna Teks Tombol: Biru Cerah #2a4eed
• Warna Latar Tombol: Putih #ffffff
• Radius Perbatasan Tombol: 50vw
• Font Tombol: Doppio One
• Berat Huruf Tombol: Tebal
• Warna Ikon Tombol: Biru Cerah #2a4eed

Jarak

Bentuk tombol dan buat tumpang tindih bawah dengan menambahkan beberapa margin kustom dan nilai padding dalam pengaturan spasi.

• Margin Bawah:
  • Desktop: -1.5vw
  • Tablet: -4vw
  • Telepon: -6vw
• Padding Atas dan Bawah:
  • Desktop: 1vw
  • Tablet + Telepon: 3vw
• Padding Kiri dan Kanan
  • Desktop: 4vw
  • Tablet + Telepon: 10vw

Bayangan Kotak

Last but not least, tambahkan bayangan kotak halus ke tombol.

• Bayangan kotak: Opsi Pertama
• Posisi Horizontal Bayangan Kotak: 0px
• Posisi Vertikal Bayangan Kotak: 2px
• Kekuatan Buram Bayangan Kotak: 50px

Modul Tombol Duplikat dan Seret

Sama seperti 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 tombol dan ikon 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 selesai!

• Warna Teks Tombol: Oranye #f0562c
• Warna Ikon: #f0562c

Pratinjau

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

Desktop

Seluler

Ini adalah Bungkus

Dalam posting ini, kami telah menunjukkan kepada Anda bagaimana menggunakan gambar semi-transparan untuk membuat desain kolom CTA yang indah. Kami menggunakan pengaturan luapan kolom Divi untuk membuat gambar dan tombol tumpang tindih dengan mulus. Coba gunakan desain ini di proyek Divi Anda berikutnya dan beri tahu kami bagaimana hasilnya di bagian komentar!