Bir Metin Modülü Kullanarak Benzersiz Divi Düğme Tasarımları Oluşturma

Bir metin modülü kullanarak benzersiz Divi düğme tasarımları oluşturmak zaten aklınızdan geçmiş olabilir. Eğer öyleyse, sandığınızdan daha yaratıcısınız! Divi'de fareyle üzerine gelme seçeneklerinin serbest bırakılmasıyla, tüm modüller tıklanabilir hale getirilebilir. Bu, herhangi bir modülü (tüm yerleşik tasarım ayarlarıyla birlikte) tıklanabilir bir CTA veya düğme olarak kullanmanın kapısını açar. Örneğin bir metin modülü, modüle farklı formatlarda istediğiniz kadar metin eklemenize olanak tanır. Ayrıca, metin modülü, benzersiz şekiller oluşturmak için yuvarlatılmış köşeleri özelleştirmek için bazı sağlam tasarım seçeneklerine de sahiptir.

Bu derste, bir metin modülü kullanarak mümkün olan bazı benzersiz Divi düğme tasarımlarını keşfedeceğim.

Başlayalım!

Gizlice Bakış

İşte metin modülü ile kolayca oluşturacağımız birkaç örnek düğme tasarımı.

Bu, iki satırda metin içeren bir düğme…

Bu, bir liste öğesi kullanan bir düğmedir…

Bu, yaratıcı köşeleri kullanan bir düğme…

Bir Metin Modülü Kullanarak Benzersiz Divi Düğme Tasarımları Oluşturma

Youtube Kanalımıza Abone Olun

#1 Birden Çok Metin Satırlı Bir Düğme Oluşturma

Daha önce belirtildiği gibi, metin modülü sınırsız miktarda metne izin verir, bu nedenle metin modülünü birden çok formatta kullanarak yalnızca iki satır metin içeren bir düğme oluşturmak kolay olurdu. Wysiwyg veya metin düzenleyiciyi kullanarak paragraf metni, başlıklar, bağlantılar, listeler ve blok alıntılar ekleyebilirsiniz. Ve metin modülünün en iyi yanı, görsel oluşturucu tasarım ayarlarında yerleşik olarak bulunan sekme kullanıcı arayüzünü kullanarak bu metin biçimlerinin her birini ayrı ayrı hedefleyip stillendirebilmenizdir.

Bu, birden çok metin satırı eklemeyi ve ardından benzersiz bir düğme düzeni için her metin satırını ayrı ayrı biçimlendirmeyi gerçekten kolaylaştırır.

Metin modülünü birden çok metin satırı içeren bir düğme olarak nasıl kuracağınıza dair hızlı bir örnek.

Henüz yapmadıysanız, yeni bir sayfa oluşturun ve görsel oluşturucuyu dağıtın. “Sıfırdan Oluştur” seçeneğini seçin. Ardından, tek sütunlu bir satırda yeni bir bölüm oluşturun. Ardından satıra bir metin modülü ekleyin.

Metin içeriği için html sekmesini kullanın ve aşağıdakileri girin:

<h3>Contact Us</h3>
<h4>WE CAN HELP</h4>

Modülümüze ekleyebileceğimiz birçok farklı arka plan stili var, ancak bu örnekte tet basit bir gradyan arka planı ekliyor:

Arka Plan Gradyanı Sol Renk: #FEE140
Arka Plan Gradyanı Sağ Renk: #FA709A

Ardından tasarım sekmesine gidin ve h3 ve h4 başlık etiketlerini aşağıdaki gibi biçimlendirmek için başlık sekmesi kullanıcı arayüzünü kullanın:

Başlık 3 Yazı Tipi Ağırlığı: Ultra Kalın
Başlık 3 Yazı Tipi Stili: TT
Başlık 3 Metin Rengi: #ffffff
Başlık 4 Yazı Tipi Stili: TT
Başlık 4 Metin Rengi: #ffffff
Başlık 4 Metin Boyutu: 16px

Şimdi tek yapmamız gereken, metin modülünü daha çok bir düğme gibi görünecek şekilde boyutlandırmak. Bunu yapmak için aşağıdakileri güncelleyin:

Genişlik: 230 piksel
Özel Dolgu: 1em üst, 0,5em alt, 2em sol, 2em sağ

Divi'nin yeni vurgulu seçeneklerinin piyasaya sürülmesinden bu yana, tüm modüller tıpkı bir düğme gibi tıklanabilir hale gelebilir. Bunu yapmak için içerik sekmesine geri dönün ve bir modül bağlantı url'si girin.

İşte nihai sonuç.

Fareyle üzerine gelme efekti olarak, düğmeyi tarayan ve sonuçta degradeyi değiştirmek için yeni bir arka plan rengi uygulayan bir kutu gölgesi ekleyebilirsiniz.

Bunu yapmak için metin modülü ayarlarını açın ve aşağıdakileri güncelleyin:

Kutu Gölgesi: ekran görüntüsüne bakın
Kutu Gölgesi Yatay Konumu: 0px (varsayılan), 230px (vurgulu)
Kutu Gölge Dikey Konumu: 0px
Gölge Rengi: rgba(0,0,0,0) (varsayılan), #fee140 (fareyle üzerine gelin)

Hover'da göründüğü gibi.

#2 Liste Öğesi Oluşturma Düğmesi

Metin modülleri, içeriğe listeler (sırasız veya sıralı) eklemenize izin verdiği için, bir liste düğmesi oluşturmak için bu özellikten yararlanabilirsiniz. Temel olarak yapmanız gereken tek şey, içerik kutusunun içinde bir liste öğesi bulunan bir liste oluşturmaktır. Ardından, liste madde işareti öğesini ve başlık metnini ayrı ayrı biçimlendirebilmeniz için liste öğenizi bir başlık etiketine sarın.

Henüz yapmadıysanız, yeni bir sayfa oluşturun ve görsel oluşturucuyu dağıtın. “Sıfırdan Oluştur” seçeneğini seçin. Ardından, tek sütunlu bir satırda yeni bir bölüm oluşturun. Ardından satıra bir metin modülü ekleyin.

Ardından, içerik ayarlarınızın metin sekmesine aşağıdaki html'yi ekleyin:

<ol><li><h3>Contact Us</h3></li></ol>

Liste öğesi madde işaretini/numarasını metinden ayrı olarak biçimlendirebilmemiz için liste öğesi metnini bir başlık etiketine sarmak önemlidir.

Şimdi tasarım sekmesine geçin ve metin modülünü bir düğme olarak tasarlamayı bitirin:

Metin ayarları kategorisi altında, sıralı liste sekmesini seçin ve aşağıdakileri güncelleyin:

Sıralı Liste Yazı Tipi: Exo 2
Sıralı Liste Yazı Tipi Ağırlığı: Hafif
Sıralı Liste Metin Rengi: #000000
Sıralı Liste Metin Boyutu: 20px
Sıralı Liste Harf Aralığı: 5px
Sıralı Liste Stil Türü: ondalık-başlık-sıfır
Sıralı Liste Stili Pozisyonu: Dış
Sıralı Liste öğesi girintisi: 2em

Başlık Metni kategorisi altında, H3 sekmesine tıklayın ve aşağıdakileri güncelleyin:

Başlık 3 Yazı Tipi: Exo 2
Başlık 3 Yazı Ağırlığı: Yarı Kalın
Başlık 3 Yazı Tipi Stili: TT
Başlık 3 Metin Rengi: #0c71c3
Başlık 3 Metin Boyutu: 26px
Başlık 3 Çizgi Yüksekliği: 0.3em

Ardından, modülün genişliğini değiştirin ve bir kenarlık verin ve bir düğme gibi görünmesini sağlamak için boşluk verin:

Genişlik (modül): 262 piksel
Modül hizalaması: merkez
Özel Dolgu: 2em üst, 0 piksel alt, 2em sol, 2em sağ
Yuvarlatılmış köşeler: 10px2em
Kenar genişliği: 1 piksel
Kenarlık rengi: #000000
Kenarlık stili: katı

Ve modülünüze, seçtiğiniz belirlenmiş URL'ye bir bağlantı eklemeyi unutmayın.

İşte son tasarım.

Benzersiz liste düğmesi tasarımları için yeni liste stili türlerini (Üst Roman gibi) keşfetmekten çekinmeyin.

#3 Yaratıcı Köşeli Bir Düğme Oluşturma (yaprak gibi)

Bir sonraki tasarım için, bir metin modülü içindeki yuvarlak köşe tasarım ayarından yararlanacağız. Temel fikir, benzersiz şekilli düğmeler oluşturmak için farklı köşe yarıçapı değerleri ayarlamaktır. Bu örnekte modülümüzü yaprak buton gibi görünecek şekilde şekillendireceğim.

Henüz yapmadıysanız, yeni bir sayfa oluşturun ve görsel oluşturucuyu dağıtın. “Sıfırdan Oluştur” seçeneğini seçin. Ardından, tek sütunlu bir satırda yeni bir bölüm oluşturun. Ardından satıra bir metin modülü ekleyin.

Metin modülü ayarlarını açın ve içerik kutusunun metin sekmesine aşağıdaki html'yi girin:

<h3>grow</h3>
<h4>with us</h4>

Bu, düğme metnini iki satıra (dikey genişlikte keserek) koymamıza ve bağımsız olarak stillendirmemize olanak tanır.

Ardından, daha "yaprak benzeri" bir renge sahip bir degrade arka plan ekleyin.

Arka plan gradyan sol rengi: #7cda24
Arka plan degrade sağ rengi: #26e051
Gradyan yönü: 90 derece

Şimdi metnimizi ortalamak ve başlık etiketlerini biçimlendirmek için tasarım ayarlarına geçelim. h3 başlığını tasarlamak için h3 sekmesini seçmeniz ve h4 başlığını tasarlamak için h4 sekmesini seçmeniz gerekecektir:

Metin Yönü: orta
Başlık 3 Yazı Tipi: Oswald
Başlık 3 Yazı Tipi Ağırlığı: Hafif
Başlık 3 Yazı Tipi Stili: TT
Başlık 3 Metin Rengi: #ffffff
Başlık 3 Metin Boyutu: 27px
Başlık 4 Yazı Tipi: Oswald
Başlık 4 Yazı Tipi Stili: TT
Başlık 4 Metin Rengi: #ffffff

Metin modülünüze bir düğme için uygun genişlik ve boşluk sağlamak için tasarımı güncellemeye devam edin.

Genişlik: 178 piksel
Modül hizalaması: merkez
Özel Dolgu: 2em üst, 2em alt, 1em sol, 1em sağ

Son olarak, modüle bir yaprak şekli vermek için özel yuvarlak köşelerimizi ekleyebilir ve ardından yaprağı daha canlı hale getirmek için bir kutu gölgesi ekleyebiliriz. Bu güncellemeyi yapmak için aşağıdakileri yapın:

Her köşeye ayrı değerler atayabilmeniz için önce yuvarlak köşe seçeneğinin kilidini açın.

Sol Üst Köşe: 100 piksel
Sağ Alt Köşe: 100px

Ardından bir kutu gölgesi ekleyin…

Kutu Gölgesi: ekran görüntüsüne bakın
Kutu Gölgesi Yatay Konumu: 25px
Kutu Gölge Dikey Konumu: -4px
Kutu Gölge Yayılma Gücü: -12px
Gölge Rengi: rgba(0,0,0,0.25)

Modülünüzün istediğiniz konuma bağlanması için Modül Bağlantı URL'nizi eklemeyi unutmayın.

İşte son tasarım.

Fareyle üzerine gelme efekti için, düğme tasarımını fareyle üzerine gelindiğinde ters yöne yerleştirmek için yuvarlatılmış köşe değerlerini değiştirebilirsiniz:

Ve işte vurgulu efekti nasıl görünüyor.

Son düşünceler

Divi ile web siteleri tasarlamaya gelince, arada sırada kutunun dışında düşünmek her zaman güzeldir. Umarım bu eğitim, metin modülünü kullanarak yeni ve yaratıcı bölme düğmeleri tasarımları 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 bekliyorum.

Şerefe!