Süt tasarımı gönderen bir kaydırıcı gibi bir divi post kaydırıcı nasıl organize edilir
Bu yazı, Divi gönderme kaydırıcı modüllerini organize etmenin 5 Yaratıcı Yolları başlıklı Mini Serimizde 5’in 1. Bölümüdü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!
Kaydırıcı gönderme, çevrimiçi yayınlar için yaygın olarak kullanılan bir tasarım öğesidir. En son yayınları veya belirli yayın kategorilerini vurgulamanın iyi bir yoludur. POS kaydırıcısı, içeriğinizi bulmasını beklemek yerine kitlenize sunar. Gönderi kaydırıcı ekranınız genellikle kitlenizin yayınları okumakla ilgilenip ilgilenmediğini belirler.
Divi Post kaydırıcı modülü varsayılan ayarlarla bile harika görünüyor, ancak görünümünü değiştirmenizi gerektiren bir durum olacaktır. Bu dizi, birkaç popüler çevrimiçi yayında bulunan beş farklı yazı kaydırıcı tasarımını ve Divi Post Slider modülü kullanılarak nasıl benzer tasarımların yapılabileceğini keşfedecek. Bugün yapacağımız tasarıma bakalım! Bugün ve sonra bugün: Aşağıdaki ilk Divi Post Slider Post modülü, varsayılan ayarlara sahip ve üstün görüntüleri olmayan Divi Post zorunlu modülü gösterirken, ikincisi ayarlarda sadece birkaç ayar ve bazı özel CSS ile yapılan değişikliktir.
Önceki Sonrasında YouTube Kanalı Konseptimiz ve İlhamımız’a Süt Tasarımı Aboneliği Gönderme Gibi Divi Gönderme Kaydırıcısı Nasıl Kutlanır Slider Post’un kaydırıcı tarzı için ilham kaynağı, modern stil trendlerine adanmış bir çevrimiçi dergi olan Design Milkimiz. Design Süt, iç tasarımcılar, mimarlar ve sanatçılar arasında popüler bir yayındır ve San Francisco Chronicle, LA Times, Time Out New York ve diğerlerinde sergilenmiştir. Basit ve zarif süt tasarım web sitelerinde posta kaydırıcıları ve bu seri için iyi bir başlangıç noktası sağlar. Tasarım öğeleri hazırlama Bu tasarıma hazırlanırken, bazı blog yayınları oluşturmalısınız. İdeal olarak, zaten yapılan birkaç tane var, ancak bu öğreticiyi sadece bir egzersiz olarak yaparsanız, bazı iPSum lorem metniyle çok basit bir şekilde yapabilirsiniz. Ayrıca, her yazı için üstün görüntüyü seçtiğinizden emin olmanız gerekir. Bilah slaytında görünür. Üstün görüntü ayarlarına aşina değilseniz, sağ taraftaki ayarları bulabilir ve Editör Post sayfasının altına gidebilirsiniz.
Çubuğun sağ tarafının altındaki “Üstün Görüntüyü Ayarla” bağlantısını tıklayın, ardından yeni bir resim seçin veya yükleyin. Her bir üstün görüntü aynı boyuta sahipse bu kaydırıcı en iyi görünecektir. Benim için 800px 600px kez seçtim, ancak boyut kesinlikle önemli değil. Ayrıca yayınlar sayfasının altında bulunan “Alıntı” giriş kutusuna yayınlarınızın her birine bir teklif eklemek istersiniz. Bu kaydırıcı tasarımı, başlık altındaki bir alt başlık gibi posta teklifinizi görüntüler, böylece kısa ve tatlı kalmasını istersiniz. Tasarımı divi ile uygulama ve gönderme kaydırıcısınızı görüntülemek için bir sayfa ayarları yoksa, WP yöneticisinin sol tarafında “sayfa” yı tıklayarak yeni bir sayfa oluşturun, ardından “Yeni eklendi”. Şimdi “Divi Oluşturucu Kullan” düğmesini ve ardından “Kütüphaneden Yükle” yi tıklayın ve Divi tarafından ayarlanan düzeni seçin “sayfa sağ kenar çubuğu”. Bu düzen, tasarım sütü sayfalarının genel düzenine en yakındır. Düzen yüklendikten sonra, gerekli değişiklikleri yapmaya başlamak için “Visual Builder kullan” ı tıklayabilirsiniz. Divi’nin görsel inşaatçısında yeniyseniz, bu olağanüstü aracın kısa turunu takip edelim. Farenizi ekranın etrafında hareket ettirin ve imleci çeşitli sayfa öğelerine yönlendirdiğinizde görünen sınırlara ve bıçaklara dikkat edin. Renk kodu Divi Builder ile aynıdır. Parça, düzenli, özel veya tam genişliğe bağlı olarak mavi, turuncu veya mor olacaktır. Çizgi her zaman yeşildir ve modül her zaman gridir. Araç çubuğu simgesi oldukça açıktır ve işlevi hakkında şüphe varsa araç ipuçları içerir. Ekranın altında sağda bir kaydet düğmesi bulunan ana ayar çubuğu da vardır ve solda çeşitli duyarlı ekranlar mevcuttur. Bu aynı zamanda CMD+Z’nin (CTRL+Z) her durumda birkaç geri alma seviyesi sağladığını da not etmeye yardımcı olacaktır. Divi Post Kaydırıcı Modülünü Ekle ve Yapılandırın Başlığın hemen altındaki üst metin modülünü silerek başlayalım ve Post kaydırıcı modülüyle değiştirin. Genel değişiklik ayarlarımız, yeni bir modül ekledikten sonra varsayılan olarak olduğunuz “genel” ayarlarla başlar. Lütfen ve yayın sayısını ayarlayın ve kategoriyi seçin. “Meta Post’u Görüntüle” i “Hayır” olarak değiştirin.
Metin rengini “karanlık” olarak ayarlayın.
“Görüntünün yerleştirilmesi” ni “sol” olarak değiştirin.
Tasarım Ayarları Şimdi Tasarım sekmesinin altındaki ayarlara geçelim.
Üst dolguyu 50 piksel olarak ayarlayın
Alt dolguyu 40 piksel olarak ayarlayın
“Dot Nav Custom Colors” ı Siyah olarak değiştirin (#000000)
Yazı tipi başlığını tüm büyük harfe ve boyutuna 25 piksel olarak ayarlayın
Şimdi aşağı kaydırın ve aşağıdaki değişiklikleri yapın:
“EVET olmak için” özel bir stil kullanın ”
13px düğmesinin metin boyutunu ayarlayın Metin düğmesinin metnini siyah olarak ayarlayın
Sınır düğmesinin genişliğini 1 piksel olarak ayarlayın
Sınır sınır yarıçapını 0 olarak ayarlayın
CSS sekmesi Özel şimdi CSS sekmesine bazı kod eklemeniz gerekir. Modül ayarları kutusunun üst kısmındaki “CSS” sekmesini tıklayın. Şimdi “DM-CLIDER” kimliğini CSS kimliği girişine yazarak verin.
Şimdi CSS kodunu aşağıdaki bölüme ekleyin: Ana unsur: Sınır: 1px Katı Gri;
Slayt başlığı: marj üstü: 10px; Yazı tipi ailesi: Gürcistan, Serif! Önemli; Modül Ayarları kutusunun sağ altındaki kontrol simgesini tıklayarak değişikliklerinizi kaydedin. Ardından sayfanın sağ altındaki “Kaydet” düğmesini tıklayarak sayfayı kaydedin. Visual Builder’da gönderi modülümüzün oluşmaya başladığını, ancak yeterli olmadığını görebilirsiniz.
Divi Tema seçeneğiyle CSS Custom ekleyin, yine de boyutları ayarlamanız ve görüntülerimizi konumlandırmanız ve navigasyon noktamızı bir dikdörtgen haline getirmeniz gerekir. Bu son ayrıntıyı elde etmek için, tema seçeneklerinizin genel ayarlarını açmanız gerekir. Oraya ulaşmak için Visual Builder’dan çıkın ve yönetici kontrol panelinize geri dönün. Şimdi sol tarafta, “Tema seçeneğini” görüntüleyen “Divi” yi tıklayın. Ekranınızın altına alın ve “CSS Custom” a aşağıdaki kod görüntülerini ekleyin ve ardından “Değişik Kaydet” i tıklayın. /*Görüntüyü kaydırıcının sol kenarına taşıyın*/ #DM-SLIDER .ET_PB_SLIDE_IMAGE IMG { Marj-Top: 0px; Marj-sol: 0px; Max-Height:%100! Önemli;
}
#DM-SLIDER .ET_PB_SLIDE {
Dolgu-sol: 0px;
}
/ * Noktaları dikdörtgenlere dönüştürün */
#DM-CLIDER .ET-PB-CONTROLERS A {
Genişlik: 24 piksel;
Yükseklik: 4px;
Marj-sağ: 4px;
-Webkit-Sınırlı-Radius: 0px;
-Moz-Sınırlı-Radius: 0px;
Border-Radius: 0px;
}
#DM-CLIDER .ET-PB-ORROW-PREV,
#DM-SLIDER .ET-PB-ORROW-NEXT {
Arka plan rengi: RGBA (0, 0, 0, .25);
-Webkit-Sınırlı-Radius:%50;
-Moz-Sınırlı-Radius:%50;
Border-Radius:%50! Önemli;
}
#DM-SLIDER .ET-PB-CONTROLERS {
Üst: 30px! Önemli;
Sol: Calc (47.25% + 20px)! Önemli;
Genişlik:%50! Önemli;
Yükseklik: 10 piksel! Önemli;
Metin-align: Sol! Önemli;
}
Şimdi sayfayı gönderme kaydırıcınızla açın ve orada, Divi Post kaydırıcınız için tasarım sütünün evinde bulunanlardan ilham alan yeni bir görünüm var.
