Divi ile Yapışkan Bölüm Başlıkları Nasıl Oluşturulur

Sayfalarınızı tasarlama şekliniz, markanızın doğrudan bir yansımasıdır. Bu nedenle, tasarım beyin fırtınanızın bir noktasında, tüm sayfalarda bir kalıp oluşturmaya yardımcı olacak benzersiz tasarım öğelerini bulmak ve web sitenize eklemek isteyebilirsiniz. Web sitenizin kimliğini vurgulamanın benzersiz bir yolu, yapışkan bölüm başlıkları kullanmaktır. Bu yapışkan bölüm başlıkları, ziyaretçilerinizin gezinme davranışlarını tarayıcılarının üst kısmına yapıştırarak takip edecektir. Bu eğitimde, Divi'nin yapışkan seçeneklerini kullanarak nasıl yapışkan bölüm başlıkları oluşturacağınızı göstereceğiz. Yapışkan bölüm başlıkları, ziyaretçileriniz kaydırdıkça daha az vurgulanacak, ancak bulundukları bölümü tanımaları için yeterince görünür olacaktır. 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

Düzeni ÜCRETSİZ İndirin

Ellerinizi ücretsiz düzene koymak için önce aşağıdaki düğmeyi kullanarak bunları 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!

Youtube Kanalımıza Abone Olun

1. Bölüm Tasarımı Oluşturun

Yeni Bölüm Ekle

aralık

Üzerinde çalıştığınız sayfaya yeni bir bölüm ekleyerek başlayın. Bölüm ayarlarını açın ve biraz üst ve alt dolgu uygulayın.

• Üst Dolgu: 200 piksel
• Alt Dolgu: 200px

1. Satır Ekle

Sütun Yapısı

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

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: %100
• Maksimum Genişlik: %100

Sütuna Metin Modülü Ekle

H2 İçeriği Ekle

Şimdi, satırın sütununa bir Metin Modülü ekleyin ve seçtiğiniz bazı H2 içeriğini ekleyin.

H2 Metin Ayarları

Modülün tasarım sekmesine gidin ve H2 metin ayarlarını aşağıdaki gibi değiştirin:

• Başlık 2 Yazı Tipi: Poppins
• Başlık 2 Yazı Ağırlığı: Yarı Kalın
• Başlık 2 Metin Hizalama: Orta
• Başlık 2 Metin Rengi: #000000
• Başlık 2 Metin Boyutu:
  • Masaüstü: 20vw
  • Tablet & Telefon: 28vw

2. Satır Ekle

Sütun Yapısı

Aşağıdaki sütun yapısını kullanarak bir öncekinin hemen altına başka bir satır ekleyin:

boyutlandırma

Satır ayarlarını açın ve boyutlandırma ayarlarını buna göre değiştirin:

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

Sütun 2'ye Metin Modülü Ekle

İçerik Ekle

Ardından, seçtiğiniz bazı açıklayıcı içerikle sütun 2'ye bir ilk Metin Modülü ekleyin.

Metin Ayarları

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

• Metin Yazı Tipi: Poppins
• Metin Rengi: #000000
• Yazı Boyutu:
  • Masaüstü: 2vw
  • tablet: 4vw
  • Telefon: 5vw
• Metin Harf Aralığı: -0.1vw
• Metin Satırı Yüksekliği: 1,6em

boyutlandırma

Boyutlandırma ayarlarını farklı ekran boyutlarında da değiştirin.

• Genişlik:
  • Masaüstü: %70
  • Tablet & Telefon: %90
• Modül Hizalaması: Merkez

Sütun 2'ye Görüntü Modülü Ekle

Fotoğraf yükleniyor

Bir Görüntü Modülü olan bir sonraki modüle geçin. Seçtiğiniz bir resmi yükleyin.

boyutlandırma

Modülün tasarım sekmesine gidin ve görüntü üzerinde tam genişliğe zorlayın.

• Tam Genişliği Zorla: Evet

aralık

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

• Üst Kenar Boşluğu: 100 piksel

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

Kopya Ekle

Sırada bir Düğme Modülümüz var. Seçtiğiniz bir kopyayı ekleyin.

Düğme Ayarları

Modülün düğme ayarlarını buna göre değiştirin:

• Düğme İçin Özel Stiller Kullan: Evet
• Düğme Metin Boyutu:
  • Masaüstü: 1.5vw
  • Tablet: 2.5vw
  • Telefon: 3.5vw
• Düğme Metin Rengi: #ffffff
• Düğme Arka Plan Rengi: #f6223e
• Düğme Kenar Genişliği: 0px
• Düğme Sınır Yarıçapı: 0px

• Düğme Yazı Tipi: Poppins
• Düğme Simgesini Göster: Evet
• Düğme Simge Yerleşimi: Sol
• Yalnızca Düğmenin Üzerine Geldiğinde Simgeyi Göster: Hayır

aralık

Ve farklı ekran boyutlarına bazı özel dolgu değerleri ekleyerek modül ayarlarını tamamlayın.

• Üst Dolgu:
  • Masaüstü ve Tablet: %3
  • Telefon: %5
• Alt Dolgu:
  • Masaüstü ve Tablet: %3
  • Telefon: %5
• Sol Dolgu:
  • Masaüstü: 5vw
  • Tablet: 8vw
  • Telefon: 12vw
• Sağ Dolgu:
  • Masaüstü: 5vw
  • Tablet: 8vw
  • Telefon: 12vw

Sütun 2'ye Metin Modülü Ekle

Madde İşareti Listesi İçeriği Ekle

Bu sütuna ekleyeceğimiz sonraki ve son modül başka bir Metin Modülüdür. Seçtiğiniz liste öğelerini içerik kutusuna ekleyin.

Metin Ayarları

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

• Metin Yazı Tipi: Poppins
• Metin Rengi: #000000
• Yazı Boyutu:
  • Masaüstü: 2vw
  • tablet: 4vw
  • Telefon: 5vw
• Metin Harf Aralığı: -0.1vw
• Metin Satırı Yüksekliği: 1,6em

Sıralı Liste Metni Ayarları

Sıralı liste metin ayarlarında da bazı değişiklikler yapın.

• Sıralı Liste Metin Rengi: #ff2340
• Sıralı Liste Satır Yüksekliği: 1,6em
• Sıralı Liste Stil Türü: üst-roman
• Sıralı Liste Stili Pozisyonu: Dış

İçerik Kutusundaki Öğeleri Tek Tek Listelemek için Siyah Metin Rengi Ekleme

Ardından, içerik kutusuna gidip liste öğelerinin her birine manuel olarak siyah bir metin rengi ekleyerek öğeleri tekrar siyaha çevireceğiz.

boyutlandırma

Ardından, farklı ekran boyutlarında boyutlandırma ayarlarını değiştireceğiz.

• Genişlik:
  • Masaüstü: %70
  • Tablet & Telefon: %90
• Modül Hizalaması: Merkez

aralık

Modülün boşluk ayarlarına da bazı özel kenar boşluğu ve dolgu değerleri uygulayacağız.

• Üst Kenar Boşluğu: 50px
• Sol Dolgu: %5
• Sağ Dolgu: %5

2. Bölüm Başlığına Yapışkan Efekt Uygulayın

Satıra Yapışkan Efekt Ekle

Tasarımımızın temelini oluşturduğumuza göre, bu yazının önizlemesinde gördüğünüz efekti gerçekleştirmenin zamanı geldi. Bunu yapmak için, satır ayarlarını açarak, gelişmiş sekmeye giderek ve aşağıdaki ayarları uygulayarak ilk satırın tamamını yapışkan hale getireceğiz:

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

Satır Z Dizinini Değiştir

Tasarımımızda yapışkan satırın ikinci satırın altında kaldığından emin olmak için, yapışkan satırımıza “1” az indeksi atayacağız. Kaydırırken, yapışkan satırı göreceksiniz ve Metin Modülü ikinci satırın modüllerinin altına iniyor.

• Z İndeksi: 1

Sütun 2 Karışım Modu Ekle (Satır #2)

Ancak, bu yazının önizlemesinde fark edebileceğiniz gibi, yapışkan bölüm başlığı her zaman görünür durumda. Bu efekti elde etmek için ikinci satırımızın ikinci sütununa bir karışım modülü ekleyeceğiz. Bu, yapışkan sıra için düşük bir z indeksi korurken, ikinci sıradaki yapışkan sıra ile modüllerin harmanlanmasına yardımcı olacaktır.

• Karışım Modu: Çarpma

Yapışkan H2 Metin Ayarlarını Değiştir

1. satırdaki Metin Modülümüze de bazı yapışkan stiller uygulayacağız. Yapışkan durumda H2 metin rengini değiştirerek başlayın ve ayrıca özel bir metin gölgesi uygulayın.

• Yapışkan H2 Metin Rengi: #ffffff
• Başlık 2 Metin Gölgesi: İkinci Seçenek (Aşağıdaki Baskı Ekranına Bakınız)
• Başlık 2 Metin Gölge Rengi:
  • Varsayılan: rgba(0,0,0,0)
  • Sabit: rgba(0,0,0,0.08)

Yapışkan Metin Modülü Aralığını Değiştir

Boşluk ayarlarında bir miktar negatif yapışkan sol kenar boşluğu kullanarak modülün konumunu da değiştireceğiz.

• Yapışkan Sol Kenar Boşluğu: -%35

Metin Modülü Geçiş Süresini Artırın

Ve sorunsuz bir geçiş sağlamak için, gelişmiş sekmesinde geçiş süresini artıracağız.

• Geçiş Süresi: 500ms

3. Yeniden Kullanım Bölümü

Klon Bölümü

Artık yapışkan bölüm başlığı da dahil olmak üzere tamamlanmış bir bölümümüz olduğuna göre, tüm bölümü klonlayarak istediğimiz kadar tekrar kullanabiliriz.

Başlık İçeriğini Değiştir

İlk satırdaki başlık içeriğini değiştirdiğinizden emin olun.

Metin Boyutunu Karakter Uzunluğuyla Eşleştir

Yeni H2 başlığınızın kaç karaktere sahip olduğuna bağlı olarak, başlık 2 metin boyutunu ayarlamak isteyebilirsiniz.

Diğer Tüm İçeriği ve Görselleri Değiştirin

Ve elbette, yinelenen bölümdeki diğer tüm içeriği de değiştirmeniz gerekecektir. Bu kadar!

Ö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 yazıda, Divi'nin yapışkan seçenekleriyle nasıl yaratıcı olabileceğinizi gösterdik. Daha spesifik olarak, oluşturduğunuz tasarım boyunca ziyaretçilerinizi takip eden yapışkan bölüm başlıklarının nasıl oluşturulacağını gösterdik. Bu efekt, tasarımınıza ekstra bir boyut ve kesintisiz bir geçiş sağlar. 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.