İkonik yazı tiplerine sahip düğmeler, web tasarım dünyasında birçok kullanıma sahiptir. İkonik yazı tipleri, farklı boyutlara ölçeklendikçe renkler ve tasarım açısından net kaldığından, bunları düğmelerde kullanmak iyi bir fikirdir. Ve, Divi'de ikonik yazı tiplerine sahip bir düğme oluşturmak, kütüphanedeki yazı tiplerini kullanarak aslında oldukça kolaydır " ElegantIcons". Bu eğitimde, tek bir simge düğmesi oluşturmak için Divi düğme modülü ile simge yazı tiplerini nasıl kullanabileceğinizi göstereceğim.
Bu öğreticinin öne çıkan bazı özellikleri şunlardır:
- Yorum utiliser ElegantIcons düğme metni olarak bir simge eklemek için
- Düğmenin mükemmel bir kare veya daire gibi görünmesini sağlamak için dolgu ve kenarlık yarıçapı nasıl eklenir?
- Gezinirken düğme simgesi farklı bir simgeyle nasıl değiştirilir
- Görüntü bindirmek için bir düğme simgesi nasıl konumlandırılır
- ve dahası ...
anket
İşte ne geliyor bir önizlemesi ...
Neye ihtiyacınız var?
Bu eğitim için aşağıdakileri kullanacağım:
- Divi Teması (açıkça)
- Şık yazı tipi simgeleri, bir öğretici Zarif tema çok daha kesin. Zip dosyasını blog gönderisinden indirdikten sonra, düğmeleri modülümüz için özel bir yazı tipi olarak kullanmak üzere eleganticons.ttf yazı tipi dosyasına sürükleyeceğiz.
- Oda & Kahvaltı ana sayfası (Divi Builder'dan ücretsiz kullanılabilir)
Hadi başlayalım!
Elegant Icons yazı tipini düğme modülünüze ekleyin
Bir düğme modülü ekle
Başlamak için yeni bir sayfa oluşturun ve görsel oluşturucuyu dağıtın. "Sıfırdan Oluştur" u seçin, ardından görsel oluşturucu dağıtıldıktan sonra, bölüme bir sütun satırı ekleyin ve ardından satıra bir düğme modülü ekleyin.
Şık Simge Yazı Tipini Sürükle
Renk oyunu almak için ElegantFontsindirebilirsiniz bu yazı tipi bu bağlantı üzerinden paketleniyor. Çıkart içindekiler zip dosyasından seçin ve zarif_font > HTML CSS > sınıfına giderek zarif simge yazı tipi dosyalarını bulun. Daha sonra “ElegantIcons.ttf” dosyasını bilgisayarınıza sürükleyip görsel oluşturucuya bırakın.
Bu, Yazı Tipini Otomatik Olarak İndir modunu getirecektir. Yazı tipini Divi Builder'a indirmek için indirme düğmesine tıklamanız yeterlidir.
Artık görsel oluşturucuda bir mod yazı tipini özelleştirirken şık simge yazı tipine erişebileceksiniz.
Düğme modülü ayarlarına gidin ve düğme yazı tipini yeni indirdiğiniz yeni Zarif Simge yazı tipiyle güncelleyin. "Özel Yazı Tipleri" altındaki simgeler listesinde görünecektir.
Düğme metninizin bir grup simgeye dönüştüğünü fark edebilirsiniz. Gerçekte, düğme metni giriş alanına girilen her karakter artık, şu anda kullanılan harf / karaktere karşılık gelen bir simgeye sahiptir.
Düğmemiz için yalnızca bir simgeye ihtiyacımız olduğundan, o karakterle ilişkili simgeyi oluşturmak için klavyedeki herhangi bir karakteri seçebilirsiniz. Örneğin, sağ köşeli çift ayraç okunu almak üzere düğme metniniz için 5 sayısını girin.
Fareyle üzerine gelindiğinde düğme simgelerini değiştirin
Bildiğiniz gibi, düğme modülü, üzerine gelindiğinde simge ekleme seçeneği içerir. Bu özelliği, güzel bir vurgulu efekt için simge yazı tipini vurgulu simgeyle değiştirmek için kullanabiliriz. Tek yapmamız gereken düğme ayarlarını aşağıdaki gibi değiştirmek:
Düğme Metin boyutu: 30px Düğme simgesi: ekran görüntüsüne bakın (bu, düğme için kullanılan yazı tipi simgesinin yerini alacak simge olacaktır) Simge Düğme Rengi: # 0c71c3 (düğme metni için kullanılan renkle eşleşmelidir ) Düğme Simgesi Yerleşimi: Sol Düğme vurgulu metin rengi: rgba (255,255,255,0) (bu, vurgulu düğme simgesinin yazı tipini gizlemek için tamamen şeffaftır). Özel dolgu: 1. sol, 1. sağ (bu dolgu, fareyle üzerine gelindiğinde genişletmenin yerini alacaktır)
Şimdi tek yapmamız gereken, özel css'deki ön öğenin marjını değiştirmek. Gelişmiş sekmesine gidin ve ön kutuya aşağıdaki CSS kodunu girin:
margin-left: 0 !important; |
Şimdi düğme simgeniz imleç simgesinin üzerine gelecektir.
Düğme metni boyutuyla ölçeklendirilmiş daireli yaratıcı simge düğmeleri
Daire şeklindeki düğmeler, tek simgeli düğmeler için harika çalışır. Ayrıca, düğme modülü aralığının iç işleyişini anlarsanız, düğme metninin boyutuna göre ölçeklenen mükemmel dairesel düğmeler oluşturabilirsiniz.
İşin püf noktası, "em" uzunluk birimini kullanarak düğmenizi aralık bırakmaktır. Bu uzunluk birimi, düğmenizdeki metnin boyutuna göredir. Dolayısıyla, düğme metni boyutu 30px ise, 1em de 30px'dir (2em 60px olacaktır vb.). Bunu bilerek, sadece düğmemizin etrafındaki dolgumuzun 4 tarafta da aynı olacağından emin olmalıyız. Ancak, düşünmemiş olabileceğiniz şey, düğme metin satırı yüksekliğinin varsayılan olarak 1.7em olmasıdır. Bu, üst ve alt dolgu değerlerimizi eklerken bunu dikkate almamız gerektiği anlamına gelir.
Daire düğmeleri oluşturmak için gereken dolgu değerlerinin arkasındaki matematiği öğrenmek isteyenler için, işte:
Sol ve sağ dolgu için her ikisini de 1em olarak ayarlayın. Bu, düğmenizin toplam genişliğinin 90 piksel (veya 3em) olacağı anlamına gelir çünkü ...
30px sol + font-icon için + 30px + 30px sağa = 90px toplam
Düğme metni satırının yüksekliği 1.7em'dir ve 170 piksel olan düğme metni boyutunun (30 piksel)% 51'ine eşdeğerdir.
Üst ve alt dolgu için her ikisini de 0,65em olarak ayarlayın. 0.65em, düğme metni boyutunun (65 piksel)% 30'ine eşdeğerdir ve bu 19.5 piksele eşdeğerdir.
Öyleyse ...
19.5px üst dolgu + 51px çizgi yüksekliği + 19.5px alt dolgu = toplam 90px
Bu, düğme metni 30 piksel olarak ayarlandığında, toplam düğme boyutunun 90 piksele 90 piksel (tam bir kare) olacağı anlamına gelir. Aslında bu şekilde düşünebilirsiniz. Düğme metni boyutundan bağımsız olarak, toplam düğme boyutu değerin 3 katıdır. Dolayısıyla, 40px düğme metni, 120px'e 120px düğmesi vb. Oluşturacaktır.
Şu anda düğme doğru boyutlara sahip, ancak yine de kare. Tek yapmamız gereken, kare düğmeyi mükemmel daire düğmesi olarak değiştirmek için% 50 kenarlık yarıçapı eklemek.
Düğmenizi bir çevre düğmesiyle değiştirmeniz için gerekenler:
Sınır Yarıçapı düğmesi: 50%
Özel Döşeme: 0.65em Üst, 0.65em Alt, 1em Düz, 1em Sol
Unutmayın, düğme metin boyutunu ayarlayabilir ve düğme, metin boyutu dolgusu gibi mükemmel bir daire içinde kalacaktır.
Divi'de buton ekleme
Divi, önceden tanımlanmış herhangi bir düzenin tasarımına uyacak şekilde benzersiz simge düğmeleri eklemeyi ve özelleştirmeyi kolaylaştırır.
Bu örnek için, Bed & Breakfast ana sayfa düzenine nasıl tek bir simge düğmesi ekleyeceğinizi göstereceğim.
Düzeni sayfanıza eklemek için, sayfanın altındaki mor simgeye tıklayarak ayarlar menüsünü açın (görsel oluşturucunun etkinleştirildiğinden emin olun). Ardından Kitaplıktan yükle simgesine tıklayın. Bed & Breakfast ana sayfasının düzenini seçin ve sayfa üzerindeki düzeni dağıtmak için "Bu düzeni kullan" düğmesini tıklayın.
Bir resme simge düğmesi ekleme
Bir görüntünün köşesini belirli bir ürün veya hizmetle ilgili ek bir CTA ile kaplamak için küçük bir simge düğmesi eklemek istediğinizi varsayalım. Yapmanız gereken tek şey, görüntünün altına bir düğme modülü eklemek ve simgenin yazı tipini içerecek şekilde özelleştirmek ve özel boşlukla görüntüyle örtüşmesini sağlamaktır.
Ana sayfadaki "Hakkımızda" bölümünü arayın. Ardından, "Çift Kişilik Oda" yı sunmak için kullanılan resimlerden birinin hemen altına bir düğme modülü ekleyin (üç sütunluk satırın ilk sütunundaki ilki).
Ardından düğme ayarlarını açın ve düğme metin kutusuna büyük "P" koyun. Düğme yazı tipi gibi harika arka plan setlerini seçtiğinizde bu, simgemizde değişecektir.
Düğme tasarımını düzen ile hızlı bir şekilde eşleştirmeye başlamak için düğme ayarlarınızı kaydedin ve düzenin üst kısmında "Şimdi Yer Ayırtın" düğmesini bulun. Düğme Ayarlarını açın ve Düğme Seçenekleri geçiş başlığına sağ tıklayarak ve listeden "Düğme Stillerini Kopyala" seçeneğini seçerek düğme stillerini kopyalayın.
Şimdi görüntünün altına eklediğiniz modüle sağ tıklayın ve "Yapıştırma stili" seçeneğini seçin.
Ardından düğme ayarlarını aşağıdaki şekilde güncelleyin:
Yazı Tipi Düğmesi: Başar Yazı Tipi
yazı tipi düğmesi Kenarlık genişliği: 0px
Düğme simgesini göster: HAYIR
Daha sonra akıllı özel dolgu malzememizi ekleyin, böylece düğme mükemmel bir kare olacaktır:
Özel Dolgu: 0.65em Üst, 0.65em Alt, 1em Sol, 1em Sağ
Düğmeyi görüntünün sağ alt köşesini kaplayacak şekilde konumlandırmak için, önce yukarıdaki görüntü modülünden alt kenar boşluğunu kaldırmanız gerekir. Doğrudan düğmenin üzerindeki Görüntü Görüntü Modülü ayarlarını açın ve Alt Kenar Boşluğunu 0px olarak ayarlayın.
Şimdi düğmenin yüksekliğine eşit özel bir negatif kenar boşluğu değeri kullanarak düğmeyi görüntünün üzerine sürüklememiz gerekiyor. Bunu yapmak için düğmemizin yüksekliğini belirlememiz gerekiyor.
Bu makalenin önceki bölümlerinde bahsedildiği gibi, özel dolgu ile, düğme metninin mevcut boyutuna bağlı olarak düğmemizin tam boyutunu bilebiliriz. Düğme metni boyutu 20px olduğundan, düğme yüksekliğimizin 3em (düğme metni boyutunun 3 katı) yani 60px olduğunu biliyoruz. Bu nedenle, düğmemiz için aşağıdaki gibi özel bir marj belirlememiz gerekiyor:
Özel Marj: -60px Üst
Sonra sağdaki düğmenin hizalamasını ayarlayarak düğmemizi sağa yerleştirebiliriz.
Artık imajımız ve düğmemiz için çalışan bir tasarımımız var. Tek yapmamız gereken, bölümdeki tüm görsellere aynı düğmeyi eklemek.
Görüntünün alt kenar boşluğunu kaldırdığımız için bu değişikliği Stilleri Genişlet seçeneğini kullanarak bölümdeki tüm görsellere kolayca uygulayabiliriz. Resme sağ tıklayın ve "Resim Stillerini Genişlet" seçeneğini seçin.
Stilleri Genişlet iletişim kutusunda, Genelinde seçeneği için "Bu Bölüm" ü seçin ve Genişlet düğmesine tıklayın. Artık tüm görüntülerin 0px alt kenar boşluğu var.
Son adım, basitçe her görüntünün altındaki Button modüllerini kopyalayıp yapıştırmaktır.
İşte son tasarım.
Düzgün boşluk bırakma teknikleri kullandığımızdan, düğme aynı zamanda cep telefonunda da kalacaktır ...
Düğme modülü kullanılarak kullanılabilen simgeler
Düğme modülü düğme metni klavyede bulunan karakterlerle sınırlı olduğundan, her tuşla ilişkili kullanılabilir simgeleri bulmak için bu tuşları keşfetmeniz gerekecektir. Bunu yapmanın kolay bir yolu, düğme yazı tipini zarif yazı tipine ayarlanmış bir düğme modülü oluşturmak ve karakterleri düğme metin kutusuna yazmaktır.
İşte karşılık gelen yazı tipi simgesiyle karakterlerin ekran görüntüsü:
Bu listeyi biraz kapsamlı bulursanız, listelenen Unic kodlarını kullanarak simge bağlantıları oluşturmak için her zaman bir metin modülü kullanabilirsiniz. Ödeme belgemi nasıl gönderirim? .
Son düşünceler
Divi'nin Düğme Modülü ile Zarif Simgeler kullanmak, sizin için benzersiz düğmeler oluşturmanın uygun bir yoludur. Site Web. Bu, benzersiz metin stilleri, fareyle üzerine gelme efektleri ve daha fazlasıyla düğmenizi özelleştirmek için modül ayarlarıyla yaratıcılığın kapısını açar. Özellikle düğmelerin tam kare veya daire şeklini almasını sağlayan özel düğme aralığı değerlerini seviyorum.
Simge düğmelerinin tonlarca kullanımı vardır. Umarım bu eğitimde anlatılan kullanım örneği kendi projelerinize biraz ilham verecektir.
