Bir metin modülü kullanarak benzersiz bir divi düğmesi tasarımı oluşturun
Metin modülü kullanarak benzersiz bir divi düğmesi tasarımı yapmak zihninizi geçmiş olabilir. Eğer öyleyse, bildiğinizden daha yaratıcısınız! Divi’deki Hover seçeneğinin yayınlanmasıyla tüm modüller tıklanabilir. CTA veya tıklanabilen düğmeler olarak herhangi bir modülü (tüm varsayılan tasarım ayarlarıyla) kullanmak için kapıyı açar. Örneğin bir metin modülü, farklı formatlarda modülleri istediğiniz kadar metin eklemenizi sağlar. Ayrıca, metin modülü, benzersiz bir şekil oluşturmak için yuvarlak açıyı ayarlamak için birkaç güçlü tasarım seçeneğine sahiptir.
Bu öğreticide, metin modülünü kullanmak mümkün olan bazı benzersiz Divi düğmesi tasarımlarını keşfedeceğim. Başlayalım! Sneak Peek Burada, metin modülü ile kolayca yapacağımız bazı düğme tasarım örnekleri. Bu iki sıradaki metin olan bir düğme …
Bize Ulaşın
Yardım edebiliriz
Modülümüze ekleyebileceğimiz birçok farklı arka plan stili vardır, ancak bu örnek için basit bir gradyan arka plan ekleyin:
Sol renk gradyan arka plan: #fee140 Sağ renk gradyan arka plan: #fa709aArdından Tasarım sekmesini açın ve H3 ve H4 başlık etiketlerini aşağıdaki gibi düzenlemek için UI sekmesi başlığı kullanın: Başlık 3 Yazı Tipi Ağırlık: Ultra Kalın Başlık 3 Yazı Tipi Stil: TT Başlık 3 Renk Metin: #FFFFFF Başlık 4 Yazı Tipi Stil: TT Başlık 4 Renk Metin: #ffffff Başlık 4 Metin Boyutu: 16px Şimdi yapmamız gereken, daha çok bir düğmeye benzemesi için metin modülünü ölçmektir. Bunu yapmak için aşağıdakileri güncelleyin: Genişlik: 230 piksel dolgu özel: 1em üst, 0.5em aşağıda, 2em sol, 2em sağ Divi Yeni Hover seçeneğinin yayınlanmasından bu yana, tüm modüller bir düğme gibi tıklanabilir. Bunu yapmak için içerik sekmesine dönün ve Modül Bağlantı URL’sini girin. Sonuçlar aşağıdadır. Bir kaydırma efekti olarak, düğmeyi süpüren bir kutunun gölgesi ekleyebilirsiniz, bu da gradyanı değiştirmek için yeni bir arka plan rengi uygular. Bunu yapmak için aşağıdaki metin modülü ayarlarını açın ve aşağıdakileri güncelleyin: Gölge Kutusu: Ekran Yatay Konum Yakalama Gölge Kutusu: 0px (Varsayılan), 230px (nokta imleç) Dikey konum Gölge Kutusu: 0px Renk Gölgesi: RGBA (0.0,0 , 0) (varsayılan), #Fee140 (İmleci Noktalı) Hakkında aşağıdaki görünüm. #2 Bir Liste Öğe düğmesi oluşturun Metin modülü, içeriğe bir liste (sıralı veya sıralı değil) eklemenize olanak tanıydığınız için, bir liste düğmesi oluşturmak için bu özelliği kullanabilirsiniz. Temel olarak, tek yapmanız gereken içerik kutusunda bir liste öğesi olan bir liste yapmaktır. Ardından, Liste öğenizi Başlık Etiketine sarın, böylece mermi öğesi stili listesini ve başlık metnini ayrı ayrı ayarlayabilirsiniz. Yapmadıysanız, yeni bir sayfa oluşturun ve görsel bir yapımcı uygulayın. “Başından Uyan” seçeneğini seçin. Ardından satır bir sütunun yeni bir bölümünü yapın. Ardından metin modülünü satıra ekleyin. Ardından, içerik ayarlarınızın metin sekmesine aşağıdaki HTML’yi ekleyin:
Bize Ulaşın
Öğe/öğe numarası listesini metinden ayrı olarak ayarlayabilmemiz için liste öğesi metnini başlık etiketine sarmak önemlidir.Şimdi Tasarım sekmesine atlayın ve Tasarım metni modüllerini bir düğme olarak tamamlayın: Metin Ayarları kategorisi altında, aşağıdaki sıralama ve güncellenen liste sekmesini seçin:
Sıralı liste yazı tipi: exo 2 Ağırlık Yazı Tipi Sipariş Listesi: Hafif Metin Renk Sipariş Edilmiş Metin: #000000 Metin Boyutu Kayıt Sipariş: 20PX Sıralı Listenin Listesi: 5px Stil Tür Listesi Sıralı: Ondalık-First-NOL Listesi Konumu Sıralı liste: girinti öğesi dışında liste listesi: 2EM Başlık metin kategorisi altında H3 sekmesini tıklatın ve aşağıdakileri güncelleyin: Başlık 3 Yazı Tipi: Exo 2 Başlık 3 Yazı Tipi Ağırlığı: Yarı Kalın Başlık 3 Yazı Tipi Stil: TT Başlık 3 Renk Metin: #0C71C3 Başlık 3 Metin Boyutu: 26px POS 3 Hat Yüksekliği: 0.3EM Sonraki, modülün genişliğini değiştirin ve bir düğme gibi görünecek limiti ve alanı verin: genişlik (modül): 262px hizalama modülü: Merkezi Özel Dolgu: 2EM üstü , 0px dip, 2em sol, 2em sağ yuvarlak açı: 10px2em sınır genişliği: 1px renk sınır: #000000 sınır kuvveti: katı
Ve modülünüze seçtiğiniz URL’ye bağlantılar eklemeyi unutmayın.
İşte son tasarım.
Benzersiz bir liste düğmesi tasarlamak için yeni liste stilinin türünü (yukarıdaki Roma gibi) keşfetmekten çekinmeyin. #3 Bir sonraki tasarım için yaratıcı bir açıyla (yaprak gibi) bir düğme yapın, metin modülündeki yuvarlak açılı tasarım ayarlarını kullanacağız. Temel fikir, benzersiz şekilli bir düğme yapmak için farklı bir açısal yarıçapın değerini ayarlamaktır. Bu örnekte, bir yaprak düğmesi gibi görünmesi için modülümüzü oluşturacağım.
Grow
Bizimle
Bu, düğme metnini iki sıraya yerleştirmemizi (dikey genişliği azaltmamızı) ve bağımsız olarak düzenlememizi sağlar. Ardından, daha fazla “yaprak” rengiyle degradenin arka planını ekleyin. Sol renk gradyan arka plan: #7CDA24 Sağ renk gradyan Arka Plan: #26E051 Gradyan Yönü: 90 dereceŞimdi metnimizi konsantre etmek ve başlık etiketine bir stil vermek için tasarım ayarlarına dönelim. H3 başlığını tasarlamak için H3 sekmesini seçmeli ve H4 başlığı tasarlamak için H4 sekmesini seçmelisiniz: Metin Oryantasyonu: Orta Başlık 3 Yazı Tipi: Oswald Başlık 3 Yazı Tipi Ağırlık: Işık Başlık 3 Yazı Tipi Stil: TT Başlık 3 Renk Metin: #FFFFFF Başlık 3 Metin Boyutu: 27px Başlık 4 Yazı Tipi: Oswald Başlık 4 Yazı Tipi Stil: TT Başlık 4 Renk Metin: #FFFFFFF
Bir düğme için metin modülünüzü geniş ve doğru mesafeyi vermek için tasarımı güncellemeye devam edin. Genişlik: 178 Piksel Hizalama Modülü: Orta Dolma Özel: 2EM üst, 2em alt, 1em sol, 1em sağ
Son olarak, yaprak şekli modülünü vermek için özel bir yuvarlak açı ekleyebilir ve daha sonra yaprakları daha canlı hale getirmek için kutunun gölgesi ekleyebiliriz. Bu güncellemeyi yapmak için aşağıdakiler: Öncelikle, tek tek değerleri her açıya ayarlayabilmeniz için yuvarlak açı seçeneğini açın. Sol üst köşe: 100px sağ alt köşe: 100px sonra gölgeler kutusu ekle … Gölge kutusu: Ekrana bakınız Yatay Konum Gölge Kutusu: 25px Dikey Konum Gölge Kutusu: -4px kutu streç kutusu: -12px Gölge Renk: RGBA (0.0 0.0 , 0.0.25) Modülünüzün istenen konuma bağlı olması için modül bağlantınızın URL’sini eklemeyi unutmayın. İşte son tasarım. Hover efekti için, imleci yönlendirirken düğmenin tasarımını ters yöne yerleştirecek yuvarlak açılı değerini değiştirebilirsiniz: ve bu, Hover efekt ekranıdır. Son zihin, Divi ile bir web sitesi tasarlamak söz konusu olduğunda zaman zaman kutunun dışında düşünmek her zaman iyidir.Umarım bu eğitim metin modülünü kullanarak yeni ve yaratıcı Divi düğmesi tasarımını düşünmeye yardımcı olur.Aslında, daha fazla tasarım seçeneği için diğer modülleri (bulanıklık modülü gibi) keşfetmenizi öneririm.Yorumlarda sizden haber almayı umuyorum.Kızarmış ekmek!
