Tombol Penataan Gaya dengan Opsi Latar Belakang Baru Divi (Termasuk 6 Desain)

Jika Anda belum memanfaatkan antarmuka opsi latar belakang baru Divi, Anda ketinggalan. Kemungkinan desain latar belakang sangat mencengangkan. Tapi bukankah akan luar biasa untuk memiliki pilihan desain yang kuat yang sama untuk tombol kita? Jika jawabannya ya maka saya pikir Anda akan menyukai posting ini.

Hari ini saya akan menunjukkan kepada Anda bagaimana menghadirkan fitur desain latar belakang yang sama kuatnya ke tombol gaya. Trik desain ini melapisi latar belakang Baris dan Kolom di belakang modul tombol untuk memberi Anda 3 lapisan kemampuan desain. Dengan kekuatan seperti ini, segalanya bisa menjadi berbahaya. Terbaik untuk tetap tenang dan berjalan lambat pada awalnya

Ayo pergi.

Sneak Peek

Berikut adalah contoh desain tombol yang dibahas dalam posting ini.

Tombol Penataan Gaya dengan Opsi Latar Belakang Baru Divi (Termasuk 6 Desain)

Berlangganan Saluran Youtube Kami

Pengaturan

Menggunakan Visual Building, tambahkan bagian reguler dengan satu baris kolom.

Selanjutnya tambahkan Modul Tombol ke baris.

Kemudian perbarui pengaturan modul tombol sebagai berikut:

Opsi Konten

Teks Tombol: [masukkan teks]
URL Tombol: [masukkan URL]

Pilihan Desain

Penjajaran tombol: Tengah
Warna Teks: Cahaya
Gunakan Gaya Kustom untuk Tombol: YA
Ukuran Teks Tombol: 48px

Opsi Lanjutan

Kita membutuhkan lebar 100% akan dibutuhkan untuk mengisi lebar kolom. Untuk melakukan ini, masukkan CSS khusus berikut di kotak Elemen Utama:

Width: 100%;

Simpan Pengaturan

Anda tidak dapat melihat apa pun di halaman saat ini karena batas tombol dan teks berwarna putih. Alih-alih menata warna latar belakang tombol menggunakan pengaturan modul tombol, kita akan menyesuaikan warna latar belakang baris/kolom di belakang tombol menggunakan opsi latar belakang yang lebih canggih. Kami akan meninjau kembali pengaturan modul tombol setelah kami mulai melakukan desain yang lebih spesifik pada tombol. Tapi untuk sekarang, mari kita selesaikan pengaturan barisnya.

Buka Pengaturan Baris tempat tombol baru Anda berada dan perbarui yang berikut ini:

Opsi Konten

Pilih tab Column 1 Background Gradient lalu klik tombol lingkaran abu-abu dengan simbol plus putih.

Sekarang Anda akan melihat warna gradien default muncul di belakang tombol putih Anda.

Kolom sudah pas di belakang tombol kita sekarang, tapi kita perlu mengurangi lebar tombol. Untuk melakukan ini kita akan menggunakan pengaturan ukuran baris. Dengan mengatur lebar khusus untuk baris kita, kita juga mengatur lebar tombol kita.

Pilihan Desain

Di bawah opsi desain, kita akan menyesuaikan ukuran baris agar sesuai dengan tombol baru kita dengan menyesuaikan yang berikut:

Gunakan Lebar Kustom: YA
Lebar kustom: 500px (ini menetapkan lebar maksimum tombol menjadi 500px)
Padding Kustom: 0px Atas, 0px Kanan, 0px Bawah, 0px Kiri

Opsi Lanjutan

Kita perlu mencocokkan radius batas baris dan kolom dengan apa yang telah kita tetapkan untuk tombol kita sehingga semuanya cocok. Untuk melakukan ini, masukkan CSS khusus berikut di kotak Elemen Utama:

border-radius: 10px;

Masukkan CSS yang sama ke dalam kotak Elemen Utama Kolom:

border-radius: 10px;

Simpan Pengaturan

Sekarang pengaturan Baris telah diperbarui untuk memiliki lebar dan bantalan khusus, dua hal telah diselesaikan. Pertama, kami telah berhasil mengatur lebar khusus untuk tombol kami. Dan Kedua, kita sekarang memiliki lapisan opsi latar belakang lain yang dapat kita gunakan untuk menata tombol kita.

Itu total 3 lapisan latar belakang (tombol, kolom, baris) yang bisa kita gunakan untuk penataan nanti.

Berikut adalah ilustrasi bagaimana tombol saat ini dibuat.

Cukup keren bukan?

Itu saja untuk pengaturan dasar. Sekarang saatnya untuk bagian yang menyenangkan dalam membuat desain yang mengagumkan untuk tombol Anda.

Membuat Desain Tombol yang Luar Biasa

Tombol Latar Belakang Video #1

Untuk membuat tombol ini, Anda akan menggunakan semua 3 lapisan, latar belakang baris untuk video, latar belakang kolom untuk gradien, dan latar belakang tombol untuk hamparan biru kecil.

Untuk Pengaturan Baris, perbarui opsi Konten berikut:

Video Latar Belakang: [unggah video]
Kolom 1 Warna Gradien Latar Belakang: rgba(12.113.195.0.41), rgba(131,0,233,0.18)

Simpan Pengaturan

Untuk Pengaturan Modul Tombol , perbarui yang berikut ini:

Opsi Konten

Teks Tombol: "Lihatlah"

Pilihan Desain

Warna Latar Tombol: rgba(12.113.195,0.25)
Warna Batas Tombol: #0c71c3

Simpan Pengaturan

Sekarang satu-satunya masalah yang tersisa adalah radius perbatasan dari latar belakang video. Kita harus menambahkan beberapa CSS khusus untuk memberikan video radius batas yang cocok dengan tombol. Kode tambahan ini hanya diperlukan untuk tombol latar belakang video.

Untuk menambahkan CSS khusus, buka pengaturan halaman dari Visual Builder dan klik tab Advanced. Kemudian perbarui kotak input CSS Kustom dengan CSS berikut:

.et_pb_section_video_bg {

border-radius: 10px;

}

Simpan Pengaturan

Tip : Pilihan desain keren lainnya adalah membuat tayangan video melayang. Cukup beri modul tombol Anda warna latar belakang yang solid dan ubah menjadi transparan saat mengarahkan kursor.

Itu dia! Sekarang Anda memiliki tombol dengan latar belakang video.

#2 Tombol Kotak-kotak

Tombol kotak-kotak membutuhkan penggunaan dua lapisan (baris dan kolom) dari gradien warna latar belakang.

Untuk membuat tombol ini, Anda akan menggunakan 2 lapisan, latar belakang baris untuk gradien tingkat pertama dan latar belakang kolom untuk lapisan warna gradien terakhir.

Untuk Pengaturan Baris, perbarui opsi Konten berikut:

Warna Gradien Latar Belakang: #8300e9, #0c71c3
Arah Gradien: 270deg
Posisi Awal: 50%
Posisi Akhir: 0%
Warna Gradien Latar Belakang Kolom1: rgba(224,11,0,0,39), rgba(255,255,255,0)
Arah Gradien: 180 derajat
Posisi Awal: 50%
Posisi Akhir: 0%

Simpan Pengaturan

Sekarang buka Pengaturan Modul Tombol dan perbarui yang berikut ini

Opsi Konten

Teks Tombol: “Berlangganan”

Pilihan Desain

Lebar Batas Tombol: 0px
Jarak Huruf Tombol: 10px
Font Tombol: Default, Tebal (B), Miring (I)
Jarak Huruf Arahkan Tombol: 10px

Itu dia. Berikut adalah hasil akhirnya.

Sekarang Anda tahu cara menambahkan efek kotak-kotak ke tombol Anda.

# 3 Tombol Gradien Radial

Untuk membuat tombol ini, Anda akan menggunakan 2 lapisan (baris dan kolom) gradien warna latar belakang.

Untuk Pengaturan Baris, perbarui opsi Konten berikut:

Warna Gradien Latar Belakang: #8300e9, #0c71c3
Tipe Gradien: Radial
Arah Radial: Pusat
Posisi Awal: 50%
Posisi Akhir: 100%
Warna Gradien Latar Belakang Kolom1: rgba(224,11,0,0,39), rgba(255,255,255,0)
Tipe Gradien: Radial
Arah Radial: Pusat
Posisi Awal: 50%
Posisi Akhir: 100%

Simpan Pengaturan

Sekarang buka Pengaturan Modul Tombol dan perbarui yang berikut:

Opsi Konten

Teks Tombol: “hubungi saya”

Pilihan Desain

Lebar Batas Tombol: 0px
Font Tombol: Gadis Licik

Ikon Tombol: [pilih ikon hati]
Hanya tampilkan Ikon Saat Arahkan ke Tombol: TIDAK

Opsi Lanjutan

Untuk sentuhan terakhir, mari tambahkan bayangan slide ke tombol. Selain kode sebelumnya, masukkan CSS Kustom berikut di kotak Elemen Utama :

box-shadow: 0px 5px 10px 3px #ccc;

Itu dia! Inilah hasil akhir Anda:

#4 Tombol Bullseye

Untuk membuat tombol ini, Anda akan menggunakan 2 lapisan (baris dan kolom) gradien warna latar belakang. Plus kita akan menambahkan beberapa css kustom di modul tombol untuk membuat efek popup batas bawah.

Untuk Pengaturan Baris, perbarui opsi Konten berikut:

Warna Gradien Latar Belakang: #023500, #008c02
Tipe Gradien: Radial
Arah Radial: Pusat
Posisi Awal: 19%
Posisi Akhir: 0%
Warna Gradien Latar Belakang Kolom1: rgba (0,206,72,0.43), rgba (255,255,255,0)
Tipe Gradien: Radial
Arah Radial: Pusat
Posisi Awal: 32%
Posisi Akhir: 0%

Sekarang buka Pengaturan Modul Tombol dan perbarui yang berikut:

Opsi Konten

Teks Tombol: “Beli”

Pilihan Desain

Ukuran Teks Tombol: 65px
Lebar Batas Tombol: 0px
Font Tombol: Roboto, Tebal (B), Huruf Besar (TT)

Opsi Lanjutan

Sekarang untuk sentuhan terakhir. Tambahkan CSS Kustom berikut ke kode yang ada di kotak input Elemen Utama :

box-shadow: 0px 5px 0px 0px #01771f;

Tombol Gambar #5

Untuk membuat tombol ini, Anda akan menggunakan semua 3 lapisan, baris untuk gambar latar belakang, kolom untuk latar belakang gradien, dan latar belakang tombol untuk hamparan warna biru semi-transparan.

Untuk Pengaturan Baris, perbarui opsi Konten berikut:

Di bawah tab Gambar Latar Belakang

Gambar Latar Belakang: [unggah gambar]
Ukuran Gambar Latar Belakang: Sampul
Posisi Gambar Latar Belakang: Tengah
Pengulangan Gambar Latar Belakang: Tidak Ada Pengulangan
Campuran Gambar Latar Belakang: Kalikan

Di bawah tab Gradien Latar Belakang

Warna Gradien Latar Belakang: rgba(12.113.195,0.33), #edf000
Tipe Gradien: Linier
Arah Gradien: 63 derajat
Posisi Awal: 50%
Posisi Akhir: 100%

Sekarang gulir ke bawah ke opsi Latar Belakang Kolom 1 dan pilih tab gradien.

Kolom 1 Warna Gradien Latar Belakang: rgba(236.239,31,0.66), rgba(0,0,0,0.49)
Tipe Gradien Kolom: Linear
Arah Gradien Kolom: 139deg
Posisi Awal Kolom: 12%
Posisi Akhir Kolom: 0%

Simpan Pengaturan

Itu menangani desain latar belakang tingkat kedua kami. Satu lagi tersisa.

Buka Pengaturan Modul Tombol dan perbarui yang berikut ini:

Opsi konten

Teks Tombol: “Dapatkan Tiket”

Pilihan Desain

Warna Latar Tombol: rgba (12.113.195.0.16)
Warna Batas Tombol: #efef4f
Font Tombol: Lato
Ikon Tombol: [pilih ikon Tiket]
Hanya Tampilkan Ikon Saat Arahkan ke Tombol: TIDAK

Tombol Arahkan Warna Teks: #023b7c
Tombol Arahkan kursor Warna latar: #023b7c

Itu dia!. Periksa tombol gambar Anda.

#6 Tombol Potret

Untuk membuat tombol terakhir ini, kita hanya akan menggunakan satu lapisan desain latar belakang. Kita akan menggunakan campuran gambar dari gambar latar belakang dan warna latar belakang untuk menciptakan tampilan yang unik.

Untuk Pengaturan Baris , gulir ke bawah ke Opsi Latar Belakang Kolom 1 dan perbarui yang berikut:

Gambar Latar Kolom: [unggah gambar potret]
Ukuran Gambar Latar Belakang Kolom: Pas (ini akan memastikan potret selalu pas di dalam tombol)
Posisi Gambar Latar Belakang Kolom: Kiri Tengah (ini menyelaraskan potret Anda ke kiri tombol)
Pengulangan Gambar Latar Kolom: Tidak Ada Pengulangan
Campuran Gambar Latar Belakang Kolom: Luminositas (ini menciptakan perpaduan warna oranye yang bagus dengan potret)

Pastikan untuk menghapus warna gradien saat ini jika Anda sudah mengaturnya. Jika tidak, Anda ingin dapat memadukan latar belakang oranye. Cukup klik pada tab gradien dan arahkan kursor ke kotak pemilih warna dan klik ikon tempat sampah yang muncul di kanan atas.

Sekarang Anda dapat melihat campuran oranye pada tombol Anda.

Simpan Pengaturan

Sekarang buka Pengaturan Modul Tombol dan perbarui yang berikut:

Opsi Konten

Teks Tombol: “Ayo Bicara”

Pilihan Desain

Penjajaran Tombol: Kanan
Warna Batas Tombol: #ff7b23
Jarak Huruf Tombol: 3px
Font Tombol: Monyet Bahagia
Ikon Tombol [tambahkan ikon obrolan]
Hanya Tampilkan Ikon Saat Arahkan ke Tombol: TIDAK
Jarak Huruf Arahkan Tombol: 3px

Semua selesai! Saya suka desain ini untuk tombol kontak blog. Saya pikir itu menambahkan sentuhan pribadi yang bagus.

Merancang tombol pada struktur kolom yang berbeda

Sejauh ini, kita telah menggunakan baris kolom tunggal sebagai latar belakang tombol kita. Ini memungkinkan kita 3 lapisan desain latar belakang. Namun, jika Anda ingin menyertakan tombol pada struktur kolom yang berbeda, Anda dapat melakukannya. Anda hanya akan kehilangan baris sebagai lapisan latar belakang.

Misalnya, katakanlah Anda ingin menambahkan baris kolom 1/2 1/2 dengan tombol di sebelah kiri dan beberapa teks di sebelah kanan. Inilah yang akan Anda lakukan.

Mulailah dengan bagian reguler baru dan pilih struktur baris kolom 1/2 1/2 . Kemudian tambahkan modul tombol ke kolom kiri.

Dalam pengaturan Modul Tombol , pastikan Anda memasukkan CSS berikut di kotak input Elemen Utama di bawah tab Lanjutan:

Width: 100%;

Anda dapat menyesuaikan modul tombol lainnya nanti.

Selanjutnya, buka Pengaturan Baris dan gulir ke bawah ke opsi Latar Belakang Kolom 1 dan perbarui pengaturan latar belakang sesuai keinginan Anda.

Lalu buka tab Desain dan perbarui yang berikut:

Kolom 1 Padding Khusus: 0px Atas, 0px Kanan, 0px Bawah, 0px Kiri

Simpan Pengaturan

Sekarang Anda memiliki tombol di kolom kiri yang dapat menggunakan opsi latar belakang kolom 1 untuk desain. Setelah Anda kembali dan memperbarui gaya tombol sesuai keinginan Anda, tambahkan teks Anda di kolom kanan dan selesai!

Responsif?

Ya. Karena tombol dibangun di dalam struktur kolom Divi, tombol akan merespons dengan baik di semua perangkat. Anda mungkin perlu meninjau kembali pengaturan modul tombol untuk menyesuaikan bagaimana elemen tombol tertentu menyesuaikan diri dengan perangkat yang berbeda.

Dukungan Lintas Browser

Saat ini, properti CSS background-blend-mode tidak didukung oleh Internet Explorer atau Edge dan Safari memiliki opsi pencampuran yang terbatas. Namun mundurnya tidak cukup dalam pengalaman saya untuk banyak kasus.

Inilah tampilan tombol di IE:

Jika Anda berkomitmen pada IE, saya sarankan mengujinya untuk menemukan media bahagia yang tampak hebat di IE dan browser lainnya.

Pikiran Akhir

Harus saya akui, tutorial ini cukup inovatif bagi saya pribadi. Di masa lalu, saya harus menambahkan banyak kelas dan CSS tambahan ke tema anak saya jika saya ingin menata tombol secara kreatif. Tetapi sekarang saya dapat menggunakan opsi latar belakang Divi, hidup saya menjadi jauh lebih mudah. Saya harap Anda dapat menggunakan trik desain ini untuk membawa tombol Anda ke level berikutnya.

Berharap untuk mendengar dari Anda di komentar.

Bersulang