Yeni bir arka plan seçeneği Divi ile stil düzenleme düğmesi (6 tasarım dahil)
Yeni arka plan seçeneği arayüzünü kullanmadıysanız, onu kaçırırsınız. Çok şaşırtıcı bir arka plan tasarımı olasılığı. Ancak düğmelerimiz için aynı güçlü tasarım seçimine sahip olmak şaşırtıcı olmayacak mı? Cevap evet ise, o zaman bu gönderiyi beğeneceğinizi düşünüyorum. Bugün size aynı arka plan tasarımı özelliğini stil düğmesine nasıl sunacağınızı göstereceğim. Bu tasarım, size 3 kat tasarım özelliği sağlamak için düğmenin arka planını ve düğme modülünün arkasındaki sütunun arka planını satıyor. Bu güçle her şey tehlikeli olabilir. Sakin kalmak ve ilk başta yavaş yürümek için en iyisi
Hadi gidelim. Aşağıdaki gizlice göz atma, bu yazıda tartışılan bir düğme tasarımına bir örnektir.
Kolonun genişliğini doldurmak için% 100 genişliğe ihtiyacımız olacak. Bunu yapmak için, ana eleman kutusuna aşağıdaki özel CSS’yi girin: genişlik:%100;
KAYDET Ayarlarınız, düğme ve metin sınırları beyaz olduğu için geçerli sayfada hiçbir şey göremez. Düğme modülü ayarlarını kullanarak düğmenin arka plan rengini düzenlemek yerine, daha karmaşık arka plan seçeneğini kullanarak düğmenin arkasındaki satır/sütunun arka plan rengini ayarlayacağız. Düğme üzerinde daha spesifik bir tasarım yapmaya başladıktan sonra düğme modülünün ayarlarını gözden geçireceğiz. Ancak şimdilik satır ayarlarını tamamlayalım. Yeni düğmenizin bulunduğu satır ayarlarını açın ve aşağıdakileri güncelleyin: İçerik Seçeneği Sütun 1 Arka Plan Yasası sekmesini seçin, ardından Beyaz Plus sembolü ile Gri Daire düğmesini tıklatın.
Şimdi beyaz düğmenizin arkasında varsayılan gradyan renginin göründüğünü göreceksiniz. Sütun şimdi düğmemizin hemen arkasında, ancak düğme genişliğini azaltmamız gerekiyor. Bunu yapmak için satır boyutu ayarlarını kullanacağız. Çizgimiz için özel genişliği ayarlayarak düğme genişliğimizi de ayarladık. Tasarım Seçenekleri Tasarım seçeneğinin altında, aşağıdakileri ayarlayarak satırın boyutunu yeni düğmelerimize uyacak şekilde ayarlayacağız: Özel genişliği kullanın: evet özel genişlik: 500px (bu, düğmenin maksimum genişliğini 500 piksel olarak ayarlar) Özel Dolgu: 0px üst, 0px sağ, 0px alt, 0px Sol Sol Seçme Seçme Seçme Sıra ve sütun hattı ile eşleşmemiz gerekir. Hepimiz uygun olduğumuz düğmeye ayarladım. Bunu yapmak için, ana eleman kutusuna aşağıdaki özel CSS’yi girin: Border-Radius: 10px;
Aynı CSS’yi ana öğe kutusu sütununa yerleştirin: Border-Radius: 10px;
Geçerli Ayarlar KAYDET Ayarları özel bir genişlik ve yastık olacak şekilde güncellendi, iki şey tamamlandı. İlk olarak, düğmelerimiz için özel bir genişlik ayarlamayı başardık. İkincisi, şimdi düğmelerimizi düzenlemek için kullanabileceğimiz başka bir arka plan seçeneği katmanımız var. Düzenleme için daha sonra kullanabileceğimiz toplam 3 arka plan katmanı (düğmeler, sütunlar, satırlar) var. Aşağıda, düğmenin şu anda nasıl oluşturulduğunun bir örneğidir.
Çok havalı değil mi? Hepsi temel ayarlar için. Şimdi düğmeniz için inanılmaz bir tasarım yapmanın eğlenceli bir parçası zamanı. Olağanüstü Düğme Oluşturma Tasarım Video Arka Plan düğmesi #1 Bu düğmeyi yapmak için 3 katmanı, video için arka plan satırlarını, degradeler için arka plan sütunu ve küçük mavi bir esneme için düğmenin arka planını kullanacaksınız. Satır ayarları için aşağıdaki içerik seçeneğini güncelleyin: Arka Plan Video: [Video Yükle] Sütun 1 Renk gradyanı Arka Plan: RGBA (12,113,195.0.41), RGBA (131,0,233,0.18) Modül Modül Ayarları için Ayarları Kaydet, aşağıdakileri güncelleyin: İçerik Metni İçeriği seçeneği: “Bkz.” Renk Tasarımı Seçenekleri Ayar Düğmesi: RGBA (12.113.195.0.25) Renk Sınır Düğmesi: #0C71C3
Ayarları Kaydet Şimdi kalan tek sorun, video arka planının sınır yarıçapıdır. Düğmeye uygun bir sınır yarıçapı videosu sağlamak için bazı özel CSS eklemeliyiz. Bu ek kod yalnızca video arka planı düğmesi için gereklidir. Özel bir CSS eklemek için, Visual Builder’dan sayfa ayarlarını açın ve Gelişmiş sekmesini tıklayın. Ardından CSS özel giriş kutusunu aşağıdaki CSS ile güncelleyin: .et_pb_section_video_bg {border-radius: 10px; }
Ayarlar İpucu Kaydet: Bir başka harika tasarım seçimi, yüzen bir video yapmaktır. Modülünüze düğme modülünüze sağlam bir arka plan rengi verin ve imleci yönlendirirken şeffaf olarak değiştirin. İşte burada! Şimdi video arka planı olan bir düğmeniz var.
#2 kutu kutular
Kutu düğmesi, arka plan renk gradyanından iki kat (satır ve sütun) kullanılmasını gerektirir. Bu düğmeyi oluşturmak için, birinci seviye gradyan için satırın arka planı ve son gradyan renk katmanı için sütunun arka planını kullanacaksınız. Satır ayarları için aşağıdaki içerik seçeneğini güncelleyin: gradyan renk arka planı: #8300e9, #0c71c3 gradyan yönü: 270DEG Başlangıç Pozisyonu:% 50 Nihai Konum:% 0 gradyan Renk Arka Plan Sütun 1: RGBA (224,11,0,0,39 ), RGBA (255,255,255.0) gradyan yönü: 180 derece Başlangıç Pozisyonu:% 50 Nihai Pozisyon:% 0 Ayarları Kaydet Şimdi Ayarlar Modülü Kutlarını Açın ve Aşağıdaki Güncelleme İçerik Metni İçeriği seçeneği: “Abone Ol” Tasarım Seçenekleri Düğme Sınır Genişliği: 0px harf mesafesi düğmesi: 10px yazı tipi düğmesi: Varsayılan, kalın (b), eğik (i) harfi noktasının mesafesi: 10px
İşte burada. Sonuçlar aşağıdadır. Şimdi kutuların etkisini düğmenize nasıl ekleyeceğinizi biliyorsunuz. # 3 radyal gradyan düğmesi
Bu düğmeyi oluşturmak için, arka plan rengi gradyanının 2 katmanını (satır ve sütun) kullanacaksınız. Satır ayarları için aşağıdaki içerik seçeneğini güncelleyin: Gradyan Renk Arka Plan: #8300E9, #0C71C3 Gradyan Türü: Radyal Radyal Yön: Başlangıç Pozisyon Merkezi:% 50 Nihai Konum:% 100 Gradyan Renk Sütunu Sütun 1: RGBA (224,11, 0, 0.39), RGBA (255,255,255.0) Gradyan Türü: Radyal Radyal Yön: Başlangıç Konum Merkezi:% 50 Nihai Konum:% 100 Kaydet Ayarları Şimdi Ayarlar Modülü düğmesini açın ve aşağıdakileri güncelleyin: Metin İçeriği Seçenekleri Kety Kety: ” “Tasarım Genişliği Düğmesi Sınırı Sınırı: 0px Yazı Tipi Düğmesi: Kurnaz Kız Ikon Ikon: [Kalp simgesini seçin] Düğmeye işaret ederken yalnızca simgeyi görüntüleyin: Hayır Gelişmiş seçenek Son dokunuş için düğmeye bir slayt gölgesi ekleyelim. Önceki koda ek olarak, ana öğe kutusuna aşağıdaki özel CSS’yi girin: Box-Shadow: 0px 5px 10px 3px #ccc; İşte burada! Bu son sonucunuz: #4 Bullseye düğmesi Bu düğmeyi oluşturmak için, arka plan rengi gradyanının 2 katmanını (satır ve sütun) kullanacaksınız. Ayrıca, daha düşük bir sınır açılır etkisi oluşturmak için düğme modülüne bazı özel CSS ekleyeceğiz. Satır ayarları için aşağıdaki içerik seçeneğini güncelleyin: Gradyan Renk Arka Plan: #023500, #008C02 Gradyan Türü: Radyal Radyal Yön: Başlangıç Pozisyon Merkezi:% 19 Nihai Konum:% 0 Gradyan Renk Arka Plan Sütun 1: RGBA (0.206,72.0. 43), RGBA (255,255,255.0) Gradyan Türü: Radyal Radyal Yön: Başlangıç Konum Merkezi:% 32 Nihai Pozisyon:% 0
Şimdi aşağıdaki düğme modülü ayarlarını açın ve aşağıdakileri güncelleyin: Metin İçeriği Seçenek Düğmesi: “Satın Al” Metin Boyutu Tasarım Seçimi Düğmesi Boyut: 65px Genişlik Düğmesi Sınır: 0PX Yazı Tipi Düğmesi: Roboto, Kalınlık (B), COPER (TT)
Son dokunuş için şimdi gelişmiş seçenekler. Giriş kutusundaki koda aşağıdaki özel CSS ekleyin Ana öğe: Box-Shadow: 0px 5px 0px 0px #01771F; Şekil Düğmesi #5
