Loncat ke Konten Utama

Cara membuat tombol dengan ikon di Divi

Divi: tema WordPress termudah untuk digunakan

Divi: Tema WordPress terbaik sepanjang masa!

lebih 600.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 ikon font memiliki banyak kegunaan dalam dunia desain web. Karena font ikon tetap tajam dalam warna dan desain karena berevolusi ke ukuran yang berbeda, itu ide yang baik untuk menggunakannya dalam tombol. Dan, membuat tombol dengan font-ikon pada Divi sebenarnya cukup mudah menggunakan font di perpustakaan. 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 border sehingga tombol mengambil bentuk persegi atau lingkaran sempurna
  • Bagaimana cara mengganti ikon tombol dengan ikon yang berbeda ketika terbang di atas
  • Cara memposisikan ikon tombol untuk melapisi gambar
  • dan lagi ...

penelitian

Inilah preview dari apa yang akan datang ...

ikon tombol font

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 dalam file font eleganticons.ttf untuk digunakan sebagai font kustom untuk modul tombol kami.
  • Homepage Bed & Breakfast (tersedia gratis dari Divi Builder)

Ayo mulai!

Menambahkan font Ikon Elegan ke modul tombol Anda

Tambahkan modul tombol

Untuk memulai, buat halaman baru dan gunakan pembuat visual. Pilih "Hasilkan dari awal," dan kemudian, setelah generator visual digunakan, tambahkan baris kolom ke bagian dan tambahkan modul tombol ke saluran.

tambahkan tombol divi builder.jpg

Seret font ikon elegan

Untuk mendapatkan permainan warna ElegantFontsAnda dapat mengunduh paket font ini melalui tautan ini. Ekstrak konten file zip dan cari file font ikon yang elegan dengan menavigasi ke kelas elegant_font> CSS CSS>. Lalu seret file "ElegantIcons.ttf" ke komputer Anda dan lepaskan ke pembuat visual.

ekstrak file zip divi.jpg

Ini akan memunculkan modal Unduh font secara otomatis. Cukup klik tombol unduh untuk mengunduh font ke Divi Builder.

tuliskan divi.jpg online

Sekarang Anda akan memiliki akses ke ikon font yang elegan ketika menyesuaikan font modul di pembangun 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 "Custom font".

tombol font divi.jpg

Anda mungkin memperhatikan bahwa teks tombol Anda telah diubah menjadi sekelompok ikon. Memang, setiap karakter yang dimasukkan dalam kotak teks tombol sekarang memiliki ikon yang sesuai dengan huruf / karakter yang saat ini digunakan.

penggunaan ikon button.jpg

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

tombol ikon divi 5.jpg

Tukar tombol ikon di hover

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 adalah mengubah pengaturan tombol sebagai berikut:

Teks tombol Ukuran: Icon Tombol 30px Lihat screenshot (ini akan menjadi icon yang akan menggantikan ikon font yang digunakan untuk tombol) warna Icon Tombol: # 0c71c3 (yang harus sesuai dengan warna yang digunakan untuk teks tombol ) Penempatan tombol ikon: warna teks Kiri tombol atas: RGBA (255,255,255,0) (ini benar-benar transparan untuk menyembunyikan ikon huruf tombol hover). kustom mengisi: 1em kiri 1em kanan (mengisi ini menggantikan memperluas melayang)

tombol penyesuaian divi.jpg

Sekarang, yang perlu kita lakukan adalah mengganti margin untuk item depan di custom css. Pergi ke tab Advanced dan masukkan kode CSS berikut di kotak sebelumnya:

margin-left: 0 Penting!;

tambahkan margin tombol diiv.png

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]

Sekarang ikon tombol Anda akan digantikan oleh ikon flyover mengambang.

tombol demonstrasi diganti pada hover.gif

Membuat tombol ikon dengan lingkaran diskalakan dengan ukuran teks tombol

Tombol lingkaran berfungsi baik untuk tombol ikon tunggal. Dan, jika Anda memahami cara kerja jarak modul tombol, Anda dapat membuat tombol melingkar sempurna yang sesuai dengan ukuran teks tombol.

Triknya adalah letakkan tombol Anda menggunakan satuan panjang "em". Satuan panjang ini relatif terhadap ukuran teks tombol Anda. Jadi jika ukuran teks tombolnya 30px, 1em juga bernilai 30px (2em akan bernilai 60px dan seterusnya ...). Mengetahui hal ini, kita hanya perlu memastikan bahwa padding kami di sekitar tombol kami akan sama pada sisi 4. Namun yang mungkin tidak Anda perhatikan adalah tinggi baris teks tombol adalah 1.7em secara default. Ini berarti bahwa kita harus mempertimbangkan hal ini ketika menambahkan nilai pengisian atas dan bawah.

Bagi Anda yang ingin mengetahui matematika di balik nilai-nilai isian yang dibutuhkan untuk membuat tombol lingkaran, berikut ini adalah:

Untuk pengisian kiri dan kanan, atur keduanya ke 1em. Ini berarti total lebar tombol Anda adalah 90px (atau 3em) karena ...

30px padding tersisa + 30px untuk font-icon + 30px padding kanan = 90px total

Ketinggian garis teks dari tombol adalah 1.7em, yang setara dengan 170% dari ukuran teks tombol (30px) yang 51px.

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

Jadi ...

19.5px padding atas + tinggi baris 51px + 19.5px padding lebih rendah = 90px total

Ini berarti bahwa ketika teks tombol diatur ke 30px, ukuran total tombol akan 90px pada 90px (persegi sempurna). Bahkan, Anda bisa memikirkannya seperti itu. Terlepas dari ukuran teks tombol, ukuran total tombol adalah 3 dikalikan dengan nilainya. Dengan demikian, teks tombol piksel 40 akan membuat tombol piksel 120 oleh piksel 120, dll.

Saat ini, tombol memiliki dimensi yang tepat, tetapi masih persegi. Yang harus kita lakukan adalah menambahkan radius batas 50% untuk mengubah tombol persegi menjadi tombol lingkaran yang 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 sempurna dalam lingkaran seperti mengisi 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.

Untuk contoh ini, saya akan menunjukkan cara menambahkan tombol ikon tunggal ke tata letak beranda Bed & Breakfast.

Untuk menambahkan tata letak halaman ke halaman Anda, buka menu pengaturan dengan mengklik ikon ungu di bagian bawah halaman (pastikan generator visual diaktifkan). Kemudian klik pada ikon Load dari perpustakaan. Pilih tata letak beranda Bed & Breakfast dan klik tombol "Gunakan tata letak ini" untuk menerapkan tata letak pada halaman.

pilih divi.png tata letak

Menambahkan tombol ikon ke suatu gambar

Misalkan Anda ingin menambahkan tombol ikon kecil untuk melapisi sudut gambar ke CTA tambahan yang ditautkan ke produk atau layanan tertentu. Yang harus Anda lakukan adalah menambahkan modul tombol di bawah gambar dan menyesuaikannya untuk menyertakan ikon font dan memastikan bahwa itu tumpang tindih gambar dengan jarak adat.

Temukan bagian "Tentang Kami" di beranda. Kemudian tambahkan modul tombol langsung di bawah salah satu gambar yang digunakan untuk menyajikan "Kamar Double" (yang pertama di kolom pertama dari baris tiga kolom).

Buat Toko Online Anda dengan mudah

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

tombol divi.png

Kemudian buka pengaturan tombol dan masukkan huruf besar "P" di kotak teks tombol. Ini akan berubah di ikon kami setelah Anda memilih permainan latar belakang yang mengagumkan seperti font tombol.

teks tombol divi.png

Untuk segera mulai 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 judul Beralih tombol dan memilih opsi "Salin Gaya Tombol" dari daftar.

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

sisipkan modul style.jpg

Kemudian perbarui pengaturan tombol sebagai berikut:

Tombol Font: Font Keren
tombol font Border width: 0px
Tampilkan ikon tombol: TIDAK

Kemudian tambahkan padding khusus kami sehingga tombolnya berbentuk persegi sempurna:

Padding Kustom: 0.65em Top, 0.65em Bawah, 1em Kiri, 1em Kanan

ikon tombol font

Untuk memposisikan tombol sehingga menutupi sudut kanan bawah gambar, Anda harus terlebih dahulu menghapus margin bawah dari modul gambar di atas. Buka pengaturan modul gambar dari gambar tepat di atas tombol dan atur margin bawah ke 0px.

kustomisasi tombol.png

Sekarang, kita harus menarik tombol pada gambar menggunakan nilai margin negatif khusus sama dengan ketinggian tombol. Untuk melakukan ini, kita harus menentukan ketinggian tombol kita.

Seperti yang disebutkan sebelumnya di artikel ini, dengan tempat pengisian khusus, kita dapat mengetahui ukuran persis tombol kami berdasarkan ukuran teks tombol saat ini. Karena ukuran teks tombolnya 20px, kita tahu bahwa tinggi tombol kita adalah 3em (3 kali ukuran teks tombol), yaitu 60px. Oleh karena itu, kita perlu menentukan margin kustom untuk tombol kami sebagai berikut:

Margin Khusus: -60px Teratas

Dan kemudian kita dapat memposisikan tombol kita di sebelah kanan dengan mengatur keselarasan tombol ke kanan.

ubah kesejajaran tombol divi.png

Sekarang kita memiliki desain fungsional untuk gambar dan tombol kita. Yang harus kita lakukan adalah menambahkan tombol yang sama ke semua gambar di bagian.

Karena kami menghapus margin bawah gambar, kami dapat dengan mudah menerapkan perubahan ini ke semua gambar di bagian menggunakan opsi Extend Styles. Klik kanan pada gambar dan pilih "Extend Image Styles".

perpanjang gaya gambar.jpg

Dalam kotak dialog Extend Styles, pilih "This Section" untuk opsi melalui dan klik tombol Expand. Sekarang semua gambar memiliki margin 0px yang lebih rendah.

Langkah terakhir adalah hanya menyalin dan menempel modul Tombol di bawah setiap gambar.

Ini desain finalnya.

tombol desain akhir divi.png

Buat blog Anda dengan mudah dengan SiteGround

SiteGround memungkinkan Anda membuat blog WordPress hanya dengan beberapa klik. Nama domain gratis, hosting aman, SSL, transfer, dan banyak lagi ... [Direkomendasikan]

Dan karena kami menggunakan teknik spasi yang tepat, tombol juga akan tetap di tempat pada ponsel ...

tombol pratinjau di mobile.png

Ikon tersedia menggunakan modul tombol

Karena teks tombol modul tombol terbatas pada karakter yang tersedia di keyboard, Anda harus menjelajahi tombol-tombol ini untuk menemukan ikon-ikon yang tersedia yang terkait dengan setiap tombol. Cara sederhana untuk melakukan ini adalah dengan membuat modul tombol dengan font tombol yang disetel pada font yang elegan dan ketik karakter di kotak teks tombol.

Berikut ini screenshot karakter dengan ikon font yang sesuai:

daftar ikon yang tersedia divi.png

Jika Anda menemukan daftar ini tidak lengkap, Anda selalu dapat menggunakan modul teks untuk membuat tautan ikon menggunakan kode Unic terdaftar ici .

Pikiran terakhir

Menggunakan Ikon Elegan dengan Modul Tombol Divi adalah cara mudah untuk membuat tombol unik untuk situs web Anda. Ini membuka pintu kreativitas dengan pengaturan modul untuk menyesuaikan tombol Anda dengan gaya teks unik, efek rollover, dan banyak lagi. Saya sangat menyukai nilai jarak dari tombol kustom yang memastikan bahwa tombol mengambil bentuk persegi atau lingkaran sempurna.

Ada banyak kegunaan untuk tombol ikon. Semoga, contoh penggunaan yang tercakup dalam tutorial ini akan menambahkan beberapa inspirasi untuk proyek Anda sendiri.

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.

Tema WordPress Keren yang saya temukan
Dan ada lebih banyak tema dan model 50 000 untuk dipilih!

Kembali ke atas
6 saham
saham4
menciak
Register2
Ada apa