Divi ile Simge Yazı Tipi Düğmeleri Nasıl Oluşturulur

Simge yazı tipi düğmelerinin web tasarımı dünyasında birçok kullanımı vardır. Yazı tipi simgeleri, farklı boyutlara ölçeklendikçe renk ve tasarım açısından canlı kaldığından, bunları düğmelerde kullanmak mantıklıdır. Ve Divi'de bir simge yazı tipi düğmesi oluşturmak, Zarif Simge Yazı Tipini kullanarak aslında oldukça kolaydır. Bu öğreticide, tek bir simge düğmesi oluşturmak için Divi'nin düğme modülüyle simge yazı tiplerini nasıl kullanabileceğinizi göstereceğim.

Bu eğitimin öne çıkan özelliklerinden bazıları şunlardır:

• Düğme metni olarak bir simge eklemek için Zarif Yazı Tipi nasıl kullanılır
• Düğmenin mükemmel bir kare veya daire şeklini almasını sağlayan dolgu ve kenarlık yarıçapı nasıl eklenir
• Fareyle üzerine gelindiğinde düğme simgesi farklı bir simgeyle nasıl değiştirilir?
• Bir görüntünün üst üste gelmesi için bir düğme simgesi nasıl konumlandırılır
• ve dahası…

Gizlice Bakış

İşte olacaklara bir göz atalım…

Neye ihtiyacın var

Bu eğitim için aşağıdakileri kullanacağım:

• Divi Teması (belli ki)
• Zarif Yazı Tipi Simgeleri – Blog gönderisinden zip dosyasını indirdikten sonra, düğme modülümüz için özel bir yazı tipi olarak kullanılmak üzere eleganticons.ttf yazı tipi dosyasını sürükleyeceğiz.
• Oda ve Kahvaltı Ana Sayfa Düzeni (Divi Builder'dan ücretsiz olarak edinilebilir)

Başlayalım!

Düğme Modülünüze Zarif Simge Yazı Tipi Ekleme

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

Zarif Simge Yazı Tipine Sürükleyin

Zarif Simge Yazı Tipi'ni almak için Zarif Simge Yazı Tipi Blog Gönderisine gidin ve yazı tipi dosyasını indirin. Zip dosyası içeriğini ayıklayın ve elegant_font > HTML CSS > yazı tiplerine giderek zarif simge yazı tipi dosyalarını bulun. Ardından “ElegantIcons.ttf” dosyasını bilgisayar dosyanızdan sürükleyin ve görsel oluşturucuya bırakın.

Bu, Yazı Tipi Yükle modunu otomatik olarak getirecektir. Yazı tipini Divi Builder'a yüklemek için yükle düğmesini tıklamanız yeterlidir.

Artık görsel oluşturucuda herhangi bir modül yazı tipini özelleştirirken zarif Simge Yazı Tipine erişebileceksiniz.

Düğme modülü ayarlarına gidin ve düğme yazı tipini yeni yüklediğiniz yeni Zarif Simge Yazı Tipi ile güncelleyin. “Özel Yazı Tipleri” altındaki simge listesinde görünecektir.

Artık düğme metninizin bir grup simgeye dönüştüğünü fark edebilirsiniz. Bunun nedeni, düğme metin giriş kutusuna girilen her karakterin artık kullanılmakta olan harfe/karakterle karşılık gelen bir simgeye sahip olmasıdır.

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ç oku elde etmek için düğme metniniz için 5 sayısını girin.

Hover'da Değişim Düğmesi Simgeleri

Bildiğiniz gibi, düğme modülü, fareyle üzerine gelindiğinde simgeler ekleme seçeneğini içerir. Güzel bir vurgulu efekt için simge yazı tipini vurgulu simgeyle değiştirmek için bu işlevi 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 simge yazı tipinin yerini alacak simge olacaktır)
Düğme Simge Rengi: #0c71c3 (bu, düğme metni için kullanılan renkle eşleşmelidir)
Düğme Simge Yerleşimi: Sol
Düğme Vurgulu Metin Rengi: rgba(255,255,255,0) (vurguluyken düğme simgesi yazı tipini gizlemek için bu tamamen şeffaftır)
Özel Dolgu: 1em Sol, 1em Sağ (bu dolgu, düğmenin varsayılan dolgusunu geçersiz kılar ve üzerine gelindiğinde genişlemesini engeller)

Şimdi tek yapmamız gereken, özel css'deki önceki öğenin kenar boşluğunu geçersiz kılmak. Gelişmiş sekmesine gidin ve önceki kutuya aşağıdaki CSS'yi girin:

margin-left: 0 !important;

Artık düğme simgeniz, üzerine gelindiğinde vurgulu simgesiyle değiştirilecektir.

Düğme Metin Boyutuyla Ölçeklenen Mükemmel Daire Simgesi Düğmeleri Oluşturma

Daire düğme tasarımları, tek simge düğmeleri için gerçekten iyi çalışır. Ve düğme modülü aralığının iç işleyişini anlarsanız, düğme metni boyutuna göre ölçeklenen mükemmel dairesel düğmeler oluşturabilirsiniz.

İşin püf noktası, "em" uzunluk birimini kullanarak düğmenizi boşluk bırakmaktır. Bu uzunluk birimi, düğme metin boyutunuza göredir. Bu nedenle, düğme metni boyutu 30 piksel ise, 1em de 30 pikseldir (2em, 60 piksel olur ve böyle devam eder…). Bunu bilerek, düğmemizin etrafındaki dolgunun 4 tarafta da aynı olacağından emin olmamız gerekiyor. Ancak, düğme metni satır yüksekliğinin varsayılan olarak 1,7em olduğunu düşünmemiş olabilirsiniz. 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 ardındaki matematiği bilmek isteyenler için, işte burada:

Sol ve Sağ dolgu için ikisini de 1em olarak ayarlayın. Bu, toplam düğme genişliğimizin 90 piksel (veya 3em) olacağı anlamına gelir çünkü…

30 piksel sol dolgu + 30 piksel simge yazı tipi + 30 piksel sağ dolgu = toplam 90 piksel

Düğme metni satırı yüksekliği, 51 piksele eşit olan düğme metni boyutunun (30 piksel) % 170'ine eşdeğer olan 1,7em'dir.

Üst ve alt dolgu için ikisini de 0,65em olarak ayarlayın. 0,65em, düğme metni boyutunun (30 piksel) %65'ine eşdeğerdir ve bu, 19,5 piksele eşittir.

Öyleyse…

19,5 piksel üst dolgu + 51 piksel satır yüksekliği + 19,5 piksel alt dolgu = toplam 90 piksel

Bu, düğme metni 30 piksele ayarlandığında, toplam düğme boyutunun 90 piksele 90 piksel (tam kare) olacağı anlamına gelir. Aslında bunu şu şekilde de düşünebilirsiniz. Düğme metin boyutu olarak ne ayarladıysanız, düğmenin toplam boyutu o değerin 3 katı olacaktır. Bu nedenle, 40 piksellik bir düğme metni, 120 piksele 120 piksellik bir düğme oluşturur ve bu böyle devam eder.

Şu anda düğme doğru boyutlara sahip, ancak yine de kare. Tek yapmamız gereken kare düğmeyi mükemmel bir daire düğmesine dönüştürmek için %50'lik bir kenarlık yarıçapı eklemek.

Düğmenizi bir daire düğmesine dönüştürmek için gerekenler:

Düğme Kenar Yarıçapı: %50
Özel Dolgu: 0,65em Üst, 0,65em Alt, 1em Sağ, 1em Sol

Unutmayın, düğme metin boyutunu ayarlayabilirsiniz ve dolgu metnin boyutuna göre ölçeklenirken düğme mükemmel bir daire şeklinde kalacaktır.

Divi Düzeninize Simge Düğmeleri Ekleme

Divi, önceden hazırlanmış herhangi bir düzenin tasarımına uyacak şekilde tek simge düğmeleri eklemeyi ve özelleştirmeyi kolaylaştırır.

Bu örnek için, size Oda Kahvaltı Ana Sayfa Düzenine nasıl tek bir simge düğmesinin ekleneceğini 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. Oda & Kahvaltı Ana Sayfa Düzenini seçin ve düzeni sayfaya dağıtmak için “Bu Düzeni Kullan” düğmesini tıklayın.

Bir Görüntüye Simge Düğmesi Ekleme

Belirli bir ürün veya hizmete bağlanan ek bir CTA için görüntünün köşesini kaplamak üzere küçük bir simge düğmesi eklemek istediğinizi varsayalım. Tek yapmanız gereken görüntünün altına bir düğme modülü eklemek ve onu simge yazı tipini içerecek şekilde özelleştirmek ve bazı özel boşluklarla görüntünün üst üste gelmesini sağlamak.

Ana sayfa düzeninde “Hakkımızda” bölümünü bulun. Ardından, “Çift Kişilik Oda”yı öne çıkarmak için kullanılan görsellerden birinin altına doğrudan bir düğme modülü ekleyin (üç sütunlu satırın ilk sütunundaki ilktir).

Ardından düğme ayarlarını açın ve düğme metin kutusuna büyük bir “P” koyun. Bu, Düğme Yazı Tipi olarak Zarif yazı tipini seçtiğinizde simgemize dönüşecektir.

Düğmenin tasarımını düzen ile eşleştirmeye hızlı bir başlangıç ​​yapmak için düğme ayarlarınızı kaydedin ve düzenin üst kısmındaki “Şimdi Rezervasyon Yap” düğmesini bulun. Düğme ayarlarını açın ve Düğme Seçenekleri Geçiş Başlığını sağ tıklayıp 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 buton modülüne sağ tıklayın ve “Buton Stillerini Yapıştır” seçeneğini seçin.

Ardından düğme ayarlarını aşağıdaki gibi güncelleyin:

Düğme Yazı Tipi: Zarif Yazı Tipi
Düğme Kenar Genişliği: 0px
Düğme Simgesini Göster: HAYIR

Ardından, düğmenin mükemmel bir kare olmasını sağlamak için şık özel dolgumuzu ekleyelim:

Özel Dolgu: 0,65em Üst, 0,65em Alt, 1em Sol, 1em Sağ

Düğmeyi görüntünün sağ alt köşesiyle çakışacak şekilde konumlandırmak için önce yukarıdaki görüntü modülünün alt kenar boşluğundan kurtulmanız gerekir. Doğrudan düğmenin üzerindeki görüntünün görüntü modülü ayarlarını açın ve alt kenar boşluğunu 0 piksele 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 üzerinde yukarı çekmemiz gerekiyor. Bunu yapmak için düğmemizin yüksekliğini belirlememiz gerekiyor. Bu gönderide daha önce belirtildiği gibi, özel dolgu yerindeyken, mevcut düğme metin boyutuna göre düğmemizin tam boyutunu bilebiliriz. Düğme metin boyutu 20 piksel olduğundan, düğmemizin yüksekliğinin 3em olduğunu biliyoruz (düğme metni boyutunun 3 katı) yani 60 piksel. Bu nedenle, düğmemiz için aşağıdaki gibi özel bir kenar boşluğu belirlememiz gerekiyor:

Özel Kenar Boşluğu: -60 piksel Üst

Ardından Düğme Hizalamasını Sağa ayarlayarak düğmemizi sağa konumlandırabiliriz.

Artık resmimiz 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ı butonu eklemek.

Resmin alt kenar boşluğunu çıkardığımız için, Genişletilmiş Stilleri kullanarak bu değişikliği bölümdeki tüm resimlere kolayca uygulayabiliriz. Resme sağ tıklayın ve “Görüntü Stillerini Genişlet” seçeneğini seçin.

Stilleri Genişlet açılır penceresinde, Boyunca 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 alt kenar boşluğu 0 pikseldir.

Son adım, her bir görüntünün altındaki Düğme modüllerini kopyalayıp yapıştırmaktır.

İşte son tasarım.

Ve uygun boşluk bırakma tekniklerini kullandığımız için düğme mobilde de yerinde kalacak…

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 bir tuşla ilişkili mevcut simgeleri bulmak için bu tuşları keşfetmeniz gerekecektir. Bunu yapmanın kolay bir yolu, düğme yazı tipini Zarif Yazı Tipi olarak ayarlayarak bir düğme modülü oluşturmak ve karakterleri düğme metin kutusuna yazmaktır.

Karşılık gelen yazı tipi simgesiyle karakterlerin ekran görüntüsü:

Bu işlemi sınırlayıcı buluyorsanız, burada listelenen unicode'ları kullanarak simge bağlantıları oluşturmak için her zaman bir metin modülü kullanabilirsiniz.

Son düşünceler

Divi'nin düğme modülüyle Elegant Simge Yazı Tipi'ni kullanmak, web siteniz için tek simge düğmeleri oluşturmanın uygun bir yoludur. Bu, benzersiz metin stilleri, fareyle üzerine gelme efektleri ve daha fazlasıyla düğmenizi özelleştirmek için modül ayarlarıyla yaratıcı olmanız için bazı kapılar açar. Düğmelerin tam bir kare veya daire şeklini almasını sağlayan özel düğme aralığı değerlerini özellikle seviyorum.

Simge düğmeleri için tonlarca kullanım vardır. Umarım, ele aldığım örnek kullanım durumu, kendi projeleriniz için biraz ilham katacaktır.

Daha fazla fikir için, Zarif Simge Yazı Tipinin nasıl kullanılacağına veya bir simge yazı tipinin web sitenize nasıl yerleştirileceğine bakın.

Aşağıdaki yorumlarda sizden bazı fikirler almayı çok isterim.

Şerefe!