Cara mengatur ukuran untuk ikon tombolElementor ? Dalam tutorial ini kami akan menunjukkan kepada Anda bagaimana mencapainya dengan CSS khusus
Setiap orang harus senang jika mereka memiliki kebebasan/fleksibilitas untuk menciptakan sesuatu karena lebih banyak fleksibilitas berarti lebih banyak produktivitas. Berbicara tentang fleksibilitas, dalam artikel ini kami akan menunjukkan kepada Anda cara mengatur ukuran khusus pada ikon tombol. Elementor.
Temukan Cara menginstal Elementor di WordPress
Secara default, widget tombol Elementor dapat menyesuaikan ukuran ikon. Namun pilihan ini dibatasi pada lima pilihan ukuran tetap (ekstra kecil, kecil, sedang, besar, dan ekstra besar). Tidak hanya terbatas pada lima pilihan yang dipilih, namun pengaturannya tidak individual. Artinya ketika ingin mengatur ukurannya, akan berdampak pada dua elemen tombol (ikon dan teks).
Mungkin Anda bertanya-tanya, “Apakah mungkin untuk mengatur ukuran khusus untuk ikon tombol Elementor? ”. Yah, semuanya mungkin dengan Elementor. Tanpa bantuan add-ons, Anda dapat melakukannya dengan mudah.
Cara Mengatur Ukuran Ikon Kustom Tombol Elemen
Sebelum memulai tutorial ini, kami ingin memberi tahu Anda bahwa tutorial ini akan bekerja dengan CSS kustom Elementor. Fungsionalitas CSS khusus hanya tersedia di Elementor Pro.
Baiklah, mari kita mulai!
Buka editor Elementor Anda. Kami akan memulai semuanya dari awal, jadi buat bagian hanya dengan satu kolom. Selanjutnya, silahkan pilih widget tombol dari panel widget, lalu drag dan drop ke area pengeditan.
Baca juga: Elementor: Cara Membuat Bentuk Kustom
Setelah Anda menambahkan widget tombol, Anda dapat mengedit dan menata widget sesuai dengan preferensi Anda. Seperti menambahkan ikon, warna latar belakang teks, dll….
Seperti yang Anda lihat dari gambar di atas, ikon dan ukuran teksnya sama. Ketika Anda ingin mengubah ukuran ikon hanya dengan mengaturnya pada opsi Ukuran pengaturan widget, itu juga akan mempengaruhi teks.
Oke, sekarang kita akan menyelesaikan masalah ini. Pada pengaturan widget, navigasikan ke tab maju -> CSS khusus.
Salin cuplikan CSS di bawah ini lalu tempelkan ke bidang CSS khusus.
selector .elementor-button-icon { font-size:100px; color: inherit;
}
selector .elementor-button-text {margin:auto;}
Anda dapat menyesuaikan ukuran ikon dengan mengubah nilai potongan CSS (lihat gambar di bawah).
Di sana!. Jangan lupa untuk menyimpan atau menerbitkan proyek Anda jika Anda mau.
Dapatkan Elementor Pro Sekarang!!!
Kesimpulan
Artikel ini menunjukkan cara mengatur ukuran khusus ikon tombol Elementor menggunakan CSS khusus. Namun, jika Anda menginginkan cara yang lebih mudah untuk menyesuaikan ukuran ikon tombol karena Anda tidak suka bekerja dengan kode, kami sarankan menggunakan tambahan elemen.
Addon Elementor yang sangat kami rekomendasikan adalah JetElements oleh Crocoblock. JetElements memiliki lebih dari 40 widget Elementor. Anda akan menemukan widget tombol yang memungkinkan Anda menyesuaikan ukuran ikon tombol.
Dengan widget tombol dari JetElements, menyesuaikan ukuran ikon tombol sangat sederhana dan mulus.
Jadi ! Itu saja untuk artikel ini yang menunjukkan cara mengatur ukuran untuk ikon tombol 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.
...
