Divi'de Bir Başlık için Kompakt Bir Referans Kaydırıcısı Nasıl Oluşturulur
Yayınlanan: 2021-07-16Sitenize referanslar eklemek, işletmenizin (veya markanızın) güvenilirliğini artırmanın ve ziyaretçiler arasında güven oluşturmanın etkili bir yoludur. Bir referans kaydırıcısı, referansların hepsini tek bir yerde sergilemek için kullanışlı bir araçtır. Bunu akılda tutarak, başlığınıza kompakt bir referans kaydırıcısı eklemek mantıklıdır, böylece bu referanslar, kullanıcının sitenizi ziyaret ederken gördüğü ilk şeylerden biridir.
Bu eğitimde, web sitenizin başlığında kısa referansları sergilemek için kompakt bir referans kaydırıcısının nasıl oluşturulacağını göstereceğiz. Bunu yapmak için Divi'nin Kaydırıcı Modülünü eğlenceli ve benzersiz bir şekilde değiştireceğiz.
Başlayalım!
Gizlice Bakış
İşte Divi Slider Modülünü kullanarak oluşturacağımız kompakt referans kaydırıcısı.
Ve işte, global bir başlığa eklenen aynı referans kaydırıcısı.
Ve işte mobilde nasıl göründüğü.
Düzeni ve Şablonu ÜCRETSİZ İndirin
Bu eğitimdeki tasarımlara el koymak için önce aşağıdaki düğmeyi kullanarak indirmeniz gerekecek. İndirmeye erişmek için aşağıdaki formu kullanarak Divi Daily e-posta listemize abone olmanız gerekir. Yeni bir abone olarak, her Pazartesi daha da fazla Divi iyiliği ve ücretsiz bir Divi Düzen paketi alacaksınız! Zaten listedeyseniz, aşağıya e-posta adresinizi girin ve indir'i tıklayın. "Yeniden abone olmayacaksınız" veya fazladan e-posta almayacaksınız.
Ücretsiz İndir
Divi Bültenine katılın ve size nihai Divi Açılış Sayfası Düzen Paketinin bir kopyasını ve ayrıca tonlarca başka şaşırtıcı ve ücretsiz Divi kaynağı, ipucu ve püf noktası e-posta ile gönderelim. Takip edin ve kısa sürede bir Divi ustası olacaksınız. Zaten aboneyseniz, e-posta adresinizi aşağıya yazın ve düzen paketine erişmek için indir'i tıklayın.
Başarıyla abone oldunuz. Aboneliğinizi onaylamak ve haftalık ücretsiz Divi düzen paketlerine erişmek için lütfen e-posta adresinizi kontrol edin!
Düzeni Divi Kitaplığına Aktarın
Bölüm düzenini Divi Kitaplığınıza aktarmak için Divi Kitaplığına gidin.
İçe Aktar düğmesini tıklayın.
Taşınabilirlik açılır penceresinde, içe aktarma sekmesini seçin ve bilgisayarınızdan indirme dosyasını seçin. “divi-short-testimonial-slider-module-layout.json” adlı JSON dosyası olacaktır.
Ardından içe aktar düğmesini tıklayın.
Tamamlandığında, bölüm düzeni Divi Builder'da mevcut olacaktır.
Başlık Şablonunu Divi Tema Oluşturucusuna Aktarın
Başlık şablonunu, başlığa eklenen kompakt referans kaydırıcısıyla içe aktarmak istiyorsanız, Divi > Tema Oluşturucu'da gezinmeniz gerekir.
Ardından, JSON dosyasını içe aktarmak için sayfanın sağ üst köşesindeki taşınabilirlik simgesini kullanın. “divi-short-testimonial-slider-header-template.json” adlı dosya olacaktır.
Hadi öğreticiye geçelim, olur mu?
Başlamak için Gerekenler
Başlamak için aşağıdakileri yapmanız gerekir:
- Henüz yapmadıysanız Divi Temasını kurun ve etkinleştirin.
- WordPress'te yeni bir sayfa oluşturun ve sayfayı ön uçta düzenlemek için Divi Builder'ı kullanın (görsel oluşturucu).
- “Sıfırdan Oluştur” seçeneğini seçin.
Bundan sonra Divi'de tasarlamaya başlamak için boş bir tuvaliniz olacak.
Divi'de Kompakt Bir Referans Kaydırıcısı Nasıl Oluşturulur
Yeni Satır ve Slider Modülü Ekle
Başlamak için bölüme tek sütunlu bir satır ekleyin.
Ardından satıra bir kaydırıcı modülü ekleyin.
Slaytı düzenle
Kaydırıcı ayarları altında, içerik sekmesi altındaki ikinci varsayılan slaydı silin ve ardından kalan slaydın ayarlarını düzenlemek için tıklayın.
Slayt İçeriği
Slayt ayarlarının içerik sekmesi altında aşağıdakileri güncelleyin:
- Başlık: “Donec sollicitudin molestie malesuada. Vivamus işkenceci eget."
- Düğme Metni: Tümünü Oku
- Gövde: — Tatiana Gagelman
Tamamlandığında, slayt ayarlarını kaydedin.
Kaydırıcı Ayarlarını Güncelle
Slayt Çoğalt ve Denetimleri Gizle
İlk slaydı içerikle güncelledikten sonra, bir veya daha fazla ek slayt oluşturmak için o slaydı çoğaltın.
Ardından, Öğeler seçenek grubu altında, aşağıdakileri güncelleyerek kaydırıcı denetimlerini gizleyin:
- Kontrolleri Göster: HAYIR
Tüm Slaytlar için Arka Planı Güncelle
Ardından, tüm slaytlar için kullanılacak bir arka plan ekleyeceğiz. Bu arka plan, bir arka plan gradyanı ve arka plan görüntüsü stilini içerecektir (tek bir slayda bir yazar arka plan görüntüsü eklediğinizde/eklediğinizde).
Arka planı eklemek için aşağıdakileri güncelleyin:
- Arka Plan Gradyanı Sol Renk: #000000
- Arka Plan Gradyanı Sağ Renk: #000000
- Arka Plan Resmi Boyutu: Sığdır
- Arka Plan Resmi Konumu: Orta Sol
- Arka Plan Resmi Karışımı: Parlaklık
Burada bir arka plan resmi eklemediğimizi belirtmek önemlidir. Tek bir slayt tarafından kullanılacak görüntü için yalnızca boyut, konum ve karışım modunu ekliyoruz. Aynı stili her slayda ayrı ayrı eklemek yerine buraya eklemek daha kolaydır. Daha sonra, tek tek slaytlara nasıl resim ekleyeceğinizi göstereceğiz.
Kaydırıcı Tasarım Ayarları
Tasarım sekmesi altında aşağıdakileri güncelleyin:
Kaplama
- Arka Plan Yerleşimini Kullan: EVET
- Arka Plan Yerleşimi Rengi: rgba(0,0,0,0.7)
Başlık Metni
- Başlık Başlık Düzeyi: H4
- Başlık Yazı Tipi: Josefin Sans
- Başlık Yazı Tipi Ağırlığı: Orta
- Başlık Metni Hizalama: Sol
- Başlık Metin Boyutu: 16px (masaüstü ve tablet), 14px (telefon)
- Başlık Satırı Yüksekliği: 1.5em
Gövde metni
- Gövde Yazı Tipi: Josefin Sans
- Gövde Metni Hizalama: Sol
- Gövde Metni Rengi: #aaaaaa
- Gövde Harf Aralığı: 0.05em
Buton
- Düğme İçin Özel Stilleri Kullan: EVET
- Düğme Metin Boyutu: 1em
- Düğme Metin Rengi: varsayılan (masaüstü), #000 (fareyle üzerine gelin)
- Düğme Arka Plan Rengi (masaüstü): rgba(255,255,255,0.19)
- Düğme Arka Plan Rengi (fareyle üzerine gelin): #ffffff
- Düğme Kenar Genişliği: 0px
- Düğme Harf Aralığı: 0.05em
- Düğme Yazı Tipi: Josefin Sans
- Düğme Kenar Boşluğu: 0 piksel üst, 0 piksel alt
- Düğme Dolgusu: 0 piksel üst, 0 piksel alt, 0,6em sol, 0,6em sağ
Dolgu ve Otomatik Animasyon
Ardından, kaydırıcının aralığını kompakt olacak şekilde güncelleyin ve kaydırıcı için istediğiniz otomatik animasyon hızını ayarlayın.
- Kenar boşluğu: 0 piksel üst, 0 piksel alt
- Dolgu: 1em üst, 1em alt, %5 sol, %5 sağ
- Otomatik Animasyon: AÇIK
- Otomatik Animasyon Hızı: 3500
Özel CSS
Gelişmiş sekmesinin altına, her kaydırıcı öğesinin stilini güncellemek için aşağıdaki özel CSS'yi ekleyin (Başlık, Düğme ve Oklar)
Slayt Başlığı
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
Bu, Slayt Başlığının daha küçük ekranlarda satır sonu oluşturmamasını sağlayacaktır.
Slayt Düğmesi
position:absolute; bottom: 1em; right: 6%;
Bu, düğmeye mutlak bir konum verir, böylece Başlığın altına ve slaydın sağına güzel bir şekilde oturur ve kaydırıcıyı daha da kompakt hale getirir.
Slayt Okları
font-size: 30px; margin-top: -15px;
Bu, kaydırıcı gezinme oklarını kompakt kaydırıcı boyutuna uyacak şekilde küçültür.
İpucu: Daha Düzgün Slayt Geçişleri İçin Sütuna Aynı Arka Plan Rengini Ekleyin
Şu anda, her slaydın animasyonu, slayt içeriğiyle birlikte arka plan rengini canlandıracak, arka planın bu animasyonu göstermesini önlemek için, geçişin daha yumuşak olması için sütuna aynı arka plan rengini verebiliriz.
Bunu yapmak için kaydırıcının üst sütununun ayarlarını açın ve aşağıdaki arka plan rengini ekleyin:
- Arka Plan Rengi: #000000
Bir Slayda Yazar Arka Plan Resimleri Ekleme
Bir slayt için yazar arka plan resmi eklemek istiyorsanız, bunu her slayda bir arka plan resmi ekleyerek yapabilirsiniz.
Arka plan görüntüsünü slayda eklediğinizde, arka plan görüntüsü, kaydırıcı (slayt değil) ayarları altında bulunan stilleri devralır.
Sonuç
Nihai sonucu kontrol edin.
Bir Başlık Şablonuna Kompakt Referans Kaydırıcısını Ekleme
Modülü Divi Kitaplığına Kaydetme
Genel bir başlığa kompakt referans kaydırıcısını eklemeden önce, modülü Divi Kitaplığına kaydetmemiz gerekir. Bunu, kaydırıcı modülün üzerine gelip “Kütüphaneye Kaydet” simgesine tıklayarak yapabilirsiniz. Ardından düzene bir ad verin ve “Kütüphaneye Kaydet” düğmesini tıklayın.
Bir Başlık Şablonuna Kompakt Referans Modülü Düzeni Ekleme
Özel Başlığı Düzenleyin
Yeni referans kaydırıcı modülü kitaplığa kaydedildikten sonra, onu özel bir başlığa eklemeye hazırız.
Divi > Tema Oluşturucu'ya gidin, ardından şablonun özel başlığını düzenlemek için tıklayın.
Kitaplıktan Kaydedilmiş Referans Kaydırıcı Modül Düzenini Ekle
Başlık düzeni düzenleyicisinde, kompakt referans kaydırıcı modülünü, görüntülenmesini istediğiniz yere eklemek için tıklayın.
Modül Ekle modunda, Kitaplıktan Ekle sekmesini seçin. Daha önce kitaplığa kaydettiğiniz kompakt referans kaydırıcısını bulun ve seçin.
Yüklendikten sonra değişiklikleri kaydedin.
Son sonuç
Ve işte, global bir başlığa eklenen aynı referans kaydırıcısı.
Ve işte yazarın arka plan resimleri olmayan aynı referans kaydırıcısı.
Ve işte mobilde nasıl göründüğü.
Son düşünceler
Kompakt referans kaydırıcısı, hizmetlerinin güvenilirliğini web sitelerinin en görünür yerinde artırmak isteyen herhangi bir web sitesinin başlığına yeni bir ek olabilir. Ziyaretçileri bir referans sayfasına yönlendirmek veya dönüşümleri artırmak için satış sayfası için de kullanabilirsiniz. İnşallah işinize yarar.
Yorumlarda sizden haber bekliyorum.
Şerefe!