Kayma Tesco Living gibi Divi Slider Modül Stili Nasıl Yapılır
Bu yazı, Divi Post Slider modülünü düzenlemenin 5 yaratıcı yolunu başlıklı Mini Serimizde 5. Bölümün 3’tür. Her birine nasıl ulaşacağına dair bir öğretici ile Divi Post Slider modülünün beş benzersiz örneği için bu haftayı dört gözle bekleyin!
Bugün Divi Post Slider modülünü organize etme dizimize devam ediyoruz. Model tüm web üzerinden ünlü bloglardan kayma kullanıyoruz ve Divi’de görünümü yeniden yapmaya çalışıyoruz. Bu öğretici, Divi Post Slider modülünü derinlemesine keşfetmemizi ve esnekliğini sınırlarına teşvik etmemizi sağlar. Bugünkü yazıda, modelimiz Tesco Living web sitesinde bulunan bir posta sürücüsüdür.
Bugün ve Sonra Bugün: Divi Posta Slider Modülü Önce Sonrasında Kavramlar ve İlham Bugünün post kaydırıcı tarzı ilhamı, dünyanın en büyük ikinci perakendecisi Tesco’dan geliyor. Tesco Magazine, İngiltere’de yiyecek, aile ve hayata odaklanan içeriğe sahip en iyi dergilerden biridir. Yayın web sitesi, tescoliving.com bu öğretici için bir gönderi kayması bulduğumuz yerdir. Tesco POS kaydırıcısı kavramı basitliktir. Gönderim, başlıklar ve alıntılar kategorisinin solunda belirgin üstün görüntüler görüntülenirken, navigasyon için yalnızca oklar görüntülenir. Slayt numarası ve koleksiyondaki slayt sayısı da navigasyon okunun yanında görüntülenir.
Tasarım öğelerini bu vardiya için hazırlarken, önerilen boyutta 800px x 500px ile üstün görüntülere sahip üç gönderiye ihtiyacınız vardır. Her gönderi ayrıca bir ila iki cümle arasında kısa bir teklif eklemelisiniz. Ayrıca bu yazı kaydırıcısının posta başlığı için bir cümle durumu kullandığını unutmayın. Bu stili gerçekten yakalamak için uygun başlığı değiştirmelisiniz. Tüm bu ayarlar “yayın” sayfanızda bulunur. Gösterge tablonuzdan açmak için, çubuk menüsünün sol tarafındaki “Gönder” i tıklayın, ardından Post başlığını tıklayın. Ardından divi sitenize Fontawesome eklememiz gerekir. WordPress Yöneticinize Divi> Tema Seçenekleri> Entegrasyon> Kodu blogunuza ekleyin ve aşağıdaki görüntüleri oraya yapıştırın.
Yeşil düğmesini tıklayarak tamamlayın “Değişikliği Kaydet”. Tasarımı Divi ile uygulamak, Tesco Living Post vardiyası tamamen geniş bir vardiya olduğundan, sayfanızda bir sürücü modülü olan bir satır sütuna ihtiyacınız var. Divi Visual Builder’dan, satır eklemek için Yeşil Plus işaretini tıklayın, ardından bir sütun, ardından Post kaydırıcı modülünü seçin.
Genel Ayarlar
“Ekran kontrolünü” no.
“Arka plan rengi” #ffffff (beyaz) olarak değiştirin.
Metnin metnini “ışık” dan “karanlık” olarak değiştirin.
“Görüntünün yerleştirilmesi” nizin sola düzenlendiğinden emin olun.
“Arka planın arka planını kullanın” nı değiştirin.
“Gölgeleri Sil” i evet. Tasarım Ayarları
Post kaydırıcı modülündeki Tasarım Ayarları sekmesinde aşağıdakileri yapın:
“Üst Dolgu” ve “Alt Dolgu” ı 0px olarak ayarlayın. “Yazı Tipi Başlığı” nı Nunito’ya ayarlayın; cesur.
“Gövde yazı tipi” ni Lato’ya ayarlayın.
“Gövde yazı tipi boyutu” nu 16px olarak ayarlayın.
Yönlendir “için özel bir stil kullanın”.
“Metin Stili Düğmesi” ni 14px olarak ayarlayın.
“Metin rengi” #666666’ya ayarlayın
“Sınır genişliği” ni 1px olarak ayarlayın.
“Sınır yarıçapı düğmesini” 0 piksel olarak ayarlayın.
“Yazı tipi düğmesini” Lato’ya ayarlayın; cesur.
Özel CSS
Post kaydırıcı modülünden Özel CSS sekmesinde, CSS Kimliği alanına “Tesco-Slider” ekleyin ve ardından ayarlarınızı kaydetmek için Yeşil onay kutusunu tıklayın.
Ardından, kontrol doktorunun kontrol simgesini ve ardından dişli simgesini tıklayarak sayfa ayarlarına gidin. CSS sekmesine tıklayın ve özel CSS panelinde aşağıdaki kod görüntülerini yapıştırın: / * Tesco Slider – General * /
#tesco-lider .et_pb_slides .et_pb_slide {dolgu: 0; Taşma: gizli; }
#tesco-lider .et_pb_slides .et_pb_container {yükseklik: otomatik! Önemli; Dolgu Alt: 60px; }
/ * Tesco Slider – Resim */
#tesco-slider .et_pb_slide_image {genişlik:%61.25; Marj: 0! Önemli; Üst: 0; }
#tesco-slider .et_pb_slide_image img {max-height:%100! Önemli; }
/ * Tesco Slider – Açıklama */
#tesco-slider .et_pb_slide_description {genişlik:%38.75; Ekran bloğu; Dolgu: 25px! Önemli; }
/ * Tesco Slider – Başlık */
#tesco-slider .et_pb_slide_title {marj-üst: 40px; }
/ * Tesco Slider – Kategori */
#Tesco-Slider .post-Meta {yazı tipi boyutu: 0px! Önemli; Pozisyon: Mutlak; Üst: 25px; }
#Tesco-Slider .post-Meta Span {ekran: yok; }#Tesco-Slider .post-Meta A {Yazı Tipi: 15px! Önemli; Renk: #878486! Önemli; }
/ * Tesco Slider – Navigasyon */
#tesco-clider .et-pb-kayma okları {pozisyon: mutlak; Sol:%63.25; Alt: 10px; Z-index: 20; }
#tesco-slider .et-pb-lrow-next, #tesco-slider .et_pb_slider: hover .et-pb-lrow-next, #tesco-slider .et_mobile_device .et-pb-srow-nex ; }
#tesco-slider .et-pb-lrow-prev, #tesco-slider .et_pb_slider: hover .et-pb-low-prev, #tesco-slider .et_mobile_device .et-pb-row-prev {sol: 0! Önemli ; }
#tesco-slider .et-pb-ok-pREV, #tesco-slider .et-pb-low-next {pozisyon: başlangıç; Dolgu: 0 5px; Marj: 0; Ekran: satır içi blok; Opaklık: 1; -Webkit-Transition: Yok; -Moz-Transition: Yok; Geçiş: Yok; }
#tesco-slider .et-pb-lrow-prev: daha önce, #tesco-slider .et-pb-low-nex: {font-family: ‘fontawesome’! Önemli; yazı tipi boyutu: 34px; Renk: #333; }
#tesco-slider .et-pb-ok-pREV: {content: ‘f053’ öncesi; }
#tesco-slider .et-pb-lrow-next: {content: ‘f054’ öncesi; }
#tesco-slider .et-pb-lrow-next: hover, #tesco-slider .et-pb-lrow-pREV: hover {opaklık: 0.5; }
/ * Tesco Slider – Nnumbers */
#tesco-slider .et_pb_slides .et_pb_slide: Önceden {margin-sol: 100px; Opaklık: 0; Pozisyon: Mutlak; Alt: 17px; Sol:%61.25; }
#tesco-slider .et_pb_slides .et-pb-aktif-kayma: {opaklık: 1’den önce; }
#tesco-lider .et_pb_slides .et_pb_slide: nth-child (1) :: önce {content: ‘1/3’; }
#tesco-lider .et_pb_slides .et_pb_slide: nth-child (2) :: önce {content: ‘2/3’; }
#tesco-lider .et_pb_slides .et_pb_slide: nth-child (3) :: önce {content: ‘3/3’; }
/ * Tesco kaydırıcı – duyarlı */
@Media sadece ekran ve (maks-width: 960px) { #tesco-slider .et_pb_slides .et_pb_slide .et_pb_slide_image, #tesco-lider .et_pb_slides .et_pb_slide. Metin-align: sol; Ekran bloğu; Pozisyon: Başlangıç! Önemli; }
#tesco-lider .et_pb_slides .et_pb_slide .et_pb_slide_description {padding: 25px 0 0 0! Önemli; }
#tesco-slider .et_pb_slide_title {marj-üst: 40px! Önemli; }
#tesco-clider .et-pb-slider-oks {sol: 0; }
#tesco-slider .et_pb_slides .et_pb_slide: Önceden {margin-left: 0; Sol: 80px; }
}
/ * Tesco kaydırıcı animasyonlar – isteğe bağlı */
#tesco-lider .et_pb_slider .et_pb_slide_image,
#tesco-slider .et-pb-aktif-kayma .et_pb_slide_image,
#tesco-slider .et_pb_slide: ilk çocuk .et_pb_slide_image img.active {
-Webkit-animasyon süresi: 0.7s;
-Moz-animasyon süresi: 0.7s;
-M-animasyon süresi: 0.7s;
-O-animasyon süresi: 0.7s;
Animasyon süresi: 0.7s;
-Webkit-Animation-Timing-Fonction: kolaylık;
-Moz-Animation-Timing-Fonction: kolaylık;
-Ms-animasyon-zamanlama-fonksiyon: kolaylık;
-O-animasyon-zamanlama fonksiyonu: kolaylık;
Animasyon-Zamanlama Fonksiyonu: kolaylık;
-Webkit-animasyon-gecikme: 0.9s;
-Moz-animasyon gecikmesi: 0.9s;
-Ms-animasyon gecikmesi: 0.9s;
-O-animasyon gecikmesi: 0.9s;
animasyon gecikmesi: 0.9s;
-Webkit-Animation-Fill-Mode: Her ikisi de;
-Moz-animasyon-doldurma modu: her ikisi de;
-MS-Animation-Fill-Mode: Her ikisi de;
-O-animasyon-doldurma modu: her ikisi de;
Animasyon-Fill-Mode: Her ikisi de;
}
#tesco-slider .et_pb_slider .et_pb_slide_image {
-Webkit-Animation-Name: Fadebottom;
-Moz-animasyon-adı: fadebottom;
-Ms-animation-name: fadebottom;
-O-animasyon adı: fadebottom;
animasyon adı: fadebottom;
}
#tesco-slider .et-pb-aktif-kayma .et_pb_slide_image,
#tesco-lider .et_pb_slide: first-child .et_pb_slide_image img.active {-webkit-animation-name: fadetop;
-Moz-animasyon-adı: Fadetop;
-Ms-animation-name: fadetop;
-O-animasyon adı: Fadetop;
Animasyon adı: Fadetop;
}
Ardından değişikliklerinizi kaydetmek için yeşil düğmeyi tıklayın.
Son sonuç yukarıdaki tüm ayarlar, görüntüler ve ayarlamalar yapıldığında, hala yapılması gereken bir şey daha var. Kontrol editörü altındaki görsel düzenleyicinin kontrolü hala genişletildiğinde, ekranınızın sağ köşesindeki “Taslak Kaydet” veya “Yayınla” veya “Güncelleme” düğmesini tıklayın. Daha sonra, sol üstte, siyah yönetici çubuğunda, görsel yapımcının dışında. Güzel bir Tesco yaşamının gönderilmesiyle terk edileceksiniz.
Yarın: Facebook Haber Odası Gönderen Kaydırıcı Gibi Bir Divi Posta Kaydırıcı Modülü Nasıl Yapılır Kesinlikle bu mini dizinin tadını çıkardığım gibi keyif almanızı umuyorum. Divi Post Slider modülünü organize etmenin ve kullanmanın yeni yollarını keşfetmeye devam ettiğimizde, genel olarak Divi’yi daha iyi anlıyoruz.
Unutma! Hala “5 Minia Minagation Minia Modülü ve Divi Post Modülünü Kullanıyor” da kalan iki yayınımız var. Yarın Slider Post Facebook haber odasını göreceğiz ve ilginç bir 3D etiket öğesi yapmayı öğreneceğiz. Büyük duyuruları, yararlı ipuçlarını veya divi freebie’yi asla kaçırmayacak şekilde e -posta bültenimize ve YouTube kanalımıza abone olduğunuzdan emin olun!
