Divi ile güzel, şeffaf ve yapışkan bir başlık oluşturmak ister misiniz?
Sizin için global bir başlık oluşturmaya gelince Site Web, ona yaklaşmanın birçok yolu var. Daha incelikli yaklaşımlardan biri şeffaf bir başlıktır.
Şeffaf bir başlık kullanmaya karar verdiyseniz ancak kaydırırken yapışkan olması gerekiyorsa, bu öğreticiyi seveceksiniz. Şeffaf ve yapışkan arasındaki geçiş zahmetsizdir!
Gidelim.
anket
Öğreticiye dalmadan önce, sonuca hızlıca bir göz atalım.
Yeni bir genel başlık şablonu oluşturun
Divi > Tema Oluşturucu'ya gidin.
Bölüm #1 Ayarlar
Arka plan rengi
Şablon düzenleyiciye girdikten sonra bir bölüm göreceksiniz. Bu bölüm, bu makalenin önizlemesinde fark edebileceğiniz üst başlık çubuğuna ayrılacaktır. Bölüm ayarlarını açın ve siyah bir arka plan rengi ekleyin.
- Arkaplan: #000000
aralık
Bölüm Stili sekmesine geçin ve varsayılan olarak tüm İç Kenar Boşluklarını (Üst ve Alt) kaldırın.
- İç Kenar Boşluğu Tepe Noktası: 0px
- Alt İç Kenar Boşluğu: 0px
Yeni bir satır ekle
Sütunun yapısı
Aşağıdaki sütun yapısını kullanarak yeni bir satır ekleyerek devam edin:
Sütuna bir Metin modülü ekleyin
Satır sütununa bir Metin modülü ekleyin ve istediğiniz bir mesajı girin.
Metin ayarları
Modül Stili sekmesine geçin ve metin ayarlarını buna göre değiştirin:
- Yazı Tipi: Oswald
- Metin Kopyalama stili: TT
- Metin rengi Metin: #ffffff
- Metin Metin boyutu:
- Masaüstü: 19 piksel
- tablet: 18 piksel
- Telefon: 16 piksel
- Metin Hizalama: Ortalanmış
2. bölüm ekle
aralık
İlk bölümün hemen altına başka bir normal bölüm ekleyin. Bu bölüm, kaydırma sırasında yapışkan hale gelecek olan şeffaf menümüze ayrılacaktır.
Bölüm ayarlarını açın ve Stil sekmesinde varsayılan olarak tüm iç kenar boşluklarını (Üst ve Alt) kaldırın.
- İç Kenar Boşluğu Tepe Noktası: 0px
- Alt İç Kenar Boşluğu: 0px
Yeni bir satır ekle
Sütunun yapısı
Aşağıdaki sütun yapısını kullanarak yeni bir satır ekleyerek devam edin:
Şeffaf arka plan rengi
Çizgi ayarlarını açın ve çizgiye tamamen şeffaf bir arka plan rengi uygulayın.
- Arka plan: rgba (255,255,255,0)
boyutlandırma
Çizgi Stili sekmesine geçin ve boyutlandırma ayarlarını değiştirin.
- Özel Oluk Genişliğini Kullan: Evet
- Sütun aralığı: 1
- Maksimum genişlik: %100
- Maksimum genişlik: %100
aralık
Ardından özel iç (Sol ve Sağ) kenar boşlukları ekleyin.
- Sol İç Kenar Boşluğu: %10
- İç Marj Kanunu: %10
Gölge kutusu
Ardından, şeffaf bir kutu gölgesi uygulayın. Eğitimin ilerleyen bölümlerinde bu kutu gölgesini farklı bir gölge rengiyle yapışkan bir durumda kullanacağız.
- Kutu Gölge Bulanıklığı Gücü: 50px
- Altyazı Yazı Tipi Rengi: rgba (0,0,0,0)
Pozisyon
Çizginin üstte göründüğünden emin olmak için içindekiler Sayfanın şeffaf arka planıyla, gelişmiş sekmesindeki satırımız için mutlak bir konum kullanacağız.
- Pozisyon: Mutlak
- Konum: Sol üst
Sütun 2 Görünürlük
Ayrıca, daha küçük ekran boyutlarında daha az karmaşık bir başlık tasarımına sahip olmak için satırımızın ikinci sütununu tablet ve telefonda gizleriz.
Menü modülünü sütun 1'ye ekleyin
Bir Menü Seçin
Satır ayarlarımız yerine oturduğuna göre, şimdi sütun 1'deki Menü modülünden başlayarak modülleri eklemenin zamanı geldi. İstediğiniz menüyü seçin.
Logoyu indir
Ardından bir logo yükleyin.
Arka plan rengini kaldır
Ayrıca arka plan rengini modülden kaldırın.
Menü metin ayarları
Modülün Stil sekmesine geçin ve menü metin ayarlarını buna göre değiştirin:
- Yazı Tipi Menüsü: Oswald
- Yumuşak Işık Menüsü: Kalın
- Kopyalama Stili Menüsü: TT
- Menü metin rengi: #efefef
- Menü Metin Boyutu: 18px
- Metin hizalama: sağ
Açılır menü ayarları
Ayrıca açılır menü ayarlarını da değiştirin.
- Açılır satır rengi: rgba(0,0,0,0)
- Mobil menü Arka plan rengi: rgba (0,0,0,0,95)
Simge ayarları
Ardından, simge ayarlarından simge renklerini değiştirin.
- Sepet simgesi rengi: #ffffff
- Arama simgesi rengi: #ffffff
- Hamburger Menü Simge Rengi: #ffffff
Logo ayarları
Ayrıca logo ayarlarında görsel ters çevirme filtresini değiştirerek logomuzun rengini de değiştiriyoruz.
- Görüntü Ters Çevirme: %90
boyutlandırma
Ardından, logomuza maksimum bir yükseklik atayacağız.
- Logo Maksimum genişliği: 40 piksel
aralık
Ardından, küçük ekran boyutlarına Üst ve Alt dolgu ekleyeceğiz.
- En yüksek iç kenar boşluğu:
- Tablet ve telefon: 10px
- Alt iç kenar boşluğu:
- Tablet ve telefon: 10px
Düğme modülünü sütun 2'ye ekleyin
Yazı ekle Düğmeye
2. sütunda ihtiyacımız olan tek modül bir Düğme modülüdür. Seçtiğiniz bir metin ekleyin.
Düğme hizalaması
Modül Stili sekmesine geçin ve düğme hizalamasını değiştirin.
- Düğme hizalama: sağ
Düğme ayarları
Sonraki düğmeyi özelleştirin.
- Düğme için özel stiller kullanın: Evet
- Düğme Metin Boyutu: 16px
- Düğme metin rengi: #ffffff
- Arka plan düğmesi: #ed4441
- Düğme kenarlığı rengi: #ed4441
- Kenar Yarıçapı düğmesi: 0 piksel
- Düğme Harf Aralığı: 4px
- Düğme Yazı Tipi: Oswald
- Yumuşak Işık düğmesi: Kalın metin
- Stili kopyala düğmesi: TT
- Düğme Simgesini Göster: Evet
- Düğme Simge Rengi: #1a1a1a
aralık
Ve özel boşluk değerleri ekleyerek modül ayarlarını tamamlayın.
- Üst kenar boşluğu: -70px
- Üst ve Alt iç kenar boşluğu: 25 piksel
Özel yapışkan efektler uygulayın
2. bölümü yapışkan yap
Artık başlığımızın temelini attığımıza göre, yapışkan efekti uygulama zamanı! Bunu yapmak için ikinci bölümdeki ayarları açarak başlayın ve aşağıdaki yapışkan ayarları gelişmiş sekmeye uygulayın:
- Yapışkan Konum: En Üstte Yapış
- Çubuk Üst Ofset: 0px
- Alt Yapışkan Mimit: Yok
- Çevreleyen Yapışkan Öğelerden Ofset: VAR
- Geçiş Varsayılanı ve Yapışkan Stiller: VAR
Çubuk çizgi arka plan rengi
Artık yapışkan seçeneği etkinleştirildiğine göre, bölümdeki tüm öğelerde yapışkan seçenek değişiklikleri yapabiliriz. Menümüzü içeren satırı açarak ve yapışkan seçeneğe beyaz bir arka plan rengi uygulayarak başlayacağız.
- Arka plan rengi: #FFFFFF
Yapışkan Satır Aralığı
Ardından, satırın yapışkan işlevinin boşluk değerlerini değiştireceğiz.
- İç Kenar Boşluğu Tepe Noktası: 0px
- Alt İç Kenar Boşluğu: 0px
Yapışkan Satır Gölge Kutusu
Yapışkan durumdaki kutu gölgesinin rengini de değiştiriyoruz.
- Altyazı Yazı Tipi Rengi: rgba(0,0,0,0.08)
Yapışkan çizgi konumlandırma
Ardından, yapışkan bir durumda satır konumlandırmasını göreli olarak döndüreceğiz.
- pozisyon: akraba
- Ofset Menşei: sol üst
Yapışkan durum menüsü metin ayarları
Ardından, menü metin rengini yapışkan duruma değiştireceğiz.
- Menü metin rengi: #000000
Yapışkan durumda menü açılır ayarları
Açılır menü ayarlarında mobil menü arka plan rengi ile.
- Mobil Menü, Arka Plan Rengi: #ffffff
Yapışkan durumda menü simgesi renkleri
Ayrıca yapışkan bir durumda simge renklerini değiştirin.
- Sepet simgesi rengi: #000000
- Arama simgesi rengi: #000000
- Hamburger Menü Simgesi Rengi: #000000
Yapışkan durumda logo filtresi
Ardından, yapışkan durumdaki logo görüntüsünden ters çevirme filtresini kaldırın.
- Görüntü ters çevirme: %0
Yapışkan durumda düğme aralığı
Yapışkan durumdayken düğmenin negatif üst kenar boşluğunu kaldırarak öğreticiyi tamamlayın.
- Üst Kenar Boşluğu: 0px
anket
Tüm adımların üzerinden geçtik, şimdi sonuca son bir göz atalım.
DIVI'yı Şimdi İndirin !!!
Sonuç
Bu yazıda, yapıcıyı nasıl birleştireceğinizi gösterdik. temalar Divi'nin yeni yapışkan seçenekleriyle. Spesifik olarak, kaydırma sırasında şeffaf bir başlıktan farklı stildeki yapışkan bir başlığa nasıl geçeceğinizi gösterdik.
Bu yaklaşım, sayfa tasarımınızı menünüzle birleştirmenize olanak tanırken, kaydırma yaparken güzel bir yapışkan üstbilgiyi korur.
Divi hakkında daha fazla bilgi edinmek isterseniz, kataloğumuzu ziyaret etmekten çekinmeyin. Div dersleri. Ayrıca danışabilirsiniz Divi Blog modülü ile Blog sayfası nasıl oluşturulur
Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorumlar bölümüne yorum yapmaktan çekinmeyin.
Ancak, ayrıca 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ş.
...
