Membuat Desain Tombol Divi Unik Menggunakan Modul Teks

Membuat desain tombol Divi yang unik menggunakan modul teks mungkin sudah terlintas di benak Anda. Jika demikian, Anda lebih kreatif dari yang Anda tahu! Dengan dirilisnya opsi hover di Divi, semua modul dapat dibuat dapat diklik. Ini membuka pintu untuk menggunakan modul apa pun (dengan semua pengaturan desain bawaannya) sebagai CTA atau tombol yang dapat diklik. Sebuah modul teks, misalnya, memungkinkan Anda untuk menambahkan teks sebanyak yang Anda inginkan ke modul dalam format yang berbeda. Plus, modul teks juga memiliki beberapa opsi desain yang kuat untuk menyesuaikan sudut membulat untuk menciptakan bentuk yang unik.

Dalam tutorial ini, saya akan menjelajahi beberapa desain tombol Divi unik yang dimungkinkan menggunakan modul teks.

Mari kita mulai!

Sneak Peek

Berikut adalah beberapa contoh desain tombol yang akan kita buat dengan mudah dengan modul teks.

Ini adalah tombol dengan teks pada dua baris…

Ini adalah tombol yang menggunakan item daftar…

Ini adalah tombol yang menggunakan sudut kreatif…

Membuat Desain Tombol Divi Unik Menggunakan Modul Teks

Berlangganan Saluran Youtube Kami

#1 Membuat Tombol dengan Beberapa Baris Teks

Seperti disebutkan sebelumnya, modul teks memungkinkan jumlah teks yang tidak terbatas, sehingga akan mudah untuk membuat tombol hanya dengan dua baris teks menggunakan modul teks dalam berbagai format. Menggunakan wysiwyg atau editor teks, Anda dapat menambahkan teks paragraf, header, link, daftar, dan blockquotes. Dan bagian terbaik tentang modul teks adalah Anda dapat menargetkan dan menata setiap format teks ini satu per satu menggunakan UI tab yang ada di dalam pengaturan desain pembuat visual.

Ini membuatnya sangat mudah untuk menambahkan beberapa baris teks dan kemudian menata setiap baris teks secara terpisah untuk tata letak tombol yang unik.

Berikut adalah contoh singkat tentang cara mengatur modul teks sebagai tombol dengan beberapa baris teks.

Jika Anda belum melakukannya, buat halaman baru dan terapkan pembuat visual. Pilih opsi "Bangun dari Awal". Kemudian buat bagian baru baris satu kolom. Kemudian tambahkan modul teks ke baris.

Untuk konten teks, gunakan tab html dan masukkan yang berikut:

<h3>Contact Us</h3>
<h4>WE CAN HELP</h4>

Ada banyak gaya latar belakang berbeda yang dapat kita tambahkan ke modul kita, tetapi untuk contoh ini, tambahkan latar belakang gradien sederhana:

Warna Kiri Gradien Latar Belakang: #FEE140
Warna Kanan Gradien Latar Belakang: #FA709A

Kemudian buka tab desain dan gunakan UI tab heading untuk menata tag heading h3 dan h4 sebagai berikut:

Judul 3 Berat Font: Ultra Tebal
Judul 3 Gaya Font: TT
Judul 3 Warna Teks: #ffffff
Judul 4 Gaya Font: TT
Judul 4 Warna Teks: #ffffff
Judul 4 Ukuran Teks: 16px

Sekarang yang perlu kita lakukan adalah mengukur modul teks agar lebih terlihat seperti tombol. Untuk melakukan itu, perbarui yang berikut:

Lebar: 230 piksel
Padding Kustom: 1em atas, 0,5em bawah, 2em kiri, 2em kanan

Sejak rilis opsi hover baru Divi, semua modul dapat diklik seperti tombol. Untuk melakukan ini, kembali ke tab konten dan masukkan url tautan modul.

Berikut adalah hasil akhirnya.

Sebagai efek hover, Anda dapat menambahkan bayangan kotak yang menyapu tombol, yang pada akhirnya menerapkan warna latar belakang baru untuk menggantikan gradien.

Untuk melakukannya, buka pengaturan modul teks dan perbarui yang berikut ini:

Bayangan Kotak: lihat tangkapan layar
Posisi Horizontal Bayangan Kotak: 0px (default), 230px (arahkan kursor)
Posisi Vertikal Bayangan Kotak: 0px
Warna Bayangan: rgba(0,0,0,0) (default), #fee140 (arahkan kursor)

Berikut tampilannya saat di hover.

#2 Membuat Tombol Item Daftar

Karena modul teks memungkinkan Anda untuk menambahkan daftar (tidak berurutan atau berurutan) ke konten, Anda dapat memanfaatkan fitur ini untuk membuat tombol daftar. Pada dasarnya, yang perlu Anda lakukan adalah membuat daftar dengan satu elemen daftar di dalam kotak konten. Kemudian bungkus item daftar Anda dalam tag heading sehingga Anda dapat mengatur gaya item bullet daftar dan teks heading secara terpisah.

Jika Anda belum melakukannya, buat halaman baru dan terapkan pembuat visual. Pilih opsi "Bangun dari Awal". Kemudian buat bagian baru baris satu kolom. Kemudian tambahkan modul teks ke baris.

Kemudian tambahkan html berikut di tab teks pengaturan konten Anda:

<ol><li><h3>Contact Us</h3></li></ol>

Penting untuk membungkus teks item daftar dalam tag heading sehingga kita dapat menata butir/nomor item daftar secara terpisah dari teks.

Sekarang lompat ke tab desain dan selesaikan mendesain modul teks sebagai tombol:

Di bawah kategori pengaturan teks, pilih tab daftar terurut dan perbarui yang berikut ini:

Font Daftar yang Dipesan: Exo 2
Berat Font Daftar Pesanan: Ringan
Warna Teks Daftar yang Dipesan: #000000
Ukuran Teks Daftar yang Dipesan: 20px
Jarak Huruf Daftar yang Diurutkan: 5px
Tipe Gaya Daftar yang Diurutkan: desimal-depan-nol
Posisi Gaya Daftar yang Dipesan: Di Luar
Indentasi item Daftar yang Dipesan: 2em

Di bawah kategori Teks Judul, klik tab H3 dan perbarui yang berikut ini:

Judul 3 Font: Exo 2
Judul 3 Berat Font: Semi Tebal
Judul 3 Gaya Font: TT
Judul 3 Warna Teks: #0c71c3
Judul 3 Ukuran Teks: 26px
Pos 3 Tinggi Baris: 0.3em

Selanjutnya, ubah lebar modul dan beri batas dan spasi agar terlihat seperti tombol:

Lebar (modul): 262px
Penyelarasan modul: tengah
Padding Kustom: 2em atas, 0px bawah, 2em kiri, 2em kanan
Sudut membulat: 10px2em
Lebar batas: 1px
Warna batas: #000000
Gaya perbatasan: padat

Dan jangan lupa untuk menambahkan tautan ke modul Anda ke URL pilihan Anda.

Berikut adalah desain akhir.

Jangan ragu untuk menjelajahi tipe gaya daftar baru (seperti Romawi Atas) untuk desain tombol daftar yang unik.

#3 Membuat Tombol dengan Sudut Kreatif (seperti daun)

Untuk desain berikutnya, kita akan memanfaatkan pengaturan desain sudut membulat di dalam modul teks. Ide dasarnya adalah untuk mengatur nilai radius sudut yang berbeda untuk membuat tombol berbentuk unik. Dalam contoh ini, saya akan membentuk modul kita agar terlihat seperti tombol daun.

Jika Anda belum melakukannya, buat halaman baru dan terapkan pembuat visual. Pilih opsi "Bangun dari Awal". Kemudian buat bagian baru baris satu kolom. Kemudian tambahkan modul teks ke baris.

Buka pengaturan modul teks dan masukkan html berikut di tab teks kotak konten:

<h3>grow</h3>
<h4>with us</h4>

Ini memungkinkan kita untuk menempatkan teks tombol pada dua baris (mengurangi lebar vertikal) dan menatanya secara independen.

Selanjutnya tambahkan latar belakang gradien dengan warna yang lebih “seperti daun”.

Warna kiri gradien latar belakang: #7cda24
Warna kanan gradien latar belakang: #26e051
Arah gradien: 90 derajat

Sekarang mari kita beralih ke pengaturan desain untuk memusatkan teks kita dan memberi gaya pada tag heading. Anda harus memilih tab h3 untuk mendesain heading h3 dan memilih tab h4 untuk mendesain heading h4:

Orientasi Teks: tengah
Judul 3 Font: Oswald
Judul 3 Berat Font: Ringan
Judul 3 Gaya Font: TT
Judul 3 Warna Teks: #ffffff
Judul 3 Ukuran Teks: 27px
Judul 4 Font: Oswald
Judul 4 Gaya Font: TT
Judul 4 Warna Teks: #ffffff

Lanjutkan memperbarui desain untuk memberi modul teks Anda lebar dan jarak yang tepat untuk sebuah tombol.

Lebar: 178 piksel
Penyelarasan modul: tengah
Padding Kustom: 2em atas, 2em bawah, 1em kiri, 1em kanan

Terakhir, kita dapat menambahkan sudut membulat khusus untuk memberi modul bentuk daun dan kemudian menambahkan bayangan kotak untuk membuat daun lebih hidup. Untuk melakukan pembaruan ini, berikut ini:

Pertama, buka opsi sudut membulat sehingga Anda dapat menetapkan nilai individual ke setiap sudut.

Pojok Kiri Atas: 100px
Pojok Kanan Bawah: 100px

Kemudian tambahkan bayangan kotak…

Bayangan Kotak: lihat tangkapan layar
Posisi Horizontal Bayangan Kotak: 25px
Posisi Vertikal Bayangan Kotak: -4px
Kekuatan Penyebaran Bayangan Kotak: -12px
Warna Bayangan: rgba (0,0,0,0.25)

Jangan lupa untuk menambahkan URL Tautan Modul Anda agar modul Anda tertaut ke lokasi yang diinginkan.

Berikut adalah desain akhir.

Untuk efek hover, Anda dapat mengganti nilai sudut membulat untuk menempatkan desain tombol ke arah yang berlawanan saat mengarahkan kursor:

Dan inilah tampilan efek hover.

Pikiran Akhir

Itu selalu bagus untuk berpikir di luar kotak sesekali ketika datang untuk merancang situs web dengan Divi. Semoga tutorial ini membantu memikirkan desain tombol divi yang baru dan kreatif menggunakan modul teks. Bahkan, saya menyarankan untuk menjelajahi modul lain (seperti Modul Blurb) untuk opsi desain yang lebih banyak lagi.

Saya berharap untuk mendengar dari Anda di komentar.

Bersulang!