Loncat ke Konten Utama

Cara membuat tombol dengan ikon di Divi

Divi: tema WordPress termudah untuk digunakan

Divi: Tema WordPress terbaik sepanjang masa!

lebih 701.000 unduhan, Divi adalah tema WordPress paling populer di dunia. Sudah lengkap, mudah digunakan dan dilengkapi dengan lebih dari 62 template gratis. [Direkomendasikan]

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 ...

tombol font ikon

ubah ukuran tombol divi gambar.gif

demonstrasi tombol divi daftar delements.png

Apa yang Anda butuhkan?

Untuk tutorial ini saya akan menggunakan yang berikut:

  • Tema Divi (jelas)
  • 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.

tambahkan tombol divi builder.jpg

Seret Font Ikon Bergaya

Untuk mendapatkan permainan warna ElegantFontsAnda dapat mengunduh paket font ini melalui tautan ini. Ekstrak konten file zip dan temukan file font ikon elegan dengan menavigasi ke class elegant_font> HTML CSS>. Kemudian seret file "ElegantIcons.ttf" ke komputer Anda dan letakkan di pembuat visual.

ekstrak file zip divi.jpg

Ini akan memunculkan modal Font Unduh Secara Otomatis. Cukup klik tombol unduh untuk mengunduh font ke Divi Builder.

tuliskan divi.jpg online

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".

tombol font divi.jpg

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.

penggunaan ikon button.jpg

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.

tombol ikon divi 5.jpg

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)

tombol penyesuaian divi.jpg

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-left0 !important;

tambahkan margin tombol diiv.png

Buat situs web Anda dengan Elementor dengan mudah

Elementor memungkinkan Anda untuk dengan mudah membuat desain situs web apa pun dengan tampilan profesional. Berhentilah membayar mahal untuk apa yang dapat Anda lakukan sendiri. [Gratis]

Sekarang ikon tombol Anda akan diganti dengan ikon hover over.

tombol demonstrasi diganti di hover.gif

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

ubah sebuah button.png

Ingat, Anda dapat menyesuaikan ukuran teks tombol dan tombol akan tetap berada dalam lingkaran dengan sempurna seperti isian ukuran teks.

sesuaikan ukuran tombol.gif

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.

pilih divi.png tata letak

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.

Apakah Anda mencari tema dan plugin WordPress terbaik?

Unduh plugin terbaik dan tema WordPress di Envato dan buat situs web Anda dengan mudah. Sudah lebih dari 49.720.000 unduhan. [EKSKLUSIF]

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).

tombol divi.png

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.

teks tombol divi.png

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".

sisipkan modul style.jpg

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

tombol font ikon

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.

kustomisasi tombol.png

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.

ubah kesejajaran tombol divi.png

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".

perpanjang gaya gambar.jpg

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.

Buat Toko Online Anda dengan mudah

Unduh WooCommerce gratis, plugin e-commerce terbaik untuk menjual produk fisik dan digital Anda di WordPress. [Rekomendasi]

tombol desain akhir divi.png

Dan karena kami menggunakan teknik penspasian yang tepat, tombolnya juga akan tetap ada di ponsel ...

tombol pratinjau di mobile.png

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:

daftar ikon yang tersedia divi.png

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 situs web Anda. Ini membuka pintu menuju kreativitas dengan pengaturan modul untuk menyesuaikan tombol Anda dengan gaya teks unik, efek hover, dan banyak lagi. Saya terutama menyukai nilai spasi tombol kustom yang memastikan bahwa tombol mengambil bentuk 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.

Artikel ini berisi komentar 0

Tinggalkan komentar

Alamat email Anda tidak akan dipublikasikan. Bidang yang harus diisi ditandai *

Situs ini menggunakan Akismet untuk mengurangi yang tidak diinginkan. Pelajari lebih lanjut tentang bagaimana data komentar Anda digunakan.

Kembali ke atas
6 saham
saham4
menciak
Register2