Gölgeler nasıl eklenir “Yumuşak Kutu”;Divi kaydırıcı modülünüze
Bu yazı, Divi kaydırıcı modüllerini organize etmenin 5 ilginç yolunu başlıklı mini serimizde 5’in 3’tür. Kaydırıcı modüllerinin ve bunların nasıl başarılacağına dair öğreticilerin beş benzersiz örneğini dört gözle bekleyin!
Bugünün kaydırıcı öğreticisinde, kaydırıcı animasyonunu sağdan kayacak şekilde değiştireceğiz. Ayrıca yumuşak kutu gölgesine sahip ince bir kaydırıcı kutusu ayarlayacağız. Bu tasarım pürüzsüz ama zariftir ve neredeyse her tür web sitesine uyacak şekilde kolayca değiştirilebilir. Bölünelim! Bugün ve sonra bugün: önceki görüntü için Divi Slider modülü, arka plan ve önceki yapay metinler ekledim, ancak modülün kendisinde herhangi bir varsayılan ayar değiştirmedim. Sonunda bir tam ekran başlığı ve şık bir kutu kaydırıcısı ve slaytlar için iyi bir yeni etki alacağız. Divi Slider Modülünüze Gölgeler Nasıl “Yumuşak Kutu” eklenir YouTube Kanalı Konseptimiz ve İlham Abone Oluyorsunuz Bu tasarıma yaklaştığımda derin oynamak istedim. Web tasarımında yapmanın en kolay ve en etkili yollarından biri, nihayet yaptığım gölgeleri eklemektir. Ayrıca kenarlara dikkat çekmek ve bölüme eklenecek bir tasarım öğesi vermek için kalın bir sınır ekledim. Parçanın üst ve altına uygun iki eşleşen çizgi ekleyerek, bir hile/binici retas gibi ve daha çok tamamlanmış bir tasarım gibi hissediyor.
Bu özel düzen için tasarım öğelerinin hazırlanması, yalnızca bir arka plan görüntüsü gerekir. Pexels.com’dan benimkini aldım ve 1920px ve 1280px yüksekliğinden emin oldum. Bu durumda yaptığımız diğer tüm şeyler Divi ve biraz CSS’deki tasarım ayarlarıdır. Odaklanmanıza yardımcı olabileceğiniz başka bir şey, bazı varlıkları bir yerde, bunun gibi hızlı ve basit bir tasarım referansı olarak yardımcı olmak için tek bir yerde toplamaktır. Tasarımı aşağıdaki bölümde divi ile uygulayarak, yukarıdaki kaydırıcı tasarım konseptini yapma işleminde adım adım rehberlik edeceğim. Bir arka uç üreticisi yapacağım çünkü en sık yaptığım şey bu, ancak seçiminiz varsa ön uç düzenleyicisinde her şeyi yapabilirsiniz – yukarıdaki videoda görüldüğü gibi. Parçamızın ayarı standart bölüm 1 ile başlayacak ve ekleyecektir kaydırıcı modülü.
Sonra bölümün modülündeki bazı ayarları değiştireceğiz. Genel ayarlar için arka plan görüntüsümü yükledim ve üst ve alt dolgu belirledim, üst: 100px dip: 150px Özel CSS ayarları bölümünde birkaç CSS ekledim ve bu bölüme bir kimlik ayarladım (nedenini biraz açıklayacağım). “Box Clider” adını kullanıyorum ama istediğiniz her şeyi kullanabilirsiniz. Ana Eleman – Bu bölümü tam bir ekrana ayarladım ve üstte ve altta kalın bir renk sınırı ekledim. Bu bölüm gerçekten isteğe bağlı, bence bu özel düzen tam ekran başlığı olarak iyi. Renk altıgen kodunu istediğiniz şekilde değiştirmeyi unutmayın. Sınır üstü: 20px katı #73A0A0; Sınır dip: 20px katı #73A0A0;
Min-yükseklik: 100vh;
Satır ayarları için değişiklik gerekmez. Kaydırıcı Modül Ayarları Kaydırma modülünün genel ayarı için aşağıdakileri ayarlayın:
Oku gizle
Kontrolü Göster: Evet
Otomatik animasyon: aktif
Animasyon hızı 7000 olarak ayarlandı
Yönetmenlik yaparken otomatik slaytlara devam edin: etkin
Gölgeyi Kaldır: Evet
Kaydırıcı modülünün gelişmiş tasarım ayarları için, kullanıldığını gördüğünüz renk #73A0A0
CSS Ayarları için Özel Kaydırıcı Modülü aşağıdaki kodu ekleyin: Ana öğe – Burada kalın bir kutu sınırı ve yumuşak bir kutu gölgesi ekliyorum.
Sınır: 15px katı #73A0A0;
Slayt Açıklaması – Bu, slayt animasyonunu sağdan kaymak için değiştirir ve metni sola uyumlu hale getirir, çünkü slayt görüntüsünü kullanmadığında varsayılan orta ortalamadır. Ayrıca dolguyu da ayarlıyorum çünkü varsayılan% 16 yukarıda ve dipte bu ekran için sadece biraz düşünüyorum. Animasyon adı: FadeInright;
Metin-align: sol;
Dolgu:% 12% 8;
Slayt Başlığı – Başlığı, varsayılanın ortasına değil, sola hizalayın. Metin-align: sol;
Slayt Düğmesi – Düğmeyi sola hizalayın ve sınır ekranını değiştirin. Nokta denetleyicisinin üzerinde daha fazla nefes alan yapmak için birkaç ekstra marj ekledim.
Metin-align: sol;
Sınır Top: Yok;
Sınır-sağ: yok;
Sınır alt kısımları: yok;
Marj-Alt: 25px; Slayt Denetleyicisi, tasarım amacıyla sadece birkaç solunum alanı, tamamen isteğe bağlı. Dolgu Top: 25px;
Pilding Alt: 25px;
Slayt Genel Ayarları için Slayt Ayarları Aşağıya bakın, gördüğünüz bulanık krem RGBA’dır (235,234,230.0.8).
Gelişmiş tasarım ayarları için aşağıya bakın, kullandığım renk #73A0A0 ve yazı tipi başlığının boyutu masaüstü: 46 / tablet ve akıllı telefon: 30
CSS ile tamamlayın “Box Clider” kimliğini başlangıçta nasıl ayarladığımızı hatırlıyor musunuz? Kimliği kullanacağımız yer burası. Bu kimliği kullanmak, bu CSS’nin yalnızca bu kaydırıcı için geçerli olmasını sağlayacaktır. Bu çok küçük bir değişiklik, sadece daha büyük bir nokta denetleyicisi yapıyoruz. Modül alınmayan kodların çoğunu işleyebilse de, bunları çocuklarımızın stil sayfasına veya CSS Kustom Divi opsiyon paneline koyabiliriz. Veya daha küçük noktalarla iyiyseniz, tamamen görmezden gelebilirsiniz.
#box-clider .et-pb-controller a { Genişlik: 16px; Yükseklik: 16px;
}
