Ana İçeriğe Geç

Divi simgeleri ile düğmeleri nasıl oluşturulur

Divi: Kullanılacak en kolay WordPress teması

Divi: Tüm zamanların en iyi WordPress teması!

daha fazla 901.000 indirmeler, Divi, dünyanın en popüler WordPress teması. Tamamen, kullanımı kolay ve 62 ücretsiz şablonlardan daha fazlasını sunuyor. [Önerilen]

İkonik yazı tiplerine sahip düğmelerin web tasarım dünyasında birçok kullanımı vardır. İkonik yazı tipleri, farklı boyutlara ölçeklendikçe renk ve tasarım açısından canlı kaldığından, bunları düğmelerde kullanmak iyi bir fikirdir. Ve Divi'de ikonik yazı tipleriyle bir düğme oluşturmak, kütüphanedeki yazı tiplerini kullanarak aslında oldukça kolaydır.ElegantIcons". Bu öğreticide, tek bir simge düğmesi oluşturmak için Divi düğme modülüyle 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 ...

simge yazı tipi düğmeleri

divi düğmesinin boyutunu değiştirmek image.gif

gösteri düğmesi divi listesi delements.png

Neye ihtiyacınız var?

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

  • Divi teması (belli ki)
  • Şı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.

bir düğme ekle divi builder.jpg

Şık Simge Yazı Tipini Sürükle

Renk oyunu almak için ElegantFontsindirebilirsiniz bu yazı tipi bu bağlantı üzerinden paketleniyor. Elegant_font> HTML CSS> sınıfına giderek zip dosyasının içeriğini çıkarın ve zarif simge yazı tipi dosyalarını bulun. Sonra "ElegantIcons.ttf" dosyasını bilgisayarınıza sürükleyin ve görsel oluşturucuya bırakın.

zip dosyasını çıkartmak divi.jpg

Bu, Yazı Tipini Otomatik Olarak İndir modunu getirecektir. Yazı tipini Divi Builder'a indirmek için indirme düğmesine tıklamanız yeterlidir.

çevrimiçi divi.jpg koy

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 yazı tipi divi.jpg

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.

icon button.jpg kullanımı

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.

simge düğmesi divi 5.jpg

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)

özelleştirme düğmesi divi.jpg

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

bir düğme marjı ekle diiv.png

Elementor ile web sitenizi kolayca oluşturun

Elementor, profesyonel bir görünüme sahip herhangi bir web sitesi tasarımını kolayca oluşturmanıza olanak sağlar. Kendin yapabileceğin için pahalı ödemeyi kes. [Ücretsiz]

Şimdi düğme simgeniz imleç simgesinin üzerine gelecektir.

hover.gif de değiştirilmiş olan gösteri düğmesi

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

Bir button.png değiştirmek

Unutmayın, düğme metin boyutunu ayarlayabilir ve düğme, metin boyutu dolgusu gibi mükemmel bir daire içinde kalacaktır.

button.gif boyutunu özelleştir

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 düzen seçin divi.png

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.

En iyi WordPress temalarını ve eklentilerini mi arıyorsunuz?

Envato'daki en iyi eklentileri ve WordPress temalarını indirin ve web sitenizi kolayca oluşturun. 49.720.000 indirme işleminden daha fazla. [ÖZEL]

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

divi.png düğmesi

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.

divi.png düğme metni

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.

style.jpg modülünü yapıştır

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ğ

simge yazı tipi düğmeleri

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.

button.png özelleştirme

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

divi.png düğmesinin hizalamasını değiştirmek

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.

resim style.jpg uzatmak

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.

Çevrimiçi Mağazanızı kolayca oluşturun

WordPress'te fiziksel ve dijital ürünlerinizi satmak için ücretsiz WooCommerce, en iyi e-ticaret eklentilerini indirin. [Önerilen]

son tasarım düğmesi divi.png

Düzgün boşluk bırakma teknikleri kullandığımızdan, düğme aynı zamanda cep telefonunda da kalacaktır ...

mobile.png önizleme düğmesi

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ü:

kullanılabilir simgeler listesi divi.png

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 Simgeleri kullanmak, web siteniz için benzersiz düğmeler oluşturmanın uygun bir yoludur. Bu, düğmenizi benzersiz metin stilleri, vurgulu efektler ve daha fazlasıyla özelleştirmek için modül ayarlarıyla yaratıcılığın kapısını açar. Özellikle düğmelerin mükemmel bir 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.

Bu makale yorumları 0 içeriyor

YORUM BIRAKIN

E-posta hesabınız yayımlanmayacak. Doldurulması zorunlu alanlar * ile işaretlenmiştir *

Bu site, istenmeyenleri azaltmak için Akismet'i kullanıyor. Yorum verilerinizin nasıl kullanıldığı hakkında daha fazla bilgi edinin..

Başa dönüş
7 hisseleri
hisse4
cıvıltı
Enregistrer3