Nasıl Yapılır Divi kaydırıcı modül stili Post Slider Brit + CO gibi
Bu yazı, Divi Post Slider modülünü düzenlemenin 5 yaratıcı yolu başlıklı Mini Serimizde 5’in 2. 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!
Web siteniz tasarımında posta kaydırıcısı kullanılırken karşılaşılan kararlardan biri, kullanıcıya hangi posta öğelerinin görüntüleneceğini seçmektir. Dikkate alınması gereken gönderme öğeleri, meta, alıntılar, üstün görüntüler ve gönderme içeriğidir. Bireysel kaydırıcı öğeleri üzerinde tam kontrol, tasarımınızda daha fazla esneklik sağlayacaktır. Bugünün projesi, DIVI Post Slider modülünün CSS kullanarak nasıl ayarlanacağını (veya gizlemek) ve çok özel bir yazı öğesi düzenlemek için nasıl ayarlanacağını gösteriyor.
Hadi içine girelim! Bugün ve Sonra Bugün: Divi Posta Slider Modülü Önce Sonrasında Divi Post kaydırıcı stili nasıl yapılır Post kaydırıcı gibi stil brit + co youtube kanal konseptimize ve ilhamımıza abone olun Bugünkü ilham ilhamı, ilham verici içerik, DIY kit ve çevrimiçi kurslarla yaratıcılığı teşvik eden bir medya ve ticaret şirketi olan Brit + Co.’dan. 2011 yılında Brit Moran tarafından kurulan Brit + Co, Brit.co web sitesi aracılığıyla her ay 10 milyondan fazla kişiye ulaştığını iddia etti (not: bu yazı oluşturulduğundan beri kaydırıcı stili Brit.co web sitesinde değişti).
İlk bakışta, bu yazı kaydırıcı karmaşık görünmüyor, kategori ile bir arka plan olarak üstün görüntüler görüntüleniyor ve başlık kaplamada görüntüleniyor. Slider Post Brit + Co, her bir yazı başlığının solunda açıkça görüntülenen bir sayı ile her gün üç gönderi görüntülemek için tasarlanmıştır. Tasarım öğelerini hazırlayın Başlamadan önce, üstün görüntülere sahip üç yayınınız olduğundan emin olun. Ayrıca, “Bugün Okun Muster” adlı bir gönderi kategorisi oluşturmanız ve üç yayınınızı bu kategoriye ayarlamanız gerekir. WordPress Gösterge Tablonuzun bir kategorisini oluşturmak için imlecinizi sol taraftaki “Posta” a, ardından “Kategori” yi tıklayın. Şimdi “Yeni Kategoriyi Ekle” nin altındaki “Ad” girişine yeni bir kategori ekleyin ve ardından alttaki “Yeni Kategori Ekle” düğmesini tıklayın. Şimdi yayınlarınızın her birini “Bugün Okumalıyım” kategorisine ekleyin. Bu, WordPress’in “hızlı düzenleme” işlevi kullanılarak kolayca yapılabilir. Açmak için, yan tarafın sol tarafındaki “Posta” yu tıklayın, ardından imleci gönderinin adına yönlendirin ve “Hızlı Düzenle” yi tıklayın. “Kategori” altında, “Bugün Okunmalı” ve “Kategorize Değil” dahil diğer tüm kategorileri silin. Bu kaydırıcı, üstün görüntülerle yayınlanması amaçlanmıştır, bu nedenle yapmadıysanız, yayınlarınızın her biri için üstün görüntüler ekleyin. Resminiz, posta kesme çubuğunun boyutunu karşılayacak kadar büyük olmalıdır. 800 piksel x 600 piksel kullanıyorum. Gönderinizi kaydetmeden önce, yapılması gereken son bir şey var. Brit + Co.’daki gönderinin herhangi bir içerik veya alıntı görüntülediğini göreceksiniz. Divi Post kaydırıcı modülü, herhangi bir içerik görüntülememek için seçenekler sunmaz, bu nedenle basit bir çözüm kullanacağım. Gönderi düzenleme sayfanızın orta sütunundaki alıntının altında, herhangi bir metni silin ve yalnızca boşluk ekleyin. Şimdi gönderinizi sağ tarafta “Yayıncılık” ı tıklayarak kaydedin. Tasarımı Divi ile şimdi gönderiniz eklendikten sonra yeni yazı kaydırıcı tasarımınızı Divi’de yapmaya başlayabilirsiniz. Bu öğretici uğruna, imleci gösterge panelinizin üst menüsüne “Yeni” na yönlendirerek ve “sayfa” yı tıklayarak yeni bir sayfa ekleyin. Sayfanızı adlandırın ve “Divi Builder’ı kullan” ı tıklayın. Divi üreticisinden sonra “Sütunu Ekle” yi tıklayın. Şimdi seçeneği seçin. Sütununuz eklendikten sonra, Divi Post kaydırıcı modülünüzü eklemek ve değiştirmek için görsel bir yapımcı açın. Oraya ulaşmak için yalnızca Divi Builder hakkında “Visual Builder kullan” ı tıklayın. Şimdi gri simgeyi “Modül Ekle” i tıklayarak ilk sütuna posta kaydırıcı modülünü ekleyin ve kullanılabilir seçeneklerden “Post Kaydırıcı” ı seçin. Genel Ayarlar Bir modül ekledikten sonra, gönderme modülü ayarlarından “Genel” sekmesinde olacaksınız. “Gönderi Sayı” 3 ve Seç “Bugün Okunmalıdır” Aşağıda “Kategorileri Dahil Et”. Ardından “Metin düğmesine” aşağı kaydırın ve metni “Gönderiyi Oku” olarak değiştirin. Aşağı kaydırın ve “metin rengini” “karanlık” olarak değiştirin. Şimdi “” to “evet” metnini kullanın ve “metnin rengini”%90 opaklıkla beyaza getirin. Bir sonraki tasarım ayarları, “Kaydırıcı Gönderi Ayarları” kutusunun üst kısmındaki sekmeyi tıklayarak “Tasarım” ayarlarına geçin. “Dolgu” ve 20px’e ve “Alt Dolgu” ı 150 piksel olarak ayarlayın. “Sınır Yarıçapı Geniş Metin” i 0 piksel olarak ayarlayın. “Özel renk oku” ı #ffffff olarak ayarlayın. “Dot Nav Custom Color” ı # 929292 olarak ayarlayın. (Brit + Co’s Shift, “Proxima Nova” premium yazı tipini kullanıyor, ancak bu öğretici için ücretsiz yazı tipleri kullanmaya devam edeceğim.) “Başlık Yazı Tipi Boyutu” nu 24px ve “Başlık Metin Rengi” olarak #3D3D3D olarak değiştirin. “Meta Yazı Tipi” ni Droid Serif italik, “Meta Yazı Tipi Boyutu” ve “Meta Metin Rengi” ni 8C8C8C’ye ayarlayın. “” EVET “düğmesi için özel bir stil kullanın, ardından” Metin Boyutu “nu 14px’e ayarlayın ve düğmenin metin rengini #8C8C8C olarak ayarlayın. Özel CSS artık kaydırıcı gönderme ayarları kutusunun üst kısmındaki “CSS” sekmesini tıklayarak CSS ayarlarına geçiyor. “CSS Kimliği” nin altındaki giriş kutusuna metin ekleyerek modül kimliğinizi Brit-Co-Slider’ı verin. Bu, sayfadaki diğer öğeleri etkilemeden bu özel modüle stil eklememizi sağlayacaktır. Şimdi CSS kodunu giriş kutusuna aşağıdaki gibi ekleyin: ana eleman: genişlik: calc (% 100 – 20px); Max-height: 470px; sınır: 1px katı #d7d7d7; Sınır alt kısımları: yok; Slayt Açıklaması: Metin-align: sol;
Marj-sol: 0;
Slayt düğmesi: üst: -60px;
Doğru: -240px Kesme Kontrolü: Pozisyon: Mutlak;
Alt: -14px; Arka plan: #ffffff;
CSS ekledikten sonra, Modül Ayarları kutusunun sağ alt köşesinde beyaz bir onay işaretiyle yeşil bir onay işaretiyle Tıklayarak ayarlarınızı kaydedin. Artık modül ayarları aracılığıyla kullanılmayan öğeler için bazı ek CSS kodları eklemeniz gerekiyor. Dün, bu kodu “Divi Tema seçeneği” aracılığıyla ekledik, ancak bugün CSS’imizi sayfa ayarlarına ekleyeceğiz. Bu, birçok ek kod gerektiren ve yalnızca bir sayfada kullanılan bir kuvvet için daha iyi bir seçenektir. “Sayfa Ayarları” na yerleştirilen CSS, yalnızca her blog sayfasından ziyade ona ihtiyaç duyan bir sayfaya enjekte edilir. “Sayfa Ayarları” nı girmek için ekranınızın altındaki Mor simgesini tıklayın ve ardından dişli şekilli sayfa ayarlarının simgesini tıklayın.
Şimdi CSS sekmesine tıklayın ve aşağıdaki CSS kodunu “CSS özel” giriş alanına yapıştırın. Burada küçük bir kod olduğu için, her bölümün hedefini açıklığa kavuşturmak için yorumlar ekliyorum. /*Kaydırıcının boyutu ve konum metni alanı*/
#Brit-Co-Slider .et_pb_container { Genişlik: 350px! Önemli; Şamandıra: sol; }
/ *Meta sonrasını gizle */
#Brit-co-slider .et_pb_slide_content .post-meta {
Renk: RGBA (0, 0, 0, 0)! Önemli;
}
#Brit-Co-Slider. Yazar {
Görünürlük: gizli;
}
/*Yanıt ve yeniden konum kategorisi*/
#Brit-co-slider .et_pb_slide_content .post-meta a {
Renk: Renk: RGBA (0, 0, 0, 1)! Önemli;
}
#Brit-Co-Slider P.Post-Meta {
Pozisyon: Mutlak;
Üst: 5 piksel;
Sol: 15px;}
#Brit-Co-Slider .t_pb_slide_description {
Pozisyon: göreceli;
Sol: -55px;
}
/*Animasyonu ve stil oklarından kaldır*/
#Brit-Co-Slider .et-Pb-Arrow-PREV,
#Brit-Co-Slider .et-pb-ok-next {
-Webkit-Transition: Tüm 0 kolaylık;
-Moz-Transition: Tüm 0 kolaylık;
-O-transmition: Tüm 0 kolaylık;
Geçiş: Tüm 0 kolaylık;
}
#Brit-co-slider .et_pb_slider: hover .et-pb-lrow-preev {
Sol: -5px;
Opaklık: 1;
}
#Brit-co-slider .et_pb_slider: hover .et-pb-low-next {
Sağ: -5px;
Opaklık: 1;
}
#Brit-Co-Slider .et-PB-Slider-oks a {
Arka Plan rengi: #000000;
Arka plan rengi: RGBA (0, 0, 0, .4);
Dolgu: 10px 2px;
}
/*İçerik bloğuna stil ekleyin*/
#Brit-co-Slider .t_pb_slide_content {
Sınır: 1px katı #CDCDCD;
}
#Brit-Co-Slider .t_pb_slide_title {
Arka plan: Şeffaf! Önemli;
}
#Brit-Co-Slider H2.ET_PB_SLIDE_TITLE {
Ekran bloğu;
Pozisyon: Mutlak;
Üst: 35px;
Sol: 50px;
Çizgi yüksekliği: 1.3em;
}
#Brit-co-Slider div.et_pb_slide_content {
Min-yükseklik: 180px;
}
#Brit-Co-Slider .et_pb_slide {
Arka plan boyutu:%100;
Arka plan-pozisyon: sol üst;
}
/*Post numaraları oluşturun ve stille*/
@Import “https://fonts.googleisi.com/css?family=roboto+slab:300”;
#Brit-Co-Slider .et_pb_slides div: {
Pozisyon: Mutlak;
Ekran bloğu;
İçerik: “”;
Üst: 100 piksel;
Sol: 10 piksel;
Yazı tipi ailesi: ‘roboto slab’, serif;
yazı tipi boyutu: 72px;
Opaklık: 0;
Geçiş: Opaklık 2S;
}
@-Webkit-Keyframes Fade-in {
% 0 {
Opaklık: 0;
Üst: 120px;
}
100% {
Opaklık: 1;
Üst: 100 piksel;
}
}
@-moz-Keyframes Fade-in {
% 0 {
Opaklık: 0;
Üst: 150px;
}
100% {
Opaklık: 1;
Üst: 100 piksel;
}
}
@-O-Keyframes Fade-in {
% 0 {
Opaklık: 0;
Üst: 150px;
}
100% {
Opaklık: 1; üst: 100px;
}
}
@Keyframes Fade-in {
% 0 {
Opaklık: 0;
Üst: 150px;
}
100% {
Opaklık: 1;
Üst: 100 piksel;
}
}
#Brit-Co-Slider .et_pb_slides div: nth-child (1) :: Önce {
İçerik: “1”;
}
#Brit-Co-Slider .et_pb_slides div: nth-child (2) :: Önce {
İçerik: “2”;
}
#Brit-Co-Slider .et_pb_slides div: nth-child (3) :: Önce {
İçerik: “3”;
}
#Brit-Co-Slider .et_pb_slides .et-pb-aktif-kayma: {
Z-endeks: 3;
-Webkit-animasyon: FADE-in 1.5s 1 kübik-bozier (.37, .34, .89, 1.08);
-Moz-animasyon: FADE-in 1.5s 1 kübik-bozier (.37, .34, .89, 1.08);
-O-animasyon: FADE-in 1.5s 1 kübik-bozier (.37, .34, .89, 1.08);
Animasyon: Fade-in 950ms 1 kübik-bozier (.37, .34, .89, 1.08);
Animasyon-Fill-Mode: Forwards;
Animasyon gecikmesi: 700ms;
}
/ * Noktaları çubuklara ve stillere dönüştürün */
#Brit-Co-Slider .et-pb-Kontroller A {
Genişlik:%33;
Yükseklik: 10 piksel;
Marj-sağ:%.5;
-Webkit-Sınırlı-Radius: 0;
-Moz-Sınırlı-Radius: 0;
Border-Radius: 0;
}
#Brit-Co-Slider .et-Pb-Kontroller A: N-Child (3) {
Marj-sağ: 0px;
}
#Brit-Co-Slider .et-PB-Kontrolörler: Önce {
Ekran bloğu;
İçerik: “”;
Genişlik:%100;
Yükseklik: 3px;
Sınır üstü: 1px katı #d2d2d2;
}
CSS ekledikten sonra, ekranınızın sağ alt tarafında “Taslağı Kaydet” veya “Yayınla” yı tıklayarak sayfanızı kaydedin.
Nihai sonuç şimdi görsel inşaatçı dışında, sayfanızı yenileyin ve şimdi Divi Post kaydırıcınız için Brit + Co. web sitesindeki gibi görünen yeni bir görünüm göreceksiniz.
