Simge modülünü nasıl kullanacağınızı bilmek ister misiniz? Divi özel simgeler oluşturmak için?
Simge düğmeleri, web tasarımı dünyasında bir temel haline geldi. Simgeler, fazla yer kaplamadıkları için mobil cihazlar için harika çalışan, kısa ve öz görsel harekete geçirici mesajlar sağlar. Ayrıca, kullanıcıların metne ihtiyaç duymadan sezgisel olarak tanıdığı geçiş veya açılır düğmeler olarak da çalışırlar.
Bugünün eğitiminde size simge düğmelerinin nasıl tasarlanacağını göstereceğiz. Divi. içinde bir simge düğmesi oluşturun Divi yapması oldukça basit ve eğlencelidir.
Simgeler modülünü kullanarak yüzlerce simge arasından seçim yapabilir ve sayısız yerleşik tasarım seçeneğini kullanabiliriz. Divi Aklınıza gelebilecek hemen hemen her tür simge düğmesini oluşturmak için oluşturucu.
Bu makalenin, bir sonraki projeniz için harika simge düğmeleri oluşturmaya başlamanıza yardımcı olacağını umuyoruz.
Başlayalım!
anket
İşte bu eğitimde oluşturacağımız simge düğmelerine hızlı bir genel bakış.
Divi Builder ile yeni bir sayfa oluşturun
Ayrıca bakınız: Divi: "Tam Genişlik Menüsü" modülünün sepet ve arama simgeleri nasıl özelleştirilir
WordPress kontrol panelinden şuraya gidin: Sayfalar> Yeni Ekle yeni bir sayfa oluşturmak için.
Size mantıklı gelen bir başlık verin ve tıklayın Divi Builder'ı kullanın
Ardından İnşaata Başla (Sıfırdan Oluşturun)
Bundan sonra, Divi'de tasarlamaya başlamak için boş bir tuvaliniz olacak.
Divi Simgeler modülüyle simge düğmeleri oluşturun
Bölüm 1: Bir Simge Düğmesi Oluşturma
Başlamak için, varsayılan normal bölüme tek sütunlu bir satır ekleyelim.
Ardından yeni bir modül ekleyin ikon sütuna.
Simge, bağlantı URL'si ve arka plan rengi
Sekmenin altında içerik simge modülü ayarları, aşağıdakileri güncelleyin:
- Simge: Sağ ok (ekran görüntüsüne bakın)
- Simge Bağlantı URL'si: # (şimdilik yalnızca bir dolgu maddesi)
- Arkaplan: #3e22ff
Sınır ve sınır yarıçapı
Sekmenin altında Dizayn, aşağıdakileri güncelleyin:
- Yuvarlatılmış Köşeler: 10px
- Kenar Genişliği: 2px
- Kenar Rengi: #7272ff
Gölge kutusu
- Kutu Gölgesi: Ekran görüntüsüne bakın
- Gölge Rengi: rgba(62,34,255,0.48)
Simge düğmesi boyutuyla eşleşen tıklanabilir alan
Şu anda, simge modülü ana kapsayıcının (veya sütunun) tam genişliğini kapsayacaktır. Bu, tıklanabilir alanın gerçek simge düğmesinden daha büyük olduğu anlamına gelir.
Tıklanabilir alanı simge düğmesinin boyutuyla eşleştirmek için modüle simge düğmesinin genişliğiyle aynı olan maksimum bir genişlik verebiliriz.
Bu örnekte, düğmenin toplam genişliği 94 pikseldir.
Gelişmiş sekmesinin altında, ana öğeye aşağıdaki özel CSS'yi ekleyin:
max-width: 94px
İşte sonuç.
2. Bölüm: Bir kare simge düğmesi oluşturun
Kare simge düğmemizi oluşturmak için, az önce oluşturduğumuz ilk simge düğmesini içeren satırı çoğaltın. Bu bize çalışmak için satırda bir yinelenen düğme verecektir.
Simgeyi ortada tutarken aynı yükseklik ve genişlikte verin
Simge modülünde kullanılabilen geniş simgeler koleksiyonu hem Divi simgelerini hem de Fontawesome simgelerini içerir. Ancak, tüm simgeler aynı yüksekliğe ve genişliğe sahip olmayacaktır. Bu, simge düğmesinin tam genişliğini ve yüksekliğini belirlemeyi biraz daha zorlaştırır.
Fareyle üzerine gelindiğinde simgeyi birleştiren mükemmel bir kare düğme oluşturmak için, simge için bir yükseklik ve genişlik ayarlamak için özel CSS ekleyebilir ve ayrıca CSS Flex özelliğini kullanarak simgeyi ortalayabiliriz.
İşte böyle.
İlk önce, yinelenen simge ayarlarını açın. Ardından simgeyi, simge seçiciden yenisiyle güncelleyin.
Simge modülünden dolguyu çıkarın. Simge için bir yükseklik ve genişlik belirleyeceğimiz için buna gerek kalmayacak.
Gelişmiş sekmesi altında, aşağıdaki özel CSS'yi ekleyin: Simge Öğesi :
height: 90px
width: 90px
display: flex;
align-items: center;
justify-content: center;
Şimdi simge düğmesinin yüksekliği ve genişliği 90 piksele eşit olacak ve bu da onu mükemmel bir kare yapacak. Ayrıca, flex özelliği, simgeyi modülün ortasına hizalar. Bu, simge modülündeki simge boyutunu kolayca güncellemenizi sağlar.
Bu butonu tamamlamak için aşağıdaki gibi bir arka plan gradyanı ve beyaz bir bordür rengi verelim:
- Gradyan Durakları:
- %0: #3e22ff
- %100: #ff2000
- Kenar Rengi: #fff
İşte son sonuç.
Dairesel simge düğmesi oluştur
Simge düğmesi tam kare olduğunda, onu dairesel yapmak kolaydır. Ancak size bu basit numarayı göstermeden önce, dairesel simge düğmemizi oluşturmaya başlamak için önceki satırı çoğaltalım.
Şimdi yeni yinelenen simgemiz için ayarları açın ve sekmenin altında Dizayn, sınır yarıçapını (veya yuvarlatılmış köşeleri) aşağıdaki gibi güncelleyin:
- Yuvarlatılmış Köşeler: %50
Ve aynen böyle, dairesel bir simge düğmemiz var!
Tasarımı biraz değiştirmek için ikon modülüne aşağıdaki gibi farklı bir ikon ve arka plan rengi verelim:
- Simge: ekran görüntüsüne bakın
- Arka plan: #121212
İşte sonuç.
Bir simge düğmesi yatay menü oluşturun
Popüler bir eğilim, genellikle yan yana yerleştirilmiş birkaç düğmeden oluşan bir simge menüsü oluşturmak için simgeleri kullanmaktır. Bunun için flex özelliğini kullanabiliriz.
İşte nasıl yapılacağı.
İlk olarak, sayfadaki bir sütuna yeni bir satır ekleyin.
Çizgi ayarlarını açın ve oluk genişliğini 1 olarak güncelleyin.
- Oluk Genişliği: 1
Ardından, satırın içindeki sütun ayarlarını açın ve ana sütun öğesine aşağıdaki özel CSS'yi ekleyin:
display:flex;
align-items:center;
Yeni bir modül ekle ikon sütuna.
Sekmenin altında içerik simge ayarları, bir simge seçin ve simge bağlantı URL'sini ekleyin.
Sekmenin altında Dizayn, aşağıdakileri güncelleyin:
- Simge Rengi: #3e22ff
- Simge Boyutu: 40px
- Kenar Boşluğu (Sol ve Sağ): 10px
- Kenar Genişliği: 2px
- Kenar Rengi: #3e22ff
AÇIKLAMA : Daha sonra daha fazlasını eklediğimizde, kenar boşluğu bitişik düğmeler arasında boşluk oluşturacaktır.
Sekmenin altında gelişmiş, alana aşağıdaki özel CSS'yi ekleyin Simge Öğesi (daha önce kare simge düğmesi için yaptığımız gibi):
display: flex;
align-items: center;
justify-content: center;
height: 60px;
width: 60px;
Şimdi ne zaman yeni simge düğmeleri eklesek, yan yana görünecekler. Bunu göstermek için, yatay menüde toplam dört simge düğmesi oluşturmak için mevcut simge düğmesini üç kez çoğaltalım.
Bundan sonra, geri dönüp simgeleri gerektiği gibi güncelleyebiliriz.
İşte sonuç.
Simge düğmesine vurgulu efektler eklendi
Fareyle üzerine gelme efektlerinden bahsetmeden simge düğmesi tasarımından bahsetmek zor. Onlar görmezden gelinemeyecek kadar eğlenceli.
Fareyle üzerine gelindiğinde arka plan rengini ve simge rengini değiştirme
Düğme renklerini değiştirmek, popüler ve etkili bir fareyle üzerine gelme efektidir. Örneğin, kullanıcı düğmenin üzerine geldiğinde arka plan rengini ve simge rengini aynı anda değiştirebiliriz.
Bunu yapmak için, simge modülü ayarlarını açın ve arka plan rengi için vurgulu seçeneklerini etkinleştirin ve vurgulu durumu için farklı bir renk seçin. Ardından simge için de aynısını yapabilirsiniz.
Bu örnekte, arka plan rengini beyazdan maviye ve simgeyi maviden beyaza değiştiriyoruz.
Fareyle üzerine gelindiğinde simgeyi değiştir
Hoşunuza gidebilecek başka bir fareyle üzerine gelme efekti, simgeyi tamamen değiştirmektir. Bunu yapmak için simge ayarlarında bir simge seçtiğinizde vurgulu durumu için farklı bir simge seçebilirsiniz.
Fareyle üzerine gelindiğinde simge düğmesi ölçeği
Göz ardı edilmesi zor bir vurgulu efekti, ölçekleme vurgulu efektidir. Bu, simge düğmesini büyütür veya büyütür. Bu tür vurgulu efekti eklemenin en iyi yolu Divi'nin dönüştürme seçeneklerini kullanmaktır. Bu, düğmenin etrafındaki öğeleri etkilemeden büyümesini sağlar.
Simge düğmesine bir ölçek vurgulu efekti eklemek için simge ayarlarını açın ve sekmesi altında Dizayn, dönüştürme seçeneklerini arayın. Fareyle üzerine gelme seçeneklerini etkinleştirin, ardından fareyle üzerine gelme durumuna aşağıdaki dönüştürme ölçeğini atayın:
- Y'yi Dönüştür: %118
- X'i Dönüştür: %118
Bu, kullanıcı üzerine geldiğinde simge düğmesinin boyutunu %18 oranında artıracaktır.
Fareyle üzerine gelindiğinde simge düğmesini döndür
Uçan nesneleri döndürmek her zaman eğlenceli bir mikro etkileşimdir. Fareyle üzerine gelindiğinde bir simge düğmesini döndürmek için dönüştürme döndürme seçeneğini kullanabiliriz. Ama ondan önce düğmeyi dairesel yapalım ki sadece simge dönmüş görünsün.
Simgeyi dairesel yapmak için, düğmenin bir kare olduğunu varsayarak, yuvarlatılmış köşeler ayarını dört köşede de %50'ye güncellemeniz yeterlidir.
Ardından, fareyle üzerine gelme durumuna aşağıdaki dönüştürme döndürme değerini dahil etmek için dönüştürme seçeneklerini güncelleyin:
- Dönüştür Döndür Z: 180deg
Hareket halindeki 4 vurgulu efektimize bir göz atalım.
Nihai sonuç
Eğitimimizin nihai sonuçlarına bir göz atalım.
Ayrıca Oku: Divi: Fareyle üzerine gelindiğinde bir "Bulanıklık" modülü nasıl vurgulanır ve diğerlerini bulanıklaştırır
İşte üç simge düğmemiz (standart, kare ve dairesel).
Ve işte vurgulu efektli yatay simge düğmesi menüsü.
DIVI'yı Şimdi İndirin !!!
Sonuç
için simge düğmelerini nasıl tasarlayacağınızı öğrenin. Site Web gereklidir. Ve bu derste gördüğümüz gibi, Divi ile o kadar da zor değil. Divi'nin Simge Modülü, yaratıcı simge düğmesi tasarımlarına kapı açan bir dizi yerleşik seçeneğe sahiptir.
Umarım bu makaledeki teknikler, kendi simge düğmesi tasarımlarınızın sihrinin bir kısmının kilidini açmanıza yardımcı olur.
Herhangi bir endişeniz veya öneriniz varsa, bizi yorumlar bölümü bunu tartışmak için.
Ayrıca danışabilirsiniz kaynaklarımızİnternet siteleri oluşturma projelerinizi yürütmek için daha fazla elemana ihtiyacınız varsa, WordPress blog oluşturma ya da Divi: Tüm zamanların en iyi WordPress teması.
Ama bu arada, bu yazıyı farklı sosyal ağlarda paylaş.
...
