Facebook Haber Odası'nın Gönderi Kaydırıcısı gibi Divi'nin Gönderi Kaydırıcı Modülüne Nasıl Stil Verilir

Gönderi kaydırıcıları, okuyucularınıza çeşitli içerikler sunmak için zarif bir çözümdür. Vurgulanan gönderiler, kategorilerden bugüne kadar çeşitli şekillerde düzenlenebilir. Bugünkü projede, “En Çok Okunan Haberler” adlı bir gönderi kategorisi sunan Facebook Haber Odası blog sayfasından bir örneğe bakıyoruz. Gönderi başlığını ve öne çıkan resmi vurgulayan çok çekici bir kaydırıcı. Divi'nin Post Slider modülünü kullanarak bu kaydırıcının görünümünü yeniden oluşturacağız.

Öncesi ve Sonrası: Divi Post Slider Modülü

Aşağıdaki ilk resim, varsayılan ayarlarıyla divi post kaydırıcı modülünü gösterirken, ikincisi, ayarlarda sadece birkaç ince ayar ve bazı özel CSS ile oluşturulmuş bir değişikliktir.

Önce

Sonrasında

Konsept ve İlham

Bahsedildiği gibi, bugünün post kaydırıcı stilinin modeli Facebook Haber Odası'ndan geliyor. Bu, tahmin edebileceğiniz gibi, Facebook ile ilgili her şeye adanmış bir haber blogudur. Çoğumuz facebook'u sosyal medya devi olarak bilsek de, bu bloga hızlı bir bakış, bakış açınızı genişletecektir. Son çeyrekte 8,8 milyar dolar gelir ve günde 1,23 milyar aktif kullanıcıyla, Facebook Haber Odası sayfasındaki blog yazısı kaydırıcısı bugünün projesi için değerli bir model sunuyor.

Tasarım Öğelerinin Hazırlanması

Bu tasarıma hazırlanırken, öne çıkan görsellere sahip birkaç blog gönderisine ihtiyacınız olacak. Gönderileriniz için öne çıkan görselleri ayarlamaya aşina değilseniz, ayarı sayfanın sağ alt tarafındaki gönderiyi düzenle sayfasında bulabilirsiniz.

Bu kaydırıcı tasarımı, öne çıkan resimlerin her biri 600 piksel x 400 piksel ise en iyi sonucu verir, ancak tam boyut kritik değildir.

Ayrıca, gönderi düzenleyici sayfasının alt kısmında bulunan "Alıntı" giriş kutusuna her bir gönderi için bir alıntı metni eklemek isteyebilirsiniz. Gönderi, varsa gönderi alıntınızı görüntüler, ancak yoksa gerçek içeriğinizin bir bölümünü kullanır.

Tasarımı Divi ile Uygulamak

Youtube Kanalımıza Abone Olun

Takip ediyorsanız ve gönderi kaydırıcınızı görüntülemek için halihazırda bir sayfa düzeniniz yoksa, yeni bir sayfa oluşturun ve gerekli değişiklikleri yapmaya başlamak için “Görsel Oluşturucuyu Kullan” seçeneğine tıklayın.

1 Sütun yapısı satırına sahip bir Normal Bölüm ekleyerek başlıyoruz.

Ardından, Post Slider Modülünü satıra ekleyin.

Değişikliklerimiz, Visual Builder'a herhangi bir yeni modül ekledikten sonra varsayılan olarak bulunduğunuz yer olan “İçerik” ayarlarıyla başlar.

Varsayılan İçerik ayarlarında aşağıdaki değişiklikleri yapın:

"Mesaj Numarası"nı istediğiniz kadar gönderi olarak ayarlayın. Bu örnek için 3 kullanıyorum.

Ardından "Tanımlanmışsa Yazıdan Alıntı Kullan"ı evet olarak ayarlayın ve "Otomatik Alıntı Uzunluğu"nu 180 olarak ayarlayın.

Artık modül ayarları modunun üst kısmındaki sekmeye 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 (#ffffff) olarak değiştirin.

“Dot Nav Özel Rengi”ni #576d90 olarak değiştirin.

“Metin Rengini” Koyu olarak değiştirin.

Şimdi “Başlık Yazı Tipi”ni kalın yapın, “Başlık Yazı Tipi Boyutu”nu 34 piksele, “Üst Bilgi Metni Rengi”ni #3b5998 ve “Başlık Satırı Yüksekliği”ni 42 piksele ayarlayın.

Şimdi "Gövde Metni Rengi"ni #141924'e ve "Gövde Çizgisi Yüksekliği"ni 24 piksele ayarlayın.

Şimdi evet olarak değiştirmek için "Düğme için Özel Stilleri Kullan" ı tıklayın. “Düğme Metin Boyutu”nu 16 piksel, “Düğme Kenarlığı genişliği”ni 0 piksel, “Düğme Vurgulu Metin Rengi”ni #666666 ve “Düğme Vurgulu Arka Plan Rengi”ni rgba(0,0,0,0) olarak değiştirin.

Şimdi modül ayarları modunun üstündeki “Gelişmiş” sekmesine tıklayın. CSS kimliği altındaki metin girişine “fb-post-slider” ekleyin. Bu, sayfada görüntülenebilecek diğer posta modülleri üzerinde herhangi bir etki yaratmadan bu özel modüle stiller eklememizi sağlar.

Şimdi çeşitli öğelere aşağıdaki gibi CSS kodunu ekleyin:

Önce

position:absolute;
top:57px;
right:-6px;
content:"";
border:4px solid transparent;
border-top-color:#2C477F;
border-left-color:#2C477F;

Ana Eleman

border-radius: 3px;
border:1px solid #dedede; 

Sonrasında

position:absolute;
top:25px;
right:-7px;
display:block;
content:"Top Stories";
color:#F9F4F7;
background-color:#4573CC;
padding:4px 15px;
border-radius:2px;
z-index:2!important;

Slayt Açıklama

min-height:460px;
width: 35%;
min-width: 300px;
float:left;
padding: 57px 45px 50px 35px!important;
font-family: 'Alegreya Sans', sans-serif;
text-align:left

Slayt Başlığı

font-family: 'Alegreya Sans', sans-serif;

Slayt Düğmesi

padding:0!important;
margin-top:0;

Slayt Kontrolörleri

margin-bottom:-55px;

Slayt Okları

color:#ffffff!important;
background-color:rgba(0,0,0,.4);
font-weight:bold;
border-radius:2px;
 -ms-transform: scale(1.2, 2.5); /* IE 9 */
 -webkit-transform: scale(1.2, 2.5); /* Safari */
 transform: scale(1.2, 2.5);

Şimdi modun sağ alt köşesindeki onay işaretine tıklayarak modül ayarlarını kaydedin.

Görsel Oluşturucu'da, gönderi kaydırıcımızın Facebook Haber Odası sayfasındaki gibi görünmesini sağlamak için hala gitmenin birkaç yolu olduğunu görebilirsiniz.

Bu biraz CSS'nin halledemeyeceği bir şey değil ve kalan kodu Görsel Oluşturucu'dan Sayfa Ayarlarına ekleyerek onun şekillenmesini izleyebileceğiz. Oraya ulaşmak için sayfanın alt ortasındaki Ayarları Genişlet simgesine ve ardından “Sayfa Ayarları” simgesine tıklayın.

Daha büyük bir monitör üzerinde çalışıyorsanız, kipi Post Slider'ın yanına taşımanızı öneririm, böylece biz ekledikçe her bir kod bitinin ne yaptığını görebilirsiniz. Bu, modülümüzü biçimlendirmek için kullanılan CSS'yi anlamanıza daha iyi yardımcı olacaktır.

İlk olarak, aşağıdaki CSS'yi “Custom CSS” metin alanına ekleyerek, arka plan görüntüsünün boyutuna ve konumuna (şu anda beyaz kaplamanın arkasında gizlidir) ve ayrıca kaydırıcı metninin ve kaplamanın konumuna dikkat edeceğiz.

#fb-post-slider.et_pb_post_slider_0 .et_pb_slide {
    background-size: 70%;
    background-position: top right;
    padding-left: 0;
    overflow: visible!important;
}
 
#fb-post-slider.et_pb_slider_with_overlay .et_pb_slide_overlay_container {
    width: 30%;
    min-width: 300px;
}

Şimdi, tarih hariç, post metamızı gizlemeye ve tarihin konumunu başlığın üstüne taşımaya özen göstereceğiz. Bunu başarmak için, önceden girilen kodun hemen altındaki Özel CSS metin girişine aşağıdaki kodu ekleyin.

#fb-post-slider .et_pb_slide_content .post-meta {
    height: 0px;
    overflow: hidden
}
#fb-post-slider .et_pb_slide_content .post-meta .published {
    position: absolute;
    top: 32px;
    left: 35px;
    color: #898f9c;
    font-size: 16px
}

Bazı küçük istisnalar dışında hemen hemen oradayız. Post Slider modülümüzün üzerine geldiğinizde hem önceki hem de sonraki okların göründüğünü fark edeceksiniz. Facebook haber odası kaydırıcısında yalnızca sonraki ok görünür. Bu, önceden girilen kodun hemen altındaki Özel CSS metin girişine aşağıdaki CSS'yi ekleyerek kolayca düzeltilebilir.

#fb-post-slider .et-pb-arrow-prev {
    display: none
}

Şimdi kaydırıcının altındaki gezinme noktalarını aşağıdaki kodla yeniden konumlandırmamız gerekiyor. Bu arada, kaydırıcının taşma özelliğini görünür olarak ayarlamanın, sağ üst köşeyi saran “En Çok Okunan Haberler” etiketi için daha önce oluşturduğumuz 3B efekti ortaya çıkardığını da fark edeceksiniz.

#fb-post-slider.et_pb_post_slider_0 .et-pb-controllers a {
    height: 8px;
    width: 8px;
    order-radius: 50%
}
#fb-post-slider.et_pb_slider {
    overflow: visible!important
}

Son olarak, bu son kod parçası, kaydırıcımızın animasyonunu model kaydırıcımızla daha yakından eşleşecek şekilde değiştirecektir. Mükemmel bir eşleşme olmasa da, jQuery çözümlerine girmeden elde edebileceğim en yakın şey bu. Kaydırıcımızı biraz daha duyarlı hale getirmek için bazı medya sorguları da var.

.et-pb-active-slide .et_pb_slide_description {
    animation-name: fadeIn;
}
.et_pb_slide.et-pb-active-slide {
    transition: opacity 2.5s!important
}
 
@media all and (max-width: 1252px) {
    #fb-post-slider.et_pb_post_slider_0 .et_pb_slide {
        background-size: 90%
    }
}
@media all and (max-width: 980px) {
    #fb-post-slider.et_pb_post_slider_0 .et_pb_slide {
        background-size: 100%;
        background-position: top center;
    }
}

Artık ekranınızın sağ alt köşesindeki kaydet düğmesine tıklayarak sayfayı kaydedebilirsiniz. Sayfa kaydedildikten sonra, Facebook Haber Odası sayfasındaki gönderi kaydırıcısından ilham alan tamamlanmış gönderi kaydırıcısını görmek için görsel oluşturucudan çıkın.

Son düşünceler

Bu tasarımı faydalı bulsanız da bulmasanız da, umarım Divi'nin Post Slider Modülündeki bazı daha gelişmiş ayarlara ayrıntılı bir bakış sağlamıştır ve nelerin mümkün olduğu konusunda hayal gücünüzü harekete geçirmiştir.