Divi ile Parşömen Üzerine Şeffaf Başlığınızı Nasıl Yapışkan Yapabilirsiniz?

Web siteniz için genel bir başlık oluşturmaya gelince, ona yaklaşmanın birçok yolu vardır. Daha ince yaklaşımlardan biri şeffaf bir başlıktır. Sayfalarınızın kahraman bölümlerinin üstüne şeffaf başlıklar yerleştirilir, bu da minimal ama net bir yaklaşıma odaklanan güzel tasarımlara yol açabilir. Şeffaf bir başlığa gitmeye karar verdiyseniz ancak kaydırmada yapışkan bir başlığa ihtiyacınız varsa, bu öğreticiyi seveceksiniz. Divi'nin yerleşik yapışkan seçeneklerini kullanarak, kaydırmada şeffaf bir başlıktan farklı tarzdaki bir yapışkan başlığa nasıl geçeceğinizi göstereceğiz. Şeffaf ve yapışkan arasındaki geçiş zahmetsizdir! JSON dosyasını da ücretsiz olarak indirebileceksiniz.

Hadi hadi bakalım.

Ön izleme

Eğiticiye dalmadan önce, farklı ekran boyutlarındaki sonuca hızlıca bir göz atalım.

masaüstü

Mobil

ÜCRETSİZ Global Başlık Şablonunu İndirin

Ücretsiz genel başlık şablonuna el koymak için önce aşağıdaki düğmeyi kullanarak indirmeniz gerekir. İ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.

Dosyaları İndirin

Ü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.

İNDİRMEK

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!

1. Başlık Öğesi Yapısını Yeni Bir Başlık Şablonu İçinde Oluşturma

Yeni Genel Başlık Şablonu Oluşturun

Divi Theme Builder'a giderek başlayın. Orada, yeni bir genel veya özel başlık oluşturmaya başlayın.

Bölüm #1 Ayarlar

Arka plan rengi

Şablon düzenleyicinin içine girdikten sonra bir bölüm göreceksiniz. Bu bölüm, bu gönderinin önizlemesinde fark edebileceğiniz üst başlık çubuğuna ayrılacaktır. Bölümün ayarlarını açın ve siyah bir arka plan rengi ekleyin.

• Arka Plan Rengi: #000000

aralık

Bölümün tasarım sekmesine gidin ve tüm varsayılan üst ve alt dolguyu kaldırın.

• Üst Dolgu: 0px
• Alt Dolgu: 0px

Yeni Satır Ekle

Sütun Yapısı

Aşağıdaki sütun yapısını kullanarak yeni bir satır ekleyerek devam edin:

Sütuna Metin Modülü Ekle

İçerik Ekle

Satırın sütununa bir Metin Modülü ekleyin ve seçtiğiniz bir kopyayı girin.

Metin Ayarları

Modülün tasarım sekmesine gidin ve metin ayarlarını buna göre değiştirin:

• Yazı Tipi: Oswald
• Metin Yazı Tipi Stili: Büyük Harf
• Metin Rengi: #ffffff
• Yazı Boyutu:
  • Masaüstü: 19 piksel
  • tablet: 18 piksel
  • Telefon: 16 piksel
• Metin Hizalama: Merkez

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 tasarım sekmesindeki tüm varsayılan üst ve alt dolguyu kaldırın.

• Üst Dolgu: 0px
• Alt Dolgu: 0px

Yeni Satır Ekle

Sütun Yapısı

Aşağıdaki sütun yapısını kullanarak yeni bir satır ekleyerek devam edin:

Şeffaf Arka Plan Rengi

Satır ayarlarını açın ve satıra tamamen şeffaf bir arka plan rengi uygulayın.

• Arka Plan Rengi: rgba(255,255,255,0)

boyutlandırma

Satırın tasarım sekmesine gidin ve boyutlandırma ayarlarını değiştirin.

• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1
• Genişlik: %100
• Maksimum Genişlik: %100

aralık

Sonra bazı özel sol ve sağ dolgu ekleyin.

• Sol Dolgu: %10
• Sağ Dolgu: %10

Kutu Gölge

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
• Gölge Rengi: rgba(0,0,0,0)

Konum

Satırın sayfa içeriğinin üstünde şeffaf bir arka planla göründüğünden emin olmak için, gelişmiş sekmesinde satırımız için mutlak bir konum kullanacağız.

• Pozisyon: Mutlak
• Konum: Sol Üst

Sütun 2 Görünürlük

Daha küçük ekran boyutlarında daha az karmaşık bir başlık tasarımına sahip olmak için tablet ve telefondaki satırımızın ikinci sütununu da gizliyoruz.

Sütun 1'e Menü Modülü Ekle

Seçim Menüsü

Satır ayarlarımız yerine oturduğuna göre, şimdi sütun 1'deki Menü Modülü ile başlayarak modülleri ekleme zamanı geldi. İstediğiniz bir menüyü seçin.

Logo Yükle

Ardından bir logo yükleyin.

Arka Plan Rengini Kaldır

Modülün arka plan rengini de kaldırın.

Menü Metin Ayarları

Modülün tasarım sekmesine gidin ve menü metin ayarlarını buna göre değiştirin:

• Menü Yazı Tipi: Oswald
• Menü Yazı Tipi Ağırlığı: Kalın
• Menü Yazı Tipi Stili: Büyük Harf
• Menü Metin Rengi: #efefef
• Menü Metin Boyutu: 18px
• Metin Hizalama: Sağ

Açılır Menü Ayarları

Açılır menü ayarlarını da değiştirin.

• Açılır Menü Satır Rengi: rgba(0,0,0,0)
• Mobil Menü Arka Plan Rengi: rgba(0,0,0,0.95)

Simge Ayarları

Ardından, simgeler ayarlarında simge renklerini değiştirin.

• Alışveriş Sepeti Simge Rengi: #ffffff
• Arama Simgesi Rengi: #ffffff
• Hamburger Menü Simge Rengi: #ffffff

Logo Ayarları

Görüntü ters çevirme filtresini değiştirerek logo ayarlarında 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 Yüksekliği: 40px

aralık

Ardından, daha küçük ekran boyutlarına biraz üst ve alt dolgu ekleyeceğiz.

• Üst Dolgu:
  • Tablet ve Telefon: 10px
• Alt Dolgu:
  • Tablet ve Telefon: 10px

2. Sütun'a Düğme Modülü Ekle

Kopya Ekle

2. sütunda ihtiyacımız olan tek modül bir Düğme Modülüdür. Seçtiğiniz bir kopyayı ekleyin.

Düğme Hizalama

Modülün tasarım sekmesine gidin ve düğme hizalamasını değiştirin.

• Düğme Hizalama: Sağ

Düğme Ayarları

Sonraki düğmeyi stilleyin.

• Düğme İçin Özel Stiller Kullan: Evet
• Düğme Metin Boyutu: 16px
• Düğme Metin Rengi: #ffffff
• Düğme Arka Plan Rengi: #ed4441
• Düğme Kenar Rengi: #ed4441

• Düğme Sınır Yarıçapı: 0px
• Düğme Harf Aralığı: 4px
• Düğme Yazı Tipi: Oswald
• Düğme Yazı Ağırlığı: Kalın
• Düğme Yazı Tipi Stili: Büyük Harf
• Düğme Simgesini Göster: Evet
• Düğme Simge Rengi: #1a1a1a

aralık

Ve bazı özel boşluk değerleri ekleyerek modül ayarlarını tamamlayın.

• Üst Kenar Boşluğu: -70px
• Üst Dolgu: 25px
• Alt Dolgu: 25px

2. Özel Yapışkan Efektler Uygulayın

2. Bölümü Yapıştırın

Artık başlığımızın temelini oluşturduğumuza göre, yapışkan efekti uygulama zamanı! Bunu yapmak için ikinci bölümün ayarlarını açarak başlayın ve aşağıdaki yapışkan ayarları gelişmiş sekmeye uygulayın:

• Yapışkan Konum: En Üstte Yapış
• Yapışkan Üst Ofset: 0px
• Alt Yapışkan Limit: Yok
• Çevredeki Yapışkan Öğelerden Ofset: Evet
• Geçiş Varsayılanı ve Yapışkan Stiller: Evet

Yapışkan Satır Arka Plan Rengi

Artık yapışkan seçeneği etkinleştirildiğine göre, bölüm içindeki tüm öğelerde yapışkan tasarım değişiklikleri yapabiliriz. Menümüzün bulunduğu satırı açarak başlayacağız ve beyaz yapışkan bir arka plan rengi uygulayacağız.

• Arka Plan Rengi: #FFFFFF

Yapışkan Satır Aralığı

Ardından, satırın yapışkan boşluk değerlerini değiştireceğiz.

• Üst Dolgu: 0px
• Alt Dolgu: 0px

Yapışkan Sıra Kutusu Gölgesi

Yapışkan durumda da kutu gölge rengini değiştiriyoruz.

• Gölge Rengi: rgba(0,0,0,0.08)

Yapışkan Satır Konumlandırma

Ardından, yapışkan bir durumda satır konumlandırmasını göreli olarak geri getireceğiz.

• pozisyon: akraba
• Ofset Menşei: Sol Üst

Yapışkan Menü Metni Ayarları

Ardından, yapışkan menü metin rengini değiştireceğiz.

• Menü Metin Rengi: #000000

Yapışkan Menü Açılır Ayarları

Menü açılır ayarlarındaki mobil menü arka plan rengiyle birlikte.

• Mobil Menü Arka Plan Rengi: #ffffff

Yapışkan Menü Simge Renkleri

Simge renklerini de yapışkan durumda değiştirin.

• Alışveriş Sepeti Simge Rengi: #000000
• Arama Simgesi Rengi: #000000
• Hamburger Menü Simgesi Rengi: #000000

Yapışkan Logo Filtresi

Ardından, yapışkan durumdaki logo görüntüsünü ters çevirme filtresini kaldırın.

• Görüntü Ters Çevirme: %0

Yapışkan Düğme Aralığı

Yapışkan haldeyken düğmenin negatif üst kenar boşluğunu kaldırarak öğreticiyi tamamlayın.

• Üst Kenar Boşluğu: 0px

Ön izleme

Artık tüm adımların üzerinden geçtik, şimdi farklı ekran boyutlarındaki sonuca son bir göz atalım.

masaüstü

Mobil

Son düşünceler

Bu gönderide, Divi's Theme Builder'ı yeni yapışkan seçeneklerle nasıl birleştireceğinizi gösterdik. Daha spesifik olarak, kaydırmada şeffaf bir başlıktan farklı tarzdaki yapışkan bir başlığa nasıl geçeceğinizi gösterdik. Bu yaklaşım, kaydırma üzerinde güzel bir yapışkan başlık tutarken sayfa tasarımınızı menünüzle birleştirmenize olanak tanır. JSON dosyasını da ücretsiz olarak indirebildiniz! Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümüne yorum bırakmaktan çekinmeyin.

Divi hakkında daha fazla bilgi edinmek ve daha fazla ücretsiz Divi almak istiyorsanız, e-posta bültenimize ve YouTube kanalımıza abone olduğunuzdan emin olun, böylece her zaman bu ücretsiz içeriği bilen ve bu ücretsiz içerikten yararlanan ilk kişilerden biri olursunuz.