Divi başlığı için kompakt bir referans kaydırıcısı eklemek ister misiniz?
Sitenize referanslar eklemek, işletmeniz (veya markanız) için güvenilirlik oluşturmanın ve kullanıcılar arasında güven oluşturmanın etkili bir yoludur. ziyaretçi.
Bir referans kaydırıcısı, referansları 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 ettiğinde gördüğü ilk şeylerden biri olur. web sitesi.
Bu öğreticide, kısa referansları sayfanızın başlığında sergilemek için kompakt bir referans kaydırıcısının nasıl oluşturulacağını göstereceğiz. Site Web.
Bunu yapmak için Divi Slider Modülünü eğlenceli ve benzersiz bir şekilde değiştireceğiz.
Hadi başlayalım!
Ancak kılavuzumuzu keşfetmeden önce Divi, Dünyanın En İyi WordPress Teması ve Kullanımı En Kolay
anket
İşte Divi's 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üğü.
Divi Builder ile yeni bir sayfa oluşturun
Başlamak için aşağıdakileri yapmanız gerekir:
WordPress kontrol panelinden şuraya gidin: Sayfalar> Yeni Ekle yeni bir sayfa oluşturmak için.
Size mantıklı gelen bir başlık verin ve tıklayın Divi Builder'ı kullanın
Ardından İnşaata Başla (Sıfırdan Oluşturun)
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 Kaydırıcı Modülü Ekle
Başlamak için bölüme tek sütunlu bir satır ekleyin.
Ardından satıra bir Slider modülü ekleyin.
Slaytı düzenle
Kaydırıcı ayarları altında, sekmenin altındaki varsayılan ikinci slaydı kaldırın içerik, ardından kalan slaydın ayarlarını değiştirmek için tıklayın.
Slayt içeriği
Sekmenin altında içerik slayt ayarlarından aşağıdakileri güncelleyin:
- Başlık: "Donec soicitudin molestie malesuada. Vivamus suscipit işkenceci eget.
- Düğme: Tümünü Oku
- Gövde: — Tatiana Gagelman
Tamamlandığında, slayt ayarlarını kaydedin.
Ayrıca okuyun: Divi: Arka Plan Maskesi Ayarları ve Desen Dönüştürme Seçenekleri Nasıl Kullanılır
Kaydırıcı ayarlarını güncelle
Slaytı çoğaltın ve kontrolleri gizleyin
İlk slaydı güncelledikten sonra içindekiler, bir veya daha fazla ek slayt oluşturmak için bu slaydı çoğaltın.
Daha sonra seçenek grubu altında Elements, aşağıdakileri güncelleyerek kaydırıcı denetimlerini gizleyin:
- Kontrolü Göster: HAYIR
Tüm slaytların arka planını güncelleyin
Ardından, tüm slaytlar için kullanılacak bir arka plan ekleyeceğiz.
Arka planı eklemek için aşağıdakileri güncelleyin:
- Arka Plan Gradyanı:
- Gradyan Durakları %0: #000000
- Gradyan %100 Durur: #000000
- Arka plan görüntüsü :
- Boyut: Sığdır
- Konum: Orta Sol
- Karışım: Parlaklık
Kaydırıcı ayarları
Sekmenin altında Dizayn, aşağıdakileri güncelleyin:
kapak
- 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 Seviyesi: H4
- Yazı Tipi: Josefin Sans
- Yazı Tipi Ağırlığı: Orta
- Metin Hizalama: sol
- Metin Boyutu: 16px(Masaüstü ve Tablet), 14px(Telefon)
- Satır Yüksekliği: 1,5em
Gövde metni
- Vücut :
- Yazı Tipi: Josefin Sans
- Metin Hizalama: sol
- Metin Rengi: #aaaaaa
- Harf Aralığı: 0,05em
Bouton
- Düğme İçin Özel Boyut Kullan: EVET
- Buton :
- Metin Boyutu: 1em
- Metin Rengi: Varsayılan (Masaüstü), #000 (Vurgulu)
- Arka Plan Rengi (Masaüstü): rgba(255,255,255,0.19)
- Arka Plan Rengi (Vurgulu): #ffffff
- Kenarlık Genişliği: 0 piksel
- Harf Aralığı: 0,05em
- Yazı Tipi: Josefin Sans
- Kenar Boşluğu: 0px(Üst ve Alt)
- Dolgu: 0px(Üst ve Alt), 0,6em(Sol ve Sağ)
Otomatik doldurma ve animasyon
Ardından, kaydırıcı aralığını kompakt olacak şekilde güncelleyin ve istenen otomatik animasyon hızını ayarlayın.
- Kenar Boşluğu: 0px(Üst ve Alt)
- Dolgu: 1em(Üst ve Alt), %5(Sol ve Sağ)
- Otomatik Animasyon: AÇIK
- Otomatik Animasyon Hızı: 3500
Özel CSS
Sekmenin altında gelişmiş, her kaydırıcı öğesinin (başlık, düğme ve oklar) stilini güncellemek için aşağıdaki özel CSS'yi ekleyin
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 çok altına ve slaydın sağına oturur ve kaydırıcıyı daha da kompakt hale getirir.
Okları sürükleyin
font-size: 30px;
margin-top: -15px;Kaydırıcının kompakt boyutuna uyum sağlamak için kaydırıcı gezinme oklarını küçültür.
İpucu: Daha yumuşak slayt geçişleri için sütuna aynı arka plan rengini ekleyin
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: #000000
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 ekledikten sonra, arka plan görüntüsü, kaydırıcı (slayt değil) ayarları altında bulunan stilleri devralır.
Sonuç
Son sonucu kontrol edin.
Bir başlık şablonuna kompakt referans kaydırıcısını ekleme
Modülü Divi kitaplığına kaydedin
Genel bir başlığa kompakt referans kaydırıcısını ekleyebilmemiz için önce modülü Divi kitaplığına kaydetmemiz gerekir.
Bunu, Slider modülünün üzerine gelip " Kütüphaneye ekle". Ardından düzene bir ad verin ve düğmesine tıklayın " Kitaplığa Kaydet".
Bir başlık şablonuna kompakt referans modülü düzeni eklendi
Özel Başlığı Düzenle
Yeni referans kaydırıcı modülü kitaplığa kaydedildikten sonra, onu özel bir başlığa eklemeye hazırız.
Erişim Divi > Tema Oluşturucu, ardından değiştirmenize izin veren simgeye tıklayın " Özel başlık".
Kaydedilmiş referans kaydırıcı modülünü kitaplıktan ekle
Başlık düzeni düzenleyicisinde, kompakt referans kaydırıcı modülünü görünmesini istediğiniz yere eklemek için tıklayın.
modda "InsertModülü"sekmeyi seçin “Kitaplıktan Ekle”. Daha önce kitaplığa kaydettiğiniz kompakt referans kaydırıcısını bulun ve seçin.
Yüklendikten sonra değişiklikleri kaydedin.
Ayrıca bakınız: Divi: Fullwidth Header modülü tam ekranda nasıl görüntülenir?
Nihai sonuç
Aşağıda, genel bir başlığa eklenen referans kaydırıcısı bulunmaktadır.
Burada, yazarın arka plan resimleri olmayan referans kaydırıcısına sahibiz.
Ve işte mobilde nasıl göründüğü.
DIVI'yı şimdi indirin!!!
Sonuç
Kompakt referans kaydırıcısı herhangi bir şeyin başlığına yeni bir katkı olabilir Site Web Hizmetlerinin güvenilirliğini web sitesinde en görünür yerde artırmaya çalışmaktadır.
Yönlendirmek için de kullanabilirsiniz ziyaretçi dönüşümleri artırmak için bir referans sayfasına veya satış sayfasına. Bunun sonraki Divi projelerinizde işinize yarayacağını umuyoruz.
Herhangi bir endişeniz veya öneriniz varsa, bizi yorumlar bölümü bunu tartışmak için.
Ayrıca danışabilirsiniz kaynaklarımızİnternet siteleri oluşturma projelerinizi yürütmek için daha fazla elemana ihtiyacınız varsa.
Rehberimize de danışmaktan çekinmeyin. WordPress blog oluşturma ya da Divi: Tüm zamanların en iyi WordPress teması.
Ama bu arada, bu yazıyı farklı sosyal ağlarda paylaş.
...
