Divi'nin Yapışkan Seçeneklerini Kullanarak Hareketsiz Kaydırma Stilleri Nasıl Değiştirilir

Yeni bir web sitesi oluştururken temiz bir tasarım stili için gidiyorsanız, büyük olasılıkla web sitenize ekstra bir boyut eklemenin bir yolunu bulmak isteyeceksiniz. Bu eğitim tamamen bununla ilgili olacak. Yapışkan stilleri hareket etmeden değiştirmek için Divi'nin yapışkan seçeneklerini nasıl kullanacağınızı göstereceğiz. Bu, özellikle, ziyaretçiler sayfanızın belirli bir bölümünü geçer geçmez, o bölümün stillerinin değişeceği, ancak öğelerin yerinde kalacağı anlamına gelir. Bu efekt türü tamamen kullanıcı davranışına odaklanmıştır. Yapışkan stillerin değişimi, yalnızca insanlar onu geçtiğinde gerçekleşir ve bu da güzel bir sonuç verir. Bu eğitimde, oraya nasıl gideceğinizi adım adım göstereceğiz. Yaklaşımı öğrendikten sonra, inşa ettiğiniz her türlü tasarımda kullanabileceksiniz! 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 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. Eleman Yapısı Oluşturun

Yeni Bölüm Ekle

görünürlük

Üzerinde çalıştığınız sayfaya yeni bir bölüm ekleyerek başlayın. Bölüm ayarlarını açın ve gelişmiş sekmesinde taşmaları gizleyin. Bu, yatay kaydırma çubuğunun görünmemesini sağlamaya yardımcı olacaktır.

• Yatay Taşma: Gizli
• Dikey Taşma: Gizli

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

Herhangi bir modül eklemeden 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
• Sütun Yüksekliklerini Eşitle: Evet
• Genişlik: %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 Ayarları

aralık

Ardından, sütun 1 ayarlarını açın ve farklı ekran boyutlarına bazı özel dolgu değerleri uygulayın.

• Üst Dolgu:
  • Masaüstü: 200 piksel
  • tablet: 100 piksel
  • Telefon: 80 piksel
• Alt Dolgu:
  • Masaüstü: 200 piksel
  • tablet: 100 piksel
  • Telefon: 80 piksel

Z İndeksi

Bu sütunun z indeksini de artırın. Öğreticinin ilerleyen bölümlerinde, 1. ve 2. sütun arasında yatay bir örtüşme oluşturacağız. 1. sütun modüllerinin 2. sütun modüllerinin üzerinde kalmasını sağlamak için z dizinini artırıyoruz.

• Z İndeksi: 11

Sütun 2 Ayarları

Arka plan rengi

Ardından, 2. sütuna bir arka plan rengi ekleyeceğiz.

• Arka Plan Rengi: #f9f9f9

aralık

Farklı ekran boyutlarında da bazı özel dolgu değerleri kullanacağız.

• Üst Dolgu:
  • Masaüstü: 200 piksel
  • Tablet: 150 piksel
  • Telefon: 100 piksel
• Alt Dolgu:
  • Masaüstü: 200 piksel
  • Tablet: 150 piksel
  • Telefon: 100 piksel

Sütun 3 Ayarları

aralık

Son olarak, sütun 3'e de bazı özel dolgu değerleri ekleyeceğiz.

• Üst Dolgu:
  • Masaüstü: 200 piksel
  • tablet: 100 piksel
  • Telefon: 50 piksel
• Alt Dolgu:
  • Masaüstü: 200 piksel
  • tablet: 100 piksel
  • Telefon: 50 piksel
• Sol Dolgu: %8
• Sağ Dolgu: %8

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

Kopya Ekle

Sütun 1'deki Metin Modülü ile başlayarak modül ekleme zamanı. İçerik kutusuna bir sayı ekleyin.

Arka plan rengi

Sonraki arka plan rengini değiştirin.

• Arka Plan Rengi: #efefef

Metin Ayarları

Tasarım sekmesine gidin ve metin ayarlarını buna göre değiştirin:

• Metin Yazı Tipi: Montserrat
• Metin Rengi: #ffffff
• Metin Boyutu: 100px
• Metin Satırı Yüksekliği: 1em
• Metin Hizalama: Merkez

boyutlandırma

Sonraki genişliği değiştirin.

• Genişlik: 150 piksel

aralık

Ardından, bazı özel üst ve alt dolgu ekleyin.

• Üst Dolgu: 20px
• Alt Dolgu: 20px

Konum

Modülü de yeniden konumlandırın.

• Pozisyon: Mutlak
• Konum: Sağ Alt
• Yatay Ofset: -5%

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

H3 ve H4 Kopyalama Ekle

İkinci sütuna geçin. Orada, bazı H3 ve H4 kopyaları olan bir Metin Modülü ekleyeceğiz.

Metin Ayarları

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

• Metin Hizalama: Merkez
• Metin Rengi: Koyu

H3 Metin Ayarları

Ardından, H3 metin ayarlarını değiştirin.

• Başlık 3 Yazı Tipi: Playfair Gösterimi
• Başlık 3 Metin Hizalama: Merkez
• Başlık 3 Metin Boyutu:
  • Masaüstü: 90 piksel
  • Tablet: 70 piksel
  • Telefon: 60 piksel

H4 Metin Ayarları

H4 metnine de stil verin.

• Başlık 4 Yazı Tipi: Montserrat
• Başlık 4 Yazı Tipi Ağırlığı: Hafif

boyutlandırma

Ardından, boyutlandırma ayarlarına gidin ve “%100” genişlik uygulayın. Bu, modülün yeniden konumlandırılması olan bir sonraki adımda yardımcı olacaktır.

• Genişlik: %100

Konum

Gelişmiş sekmesine giderek ve konum ayarlarını aşağıdaki gibi değiştirerek modül ayarlarını tamamlayın:

• Pozisyon: Mutlak
• Konum: Sol Alt
• Dikey Ofset: 20px

Sütun 3'e Metin Modülü Ekle

H5 ve Paragraf İçeriği Ekle

Üçüncü sütuna geçin. Seçtiğiniz bazı H5 ve paragraf içeriğine sahip bir Metin Modülü ekleyin.

Metin Ayarları

Modülün tasarım sekmesine gidin ve metin ayarlarından yazı tipini değiştirin.

• Metin Yazı Tipi: Montserrat

H5 Metin Ayarları

H5 metnine de stil verin.

• Başlık 5 Yazı Tipi: Montserrat
• Başlık 5 Yazı Ağırlığı: Kalın
• Başlık 5 Metin Boyutu:
  • Masaüstü ve Tablet: 23 piksel
  • Telefon: 18 piksel

2. Efekt Yaratmak İçin Temel Değişiklikler

Bölüm

Bölüm Dolgusunu Kaldır

Tasarımımızın temelini oluşturduğumuza göre, bu yazının önizlemesinde görebileceğiniz özel yapışkan stil efektini oluşturmaya başlayabiliriz. Bu efekti elde etmenin ilk adımı, bölümünüzün üst ve alt dolgu değerlerinin sıfır olduğundan emin olmaktır. Bunu yapmak, hem bölümün hem de satırın aynı noktada başlayıp bitmesini sağlamamıza yardımcı olacaktır. Bu, sonraki adımlarda satırımıza yapışkan konumu eklediğimizde önemlidir. Limiti bölümün en altına ayarlayarak sıranın hareket etmesine yer bırakmıyoruz. Ancak satır, bu birkaç saniye için yapışkan hale gelecek ve tasarımımızdaki değişen yapışkan stilleri vurgulayacaktır.

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

Sıra

Satır Yapışkanlığını Çevir

Satır ayarlarını açın ve satırı sabitleyin. Önceki adımda belirtildiği gibi, satırımızın alt yapışkan sınırının bölüm olduğundan emin olmak önemlidir. Satırın sonu ile bölümün sonu arasında boşluk olmadığından yapışkan satır yerinde kalacaktır.

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

Yapışkan Satır Arka Plan Rengi

Öğelerimize bazı yapışkan stiller uygulamaya başlama zamanı! Satır arka plan rengiyle başlayın.

• Arka Plan Rengi: #161616

Satır Geçişi

Sorunsuz bir geçiş sağlamak için satırın gelişmiş sekmesinde geçiş süresini artıracağız.

• Geçiş Süresi: 500ms
• Geçiş Hızı Eğrisi: Kolaylık

Yapışkan Sütun 2 Arka Plan Rengi

Ardından, yapışkan sütun 2'nin arka plan rengini değiştireceğiz.

• Arka Plan Rengi: #262626

Sütun 1'deki Metin Modülü

Yapışkan Arka Plan Rengi

Sütun 1'deki Metin Modülünün arka plan rengini de değiştireceğiz.

• Arka Plan Rengi: #ddc7b5

Yapışkan Metin Rengi

Yapışkan metin rengiyle birlikte.

• Metin Rengi: #0a0a0a

Yapışkan Boyutlandırma

Ve boyutlandırma ayarlarında modülün genişliğini artıracağız.

• Genişlik: %105

Geçiş

Gelişmiş sekmesinde modülün geçiş süresini değiştirerek sorunsuz bir geçiş sağlıyoruz.

• Geçiş Süresi: 500ms
• Geçiş Hızı Eğrisi: Kolaylık

Sütun 2'deki Metin Modülü

Yapışkan Metin Rengi

Sırada, 2. sütunda Metin Modülü var. Yapışkan durumda metin rengini açık olarak değiştireceğiz.

• Metin Rengi: Açık

Sütun 3'teki Metin Modülü

Yapışkan Metin Rengi

Aynısı 3. sütundaki Metin Modülü için de geçerlidir.

• Metin Rengi: Açık

3. Yeniden Kullanım için Klonlama Bölümü

Yapışkan stil değiştirme efekti de dahil olmak üzere ilk bölümü tamamladığımıza göre, bu bölümü klonlayarak istediğimiz kadar tekrar kullanabiliriz.

Tüm Kopyayı Değiştir

Tüm yinelenen kopyaları değiştirdiğinizden emin olun.

İlk Bölüme Bazı Üst Kenar Boşluğu ve Son Bölüme Alt Kenar Boşluğu Ekleyin

Ve son olarak, ilk bölüme biraz üst kenar boşluğu ve son bölüme alt kenar boşluğu ekleyeceğiz. Bu, insanlar kaydırmaya başlamadan önce anında geçişi önlememize yardımcı olacaktır. Bu kadar!

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

• Alt Kenar Boşluğu: 200 piksel

Ö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, yapışkan stilleri hareket eklemeden değiştirmek için Divi yapışkan seçeneklerini kullandık. İnsanlar sayfanızın belirli bir bölümünü geçtiğinde, sayfanın belirli bir bölümünü vurgulayan tasarımın stilleri değişir. 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.