Divi: Tema WordPress terbaik sepanjang masa!

lebih 901.000 unduhan, Divi adalah tema WordPress paling populer di dunia. Sudah lengkap, mudah digunakan dan dilengkapi dengan lebih dari 62 template gratis.

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.

Blurb desain diviAyo 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%

Latar belakang bagian Divi

jarak

Beralih ke tab Desain dan sesuaikan infill di pengaturan jarak.

  • Padding atas dan bawah
    • Kantor: 0vw
  • Jok Dalam Stoking
    • Tablet + Telepon: 70vw

Konfigurasi padding bagian diviTambahkan baris baru

Struktur kolom

Lanjutkan menambahkan baris baru menggunakan struktur kolom berikut:

Tambahkan garis divi baruperekat

Kemudian sesuaikan lebar dan lebar maksimum garis.

  • Lebar: 100%
  • Lebar maks 100%

Ukuran Nexopos

Tambahkan modul teks

Tambahkan H2 dan konten tekstual

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

Kustomisasi modul teks

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

Konfigurasi gaya modul teks WordpressJudul 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

Sesuaikan kepala divijarak

Dan tambahkan padding kecil di bagian atas.

  • Top Padding: 212px

Menyesuaikan bantalan modul teks

Tambahkan modul divisi

jarak penglihatan

Di bawah modul teks, tambahkan modul divisi dan setel visibilitas ke "Ya".

  • Visibilitas: ya

Tampilkan modul pembagi divi

Baris

Ubah warna pemisah lalu.

  • Warna garis: Abu-abu gelap #545454

Sesuaikan warna garis divi

perekat

Sekarang, sesuaikan ukuran pemisah sehingga terlihat lebih kecil.

  • Berat pemisah: 4px
  • Lebar: 9%
  • Penyelarasan modul: pusat

Sesuaikan penyelarasan divi

jarak

Juga tambahkan margin atas negatif.

  • Margin atas:
    • Office: -40px
    • Tablet + Telepon: -15px

Pembagi modul margin negatif divi

Tambahkan baris baru

Struktur kolom

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

Baris memiliki 3 kolom divi

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%

Pengaturan parameter garis Divi

perekat

Sekarang, sesuaikan ukuran garis.

Buat situs web Anda dengan Elementor dengan mudah

Elementor memungkinkan Anda membuat Mudah dan Gratis desain situs web atau blog apa pun dengan tampilan profesional. Berhentilah membayar banyak untuk situs web yang dapat Anda lakukan sendiri.

  • Lebar: 100%
  • Lebar maksimum: 100%

Ukuran garis Divijarak

Lalu pergi ke pengaturan jarak dan tambahkan nilai padding kustom.

  • pelapis atas: 22vw
  • Lapisan bawah: 10vw
  • Padding kiri dan kanan: 10vw

Konfigurasi padding garis divi

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%

Konfigurasi divi gradien

Batas

Kemudian tentukan sudut bulat kolom di pengaturan perbatasan.

  • Sudut bundar: 2vw di semua sudut

Konfigurasi perbatasan bulat kolom

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

Konfigurasi bayangan kolom 1

overflows

Pastikan limpahan kolom juga terlihat.

  • Overflow horisontal dan vertikal: terlihat

Konfigurasi overflow kolom Divi

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%

Pengaturan divi kolom kedua

Batas

Tambahkan juga radius batas ke kolom.

  • Sudut bundar: 2vw di keempat sudut

Konfigurasi kolom 2 divi bulat

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

Konfigurasi bayangan kolom 2 divi

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

Konfigurasi posisi kolom 2 divi

overflows

Buat juga terlihat luapan dari kolom ini.

  • Overflow horisontal dan vertikal: terlihat

Konfigurasi visibilitas kolom 2 diviPengaturan 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%

Konfigurasi latar belakang kolom 3 diviBatas

Beralih ke tab Desain dan tambahkan radius batas ke setiap sudut.

  • Sudut bundar: 2vw di semua sudut.

Kolom divi konfigurasi batas bulat 3Kotak bayangan

Tambahkan naungan kotak juga.

  • Box Shadow: Opsi kedua
  • Bayangan kotak Posisi horisontal: 6px
  • Posisi Vertikal Box Shadow: -10px
  • Box Shadow Blur Force: 50px

Kolom konfigurasi border divi 3

Transformator

Pada ukuran layar yang lebih kecil, kita perlu mengubah posisi kolom menggunakan nilai konversi transformasi kustom.

  • Terjemahan Transformer:
    • Tablet + Telepon: 60vw

Transformasi modul Divi

overflows

Apakah Anda ingin menjual produk Anda di internet?

Unduh WooCommerce secara gratis, plugin e-commerce terbaik untuk menjual produk fisik dan digital Anda di WordPress dan dengan mudah membuat toko online Anda. Sempurna untuk pemula.

Terakhir, sesuaikan pengaturan overflow.

  • Overflow horisontal dan vertikal: terlihat

Konfigurasi overflow Divi

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.

Tambahkan gambar divi transparan

perekat

Buat modul menjadi lebar penuh.

  • Beralih ke mode lebar penuh: Ya

Ganti ke moe lebar penuh

jarak

Kemudian tambahkan margin khusus dan isi nilai.

  • Margin atas:
    • Kantor: -11vw
    • Tablet + Telepon: -24vw
  • Padding kiri dan kanan:
    • Kantor: 5vw
    • Tablet + Telepon: 20vw

Modul gambar konfigurasi bantalan divi

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.

Ubah menjadi gambar modul divi hover

Z-Index

Untuk memastikan bahwa gambar muncul di bagian atas kolom, tingkatkan nilai indeks z pada tab Advanced.

  • Z-Index: 1

Modul gambar divi konfigurasi Zindex

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

Gandakan dan pindahkan modul gambar

Tambahkan modul teks

Tambahkan konten H3

Di bawah gambar kolom 1, tambahkan modul teks dan masukkan konten H3 apa pun yang Anda inginkan.

Tambahkan teks modul divi

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

Parameter modul teks Divi

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.
  • Ubah konten di setiap modul teks baru

Gandakan modul teks divi

Tambahkan modul teks

Tambahkan konten

Di bawah modul judul, tambahkan modul teks baru. Tambahkan konten paragraf di area konten.

Tambahkan teks modul divi

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

Modul divi deskripsi konfigurasi

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

Tata letak DiviGandakan 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

Gandakan modul teks pada kolom divi lainTambahkan modul tombol

Tambahkan konten

Mari kita pergi ke modul terakhir! Tambahkan modul tombol ke kolom 1 dengan salinan pilihan Anda.

Tambahkan modul tombol divi

Menambahkan link

Masukkan tautan dalam opsi tautan modul.

Konfigurasi tautan modul Divipenjajaran

Sekarang luruskan modul tombol.

  • Alignment: pusat

Konfigurasi penyelarasan modul tombol Divi

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

Konfigurasi warna tombol modul Divi

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

tombol spasi

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

Konfigurasi divi modul bayangan

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

Modul tombol divi duplikatTombol 2 Teks dan warna ikon

Ubah warna ikon tombol dan modul tombol di kolom 2.

  • Warna teks tombol: Hijau # 1ba038
  • Warna Ikon: # 1ba038

Modul tombol Divi

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

Parameter tombol Divi

Untuk selesai

Pada artikel ini, kami menunjukkan kepada Anda bagaimana menggunakan gambar semi-transparan untuk membuat desain kolom CTA yang luar biasa. Kami menggunakan pengaturan limpahan kolom Divi sehingga gambar dan tombol saling tumpang tindih. Coba gunakan desain ini di proyek Divi Anda berikutnya dan beri tahu kami cara kerjanya di bagian komentar!

1 saham
saham1
menciak
Register