Apakah Anda ingin membuat tombol gradien warna-warni di Elementor ?
Secara default, Elementor memiliki fitur untuk membuat warna gradien untuk tombol Anda, tetapi hanya terbatas pada dua warna. Artikel ini akan menunjukkan cara membuat tombol gradien multiwarna Elementor tanpa bantuan add-on, cukup menggunakan custom CSS Elementor.
Menambahkan gradien multi-warna ke tombol Anda dapat membuat tombol Anda terlihat menarik dan memiliki nuansa alami. Anda mungkin bertanya-tanya, “Apakah mungkin membuat tombol gradien warna-warni di . Anda? situs web? ”. Yah, semuanya mungkin dengan Elementor dan Anda dapat membuat tombol gradien warna-warni dengan mudah.
Cara Membuat Tombol Gradien Multicolor di Elementor
Sebelum memulai tutorial, kami ingin memberi tahu Anda bahwa tutorial ini akan berfungsi dengan CSS khusus. Fitur CSS khusus hanya tersedia di Elementor Pro; jadi pastikan untuk meng-upgrade ke versi pro.
Sekarang pergi ke editor Elementor Anda. Kita akan mulai dari awal, jadi buat bagian hanya dengan satu kolom. Selanjutnya silahkan pilih tombol widget di panel widget, lalu drag and drop ke area edit Elementor. Setelah Anda menambahkan widget tombol, Anda dapat mengedit dan menata widget sesuai dengan preferensi Anda.
Pada pengaturan widget, navigasikan ke tab maju -> CSS khusus. Salin cuplikan CSS di bawah, lalu tempelkan ke bidang CSS khusus.
selector .elementor-button {
background: linear-gradient(121.28deg, #A4006C 0%, #FFECA8 100%), linear-gradient(121.28deg, #69003F 0%, #FFF8F8 100%), linear-gradient(238.72deg, #00FFFF 0%, #0212A4 100%), radial-gradient(67.16% 100% at 50% 0%, #FF00B8 0%, #FFFFFF 100%), linear-gradient(140.54deg, #7000FF 0%, #001AFF 72.37%), linear-gradient(307.43deg, #FFE927 0%, #00114D 100%), radial-gradient(107% 142.8% at 15.71% 104.5%, #FFFFFF 0%, #A7AA00 100%), #FFFFFF;
background-blend-mode: overlay, difference, difference, overlay, difference, difference, difference, normal;
}
Jika Anda senang dengan gradien multicolor yang telah diterapkan (seperti pada gambar di atas), Anda dapat tetap seperti itu dan menyimpan proyek Anda jika diinginkan. Namun, jika Anda ingin menyesuaikannya, Anda dapat melakukannya dengan memodifikasi cuplikan CSS secara lebih spesifik pada blok deklarasi CSS.
Blok deklarasi CSS dimulai dengan kurung kurawal pembuka ( {'' ) dan diakhiri dengan kurung kurawal kanan penutup(''} ).
Untuk mendapatkan blok deklarasi, Anda dapat membuat gradien menggunakan alat css gradien online. Cliquez ici untuk melihat beberapa alat dari gradien CSS. Setelah Anda selesai membuat gradien, salin CSS dan ganti blok deklarasi yang ada dengan yang baru dengan menempelkan CSS.
Ucapan: Anda juga bisa buat judul gradien di Elementor .
Dapatkan Elementor Pro Sekarang!!!
Kesimpulan
Artikel ini menunjukkan betapa mudahnya Anda membuat tombol gradien warna-warni di Elementor. Jika Anda menggunakan Elementor sebagai pembuat halaman untuk situs web WordPress dan Anda ingin membuat tombol yang menakjubkan dengan gradien warna-warni, artikel ini bisa menjadi solusi Anda.
Tombol satu warna atau dua warna bisa terlihat sederhana dan membosankan. Namun berhati-hatilah dalam membuat gradien warna-warni pada tombol Anda. Perhatikan tone dan perpaduan warna yang Anda gunakan agar kancing Anda tidak terlihat aneh dan membosankan.
Di Sini ! Itu saja untuk artikel ini yang menunjukkan caranya buat tombol gradien warna-warni di Elementor. Jika Anda memiliki kekhawatiran tentang cara menuju ke sana, beri tahu kami di dalam komentar.
Namun, Anda juga bisa berkonsultasi sumber daya kita, jika Anda memerlukan lebih banyak elemen untuk melaksanakan proyek pembuatan situs Internet Anda, dengan membaca panduan kami di Pembuatan blog WordPress atau yang di Divi: tema WordPress terbaik sepanjang masa.
Namun sementara itu, bagikan artikel ini di berbagai jejaring sosial Anda.
...
