Divi ile Scroll Üzerindeki Yapışkan Logonuzu Nasıl Değiştirirsiniz

Divi yapışkan seçenekleri çıktığından beri Divi araç kutularımıza sonsuz etkileşim tasarımı olanakları eklendi. Bir başlığı kaydırmada yapışkan hale getirebilmenin yanı sıra, yapışkan durumdaki öğelerinizin stilini de değiştirebilirsiniz. Bu, başlığınızı yapışkan hale geldiğinde vurgulamanıza ve insanlar sayfalarınızı ve gönderilerinizi okurken başka bir kullanıcı deneyimi oluşturmanıza olanak tanır.

Toplulukta sıkça sorulan sorulardan biri, Divi logosunun yapışkan bir durumda nasıl değiştirileceğidir. Bu eğitimde, size bunu yapmanın hızlı ve kolay bir yolunu göstereceğiz. Genel bir başlık oluşturarak öğreticiye başlayacağız, ardından yapışkan efektleri uygulayacağız ve eğitimin üçüncü bölümünde kaydırma üzerinde yapışkan logonuzu nasıl değiştireceğinizi göstereceğiz. Divi'nin yapışkan seçeneklerine ve genel başlık olanaklarına zaten aşina iseniz, yapışkan logonuzu kaydırmada değiştirmek için gereken birkaç adımı görmek için öğreticinin üçüncü bölümüne atlamaktan çekinmeyin.

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 Tema Oluşturucu'ya giderek başlayın ve yeni bir genel veya özel başlık oluşturun.

Bölüm Ayarları

Arka plan rengi

Şablon düzenleyicinin içine girdikten sonra bir bölüm göreceksiniz. Bu bölümün ayarlarını açın ve bir arka plan rengi uygulayın.

• Arka Plan Rengi: #556de0

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

Kutu Gölge

Bir kutu gölgesi de ekleyin.

• Kutu Gölge Bulanıklığı Gücü: 50px
• Gölge Rengi: rgba(0,0,0,0.15)

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

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

• Özel Oluk Genişliğini Kullan: Evet
• Oluk genişliği: 1
• Sütun Yüksekliklerini Eşitle: Evet
• Genişlik:
  • Masaüstü: %80
  • Tablet ve Telefon: %100
• Maksimum Genişlik: 2580 piksel

aralık

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

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

Sütun 1 Boşluk

Ardından, sütun 1 ayarlarını açın ve biraz üst ve alt dolgu uygulayın.

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

Sütun 2 Arka Plan Rengi

İkinci sütunun ayarlarına geçin ve bir arka plan rengi ekleyin.

• Arka Plan Rengi: #6eba01

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

Seçim Menüsü

Artık genel satır ve sütun ayarları yapıldığına göre, şimdi sütun 1'deki Menü Modülü ile başlayarak modüller ekleme zamanı.

Arka Plan Rengini Kaldır

Modülün varsayılan beyaz arka plan rengini 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: Montserrat
• Menü Yazı Tipi Ağırlığı: Kalın
• Menü Metin Rengi: #ffffff
• Menü Metin Boyutu: 16px
• Metin Hizalama: Sağ

Açılır Menü Ayarları

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

• Açılır Menü Arka Plan Rengi: #556de0
• Açılır Menü Satır Rengi: rgba(0,45,76,0)
• Mobil Menü Arka Plan Rengi: #556de0
• Mobil Menü Metin Rengi: #ffffff

Simge Ayarları

Sonraki simge renklerini değiştirin.

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

aralık

Ve bazı duyarlı boşluk değerleri uygulayın.

• Üst boşluk:
  • Tablet ve Telefon: 10px
• Alt Kenar Boşluğu:
  • Tablet ve Telefon: 10px
• Sol Kenar Boşluğu:
  • Tablet ve Telefon: %5
• Sağ Marj: %5

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 modül hizalamasını değiştirin.

• Düğme Hizalama: Merkez

Düğme Ayarları

Sonraki düğmeyi stilleyin.

• Düğme İçin Özel Stiller Kullan: Evet
• Düğme Metin Boyutu: 17px
• Düğme Metin Rengi: #ffffff
• Düğme Kenar Genişliği: 0px

• Düğme Harf Aralığı: 1px
• Düğme Yazı Tipi: Montserrat
• Düğme Yazı Tipi Stili: Büyük Harf

aralık

Ve bazı duyarlı boşluk değerleri uygulayın.

• Üst boşluk:
  • Masaüstü: 30 piksel
  • Tablet ve Telefon: 20px
• Alt Kenar Boşluğu:
  • Masaüstü: 30 piksel
  • Tablet ve Telefon: 20px

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

Bölümü Yapışkan Yap

Artık tüm unsurları yerine getirdiğimize göre, yapışkan efekti eklemenin ve yapışkan logomuzu da değiştirmenin zamanı geldi. Bölüm ayarlarını tekrar açarak başlayın. Gelişmiş sekmesine gidin ve aşağıdaki sabit konum ayarlarını uygulayın:

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

Yapışkan Bölüm Arka Plan Rengi

Artık bölüm yapışkan hale getirildikten sonra, ebeveyn ve alt öğelere biraz yapışkan stil uygulayabiliriz. Bölümün arka plan ayarlarına giderek başlayın ve yapışkan durumda beyaz bir arka plan rengi uygulayın.

• Arka Plan Rengi: #FFFFFF

Yapışkan Satır Boyutlandırma

Sonraki satırın genişliğini yapışkan bir durumda değiştirin.

• Genişlik: %100

Yapışkan Sütun 1 Aralığı

Ardından, yapışkan bir durumda sütun 1 üst ve alt dolgusunu kaldıracağız.

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

Yapışkan Sütun 2 Arka Plan Rengi

Yapışkan sütun 2'nin arka plan rengini de değiştireceğiz.

• Arka Plan Rengi: #556de0

Yapışkan Menü Metin Rengi

Menü Modülünü açarak devam edin ve yapışkan bir menü metin rengi uygulayın.

• Menü Metin Rengi: #556de0

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

Yapışkan durumda da bazı açılır menü renklerini değiştirin.

• Açılır Menü Arka Plan Rengi: #ffffff
• Mobil Menü Arka Plan Rengi: #ffffff
• Mobil Menü Metin Rengi: #556de0

Yapışkan Menü Simgesi Ayarları

Yapışkan simge renkleri ile birlikte.

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

Yapışkan Menü Aralığı

Ardından, boşluk ayarlarına gidin ve biraz yapışkan sol kenar boşluğu uygulayın.

• Sol Kenar Boşluğu: %5

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

Son olarak, boşluk ayarlarında Düğme Modülünün yapışkan kenar boşluğu değerlerini değiştirin.

• Üst Kenar Boşluğu: 15px
• Alt Kenar Boşluğu: 15px

3. Yapışkan Durumda Logoyu Değiştirin

Her İki Simgeyi Medya Kitaplığına Yükleyin

Geriye sadece iki farklı logomuzu Menü Modülüne eklemek kalıyor. Bir logo statik durumda, diğeri yapışkan durumda uygulanacaktır. Her iki logoyu da medya kitaplığınıza yükleyin.

Statik Logo Seçin

Ardından Menü Modülünü açın ve logo ayarlarında statik logo görüntü dosyasını seçin.

Maksimum Logo Genişliğini ve Yüksekliğini Piksel Olarak Uygula

Modülün tasarım sekmesine gidin ve maksimum logo genişliği ve yüksekliği uygulayın. Bu değerler, statik ve yapışkan logomuzun boyutunu aynı tutmamıza yardımcı olacaktır.

• Logo Maksimum Genişliği: 100 piksel
• Logo Maksimum Yüksekliği: 60px

Yapışkan Logo URL'sini Kopyala

Şimdi medya kitaplığınıza dönün ve yapışkan logonuzun URL'sini kopyalayın.

Yapışkan Durumda Yapışkan URL Ekleme (Menü Logosu Ana Öğesi)

Logoyu yapışkan durumda değiştirmek için Menü Modülünün gelişmiş sekmesine gideceğiz ve Menü Logosu CSS kutusuna ineceğiz. Orada, CSS kutusundaki yapışkan seçenekleri etkinleştireceğiz ve yapışkan logonun URL'sini parantezler arasına alarak bir satır CSS kodu ekleyeceğiz. Bu kadar!

content: url(addlinkhere);

Ö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'nin yapışkan seçeneklerini kullanarak kaydırmada yapışkan logonuzu nasıl değiştireceğinizi gösterdik. Bu yaklaşım, ayrı menüler kullanmak zorunda kalmadan başlığınızda iki farklı logo kullanmanıza olanak tanır. Genel başlığın nasıl oluşturulacağını göstererek başladık, ardından bölümümüzü yapışkan hale getirdik ve yapışkan stilleri değiştirdik. Eğiticinin üçüncü bölümünde kaydırmada yapışkan logonuzu nasıl değiştireceğinizi göstererek öğreticiyi tamamladık. 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.