Bir Facebook Haber Odası Gönderen Bir Kaydırıcı Gibi Bir Divi Gönderme Kaydırıcı Stili Nasıl Yapılır
Slider Post, okuyucunuza çeşitli içerik sunmak için zarif bir çözümdür. Vurgulanan yayınlar kategoriden bugüne kadar çeşitli şekillerde düzenlenebilir. Bugünün projesinde, “En İyi Hikayeler” adlı bir gönderi kategorisi sunan bir Facebook Newsroom blog sayfası örneği görüyoruz. Bu, gönderi ve üstün görüntüler başlığını vurgulayan çok ilginç bir slayttır. Divi Post kaydırıcı modülünü kullanarak kaydırıcı ekranını yeniden yapacağız. Önce ve sonra: Aşağıdaki ilk Divi Post kaydırıcı modülü, varsayılan ayarlarla Divi Post kaydırıcı modülünü gösterirken, ikincisi ayarlarda sadece birkaç ayar ve bazı özel CSS ile yapılan değişikliktir.
Önceki
Ardından, Post kaydırıcı modülünü satıra ekleyin. Değişikliğimiz, Visual Builder’a yeni bir modül ekledikten sonra varsayılan olarak olduğunuz “içerik” ayarları ile başlar. Varsayılan içerik ayarlarında aşağıdaki değişiklikleri yapın: İstediğiniz birçok gönderiye “Post numarası” ayarlayın. Bu örnek için 3. kullanıyorum. Sonra “Belirlenirse Gönderme Teklifi kullanın” ve “Otomatik Alıntı Uzunluğu” nu ayarlayın. Şimdi, modül ayar sermayesinin üst kısmındaki sekmeyi tıklayarak tasarım ayarlarına geçmeye hazırız. Tasarım ayarlarında aşağıdaki değişiklikleri yapın: “Arka Plan Kaplama Rengi” ni Beyaz olarak değiştirin (#ffffff).
“Dot Nav Custom Color” ı #576D90 olarak değiştirin. “Metin rengini” karanlık olarak değiştirin. Şimdi bir “kalın” yazı tipi başlığı yapın, “başlık başlığı” nı 34 piksel olarak ayarlayın, “başlık metni rengi” #3B5998’e ve “Başlık Hattı Yüksekliği” na 42 piksel olarak ayarlayın. Şimdi “Düğme” için “özel bir stil kullanın” tıklayın. “Düğme Metin Boyutu” na 16px, “Düğme Sınır Genişliği” olarak 0px, “Düğme Metin Rengi” ni 6666666’ya ve “Düğme Arka Plan Rengi” ni RGBA’ya (0.0.0.0) değiştirin. Şimdi modül ayar sermayesinin üst kısmındaki “Devam” sekmesini tıklayın. CSS kimliği altındaki metin girişinde “FB-POST CLIDER” ekleyin. Bu, sayfada görüntülenebilecek diğer yayın modüllerini etkilemeden bu özel modüle stil eklememizi sağlar. Şimdi CSS kodunu çeşitli öğelere aşağıdaki gibi ekleyin: Konumdan önce: mutlak; Üst: 57px; Sağ: -6px;
İçerik: “”;
Sınır: 4px katı şeffaf;
Sınır-tepe rengi:#2C477F;
Sınır-sol renk:#2C477f;
Border-Radius’un ana unsuru: 3px;
Sınır: 1 piksel katı #DEDEDE; Sonrasında
Pozisyon: Mutlak; Üst: 25px;
Sağ: -7px;
Ekran bloğu;
İçerik: “En İyi Hikayeler”;
Renk:#f9f4f7;
Arka plan rengi:#4573cc;
Dolgu: 4px 15px;
Border-Radius: 2px;
Z-Index: 2! Önemli;
Min-yükseklik slayt açıklaması: 460px;
Genişlik:%35;
Şamandıra: sol;
Dolgu: 57px 45px 50px 35px! Önemli;
Yazı tipi ailesi: ‘Alegreya sans’, sans-serif;
Metin-align: Sol
Font-ailesi slayt başlığı: ‘Alegreya Sans’, Sans-Serif;
Dolgu slayt düğmesi: 0! Önemli; Marj-Top: 0; Marj -alt kesme kontrolörü: -55px;
Kesme Renk Okları: #ffffff! Önemli; Arka plan rengi: RGBA (0.0.0, .4); Yazı tipi-ağırlık: kalın;
Border-Radius: 2px; -ms-transform: ölçek (1.2, 2.5); / * Yani 9 */
-Webkit-Transform: Ölçek (1.2, 2.5); / * Safari */
Dönüşüm: ölçek (1.2, 2.5);
Şimdi, başkentin sağ alt köşesindeki onay işaretini tıklayarak modül ayarlarını kaydedin.
Visual Builder’da, posta kayma çubuğumuzu Facebook haber odası sayfasındaki gibi göstermenin birkaç yolu olduğunu görebilirsiniz.
CSS tarafından ele alınamayan hiçbir şey yoktur ve kalan kodu doğrudan Visual Builder’dan sayfa ayarlarına ekleyerek oluşturduğunu görebileceğiz. Oraya ulaşmak için sayfanın alt ortasındaki Genişlet ayarları simgesini tıklayın, ardından “Sayfa Ayarları” simgesini tıklayın. Daha büyük bir monitörde çalışıyorsanız, sermayeyi kaydırıcı tarafına taşımanızı öneririm, böylece kodun her bitini eklediğimizde ne yapıldığını görebilirsiniz. Modüllerimizi tasarlamak için kullanılan CSS’yi daha iyi anlamanıza yardımcı olacaktır.
İlk olarak, “CSS özel” metin alanına aşağıdaki CSS ekleyerek arka plan görüntüsünün boyutunu ve konumunu (şu anda beyaz streç arkasına gizlenmiş) ve metnin konumunu ve metnin konumunu koruyacağız. #fb-post-slider.et_pb_post_slider_0 .et_pb_slide { Arka plan boyutu:%70; Arka plan-pozisyon: sağ üst; Dolgu-sol: 0;
Taşma: Görünür! Önemli;
}
#fb-post-slider.et_pb_slider_with_overlay .et_pb_slide_overlay_container {
Genişlik:%30;
min genişliği: 300 piksel;
}
Şimdi, tarih hariç, gönderimizi meta gizleyeceğiz ve tarih konumunu başlığın üzerindeki taşıyacağız. Bunu yapmak için, daha önce girilen kodun hemen altındaki CSS özel metin girişine aşağıdaki kodu ekleyin.
#FB-POST-CLIDER .ET_PB_SLIDE_CONTENT .POST-META {Yükseklik: 0px;
Taşma: Gizli }
#FB-POST-SLIDER .ET_PB_SLIDE_CONTENT .POST-META .Publed {
Pozisyon: Mutlak;
Üst: 32px;
Sol: 35px;
Renk: #898F9C;
Yazı tipi boyutu: 16px
}
Biz sadece birkaç küçük istisna geldi. İmleciyi ne zaman Post Slider modülümüze yönlendirdiğinizi, önceki ve bir sonraki okun ortaya çıktığını göreceksiniz. Facebook haber odası vardiyasında sadece bir sonraki ok ortaya çıktı. Daha önce girilen kodun hemen altındaki CSS özel metin girişine aşağıdaki CSS ekleyerek düzeltilmesi kolaydır.
#FB-POST-SLIDER .ET-PB-ORROW-PREV {
Görüntü yok
} Şimdi kaydırıcı altındaki gezinme noktasını aşağıdaki kodla yeniden konumlandırmamız gerekiyor. Bu arada, taşan mülkün kaymasını ayarlamanın, sağ üst köşeyi çevreleyen “En İyi Haber” etiketi için daha önce yaptığımız 3D efekti ortaya çıkardığını göreceksiniz. #fb-post-slider.et_pb_post_slider_0 .et-pb-controller a { Yükseklik: 8px;
Genişlik: 8px;
Sipariş-Radius:% 50
}
#fb-post-slider.et_pb_slider {
Taşma: Görünür! Önemli
}
Son olarak, bu son kod kaydırıcı animasyonumuzu kaydırıcı modelimizle daha uygun olacak şekilde değiştirecektir. Mükemmel bir ortak olmasa da, bu JQuery çözümüne girmeden alabileceğim en yakın şey. Ayrıca sürücümüzü biraz daha duyarlı hale getirmek için bazı medya sorguları da var. .Et-pb-aktif-slide .et_pb_slide_description {
Animasyon adı: Fadein;
}
.et_pb_slide.et-pb-aktif-kayma { Geçiş: Opaklık 2.5s! Önemli
}
@Media All and (Max-Width: 1252px) {
#fb-post-slider.et_pb_post_slider_0 .et_pb_slide {
Arka plan boyutu:% 90
}
}
@Media All and (Max-width: 980px) {#fb-pos-zider.et_pb_post_slider_0 .et_pb_slide {
Arka plan boyutu:%100;
Arka Plan pozisyonu: üst merkez;
}
}
Şimdi ekranınızın sağ alt köşesindeki Kaydet düğmesini tıklayarak sayfayı kaydedebilirsiniz.Sayfa depolandıktan sonra, Facebook haber odası sayfasındaki posta sürücüsünden esinlenerek tamamlanan posta sürücüsünü görmek için görsel üreticiden çıkın.
Son zihin, bu özel tasarımı yararlı olsun ya da olmasın, umarım bu, Divi Post Slider modülündeki birkaç daha gelişmiş ayara ayrıntılı bir görünüm vermiştir ve neyin mümkün olduğuna dair hayal gücünüzü gıdıklamaktadır.
