Cara Membuat Tombol Font Ikon dengan Divi

Tombol font ikon memiliki banyak kegunaan dalam dunia desain web. Karena ikon font tetap tajam dalam warna dan desain saat diskalakan ke ukuran yang berbeda, masuk akal untuk menggunakannya dalam tombol. Dan, membuat tombol font ikon di Divi sebenarnya cukup mudah menggunakan Font Ikon Elegan. Dalam tutorial ini, saya akan menunjukkan kepada Anda bagaimana Anda dapat menggunakan font ikon dengan modul tombol Divi untuk membuat tombol ikon tunggal.

Beberapa highlights dari tutorial ini meliputi:

• Cara menggunakan Font Elegan untuk menambahkan ikon sebagai teks tombol
• Bagaimana menambahkan padding dan radius batas yang memastikan tombol berbentuk persegi atau lingkaran yang sempurna
• Bagaimana cara mengganti ikon tombol dengan ikon yang berbeda di hover
• Cara memposisikan ikon tombol untuk tumpang tindih dengan gambar
• dan banyak lagi…

Sneak Peek

Berikut ini adalah cuplikan dari apa yang akan datang…

Apa yang kau butuhkan

Untuk tutorial ini, saya akan menggunakan yang berikut:

• Tema Divi (jelas)
• Ikon Font Elegan – Setelah Anda mengunduh file zip dari posting blog, kami akan menyeret file font eleganticons.ttf untuk digunakan sebagai font khusus untuk modul tombol kami.
• Tata Letak Halaman Beranda Bed & Breakfast (tersedia gratis dari Divi Builder)

Mari kita mulai!

Menambahkan Font Ikon Elegan ke Modul Tombol Anda

Tambahkan Modul Tombol

Untuk memulai, buat halaman baru dan terapkan pembuat visual. Pilih "Bangun dari Awal" dan kemudian, setelah pembuat visual diterapkan, tambahkan satu baris kolom ke bagian dan kemudian tambahkan modul tombol ke baris.

Seret Font Ikon Elegan

Untuk mendapatkan Font Ikon Elegan, buka Posting Blog Font Ikon Elegan dan unduh file font. Ekstrak konten file zip dan temukan file font ikon elegan dengan menavigasi ke elegant_font > HTML CSS > fonts. Kemudian seret file "ElegantIcons.ttf" dari file komputer Anda dan letakkan di pembuat visual.

Ini akan memunculkan modal Unggah Font secara otomatis. Cukup klik tombol unggah untuk mengunggah font ke Divi Builder.

Sekarang Anda akan memiliki akses ke Font Ikon yang elegan saat menyesuaikan font modul apa pun di pembuat visual.

Buka pengaturan modul tombol dan perbarui font tombol dengan Font Ikon Elegan baru yang baru saja Anda unggah. Ini akan muncul dalam daftar ikon di bawah "Font Kustom".

Anda mungkin memperhatikan bahwa sekarang teks tombol Anda telah diubah menjadi sekumpulan ikon. Ini karena setiap karakter yang dimasukkan ke dalam kotak input teks tombol sekarang memiliki ikon yang sesuai dengan huruf/karakter yang sedang digunakan.

Karena kami hanya membutuhkan satu ikon untuk digunakan pada tombol kami, Anda dapat memilih karakter apa pun di keyboard untuk menghasilkan ikon yang terkait dengan karakter itu. Misalnya, masukkan angka 5 untuk teks tombol Anda untuk mendapatkan panah chevron kanan.

Tukarkan Ikon Tombol saat Arahkan kursor

Seperti yang Anda ketahui, modul tombol menyertakan opsi untuk menambahkan ikon saat mengarahkan kursor. Kita dapat menggunakan fungsi ini untuk mengganti font ikon dengan ikon hover untuk efek hover yang bagus. Yang perlu kita lakukan adalah mengubah pengaturan tombol sebagai berikut:

Ukuran Teks Tombol: 30px
Ikon Tombol: lihat tangkapan layar (ini akan menjadi ikon yang akan menggantikan font ikon yang digunakan untuk tombol)
Warna Ikon Tombol: #0c71c3 (ini harus sesuai dengan warna yang digunakan untuk teks tombol)
Penempatan Ikon Tombol: Kiri
Tombol Arahkan Warna Teks: rgba(255,255,255,0) (ini benar-benar transparan untuk menyembunyikan font ikon tombol saat mengarahkan kursor)
Padding Kustom: Kiri 1em, Kanan 1em (padding ini akan menggantikan padding default tombol dan mencegahnya meluas saat melayang)

Sekarang yang perlu kita lakukan adalah mengganti margin untuk elemen before di custom css. Buka tab Advanced dan masukkan CSS berikut di kotak sebelumnya:

margin-left: 0 !important;

Sekarang ikon tombol Anda akan digantikan oleh ikon hover di hover.

Membuat Tombol Ikon Lingkaran Sempurna yang Berskala dengan Ukuran Teks Tombol

Desain tombol lingkaran bekerja sangat baik untuk tombol ikon tunggal. Dan, jika Anda memahami cara kerja bagian dalam dari jarak modul tombol, Anda dapat membuat tombol melingkar sempurna yang skalanya sesuai dengan ukuran teks tombol.

Triknya adalah memberi spasi pada tombol Anda menggunakan satuan panjang "em". Satuan panjang ini relatif terhadap ukuran teks tombol Anda. Jadi jika Anda menekan ukuran teks adalah 30px, 1em juga 30px (2em akan menjadi 60px dan seterusnya…). Mengetahui hal ini, kita hanya perlu memastikan padding di sekitar tombol kita akan sama di keempat sisinya. Tetapi apa yang mungkin tidak Anda pertimbangkan adalah bahwa ketinggian baris teks tombol adalah 1.7em secara default. Itu berarti kita perlu mempertimbangkannya saat menambahkan nilai padding atas dan bawah.

Bagi Anda yang ingin mengetahui matematika di balik nilai padding yang diperlukan untuk membuat tombol lingkaran, ini dia:

Untuk padding Kiri dan Kanan, atur keduanya ke 1em. Ini berarti lebar tombol total kita akan menjadi 90px (atau 3em) karena…

30px padding kiri + 30px font ikon + 30px padding kanan = total 90px

Tinggi baris teks tombol adalah 1,7em yang setara dengan 170% dari ukuran teks tombol (30px) yang setara dengan 51px.

Untuk padding atas dan bawah, atur keduanya ke 0.65em. 0.65em setara dengan 65% dari ukuran teks tombol (30px) yang setara dengan 19.5px.

Karena itu…

19.5px padding atas + 51px tinggi garis + 19,5px padding bawah = total 90px

Ini berarti bahwa ketika teks tombol diatur ke 30px, ukuran tombol total akan menjadi 90px kali 90px (persegi sempurna). Sebenarnya, Anda bisa memikirkannya seperti ini. Apa pun yang Anda tetapkan sebagai ukuran teks tombol, ukuran total tombol akan menjadi 3x dari nilai itu. Jadi, teks tombol 40px akan membuat tombol berukuran 120px kali 120px, dan seterusnya.

Saat ini, tombol memiliki dimensi yang tepat, tetapi masih persegi. Yang perlu kita lakukan adalah menambahkan radius batas 50% untuk mengubah tombol persegi menjadi tombol lingkaran sempurna.

Inilah yang Anda butuhkan untuk mengubah tombol Anda menjadi tombol lingkaran:

Radius Perbatasan Tombol: 50%
Padding Kustom: Atas 0,65em, Bawah 0,65em, Kanan 1em, Kiri 1em

Jangan lupa, Anda dapat mengatur ukuran teks tombol dan tombol akan tetap melingkar sempurna sebagai skala padding dengan ukuran teks.

Menambahkan Tombol Ikon ke Tata Letak Divi Anda

Divi memudahkan untuk menambahkan dan menyesuaikan tombol ikon tunggal agar sesuai dengan desain tata letak siap pakai apa pun.

Untuk contoh ini, saya akan menunjukkan cara menambahkan tombol ikon tunggal ke Tata Letak Halaman Beranda Bed & Breakfast.

Untuk menambahkan tata letak ke halaman Anda, buka menu pengaturan dengan mengklik ikon ungu di bagian bawah halaman (pastikan pembuat visual diaktifkan). Kemudian klik ikon Muat dari Perpustakaan. Pilih Tata Letak Halaman Beranda Bed & Breakfast dan klik tombol "Gunakan Tata Letak Ini" untuk menerapkan tata letak ke halaman.

Menambahkan Tombol Ikon ke Gambar

Katakanlah Anda ingin menambahkan tombol ikon kecil untuk melapisi sudut gambar untuk CTA tambahan yang tertaut ke 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 beberapa spasi khusus.

Temukan bagian “Tentang Kami” pada tata letak halaman beranda. Kemudian tambahkan modul tombol langsung di bawah salah satu gambar yang digunakan untuk menampilkan "Ruang Ganda" (ini adalah yang pertama di kolom pertama dari tiga baris kolom).

Kemudian buka pengaturan tombol dan letakkan huruf kapital "P" di kotak teks tombol. Ini akan berubah menjadi ikon kami setelah Anda memilih font Elegan sebagai Font Tombol.

Untuk memulai dengan mencocokkan desain tombol dengan tata letak, simpan pengaturan tombol Anda dan temukan tombol "Pesan Sekarang" di bagian atas tata letak. Buka pengaturan tombol dan salin gaya tombol dengan mengklik kanan pada Opsi Tombol Toggle Title dan pilih opsi "Copy Button Styles" dari daftar.

Sekarang klik kanan pada modul tombol yang Anda tambahkan di bawah gambar dan pilih "Tempel Gaya Tombol".

Kemudian perbarui pengaturan tombol sebagai berikut:

Font Tombol: Font Elegan
Lebar Batas Tombol: 0px
Tampilkan Ikon Tombol: TIDAK

Lalu mari tambahkan padding kustom yang bagus untuk memastikan tombolnya berbentuk persegi yang sempurna:

Padding Kustom: Atas 0,65em, Bawah 0,65em, Kiri 1em, Kanan 1em

Untuk memposisikan tombol sehingga tumpang tindih dengan sudut kanan bawah gambar, pertama-tama Anda harus menghilangkan margin bawah modul gambar di atas. Buka pengaturan modul gambar gambar langsung di atas tombol dan atur margin bawah ke 0px.

Sekarang kita perlu menarik tombol ke atas di atas gambar menggunakan nilai margin negatif khusus yang sama dengan tinggi tombol. Untuk melakukan ini, kita perlu menentukan ketinggian tombol kita. Seperti yang disebutkan sebelumnya dalam posting ini, dengan bantalan khusus di tempat, kita dapat mengetahui ukuran pasti tombol kita berdasarkan ukuran teks tombol saat ini. Karena ukuran teks tombol adalah 20px, kita tahu bahwa tinggi tombol kita adalah 3em (3 kali ukuran teks tombol) yaitu 60px. Oleh karena itu, kita perlu mengatur margin kustom untuk tombol kita sebagai berikut:

Margin Kustom: -60px Atas

Dan kemudian kita dapat memposisikan tombol kita ke kanan dengan menyesuaikan Button Alignment ke Right.

Sekarang kita memiliki desain yang berfungsi untuk gambar dan tombol kita. Yang perlu kita lakukan adalah menambahkan tombol yang sama ke semua gambar di bagian tersebut.

Karena kami menghilangkan margin bawah gambar, kami dapat dengan mudah menerapkan perubahan itu ke semua gambar di bagian menggunakan Extend Styles. Klik kanan pada gambar dan pilih "Perpanjang Gaya Gambar".

Di popup Extend Styles, pilih "Bagian Ini" untuk opsi Sepanjang dan klik tombol perpanjang. Sekarang semua gambar memiliki margin bawah 0px.

Langkah terakhir hanyalah menyalin dan menempelkan modul Tombol di bawah masing-masing gambar.

Berikut adalah desain akhir.

Dan karena kami menggunakan teknik spasi yang tepat, tombol juga akan tetap di tempatnya di ponsel…

Ikon Tersedia Menggunakan Modul Tombol

Karena Teks Tombol Modul Tombol terbatas pada karakter yang tersedia di keyboard, Anda perlu menjelajahi tombol tersebut 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 ke dalam kotak teks tombol.

Berikut adalah tangkapan layar karakter dengan ikon font yang sesuai:

Jika Anda merasa proses ini membatasi, Anda selalu dapat menggunakan modul teks untuk membuat tautan ikon menggunakan unicode yang tercantum di sini.

Pikiran Akhir

Menggunakan Font Ikon Elegan dengan modul tombol Divi adalah cara mudah untuk membuat tombol ikon tunggal untuk situs web Anda. Ini membuka beberapa pintu untuk berkreasi dengan pengaturan modul untuk menyesuaikan tombol Anda dengan gaya teks yang unik, efek hover, dan banyak lagi. Saya sangat menyukai nilai jarak tombol khusus yang memastikan tombol berbentuk persegi atau lingkaran yang sempurna.

Ada banyak kegunaan untuk tombol ikon. Semoga contoh use case yang saya bahas akan menambah sedikit inspirasi untuk proyek Anda sendiri.

Untuk ide lainnya, lihat cara menggunakan Font Ikon Elegan atau cara menyematkan font ikon di situs web Anda.

Saya ingin di sini beberapa ide dari Anda di komentar di bawah.

Bersulang!