Divi'nin Yapışkan Seçenekleriyle Yapışkan Bir Başlık Nasıl Oluşturulur

Bir web sitesi kurarken Divi Theme Builder'ı kullanma şeklimiz iş akışımızı hızlandırdı ve her şeyi kolaylaştırdı. Divi Theme Builder çıktığından beri ilk günden itibaren özelleştirilmiş başlıklar oluşturabilmiş olsak da, sürekli olarak talep edilen bir şey var, o da ek kod kullanmadan yapışkan bir başlık oluşturabilmek. Divi'nin yeni yapışkan seçenekleriyle, yapışkan bir başlık oluşturmak her zamankinden daha kolay hale geldi. Divi'nin sağladığı yapışkan ayarlar, herhangi bir tasarım öğesini yapışkan hale getirmenize ve yapışkan bir duruma özel stiller atamanıza zahmetsizce yardımcı olur, bu da sonsuz tasarım ve kullanıcı deneyimi olanaklarıyla sonuçlanır.

Bu öğreticide, aşağıdakileri içeren bir yapışkan üstbilgiyi nasıl oluşturacağınızı göstereceğiz:

• Oluşturduğumuz başlıkta bir üst başlık çubuğu + bir menü çubuğu var
• Menü çubuğunun bulunduğu bölümü, yanından geçtiğinizde yapışkan hale getiriyoruz, en üste döndüğünüz anda başlık çubuğu tekrar beliriyor.
• Bölüm yapışkan hale geldiğinde yapışkan bölümün (ve öğelerinin) tasarım stillerini değiştiriyoruz

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.

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 gidin ve yeni bir genel veya özel başlık oluşturmaya başlayın.

Bölüm #1 Ayarlar

Degrade Arka Plan

Şablon düzenleyiciye girdikten sonra, başlığımızın eleman yapısını oluşturarak başlayacağız. Bu öğreticinin ikinci bölümünde, yapışkan başlık tasarımımızı tamamlamak için farklı yapışkan ayarları uygulamaya odaklanacağız. Şablon düzenleyicinin içinde bir bölüm göreceksiniz. Bu bölümü açın ve bir degrade arka planı uygulayın.

• Renk 1: #ffba60
• Renk 2: #ffd6a0
• Gradyan Yönü: 90deg
• Başlangıç ​​Konumu: %50
• Bitiş Konumu: %50

aralık

Sonraki 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ı

Üst başlık çubuğumuzu oluşturmak için aşağıdaki sütun yapısını kullanarak bölümümüze yeni bir satır ekleyeceğiz:

boyutlandırma

Henüz herhangi bir modül eklemeden satır ayarlarını açın ve boyutlandırma ayarlarını aşağıdaki gibi değiştirin:

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

aralık

Bazı özel üst ve alt dolguları da ekleyin.

• Üst Dolgu: 15px
• Alt Dolgu: 15px

Ana Eleman CSS

Sütunların daha küçük ekran boyutlarında yan yana kalmasını sağlamak için, gelişmiş sekmesinde satırın ana öğesine bir satır CSS kodu ekleyeceğiz.

display: flex;

Sosyal Medya Takip Modülünü Sütun 1'e Ekleyin

Seçtiğiniz Sosyal Ağları Ekleyin

1. sütundaki Sosyal Medya Takip Modülü ile başlayarak modül ekleme zamanı. Seçtiğiniz sosyal ağları ilgili bağlantılarıyla birlikte ekleyin.

Her Sosyal Ağın Arka Plan Rengini Kaldırın

Sosyal ağın arka plan renklerinin her birini tek tek kaldırarak devam edin.

Simge Ayarları

Ardından, genel modül ayarlarına geri dönün ve tasarım sekmesindeki simge rengini değiştirin.

• Simge Rengi: #26333a

aralık

Biraz üst kenar boşluğu da ekleyin.

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

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.

Link ekle

Bir sonraki bağlantı ekleyin.

Düğme Hizalama

Ardından tasarım sekmesine geçin ve düğme hizalamasını değiştirin.

• Düğme Hizalama: Sağ

Düğme Ayarları

Düğmeyi de şekillendiriyoruz.

• Düğme İçin Özel Stiller Kullan: Evet
• Düğme Metin Boyutu: 14px
• Düğme Metin Rengi: #26333a
• Düğme Kenar Genişliği: 2px
• Düğme Kenar Rengi: #26333a
• Düğme Sınır Yarıçapı: 0px

• Düğme Harf Aralığı: 4px
• Düğme Yazı Ağırlığı: Kalın
• Düğme Yazı Tipi Stili: Büyük Harf
• Düğmeyi Göster: Evet

aralık

Ve boşluk ayarlarına biraz üst ve alt dolgu ekleyerek modül ayarlarını tamamlayacağız.

• Üst Dolgu: 10px
• Alt Dolgu: 10px

2. Bölüm Ekle

Degrade Arka Plan

Bir öncekinin hemen altına başka bir normal bölüm ekleyin. Bu bölüm menümüze ayrılacak ve bu öğreticinin ikinci bölümünde yapışkan hale getirilecek. Bölümü ekledikten sonra bir degrade arka planı uygulayın.

• Renk 1: #ffffff
• Renk 2: #f7f7f7
• Gradyan Türü: Doğrusal
• Gradyan Yönü: 90deg
• Başlangıç ​​Konumu: %25
• Bitiş Konumu: %25

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 bölüme yeni bir satır ekleyerek devam edin:

boyutlandırma

Satırın tasarım sekmesine gidin ve boyutlandırma ayarlarını aşağıdaki gibi değiştirin:

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

aralık

Sonraki tüm varsayılan üst ve alt dolguyu kaldırın.

• Üst Dolgu: 10px
• Alt Dolgu: 10px

Sütuna Menü Modülü Ekle

Seçim Menüsü

Ardından, satırın sütununa bir Menü Modülü ekleyin ve istediğiniz bir dinamik menüyü seçin.

Logo Yükle

Ardından bir logo yükleyin.

Arka Plan Rengini Kaldır

Ardından, modülün varsayılan beyaz arka plan rengini kaldırın.

Menü Metin Ayarları

Tasarım sekmesine geçin ve menü metin ayarlarını da şekillendirin.

• Menü Yazı Tipi Ağırlığı: Kalın
• Menü Metin Rengi: #002d4c
• Menü Metin Boyutu: 15px
• Menü Harf Aralığı: 4px
• Metin Hizalama: Sağ

Açılır Menü Metin Ayarları

Ardından, açılır menü ayarlarında bazı değişiklikler yapın.

• Açılır Menü Arka Plan Rengi: #ffffff
• Açılır Menü Satır Rengi: #002d4c

Simge Ayarları

Simge ayarlarıyla birlikte.

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

boyutlandırma

Ve boyutlandırma ayarlarına maksimum logo yüksekliği ekleyerek modül ayarlarını tamamlayın.

• Logo Maksimum Yüksekliği: 60px

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

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

Başlığımızın eleman yapısını oluşturduğumuza göre, ikinci bölümü yapışkan hale getirmenin ve tasarım stilini ve elemanlarını yapışkan bir durumda değiştirmenin zamanı geldi. İkinci bölümün ayarlarını açın ve gelişmiş sekmeye geçin. Orada, kaydırma efektleri ayarlarına gidin ve aşağıdaki yapışkan seçenekleri 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 Durumda Bölümün Gradyan Arka Planını Değiştirin

Artık bölümümüz yapışkan hale geldiğine göre bölüm, satır ve modül ayarlarımızda ek bir seçenek belirecek; yapışkan seçenek. Bu simgeye tıkladığınızda, yapışkan durumdayken seçtiğiniz öğe için alternatif bir stil oluşturabileceksiniz. Kaydırmadaki yapışkan başlığımızın görünümünü ve verdiği hissi özelleştirmek için bu yapışkan tasarım ayarlarından birkaçını birleştireceğiz. İkinci bölümün arka plan ayarlarına giderek başlayın ve aşağıdaki yapışkan degrade arka planını uygulayın:

• Renk 1: #26333a
• Renk 2: #1e272f

Yapışkan Durumda Streç Satır

Ardından, Menü Modülünü içeren satırı açacağız ve yapışkan durumda genişliği değiştireceğiz.

• Genişlik: %95

Yapışkan Durumda Satır Doldurmasını Kaldır

Sıramızın yapışkan üst ve alt dolgusunu da kaldırıyoruz.

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

Yapışkan Durumda Menü Metin Rengini Değiştir

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

• Menü Metin Rengi: #ffbd68

Yapışkan Durumda Menü Simge Renklerini Değiştir

Simge renkleri ile birlikte.

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

Yapışkan Durumda Logo Yüksekliğini Kaldır

Ve son olarak, yapışkan bir durumda logo maksimum yüksekliğini sıfıra değiştireceğiz. Bu, bölümün yapışkan ayarları etkinleştirildiğinde logoyu başlığımızdan tamamen kaldıracaktır. Bu kadar! Başlık tasarımınızı tamamladıktan ve web sitenizde önizlemesini yaptıktan sonra tüm Divi Theme Builder değişikliklerini kaydettiğinizden emin olun.

• Logo Maksimum Yüksekliği: 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 ve yapışkan seçenekleri kullanarak nasıl yapışkan bir başlık oluşturacağınızı gösterdik. Menümüzü içeren bölüm yapışkan hale gelir gelmez, özel stiller de uyguluyoruz. Bu seçenekler, oluşturduğunuz kullanıcı deneyimini ve tasarımı geliştirmek için size sayısız olanak sağlayan yeni Divi yapışkan seçenekleriyle mümkün kılınmıştır. Global başlık şablonunu 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.