Tombol dengan font ikonik memiliki banyak kegunaan dalam dunia desain web. Karena font ikon tetap tajam dalam warna dan desain saat diskalakan ke berbagai ukuran, maka masuk akal untuk menggunakannya dalam tombol. Dan, membuat tombol dengan font ikonik di Divi sebenarnya cukup mudah menggunakan font dari pustaka " ElegantIcons". Dalam tutorial ini, saya akan menunjukkan kepada Anda bagaimana Anda dapat menggunakan font ikon dengan modul tombol Divi untuk membuat tombol ikon tunggal.
Beberapa hal penting dari tutorial ini termasuk:
- Komentar utiliser ElegantIcons untuk menambahkan ikon sebagai teks tombol
- Cara menambahkan padding dan radius batas agar tombol terlihat seperti persegi atau lingkaran sempurna
- Bagaimana cara mengganti ikon tombol dengan ikon yang berbeda saat melayang
- Cara memposisikan ikon tombol untuk overlay gambar
- dan banyak lagi ...
penelitian
Inilah pratinjau tentang apa yang akan terjadi ...
Apa yang Anda butuhkan?
Untuk tutorial ini saya akan menggunakan yang berikut:
- Tema Divi (jelas sekali)
- Ikon font bergaya, tutorial tentang Tema Elegan jauh lebih tepat. Setelah Anda mengunduh file zip dari posting blog, kami akan menyeretnya ke file font eleganticons.ttf untuk digunakan sebagai font khusus untuk modul tombol kami.
- Halaman beranda Bed & Breakfast (tersedia gratis dari Divi Builder)
Ayo mulai!
Tambahkan font Elegant Icons ke modul tombol Anda
Tambahkan modul tombol
Untuk memulai, buat halaman baru dan terapkan pembuat visual. Pilih "Bangun dari Awal", lalu setelah pembuat visual diterapkan, tambahkan baris kolom ke bagian tersebut, lalu tambahkan modul tombol ke baris tersebut.
Seret Font Ikon Bergaya
Untuk mendapatkan permainan warna ElegantFontsAnda dapat mengunduh paket font ini melalui tautan ini. Ekstrak itu isi dari file zip dan temukan file font ikon elegan dengan menavigasi ke kelas elegan_font > HTML CSS >. Kemudian seret file “ElegantIcons.ttf” ke komputer Anda dan letakkan di pembuat visual.
Ini akan memunculkan modal Font Unduh Secara Otomatis. Cukup klik tombol unduh untuk mengunduh font ke Divi Builder.
Sekarang Anda akan memiliki akses ke font ikon bergaya saat menyesuaikan font mod di pembuat visual.
Buka pengaturan modul tombol dan perbarui font tombol dengan font Ikon Elegan baru yang baru saja Anda unduh. Ini akan muncul dalam daftar ikon di bawah "Font Kustom".
Anda mungkin memperhatikan bahwa teks tombol Anda telah diubah menjadi sekumpulan ikon. Memang, setiap karakter yang dimasukkan di area input teks tombol sekarang memiliki ikon yang sesuai dengan huruf / karakter yang sedang digunakan.
Karena kami hanya memerlukan satu ikon untuk tombol kami, Anda dapat memilih karakter apa saja di keyboard untuk menghasilkan ikon yang terkait dengan karakter itu. Misalnya, masukkan angka 5 untuk teks tombol Anda untuk mendapatkan panah chevron kanan.
Ikon tombol pertukaran saat melayang
Seperti yang Anda ketahui, modul tombol menyertakan opsi untuk menambahkan ikon saat melayang. Kita dapat menggunakan fitur ini untuk mengganti font ikon dengan ikon hover untuk efek hover yang bagus. Yang perlu kita lakukan hanyalah mengubah pengaturan tombol sebagai berikut:
Ukuran Teks Tombol: 30px Ikon tombol: lihat tangkapan layar (ini akan menjadi ikon yang akan menggantikan ikon font yang digunakan untuk tombol) Ikon Tombol Warna: # 0c71c3 (yang harus sesuai dengan warna yang digunakan untuk teks tombol ) Penempatan Ikon Tombol: Warna teks hover Tombol Kiri: rgba (255,255,255,0) (ini sepenuhnya transparan untuk menyembunyikan font dari ikon tombol hover). Isi kustom: kiri pertama, kanan pertama (isian ini akan menggantikan pembentangan saat melayang)
Sekarang yang perlu kita lakukan adalah mengganti margin untuk elemen depan di css kustom. Pergi ke tab Advanced dan masukkan kode CSS berikut di kotak depan:
margin-left: 0 !important; |
Sekarang ikon tombol Anda akan diganti dengan ikon hover over.
Tombol ikon kreatif dengan lingkaran berskala dengan ukuran teks tombol
Tombol berbentuk lingkaran sangat cocok untuk tombol ikon tunggal. Dan, jika Anda memahami cara kerja bagian dalam dari penspasian modul tombol, Anda dapat membuat tombol melingkar sempurna yang menyesuaikan ukuran teks tombol.
Triknya adalah memberi jarak pada tombol Anda menggunakan satuan panjang "em". Satuan panjang ini relatif dengan ukuran teks pada tombol Anda. Jadi jika ukuran teks tombol adalah 30px, 1em juga 30px (2em akan menjadi 60px dan seterusnya…). Mengetahui hal ini, kita hanya perlu memastikan bahwa padding di sekitar tombol kita akan sama di keempat sisinya. Tetapi yang mungkin tidak Anda pertimbangkan adalah bahwa tinggi baris teks tombol adalah 4em secara default. Ini berarti bahwa kami harus mempertimbangkan hal ini saat menambahkan nilai padding atas dan bawah.
Bagi Anda yang ingin mengetahui matematika di balik nilai padding yang dibutuhkan untuk membuat tombol lingkaran, berikut ini:
Untuk isian kiri dan kanan, atur keduanya ke 1em. Ini berarti lebar total tombol Anda akan menjadi 90px (atau 3em) karena ...
30px padding kiri + 30px untuk font-ikon + 30px padding kanan = 90px total
Tinggi baris teks tombol adalah 1.7em, yang setara dengan 170% dari ukuran teks tombol (30px) yaitu 51px.
Untuk bantalan atas dan bawah, setel keduanya ke 0,65em. 0.65em setara dengan 65% dari ukuran teks tombol (30px), yang setara dengan 19.5px.
Jadi ...
19.5px bantalan atas + 51px tinggi baris + 19.5px bantalan bawah = 90px total
Ini berarti bahwa ketika teks tombol disetel ke 30px, ukuran tombol total akan menjadi 90px kali 90px (persegi sempurna). Nyatanya, Anda bisa memikirkannya seperti itu. Terlepas dari ukuran teks tombol, ukuran total tombol adalah 3 kali nilainya. Jadi, teks tombol 40px akan membuat tombol 120px kali 120px, dll.
Saat ini, tombol tersebut memiliki dimensi yang benar, tetapi masih berbentuk persegi. Yang harus kita lakukan adalah menambahkan radius batas 50% untuk mengubah tombol persegi menjadi tombol lingkaran sempurna.
Inilah yang Anda perlu mengubah tombol Anda ke tombol lingkaran:
Tombol Radius Perbatasan: 50%
Custom Upholstery: 0.65em Top, 0.65em Bottom, 1em Straight, 1em Kiri
Ingat, Anda dapat menyesuaikan ukuran teks tombol dan tombol akan tetap berada dalam lingkaran dengan sempurna seperti isian ukuran teks.
Menambahkan tombol pada Divi
Divi memudahkan untuk menambahkan dan menyesuaikan tombol ikon unik agar sesuai dengan desain tata letak yang telah ditentukan sebelumnya.
Untuk contoh ini, saya akan menunjukkan kepada Anda cara menambahkan satu tombol ikon ke tata letak beranda Bed & Breakfast.
Untuk menambahkan tata letak ke halaman Anda, buka menu pengaturan dengan mengklik ikon ungu di bagian bawah halaman (pastikan generator visual diaktifkan). Kemudian klik pada ikon Muat dari perpustakaan. Pilih tata letak halaman beranda Bed & Breakfast dan klik tombol "Gunakan tata letak ini" untuk menerapkan tata letak di halaman.
Menambahkan tombol ikon ke gambar
Misalkan Anda ingin menambahkan tombol ikon kecil untuk melapisi sudut gambar dengan CTA tambahan yang terkait dengan produk atau layanan tertentu. Yang perlu Anda lakukan adalah menambahkan modul tombol di bawah gambar dan menyesuaikannya untuk menyertakan font ikon dan membuatnya tumpang tindih dengan gambar dengan spasi khusus.
Cari bagian "Tentang Kami" di beranda. Kemudian tambahkan modul tombol tepat di bawah salah satu gambar yang digunakan untuk menampilkan "Kamar Ganda" (yang pertama di kolom pertama dari baris tiga kolom).
Kemudian buka pengaturan tombol dan beri huruf besar "P" di kotak teks tombol. Ini akan berubah di ikon kami setelah Anda memilih set latar belakang yang mengagumkan seperti font tombol.
Untuk segera mulai mencocokkan desain tombol dengan tata letak, simpan setelan tombol Anda dan temukan tombol "Pesan Sekarang" di bagian atas tata letak. Buka Pengaturan Tombol dan salin gaya tombol dengan mengklik kanan judul sakelar Opsi Tombol dan memilih opsi "Gaya Tombol Salin" dari daftar.
Sekarang, klik kanan pada modul yang Anda tambahkan di bawah gambar dan pilih "Tempel gaya tombol".
Kemudian perbarui pengaturan tombol sebagai berikut:
Tombol Font: Font Keren
tombol font Lebar batas: 0px
Tampilkan ikon tombol: TIDAK
Kemudian tambahkan padding custom pintar kami sehingga tombol adalah kotak yang sempurna:
Padding Kustom: 0.65em Top, 0.65em Bawah, 1em Kiri, 1em Kanan
Untuk memosisikan tombol sehingga menutupi sudut kanan bawah gambar, Anda harus terlebih dahulu menghapus margin bawah dari modul gambar di atas. Buka pengaturan Image Image Module tepat di atas tombol dan atur Margin Bawah ke 0px.
Sekarang kita perlu menyeret tombol ke atas gambar menggunakan nilai margin negatif kustom yang sama dengan tinggi tombol. Untuk melakukan ini, kita perlu menentukan ketinggian tombol kita.
Seperti yang disebutkan sebelumnya di artikel ini, dengan custom fill di tempat, kita bisa mengetahui ukuran tepat tombol kita berdasarkan ukuran teks tombol saat ini. Karena ukuran teks tombol adalah 20px, kita mengetahui tinggi tombol kita adalah 3em (3 kali ukuran teks tombol), yaitu 60px. Oleh karena itu, kita perlu mengatur margin khusus untuk tombol kita sebagai berikut:
Margin Kustom: -60px Atas
Dan kemudian kita dapat memposisikan tombol kita di sebelah kanan dengan menyesuaikan perataan tombol di sebelah kanan.
Sekarang kita memiliki desain yang berfungsi untuk gambar dan tombol kita. Yang harus kita lakukan adalah menambahkan tombol yang sama ke semua gambar di bagian tersebut.
Karena kami telah menghapus margin bawah gambar, kami dapat dengan mudah menerapkan perubahan ini ke semua gambar di bagian menggunakan opsi Perluas Gaya. Klik kanan pada gambar dan pilih "Perpanjang Gaya Gambar".
Dalam kotak dialog Perpanjang Gaya, pilih "Bagian Ini" untuk opsi Di Seluruh dan klik tombol Perluas. Sekarang semua gambar memiliki margin bawah 0px.
Langkah terakhir adalah hanya menyalin dan menempelkan modul Button di bawah setiap gambar.
Ini desain finalnya.
Dan karena kami menggunakan teknik penspasian yang tepat, tombolnya juga akan tetap ada di ponsel ...
Ikon tersedia menggunakan modul tombol
Karena teks tombol modul tombol terbatas pada karakter yang tersedia pada keyboard, Anda perlu menjelajahi tombol-tombol ini untuk menemukan ikon yang tersedia yang terkait dengan setiap tombol. Cara mudah untuk melakukannya adalah dengan membuat modul tombol dengan font tombol diatur ke font elegan dan ketik karakter di kotak teks tombol.
Berikut tangkapan layar karakter dengan ikon font yang sesuai:
Jika Anda menemukan daftar ini agak lengkap, Anda selalu dapat menggunakan modul teks untuk membuat tautan ikon menggunakan kode Unic yang terdaftar. ici .
final pikiran
Menggunakan Ikon Elegan dengan Modul Tombol Divi adalah cara mudah untuk membuat tombol unik untuk Anda situs jaringan. Ini membuka pintu kreativitas dengan pengaturan modul untuk menyesuaikan tombol Anda dengan gaya teks unik, efek hover, dan banyak lagi. Saya terutama menyukai nilai jarak tombol khusus yang memastikan tombol berbentuk persegi atau lingkaran yang sempurna.
Ada banyak sekali kegunaan tombol ikon. Semoga contoh penggunaan yang tercakup dalam tutorial ini akan menambah beberapa inspirasi untuk proyek Anda sendiri.
