Divi Fullwidth Header modülünü tam ekran görüntülemek istiyor musunuz?
Tam ekran başlıkları, ekranın boyutundan bağımsız olarak ekranın tamamını kaplar. ziyaretçi. Bu, kullanıcıların dikkatini çekmek için harikadır. Neyse ki modülle tam ekran başlık oluşturmak çok kolay Tam Genişlik Üstbilgisi Divi'nin.
Bu makalede, tam genişlikte bir başlığın nasıl oluşturulacağını, özelleştirileceğini ve tam ekranda nasıl görüntüleneceğini göstereceğiz. Sayfalarınız için herhangi bir tam ekran kahraman bölümü oluşturmak için bu yaklaşımı kullanabilirsiniz.
Başlayalım.
anket
Bu eğitimde ne tasarlayacağımızın bir önizlemesini görelim.
ofis
tablet
telefon
Divi Tam Genişlik Başlığınızı Tam Ekran Başlığı Nasıl Yapabilirsiniz?
Üzerinde çalıştığınız sayfaya tam genişlikte bir bölüm ekleyerek başlayın.
Sonra bir ekleyin Tam Genişlik Başlık modülü tam genişlik bölümüne.
Modül ayarları açılır. Sekme seç Dizayn. adlı seçeneği etkinleştirin Tam Ekran Yap
Artık tam ekran bir başlığımız var. Bu kadar basit.
Kaydırma simgesini etkinleştir
Ayrıca kullanıcıya aşağı kaydırmasını söyleyen bir düğme de ekleyebiliriz. Ancak bunu etkinleştirmemiz gerekiyor. Bu düğme her zaman tam ekran seçeneğinde görünür. Tam ekran başlığı seçeneği her zaman ekranın yüksekliğiyle eşleşir. ziyaretçi.
- Aşağı Kaydır Düğmesini Göster: EVET
Divi Tam Genişlik Tam Ekran Başlık Örneği
Tam Genişlik Başlık Modülü Parametreleri
Fullwidth Header modülü ayarlarının her bölümü için adımlar aşağıda verilmiştir.
Ayrıca okuyun: Divi: Arka plan maskeleri ve ayırıcılar nasıl birleştirilir
Metinleri
Tüm önce metni ekleyin tam genişlikte başlıkta görünecek. Buna başlık, alt başlık, içindekiler ve düğme metni.
- Başlık: Oluştur blogunuzun Divi ile
- Altyazı: Blogpascher
- Burron #1: Özet
- Düğme #2: Planla
- Gövde: (varsayılan)
Görüntüler
ebeveyn, resim Ekle. Bu, metni sola kaydırarak tam genişlikte başlığın sağ tarafında görüntülenir.
- Başlık Resmi: seçiminiz
arka plân
Kaydırın Olayın Arka Planı ve rengi #f6f5ee olarak ayarlayın.
- Arka Plan Rengi: #f6f5ee
hüküm
Ardından, Tasarım sekmesine gidin.
- Tam Ekran Yap: EVET
Aşağı kaydır simgesi
- Aşağı Kaydır Düğmesini Göster: EVET
- Aşağı Kaydır Simge Rengi: #000000 (Masaüstü ve Tablet), #ffffff (Telefon)
- Aşağı Kaydır Simge Boyutu: 70px (Masaüstü), 60px (Tablet), 50px (Telefon)
Başlık metni
Daha sonra ayarlayacağız başlık metni.
- Başlık Seviyesi: H1
- Yazı Tipi: Inter
- Yazı Tipi Ağırlığı: Kalın
- Metin Hizalama: Merkez
- Metin Rengi: #000000
- Başlık Metin Boyutu: 75px (Masaüstü), 40px (Tablet), 24px (Telefon)
- Başlık Satırı Yüksekliği: 1.2em
Açıklama metni
Ardından aşağı kaydırın Gövde metni.
- Yazı Tipi: Açık Sans
- Hizalama: Sol
- Renk: #000000
- Metin Boyutu: 16px (Masaüstü), 15px (Tablet), 14px (Telefon)
- Çizgi Yüksekliği: 1.8em
altyazı
Ardından aşağı kaydırın Altyazı Metni.
- Yazı Tipi: Inter
- Yazı Ağırlığı: Kalın
- stil: TT
- Hizalama: Merkez
- Renk: #ff5a17
- Boyut: 14 piksel
- Harf Aralığı: 1px
- Çizgi Yüksekliği: 1.8em
Buton 1
Ardından aşağı kaydırın Düğme Bir.
- Düğme İçin Özel Stilleri Kullan: EVET
- Metin Boyutu: 20px (Masaüstü), 18px (Tablet), 16px (Telefon)
- Metin Rengi: #000000
- Arka Plan Rengi: #ffffff
- Kenar Genişliği: 0px
- Sınır Yarıçapı: 0px
- Yazı Tipi: Inter
- Yazı Ağırlığı: Kalın
- Simge: seçiminiz
- Simge Rengi: #000000
- Yerleşim: Sağ
- Yalnızca Birinci Düğmenin Üzerine Geldiğinde Simgeyi Göster: HAYIR
Son olarak, seçeneklere ilerleyin Düğme Bir Dolgu.
- Dolgu malzemesi:
- Masaüstü: 20px (Üst ve Alt), 40px (Sol ve Sağ)
- Tablet: 16px (Üst ve Alt), 40px (Sol ve Sağ)
- Telefon: 12px (Üst ve Alt), 40px (Sol ve Sağ)
Buton 2
Son olarak, aşağı kaydırın Düğme İki.
- İkinci Düğme İçin Özel Stilleri Kullan: Evet
- Metin Boyutu: 20px(Masaüstü), 18px(Tablet), 16px(Telefon)
- Metin Rengi: #ffffff
- Arka Plan Rengi: #ff5a17
- Kenar Genişliği: 0px
- Sınır Yarıçapı: 0px
- Yazı Tipi: Inter
- Yazı Ağırlığı: Kalın
Favori simgenizi seçin.
- Simge: seçiminiz
- Simge Rengi: #000000
- Yerleşim: sol
- Yalnızca İkinci Düğmenin Üzerine Geldiğinde Simgeyi Göster: HAYIR
Son olarak, seçeneklere ilerleyin Düğme İki Dolgu.
- Dolgu malzemesi:
- Masaüstü: 20px (Üst ve Alt), 40px (Sol ve Sağ)
- Tablet: 16px (Üst ve Alt), 40px (Sol ve Sağ)
- Telefon: 12px (Üst ve Alt), 40px (Sol ve Sağ)
Nihai sonuçlar
Tam genişlikteki başlığımız masaüstü bilgisayarlarda, tabletlerde ve telefonlarda böyle görünür.
Şunlara da başvurabilirsiniz: Divi: Etkileşimli içerik oluşturmak için gölge ve vurgu efektleri nasıl kullanılır?
ofis
tablet
telefon
DIVI'yı şimdi indirin!!!
Sonuç
Divi Fullwidth Header modülünüzle nasıl Fullwidth Header oluşturacağınıza bakışımız.
İşlem basittir ve herhangi bir cihazda harika görünür. Düğme ekleme Aşağı kaydır kullanıcılara kaydırma yapabileceklerini söyleyen harika bir görseldir.
Tam ekran başlık tasarlamak, Kahraman bölümü tasarlamaya benzer. Birkaç basit yönergeyi takip etmek, Divi'nin Fullwidth Header modülü ile harika tam ekran başlıklar oluşturmanıza yardımcı olabilir.
Bu eğitimin bir sonraki Divi projeleriniz için size ilham vereceğini 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, 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ş.
...
