5 Yaratıcı Divi Düğme Modülü Tasarımı ve Nasıl Yapılır

Bu yazıda size Divi's Button Module ile kolayca elde edebileceğiniz 5 yaratıcı Divi buton modülü tasarımını göstereceğim. Düğme modülü, tüm Divi modüllerinin en popülerlerinden biridir çünkü düğmeler, ziyaretçileri bir web sitesinde istediğiniz hedeflere yönlendirmek için çok önemlidir. Bu nedenle tasarımcılar ve geliştiriciler olarak bu düğmeleri çekici ve göz alıcı hale getirmemiz çok önemli.

Hadi kazalım!

Gizlice Bakış

İşte bu eğitimde oluşturacağımız düğmelere hızlı bir bakış.

1. Sol Ok Kenarlığı Düğmesi

2. Hareketli Hat Düğmesi

3. Sekme Düğmesini Çekin

4. Daire Logo Düğmesi

5. Işıma Düğmesi

Hadi öğreticiye geçelim, olur mu?

Başlamak için Gerekenler

Başlamak için aşağıdakileri yapmanız gerekir:

1. Henüz yapmadıysanız Divi Temasını kurun ve etkinleştirin.
2. WordPress'te yeni bir sayfa oluşturun ve sayfayı ön uçta düzenlemek için Divi Builder'ı kullanın (görsel oluşturucu).
3. “Sıfırdan Oluştur” seçeneğini seçin.

Bundan sonra Divi'de tasarlamaya başlamak için boş bir tuvaliniz olacak.

5 Divi Düğme Modülü Tasarımı ve Nasıl Yapılır

1. Sol Ok Kenarlığı Düğmesi

Başlamak için, bir sütun satırı olan yeni bir bölüm oluşturun ve satıra bir düğme modülü ekleyin.

Ardından düğmenin varsayılan içerik metnini “Başlayın” (veya gerçekte ne istiyorsanız onu) okuyacak şekilde değiştirin.

Şimdi tasarım ayarlarına geçme ve aşağıdakileri güncelleme zamanı:

Düğme için Özel Stilleri Kullan: EVET
Düğme Metin Rengi: #ffffff
Düğme Arka Plan Rengi: #324376
Kenar Genişliği: 0px
Düğme Harf Aralığı: 0.2em
Düğme Yazı Tipi: Fira Sans
Yazı Tipi Stili: TT (büyük harf), U (altı çizili)
Alt Çizgi Rengi: rgba(255,255,255,0.2)
Alt Çizgi Stili: çift
Düğme Simgesi: ekran görüntüsüne bakın
Düğme Simge Rengi: #ff4751
Düğme Simge Yerleşimi: Sol

Özel Dolgu: 40px Sol, 20px Sağ

Kutu Gölgesi: ekran görüntüsüne bakın
Kutu Gölgesi Yatay Konum: 22px
Kutu Gölge Dikey Konumu: 0px
Gölge Rengi: #ff4751

(40 piksellik özel sol dolgu, sol ok düğmesi simgesiyle aynı hizada oturmak için kutu gölgesiyle doldurulan sabit bir alan oluşturur.)

Sol kutunun gölgesi ok simgesinin başlangıcına yaslandığından, bu hoş bir ok kenarlığı efekti oluşturur. Herhangi bir nedenle simgeye tam oturmuyorsa, yatay konumu gerektiği gibi ayarlayabilirsiniz. Bu tasarımın güzelliği, farklı miktarlarda düğme metni eklerken bile sol ok kenarlığının yerinde kalmasıdır.

İşte nihai sonuç.

2. Hareketli Hat Düğmesi

Bu sonraki düğme stili daha çok teknik ve minimalist bir his veriyor. Çizgiler, bir kutu gölgesi ve şeffaf bir kenarlıkla ayrılmış bir arka plan gradyanı kullanılarak oluşturulur. Ayrıca, kutu gölgesini sağa hareket ettiren bir vurgulu efekti ekledim, bu da ince bir etkileşim için alt satırı hafifçe sağa hareket ettiriyor.

Başlamak için, bir sütun satırı olan yeni bir bölüm oluşturun ve satıra bir düğme modülü ekleyin.

Düğme metni içeriğini istediğiniz şekilde güncelleyin. Bu örnek için varsayılan "buraya tıklayın" ayarını bırakıyorum. Ardından tasarım ayarlarını aşağıdaki gibi güncelleyin:

• Düğme için Özel Stilleri Kullan: EVET
• Düğme Metin rengi: #3b7986
• Düğme Arka Plan Gradyanı Sol Renk: rgba(255,255,255,0)
• Düğme Arka Plan Gradyanı Sağ Renk: #3b7986
• Gradyan Yönü: 180deg
• Başlangıç ​​Konumu: %96
• Bitiş Konumu: %0
• Düğme Kenar Genişliği: 10px
• Düğme Kenarlık rengi: rgba(0,0,0,0)
• Düğme Sınır Yarıçapı: 0px
• Düğme Harf Aralığı: 6px
• Düğme Yazı Tipi: Exo 2
• Yazı Ağırlığı: Kalın
• Yazı Tipi Stili: Tt (küçük harfler)
• Düğme Simgesi: Sağ Ok (ekran görüntüsüne bakın)
• Yalnızca Düğmenin Üzerine Geldiğinde Simgeyi Göster: HAYIR
• Özel Dolgu: 0px Alt
• Kutu Gölgesi: ekran görüntüsüne bakın
• Kutu Gölgesi Yatay Konumu: -15px
• Kutu Gölge Dikey Konum: 15px
• Kutu Gölge Yayılma Gücü: -13px
• Gölge Rengi: #3b7986

Düğme için varsayılan ayar bu olduğundan, fareyle üzerine gelindiğinde arka plan rengini de #ffffff olarak ayarlamanız gerekebilir.

Bu tasarımın anahtarı, arka plan rengi gradyanı ve kutu gölgesidir. Arka plan rengi gradyanı başlangıç ​​noktası %96 olarak ayarlandığında, düğmenin altında %4 genişliğinde bir çizgi oluşturulur. Ardından, kutu gölgesini konumlandırıp renklendirdiğimizde, düğmeyi güzelce saran başka bir çizgi elemanımız olur. Ayrıca, sağ ok simgesi, çizgi tasarım öğeleriyle de iyi çalışır.

İşte son tasarım.

Kutu gölgesini hareket ettiren vurgulu efekti eklemek için tasarım ayarlarına geri dönün ve “Kutu Gölgesi Yatay Konumu” seçeneğinin üzerine gelin. Metnin hemen yanında bir ok simgesi açılır penceresi göreceksiniz. Belirli bir ayar için fareyle üzerine gelme seçeneklerini açmak için üzerine tıklayın.

Ardından, vurgulu sekmesine tıklayın ve değeri 13px olarak değiştirin.
Görsel oluşturucuda fareyle üzerine gelme efektinin önizlemesini göreceksiniz.

Fareyle üzerine gelme efekti şöyle görünür:

3. Sekme Düğmesini Çekin

Bu sonraki düğme tasarımı, mutlak bir konumda kalan sağ düğme simgesini çerçevelemek için bir kutu gölgesi ekler. Fareyle üzerine gelindiğinde, düğme sağa doğru uzanır ve bir sekme çekiyormuşsunuz gibi bir etki yaratır.

Düğmeyi oluşturmak için önce tek sütunlu bir satırla yeni bir bölüm oluşturun ve ardından satıra bir düğme modülü ekleyin.

Düğme modülü ayarlarını açın ve içerik sekmesinin altındaki düğme metnini istediğiniz şekilde güncelleyin (“Daha Fazla Bilgi” metnini kullanacağım).

Ardından tasarım sekmesine geçin ve aşağıdakileri güncelleyin:

Düğme için Özel Stilleri Kullan: EVET
Düğme Metin Rengi: #ffffff
Düğme Arka Plan Gradyanı Sol Renk: #7D80DA
Düğme Arka Plan Gradyanı Sağ Renk: #8EEDF7
Gradyan Yönü: 90deg
Düğme Kenar Genişliği: 0px
Düğme Sınır Yarıçapı: 10px
Düğme Harf Aralığı: 1px
Düğme Yazı Tipi: Source Sans Pro
Yazı Ağırlığı: Kalın
Yazı Tipi Stili: TT
Düğme Simgesi: Ekran Görüntüsüne bakın
Düğme Simge Rengi: #ffffff
Özel Dolgu: 1em Sol, 2.5em Sağ
Kutu Gölgesi: Ekran Görüntüsüne bakın
Kutu Gölgesi Yatay Konumu: -35px
Kutu Gölge Dikey Konumu: 0px
Gölge Rengi: #7d80da

Bu tasarımın anahtarı, sağdaki simgeyi çerçeveleyecek olan kutu gölgesidir. Ancak şu anda simgenin degrade alanının içine sığacak şekilde konumlandırılması gerekiyor. Bunu yapmak için, bazı özel CSS eklememiz gerekiyor.

Gelişmiş sekmesine gidin ve girdikten sonra kutusuna aşağıdaki CSS'yi girin:

position: absolute;
right: 5%;

Bu CSS, simgenin konumunu hedefler ve ona düğmenin sağ kenarından %5'lik bir mutlak konum verir.

Şimdiye kadar tasarımı kontrol edin.

Şimdi vurgulu efekti eklemek için, vurgulu sekmesi altındaki doğru dolgu seçeneğini güncellememiz gerekiyor. Bunu yapmak için, düğme ayarlarını açın ve fareyle özel dolgu öğesinin üzerine gelip açılan imleç simgesine tıklayarak fareyle üzerine gelme seçeneklerini açın. Ardından üzerine gelin sekmesini seçin ve aşağıdakileri girin:

Özel Dolgu: 4em Sağ

Şimdi nihai sonucu kontrol edelim.

4. Daire Logo Düğmesi

Bir sonraki tasarım için, bir daire simgesini/resmi, kısa bir harekete geçirici mesaj gösteren havalı bir vurgulu efektli tıklanabilir bir düğmeye dönüştüreceğiz.

Başlamak için, bir sütun satırı olan yeni bir bölüm oluşturun ve satıra bir düğme modülü ekleyin.

Ardından düğme tasarım ayarlarını açın. İçerik sekmesinin altına, düğme metni için "Git" kelimesini ekleyin.

Ardından tasarım ayarlarına gidin ve özel düğme stillerini kullanmayı seçin. Önce daire görüntüsünü düğme için arka plan görüntüsü olarak ekleyin. Bu tasarımın işe yaraması için, mükemmel bir daire olan bir logo veya simgenin png görüntüsünü kullandığınızdan ve görüntü boyutlarının aynı yükseklik ve genişlikte olduğundan emin olun. Kullandığım resim, 118 piksele 118 piksel boyutunda bir png. İsterseniz buradan alın:

Arka plan resmini ekledikten sonra, arka plan resmi boyutunun “Gerçek Boyut” olarak ayarlandığından emin olun. Bu, görüntünün orijinal boyutlarını (118 piksele 118 piksel) korumasını sağlayacaktır.

Daha sonra düğmemizi, daire resmimizin tam boyutları olacak şekilde boyutlandırmak istiyoruz. Bunu yapmak için Gelişmiş sekmesine geçin ve Ana Öğeye aşağıdaki özel CSS'yi girin:

width: 118px;
height: 118px;
line-height: 118px !important;
text-align: center;

css'nin genişlik, yükseklik ve satır yüksekliğini aynı 118 piksel değerine ayarladığına dikkat edin. Bu, resmimizin genişliği ve yüksekliği ile aynı. Şimdi görüntü düğmeye mükemmel bir şekilde uyuyor. Satır yüksekliği 118 piksel olarak ayarlanmıştır, böylece düğmenin içindeki metin düğme içinde dikey olarak ortalanır (henüz tam olarak ortalanmamıştır çünkü hala ondan kurtulmamız gereken bazı dolgular vardır). Ve text-align: center, düğme modülü sola veya sağa hizalandığında bile düğmenin içindeki metnin ortada kalmasını sağlar.

Şimdi tek yapmamız gereken tasarımı tamamlayacak bazı tasarım ayarlarını tamamlamak. Tasarım sekmesine gidin ve aşağıdakileri güncelleyin:

Düğme Metin Rengi (varsayılan): rgba(0,0,0,0)
Düğme Metin Rengi (fareyle üzerine gelin): #ffffff

(Bu, varsayılan olarak düğme metnini gizler ve üzerine gelindiğinde beyaz olarak gösterir)

Arka Plan Rengi (varsayılan): #121212
Arka Plan Rengi (fareyle üzerine gelin): #da00f2

(Bu, varsayılan olarak görüntünün arkasında siyah bir arka plan ve ardından üzerine gelindiğinde parlak pembe bir arka plan rengi gösterir.)

Düğme Kenar Genişliği: 0px
Düğme Yarıçapı: %50;

(Düğme yarıçapını %50'ye ayarlamak, düğmenin yüksekliği ve genişliği özel css'de 118 piksel olarak ayarlandığından düğmeyi daire şekline dönüştürür.)

Düğme Yazı Tipi: Poppins
Yazı Ağırlığı: Kalın
Yazı Tipi Stili: TT
Düğme Simgesini Göster: HAYIR (bir düğme simgesine sahip olmak ortalanmış metni atar)
Özel Dolgu: 0px Üst, 0px Alt

(Özel css'de ayarladığımız satır yüksekliğinin metni dikey olarak ortalaması için üst ve alt dolguyu çıkarmak önemlidir.)

Kutu Gölgesi: ekran görüntüsüne bakın
Kutu Gölge Dikey Konumu: 0px
Gölge Rengi (varsayılan): rgba(0,0,0,0)
Gölge Rengi (fareyle üzerine gelme): rgba(0,0,0,0.68)

(Bu, ek bir açılır pencere efekti için üzerine gelindiğinde dairenin etrafında hafif bir kutu gölgesi gösterecektir.)

İşte vurgulu efektli son tasarım.

5. Işıma Düğmesi

Bu son tasarım yapmak oldukça basit ve basittir. Tek gereken, arka plan degrade renklerinin ve kutu gölge renklerinin yaratıcı bir şekilde kullanılmasıdır. Fareyle üzerine gelme efekti, daha fazla parlama efekti vermek için kutu gölgesinin boyutunu artırır.

Başlamak için tek sütunlu bir satır içeren yeni bir bölüm oluşturun ve satıra bir düğme modülü ekleyin. Düğme modülünü güncellemeden önce bölüm ayarlarını açın ve bölüme koyu bir arka plan rengi verin (#333333).

Şimdi düğme ayarlarını açın.

Varsayılan düğme metnini “Buraya Tıklayın” bırakabilirsiniz. Ardından aşağıdaki tasarım ayarlarını güncelleyin:

Düğme Hizalama: Merkez
Düğme için Özel Stilleri Kullan: EVET
Düğme Metin Boyutu: 18px
Düğme metin rengi: #ffffff

Düğme Arka Plan Gradyanı Sol Renk: #00ff8c
Düğme Arka Plan Gradyanı Sağ Renk: #15c39a
Gradyan Türü: Radyal
Radyal Yön: Merkez
Bitiş Konumu: %75

(Degrade türünü Radyal olarak ayarlamak, degradeye dışa doğru genişleyen bir daire şekli verecektir. Parlama efekti oluşturmak için degradenin ortasında daha açık rengin göründüğünden emin olun.)

Düğme Kenar Genişliği: 0px
Düğme Sınır Yarıçapı: 100 piksel
Düğme Harf Aralığı (varsayılan): 4px
Düğme Harf Aralığı (vurgulu): 5px

(Vurguluyken harf aralığını artırmak, hoş bir efekt için tüm düğmeyi biraz genişletecektir)

Yazı Tipi Ağırlığı: Ultra Kalın
Yazı Tipi Stili: I, TT
Düğme Simgesi: sağ ok (ekran görüntüsüne bakın)
Özel Dolgu: 20 piksel Üst, 20 piksel alt, 30 piksel sol, 50 piksel sağ

(sağ ok düğmesi simgesini hesaba katmak için daha fazla sağ dolguya ihtiyacınız var)

Kutu Gölgesi: ekran görüntüsüne bakın
Kutu Gölge Dikey Konumu: 0px
Kutu Gölge Bulanıklığı Gücü (varsayılan): 64 piksel
Kutu Gölge Bulanıklığı Gücü (fareyle üzerine gelme): 100 piksel
Kutu Gölge Yayılma Gücü: -12px
Gölge Rengi: rgba(0,255,140,0.66)

(Gölge rengini düğmenin rengiyle eşleştirdiğinizde, kutu gölgesi ışıma efektine eklenir. Fareyle üzerine gelindiğinde bulanıklık gücünü artırmak, düğmenin parlaklığını da büyütür)

Vurgulu efektli son tasarıma göz atın.

Daha Fazla Düğme İlhamı

Düğme stilleri hakkında ilham almak için şu diğer makalelerden bazılarına göz atın:

• Divi ile simge yazı tipi düğmesi nasıl oluşturulur
• Hareketli Kaydırma Düğmesiyle Eşsiz Tam Ekran Divi Düzeni Tasarlayın
• Monarch Sosyal Düğmelerinizi Sitenizin Tasarımına Uyacak Şekilde Nasıl Biçimlendirirsiniz?
• Dayanılmaz Bir Abone Ol Düğmesi Oluşturmanın 7 Anahtarı

Son düşünceler

Umarım bu örnekler, Divi Düğme Modülünü yaratıcı yeni yollarla en üst düzeye çıkarmanız için size ilham vermiştir! Web siteniz için harekete geçirici mesaj çok önemli olduğundan, benzersiz düğme seçenekleri oluşturmak için araç kutumuzda çeşitli fikirlere sahip olmak her zaman iyidir. Kendinize ait bazı harika düğme stilleri bulmak için bu fikirleri kullanmaktan çekinmeyin!

Yorumlarda sizden haber bekliyorum.

Şerefe!