5 Tasarım Modülü Divi Yaratıcı Düğme Modülü & amp;Nasıl yapılır
Bu yazıda, size Divi düğmesi modülüyle kolayca elde edebileceğiniz yaratıcı Divi düğmesi modülünün 5 tasarımını göstereceğim. Düğme modülü, tüm Divi modüllerinin en popüler olanlarından biridir, çünkü düğme ziyaretçileri tüm web sitelerinde istediğiniz hedefe yönlendirmek için çok önemlidir. Bu nedenle, tasarımcıların ve geliştiricilerin bu düğmeyi ilginç ve çekici hale getirmeleri bizim için çok önemlidir. Hadi kazalım! Aşağıdaki Sneak Peek, bu öğreticide yapacağımız düğmede kısa bir ekrandır. 1. Sol ok sınır düğmesi
2. Hat düğmesi hareketli 3. Sekme düğmesini çizin 4. Circle Logo düğmesi 5. Işık Düğmesi Doğrudan öğreticiye mi gidiyorsunuz? Başlamak için neye ihtiyacın var Başlamak için aşağıdakileri yapmanız gerekir:Değilse, divi temasını yükleyin ve etkinleştirin.
WordPress’te yeni bir sayfa oluşturun ve ön taraftaki sayfaları düzenlemek için Divi Builder’ı kullanın (görsel yapımcı).
“Başından Uyan” seçeneğini seçin.
Bundan sonra, Divi’de tasarım yapmaya 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 Sınır Düğmesi Başlamak için, bir satır sütunu ile yeni bir parça oluşturun ve düğmeye düğmeye ekleyin. Ardından “Başlat” ı (veya gerçekte ne istersen) okumak için varsayılan düğme içerik metnini değiştirin. Şimdi tasarım ayarlarına geçme ve aşağıdakileri güncelleme zamanı: Düğme için özel bir stil kullanın: evet metin renk düğmesi: #ffffff renk arka plan düğmesi: #324376 Sınır genişliği: 0px mesafe mektubu düğmesi: 0.2em yazı tipi düğmesi: fira sans Stil Yazı Tipi: TT (Sermaye Harfleri), U (Altı çizili) Alt çizgi Renk: RGBA (255,255,255,0.2) Alt çizgi kuvveti: Çift simge Kutt Düğmesi: Bkz. Ekran yakalama rengi Keyton: #FF4751 Düğme simgesinin yerleştirilmesi: Sol Pilding Custom: Sol 40px, sağ 20px: Gölge Kutusunun yatay konumunun ekran görüntüsüne bakın: 22px Dikey Konum Gölge Kutusu: 0px Gölge Renk: #FF4751 (Özel Sol Dolgu 40px, bir kutu gölgesiyle dolu sabit bir alan oluşturma Bir kutu gölgesi ile düz oturmak için sabit bir alan oluşturma sol ok anahtarı simgesi.)
Sol kutunun gölgesi ok simgesinin başlangıcı ile düz olduğundan, bu iyi bir ok sınırı etkisi oluşturur. Bir nedenden dolayı simgeye yapışmazsa, yatay konumu gerektiği gibi ayarlayabilirsiniz. Bu tasarımın güzelliği, farklı sayıda metin düğmesi eklerken bile sol ok sınırının yerinde kalacağıdır. Sonuçlar aşağıdadır.
2. Hat düğmesi hareketli Bir sonraki düğme stili daha teknik ve minimalist tonlara sahiptir. Çizgi, bir kutu gölgesi ve şeffaf sınırla ayrılmış bir arka plan gradyanı kullanılarak yapılır. Ayrıca, kutunun gölgesini sağa taşıyan havalı efekti ekledim ve bu da alt çizgiyi hafifçe sağ etkileşime taşıyor. Başlamak için, bir satır sütunu ile yeni bir parça oluşturun ve düğmeye düğmeye ekleyin. Düğme metni içeriğini istediğiniz her şeye güncelleyin. Bu örnek için varsayılan “BURAYA TIKLAYIN” bıraktım. Ardından tasarım ayarlarını aşağıdaki gibi güncelleyin: Düğmeler için özel bir stil kullanın: Evet Metin Renk Düğmesi: #3B7986
Sol renk gradyan arka plan düğmesi: RGBA (255,255,255.0)
Doğru renk gradyan arka plan düğmesi: #3B7986
Gradyan yönü: 180 derece
Başlangıç Pozisyonu:% 96
Son pozisyon:% 0
Sınır Sınır Genişliği: 10 piksel
Sınır Renk Düğmesi: RGBA (0.0,0,0)
Sınır sınır yarıçapı: 0px
Mektup Mesafe Düğmesi: 6px
Yazı tipi düğmesi: exo 2
Mektup Ağırlığı: Kalın
Yazı tipi kuvveti: TT (küçük harf)
Anahtar simgesi: sağ ok (ekran görüntüsüne bakın)
Yalnızca görüntü simgeleri düğmeye yönlendirilir: hayır
Pilding Custom: 0px’in altında
Gölge Kutusu: Ekran yakalamaya bakın
Yatay konum gölge kutusu: -15px
Dikey Konum Gölge Kutusu: 15px
Kutunun gölgesinin dağılımının gücü: -13px
Gölge Renk: #3B7986
İmleci yönlendirirken arka plan rengini #FFFFFF olarak geri ayarlamanız gerekebilir, çünkü bu düğme için varsayılan bir ayardır. Bu tasarımın anahtarı arka plan rengi gradyanı ve kutu gölgesidir. Arka plan rengi gradyanının başlangıç noktasını% 96 olarak ayarlayarak, bu düğmenin altında% 4 genişliğinde bir çizgi oluşturur. Sonra kutunun gölgesini konumlandırıp renklendirdikten sonra, düğmeyi iyi saran başka bir satır öğemiz var. Ayrıca, sağ ok simgesi çizgi tasarım öğeleriyle de iyi çalışır. Son tasarım aşağıdadır. Kutunun gölgesini hareket ettiren, tasarım ayarlarına geri dönen ve imleci “kutunun gölgesinin yatay konumuna” yönlendiren gelişim efekti eklemek. Metnin hemen yanındaki açılır baş ok simgesini göreceksiniz. Belirli ayarlar için Hover seçeneğini açmak için tıklayın.
Ardından Grover sekmesine tıklayın ve değeri 13px olarak değiştirin. Görsel yapımcıda gözden geçirilen havada çalışmayı göreceksiniz. İşte Hover Effect ekranı: 3. Sekme düğmesini çizin Bir sonraki düğme tasarımı, mutlak bir konumda kalan sağ düğme simgesini çerçevelemek için bir kutu gölgesi ekler. Gemirme üzerinde düğme doğru uzanır, sekmeyi çektiğiniz etkiyi oluşturur. Bir düğme yapmak için önce, bir satır bir sütunu içeren yeni bir bölüm oluşturun, ardından düğmeye düğmeye ekleyin. Modül ayarlarını açın düğme modülünü ve içerik sekmesinin altındaki düğme metnini istediğiniz her şeye güncelleyin (“Daha fazla bilgi öğrenin” metnini kullanacağım). Ardından aşağıdaki tasarım sekmesine atlayın ve Güncelleme: Düğme için özel bir stil kullanın: Evet Metin Renk Düğmesi: #ffffff Sol arka plan düğmesi sol renk: #7d80da Sağ Renk Düzenlemesi Arka Plan Düğmesi: #8eedf7 Gradyan Yönü: 90 derece genişliğinde düğme sınırı: 0px Radius Sınır Sınır Anahtar Düğmesi: 10px Düğme Uzaklığı: 1px Yazı Tipi Yazı Tipi: Ekşi SANS Pro Ağırlık Mektubu: TT IKON KEST: Bkz. Renk Ekranı Canggat Anahtar Anahtar Icon: #ffffff Palding Özel: Sol 1em, sağ 2.5em Gölge Kutu: Yatay Beceri Durumu Yakalama Kutusu Gölgesi: -35px Dikey Konum Gölge Kutusu: 0px Renk Renk Gölgesi: #7d80 Bu tasarımdan kilitleme, sağdaki simgeyi çerçeveleyecek kutunun gölgesidir. Ancak şimdi simgenin gradyan alanına sığacak şekilde konumlandırılması gerekiyor. Bunu yapmak için bazı özel CSS eklememiz gerekiyor. Gelişmiş sekmesini açın ve aşağıdaki Giriş kutusuna aşağıdaki CSS’yi girin: Konum: Mutlak; Sağ:%5; Bu CSS, simge konumunu hedefler ve düğmenin sağ kenarından% 5’lik mutlak bir konum verir. Şimdiye kadar tasarımı görün.
Şimdi Hover efektini eklemek için, yalnızca Hover sekmesinin altındaki doğru dolgu seçeneğini güncellememiz gerekir. Bunu yapmak için düğme ayarlarını açın ve imleci özel dolgu elemanına yönlendirerek ve görünen imleç simgesini tıklayarak HOVER seçeneğini açın. Ardından Grover sekmesini seçin ve aşağıdakileri girin:
Pilding Custom: 4em Sağ
Şimdi sonucuna bakalım.
Bir arka plan görüntüsü ekledikten sonra, arka plan görüntüsünün boyutunun “gerçek boyut” olarak düzenlendiğinden emin olun. Bu, görüntünün orijinal boyutunu korumasını sağlayacaktır (118px kat 118px). Ardından, düğmemizin boyutunun daire görüntüsümüzün doğru boyutu olmasını istiyoruz. Bunu yapmak için, Gelişmiş sekmesine atlayın ve ana öğeye aşağıdaki özel CSS’yi girin: genişlik: 118px; Yükseklik: 118px; Hat-yükseklik: 118px! Önemli; Metin-align: merkez; CSS’nin tüm çizgilerin genişliğini, yüksekliğini ve yüksekliğini aynı 118 piksel değerine ayarladığını unutmayın.Bu, resmimizle aynı genişlik ve yükseklik.Şimdi görüntü düğmeye çok uygun.Çizginin yüksekliği 118 piksel olarak düzenlenmiştir, böylece düğmenin içindeki metin düğmeye dikey olarak ortalanır (yine de tamamen ortalanmamıştır, çünkü hala atmamız gereken bazı rulmanlar vardır).Ve Metin-Aign: Center, düğmenin içindeki metnin, düğme modülü sola veya sağa hizalanmış olsa bile ortada kalmasını sağlar. Şimdi yapmamız gereken, tasarımı tamamlayacak bazı tasarım ayarlarını tamamlamak. Aşağıdaki tasarım sekmesini açın ve güncelleme: Düğme metin rengi (varsayılan): RGBA (0.0,0,0) Metin Renk Düğmesi (nokta imleç): #ffffff (Bu, düğme metnini varsayılan olarak gizler ve imleci yönlendirirken beyaz olarak görüntüler ) Arka plan rengi (varsayılan): #121212 Arka plan rengi (nokta imleç): #da00f2 (Bu, varsayılan olarak görüntünün arkasındaki siyah arka planı ve daha sonra imleci işaret ederken arka planın arka planının parlak pembesini gösterir.) Düğmesi:%50; (Düğmenin yarıçapını% 50 olarak ayarlamak, düğmeyi bir daire şekline değiştirecektir, çünkü düğme genişliği özel bir CSS’de 118 piksel olarak düzenlenmiştir.) Yazı tipi Düğmesi: Poppins Ağırlık Mektubu: TT Ortadaki TT Kuvvet Mektubu Metni) Özel Dolgu : Üst 0px, alt 0px (Özel CSS’de ayarladığımız çizgilerin yüksekliği, metni dikey olarak yapacak şekilde üst ve alt dolguları çıkarmak için önemlidir.) Kutu: 0px Gölge Renk (Varsayılan): RGBA (0, 0,0,0) Gölge Renk (nokta imleç): RGBA (0.0,0,0.0.68) (Bu, ek popout efektleri için imleci yönlendirirken dairenin etrafında küçük bir kutu gölgesi gösterecektir.) İşte son tasarım ile son tasarım Hover efektleri.
5. Işık Düğmesi
Bu son tasarım oldukça kolay ve basittir.Gerekli olan tek şey, arka planın yaratıcı gradyan renklerinin ve kutunun gölgesinin rengi kullanılmasıdır.Hover etkisi, daha fazla ışık efektleri sağlamak için sadece kutunun gölgesinin boyutunu arttırır.Başlamak için, bir satır bir sütunla yeni bir parça oluşturun ve düğmeye düğmeye ekleyin.Düğme modülünü güncellemeden önce, bölüm ayarlarını açın ve koyu arka plan rengi parçasını (#333333) verin.Şimdi düğme ayarlarını açın.Varsayılan düğme metnini bırakabilirsiniz “Buraya tıklayın”
. Ardından aşağıdaki tasarım ayarlarını güncelleyin: Giriş düğmesi: Orta düğme için özel bir stil kullanın: evet metin boyutu düğmesi: 18px renk metin anahtarı düğmesi: #fffff sol renk düğmesi gradyan arka plan: #00ff8c sağ renk degrade arka plan düğmesi: #15C39A gradyan türü: Radyal Radyal Yön: Son Konum Merkezi:% 75 (Radyal gradyan türünü ayarlamak, genişleyen bir daire şeklinin gradyanını verir. Bir ışık efekti oluşturmak için daha parlak rengin de daha parlak rengin göründüğünden emin olun.) Genişlik Düğmesi Sınırı: 0px Radius Düğmesi Sınırı: 100 Piksel Hareket Düğmesi (Varsayılan): 4px Düğme Uzaklığı (İmleci Noktalı): 5px (Hakemedeki harf boşluğunun arttırılması, iyi bir etki için tüm düğmeyi hafifçe genişletir) harf ağırlığı: Çok kalın stil mektup: i, tt kest simgesi: sağ ok (bkz. Ekran görüntüsüne bakın) Özel: 20px üst, 20px alt, 30px sol, 50px sağ (daha fazla sağ ped ihtiyacınız var Ekran görüntüsünde Dikey Konum Gölge Kutusu: 0px Bulanık Güç Gölge Kutusu (Varsayılan): 64px Bulanık Güç Gölge Kutusu (Nokta İmleç): Kare Dağıtım Kutusunun 100px Mukavemeti: -12px Renk Renk Gölgesi: RGBA (0.255,140,0,66); Gölge Gölgesi, gölgenin rengini düğme rengiyle eşleştirdiğinizde ışığın etkisini ekleyin. İmleç yönlendirirken bulanık mukavemeti artırma da ışık düğmesini büyütür) Son tasarıma gelin.
Daha Fazla Düğme İlhamı Düğme stili hakkında ilham hakkında bilgi edinmek için aşağıdaki diğer makalelere bakın: Divi ile yazı tipi simgesi düğmesi nasıl yapılır Animasyonlu ay düğmesine sahip benzersiz bir tam ekran divi düzeni tasarlayın Dayanılmaz bir abonelik düğmesi oluşturmak için Site Tasarım 7 Anahtarınızı eşleştirmek için Sosyal Monarch düğmenizi nasıl tasarlarsınız Son zihin Umarım bu örnekler Divi düğmesi modülünü yaratıcı yeni bir şekilde en üst düzeye çıkarmanıza ilham vermiştir!Harekete geçme daveti web siteniz için çok önemli olduğundan, bazı benzersiz düğmeler seçenekleri oluşturmak için ekipman kutumuzda çeşitli fikirlere sahip olmak her zaman iyidir.Kendi şaşırtıcı düğmeler stillerinizi üretmek için bu fikirleri kullanmaktan çekinmeyin!Yorumlarda sizden haber almayı umuyorum.Kızarmış ekmek!
