Divi ile yazı tipi simgesi düğmesi nasıl yapılır
Yazı tipi simgesi düğmesinin web tasarımı dünyasında birçok kullanımı vardır. Yazı tipi simgesi farklı boyutlar söz konusu olduğunda keskin renk ve tasarımda kaldığından, bir düğmede kullanmak mantıklıdır. Ve Divi’de yazı tipi simgesi düğmesini yapmak aslında zarif bir simge yazı tipi kullanmak oldukça kolaydır. Bu öğreticide, tek bir simge düğmesi oluşturmak için Divi düğmesi modülüyle simge yazı tipini nasıl kullanabileceğinizi göstereceğim. Bu öğreticinin bazı önemli noktaları şunları içerir:
Düğme metni olarak bir simge eklemek için zarif bir yazı tipi nasıl kullanılır
Mükemmel bir kare veya daire düğmesi sağlayan dolgu ve sınır yarıçapı nasıl eklenir
Hover’da farklı bir simge ile düğme simgesi nasıl değiştirilir
Görüntülerle örtüşmek için düğme simgesi nasıl konumlandırılır
ve daha fazlası…
Aşağıdaki gizlice göz atacakların bir görüntüsü …
Divi teması (açık)
Zarif Yazı Tipi Simgesi – Blog yayınından Zip dosyasını indirdikten sonra, düğme modülümüz için özel bir yazı tipi olarak kullanılacak elegantons.ttf yazı tipi dosyasını sürükleyeceğiz.
Bed & Breakfast Ana Sayfasının Düzeni (Divi Builder’dan ücretsiz olarak mevcuttur)
Başlayalım! Düğme modülüne zarif bir simge yazı tipi ekleyin Başlangıç olarak düğme modülünü eklersiniz, yeni bir sayfa oluşturun ve görsel bir yapımcı uygulayın. “Baştan Uyan” ı seçin ve ardından görsel yapımcı uygulandıktan sonra bölüme bir satır sütun ekleyin ve ardından düğmeye düğmeye ekleyin. Zarif bir simge yazı tipi almak için zarif simge yazı tipini sürükleyin, zarif bir simge yazı tipi blog yayınını açın ve yazı tipi dosyasını indirin. Zip dosyası içeriğini çıkarın ve zarif_font> html css> yazı tiplerine giderek zarif simge yazı tipi dosyaları bulun. Ardından “elegantons.ttf” dosyasını bilgisayar dosyanızdan sürükleyin ve görsel üreticiye yerleştirin. Bu yazı tipi yazı tipi yükleme sermayesini getirecektir. Divi Builder’a yazı tiplerini yüklemek için Yükle düğmesini tıklamanız yeterlidir. Artık görsel yapımcının herhangi bir modül yazı tipini ayarlarken zarif bir yazı tipi simgesine erişebileceksiniz. Modül Ayarları Anahtar Modülünü açın ve yeni yüklediğiniz yeni zarif zarif yazı tipiyle yazı tipi düğmesini güncelleyin. Bu, “özel yazı tipi” nin altındaki simgeler listesinde görünecektir. Şimdi düğme metninizin bir simge koleksiyonuna dönüştürüldüğünü fark edebilirsiniz. Bunun nedeni, geçerli düğmenin metin giriş kutusuna yerleştirilen her karakterin, kullanılan harf/karakterle eşleşen bir simgeye sahip olmasıdır. Düğmelerimizde kullanmak için yalnızca bir simgeye ihtiyacımız olduğu için, o karakterle ilgili bir simge üretmek için klavyede herhangi bir karakter seçebilirsiniz. Örneğin, doğru Chevron Arrow’u almak için düğme metninizin 5 numarasını girin. İmleci bildiğiniz gibi işaret ederken düğme simgesini değiştirin, düğme modülü imleci işaret ederken bir simge ekleme seçeneği içerir. Bu işlevi, iyi bir sarkma efekti için yazı tipi simgelerini havalı simgelerle değiştirmek için kullanabiliriz. Tek yapmamız gereken düğme ayarlarını aşağıdaki gibi değiştirmektir: Metin Boyutu Düğmesi: 30px Kuttu Simgesi: Ekran görüntülerine bakın (bu, düğmeler için kullanılan simge yazı tipini değiştirecek bir simge olacaktır) Renkli Zervrek Icon: #0C71C3 (Bu, Düğme Metni için kullanılan renkle eşleşmelidir) Zorlu simgesinin yerleşimi: Sol Düğme Noktası Metnin rengi: RGBA (255,255,255.0) (imleç işaret ederken düğme simgesi yazı tipini gizlemek için gerçekten şeffaftır) Dolgu özelliği: sol 1em, sağ 1em (Bu dolgu varsayılan dolgu düğmesini değiştirecek ve önleyecektir Yüzerken yaygın) Şimdi gerekli olan, özel CSS’deki önceki elementin kenar boşluğunu değiştirmek. Gelişmiş sekmesini açın ve önceki kutuya aşağıdaki CSS’yi girin:
Marj-sol: 0! Önemli; Şimdi düğme simgeniz, Hover’daki Hover simgesi ile değiştirilecektir.
Metin boyutuyla mükemmel bir daire simgesi düğmesi ölçeği yapın Daire düğmesi düğmesi tek bir simge düğmesi için çok iyi çalışır. Ve iç kısmının düğme modülünün mesafesinden nasıl çalıştığını anlarsanız, ölçeği düğme metninin boyutuyla eşleşen mükemmel bir dairesel düğme oluşturabilirsiniz. İşin püf noktası, “EM” uzun birimini kullanarak düğmenize yer vermektir. Bu uzunluk birimi, düğmenizin metin boyutuna göre. Metin boyutu 30px, 1EM de 30px (2EM 60px vb.) Bunu bilerek, sadece düğmemizin etrafındaki dolguların dört tarafın hepsinde aynı olacağından emin olmalıyız. Ancak göz önünde bulunduramayabileceğiniz şey, düğme metninin yüksekliğinin varsayılan olarak 1.7em olmasıdır. Bu, üst ve alt dolgu değerlerini eklerken dikkate almamız gerektiği anlamına gelir. Bir daire düğmesi yapmak için gereken dolgu değerinin arkasındaki matematiği bilmek isteyenler için, işte: Sol ve sağ dolgu için her ikisini de 1em olarak ayarlayın. Bu, toplam düğme genişliğimizin 90px (veya 3EM) olacağı anlamına gelir çünkü … 30px sol dolgu + 30px simge yazı tipi + 30px sağ dolgu = Toplam 90 piksel Düğme metin çizgisinin yüksekliği 1.7EM’dir. Metin Boyutu Düğmesi (30px) 51 piksele eşdeğer. Üst ve alt dolgu için her ikisi de 0.65EM olarak ayarlayın. 0.65EM, 19,5px’e eşdeğer olan düğme metninin (30px) boyutunun% 65’ine eşdeğerdir. Bu nedenle … 19.5px Dolma Üst + 51px Hat Yüksekliği + 19.5px Dolgu Alt = Toplam 90pxini, düğme metni 30px’e ayarlandığında, toplam düğme boyutunun 90px kat 90px (mükemmel kare) olacağı anlamına gelir. Aslında bunu böyle düşünebilirsiniz. Düğme metninin boyutu olarak belirlerseniz ne olursa olsun, düğmenin toplam boyutu bu değerin 3 katı olacaktır. Böylece, 40 piksel düğme metni 120 piksel 120 piksel boyutta bir düğme yapar, vb. Şu anda, düğmenin doğru boyutları var, ancak yine de kare. Tek yapmamız gereken, kare düğmesini mükemmel bir daire düğmesine dönüştürmek için% 50 sınır yarıçapı eklemek. Düğmenizi bir daire düğmesine dönüştürmek için ihtiyacınız olan şey budur:
Sınır Yarıçap Düğmesi:% 50 Özel Dolgu: Top 0.65EM, Alt 0.65EM, Sağ 1em, Sol 1em
Unutmayın, düğme metninin boyutunu ayarlayabilirsiniz ve düğme metin boyutuna sahip bir dolgu ölçeği olarak mükemmel bir dairesel kalacaktır.
Divi düzeni divi’nize simge düğmesini ekleyin Divi, herhangi bir hazır düzeninin tasarımına uyacak şekilde tek simge düğmesini eklemeyi ve ayarlamayı kolaylaştırır. Bu örnek için, yatak & kahvaltı ana sayfası düzenine nasıl tek bir simge düğmesi ekleyeceğinizi göstereceğim. Sayfanıza düzen eklemek için, sayfanın altındaki Mor simgesini tıklayarak Ayarlar menüsünü açın (görsel üreticinin etkinleştirildiğinden emin olun). Ardından kütüphaneden yükleme simgesini tıklayın. Düzeni sayfaya uygulamak için “Bu Düzeni Kullan” Düzeni Ana Sayfasının Düzeni’ni seçin. Icon düğmesini resme ekleyin, diyelim ki küçük bir simge düğmesi eklemek istiyorsunuz. belirli bir ürün veya hizmete bağlı ek CTA’nın görüntüsü. Tek yapmanız gereken görüntünün altına bir düğme modülü eklemek ve yazı tipi simgesini ekleyecek şekilde ayarlamak ve bazı özel alanlara sahip görüntülerle örtüşmesini sağlamaktır. Ana sayfa düzenindeki “Hakkımızda” bölümünü bulun. Ardından, “Çift Alan” ı görüntülemek için kullanılan görüntülerden birinin altına doğrudan bir düğme modülü ekleyin (bu, üç sıra sütun ilk sütununda birincisidir).
Ardından düğme ayarlarını açın ve Metin Kutusu düğmesine sermaye harfini “P” yerleştirin. Bir düğme yazı tipi olarak zarif bir yazı tipi seçtikten sonra bu simgemize dönüşecektir.
