Zahmetsiz Geçişler Oluşturmak için Divi'nin Yapışkan Seçenekleriyle Örtüşmeler Nasıl Birleştirilir

Teknoloji geliştikçe tasarım da gelişiyor. Her zamankinden daha fazla, sizi şaşırtan ve nasıl oluşturulduklarını merak eden web siteleriyle karşılaşabilirsiniz. Kaydırma etkileşimi olan web siteleri her tür işletme için uygun olmasa da, ekstra yol kat etmeyi bilmek iyi bir izlenim bırakmak için özellikle yararlıdır. Divi ile, tek bir kod satırına dokunmak zorunda kalmadan birçok şey zaten mümkün. Bugünkü eğitim, Divi'yi başka bir perspektiften anlamanıza yardımcı olur. Zahmetsiz geçişler oluşturmak için Divi'nin yapışkan seçeneklerini diğer yerleşik ayarlarla nasıl birleştireceğinizi göstereceğiz. 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. Tasarım Yapısını Yeniden Oluşturun

Yeni Bölüm Ekle

aralık

Bu öğreticinin ilk bölümünde, Divi içindeki tasarım yapısını yeniden oluşturmaya odaklanacağız. Ardından, ikinci bölümde, bu gönderinin önizlemesinde fark edebileceğiniz etkiyi elde etmek için tüm yapışkan seçenekleri gözden geçireceğiz. Üzerinde çalıştığınız sayfaya yeni bir bölüm ekleyerek başlayın. Bölüm ayarlarını açın, tasarım sekmesine gidin ve biraz alt dolgu ekleyin.

• Alt Dolgu: 100vh

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 modül eklemeden satır ayarlarını açın, tasarım sekmesine gidin ve boyutlandırma ayarlarını buna göre değiştirin:

• Genişlik: %90
• Maksimum Genişlik: %100

Z İndeksi

Bu satıra da az dizini atayın.

• Z İndeksi: 1

Sütuna Resim Modülü Ekle

Görüntü Kutusunu Boş Bırak

Bir Görüntü Modülü ile başlayarak modül ekleme zamanı. İçerik kutusunu boş bırakın.

Bunun Yerine Arka Plan Resmi Kullanın

Ve bunun yerine seçtiğiniz bir arka plan resmini kullanın.

• Arka Plan Resmi Boyutu: Kapak

boyutlandırma

Daha sonra modülün genişliğini değiştirin.

• Genişlik: %100

aralık

Ardından, boşluk ayarlarına bazı özel üst ve alt dolgular uygulayın.

• Üst Dolgu: 40vh
• Alt Dolgu: 40vh

Sütuna Metin Modülü Ekle

H2 İçeriği Ekle

Seçtiğiniz bazı H2 içeriğini içeren bir Metin Modülü olan bir sonraki modüle geçin.

H2 Metin Ayarları

Modülün H2 metin ayarlarını uygun şekilde değiştirin:

• Başlık 2 Yazı Tipi: Montserrat
• Başlık 2 Metin Hizalama: Orta
• Başlık 2 Metin Rengi: #ffffff
• Başlık 2 Metin Boyutu:
  • Masaüstü: 10vw
  • Tablet: 14vw
  • Telefon: 15vw
• Başlık 2 Harf Aralığı: -0.5vw

boyutlandırma

Modülün de “%100” olduğundan emin olun.

• Genişlik: %100

Konum

Ve modülü gelişmiş sekmesinde yeniden konumlandırın.

• Pozisyon: Mutlak
• Yer: Merkez

2. Satır Ekle

Sütun Yapısı

Bir sonraki satıra. Aşağıdaki sütun yapısını kullanın:

boyutlandırma

Henüz modül eklemeden satır ayarlarını açı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
• Genişlik: %90
• Maksimum Genişlik: %100

Z İndeksi

Bu satıra da az dizini atayın.

• Z İndeksi: 2

Sütun 1 Boşluk

İlk sütun ayarlarını açıp biraz sol ve sağ dolgu atayarak satır ayarlarını tamamlayın.

• Sol Dolgu: %5
• Sağ Dolgu: %5

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

H3 İçeriği Ekle

Artık satır ayarları yerinde olduğuna göre, modül ekleme zamanı. Seçtiğiniz bazı H3 içeriğiyle sütun 1'e bir Metin Modülü ekleyin.

H3 Metin Ayarları

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

• Başlık 3 Yazı Tipi: Montserrat
• Başlık 3 Yazı Tipi Stili: Altı Çizili
• Başlık 3 Alt Çizgi Rengi: #ffffff
• Başlık 3 Alt Çizgi Stili: Düz
• Başlık 3 Metin Rengi: #ffffff
• Başlık 3 Metin Boyutu:
  • Masaüstü: 4vw
  • Tablet & Telefon: 10vw
• Başlık 3 Harf Aralığı: -3px

aralık

Daha küçük ekran boyutlarına biraz sağ dolgu ekleyin.

• Sağ Dolgu: %20 (Yalnızca Tablet ve Telefon)

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

İçerik Ekle

Seçtiğiniz bazı açıklama içeriğiyle 2. sütuna başka bir Metin Modülü ekleyin.

Arka plan rengi

Sonraki arka plan rengini değiştirin.

• Arka Plan Rengi: #ffffff

Metin Ayarları

Ardından, metin ayarlarını aşağıdaki gibi değiştirin:

• Metin Yazı Tipi: Playfair Ekranı
• Metin Yazı Tipi Stili: İtalik
• Yazı Boyutu:
  • Masaüstü: 1.6vw
  • Tablet: 3vw
  • Telefon: 4vw
• Metin Satırı Yüksekliği: 1.5em

aralık

Bazı özel dolgu değerleri de uygulayın.

• Üst Dolgu: 10vh
• Alt Dolgu: 10vh
• Sol Dolgu: %10
• Sağ Dolgu: %10

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

Kopya Ekle

Ekleyeceğimiz sonraki ve son modül, 2. sütuna bir Düğme Modülüdür. Seçtiğiniz bir kopyayı ekleyin.

Düğme Ayarları

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

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

• Düğme Yazı Tipi Stili: Altı Çizili
• Düğme Alt Çizgi Rengi: #000000
• Düğme Altı Çizili Stili: Katı

aralık

Bazı özel dolgu değerleri de ekleyin.

• Üst Dolgu: 20px
• Alt Dolgu: 20px
• Sol Dolgu: 50px
• Sağ Dolgu: 50px

Konum

Ve modülü gelişmiş sekmesinde yeniden konumlandırın.

• Pozisyon: Mutlak
• Konum: Sağ Alt

2. Yapışkan Efektler Uygulayın

1. Sıradaki Görüntü Modülü

Yapışkan Ayarlar

Tasarımımızın temelini oluşturduğumuza göre, özel yapışkan efektleri uygulamaya başlamanın zamanı geldi. 1. satırdaki Görüntü Modülünü açın ve modülü aşağıdaki gibi yapışkan hale getirin:

• Yapışkan Konum: En Üstte Yapış
• Alt Yapışkan Limit: Bölüm
• Çevredeki Yapışkan Elemanlardan Ofset: Hayır

Yapışkan Boyutlandırma

Yapışkan ayarlar uygulandıktan sonra modülümüzün yapışkan stillerini de değiştirebiliriz. Yapacağımız ilk şey, yapışkan bir durumda genişliği değiştirmek.

• Yapışkan Genişlik: %80

Yapışkan Aralık

Ardından, yapışkan üst ve alt dolguyu değiştireceğiz.

• Yapışkan Üst Dolgu: 50vh
• Yapışkan Alt Dolgu: 50vh

Yapışkan Degrade Arka Plan

Modülümüze de yapışkan bir gradyan arka planı uygulayacağız.

• Renk 1: #00336b
• Renk 2: rgba(41,196.169,0)
• Gradyan Türü: Doğrusal
• Gradyan Yönü: 90deg
• Gradyanı Arka Plan Resminin Üstüne Yerleştir: Evet

Geçiş

Ve sorunsuz bir geçiş sağlamak için modülün geçiş süresini artıracağız.

• Geçiş Süresi: 1500ms

2. Satırdaki 2. Sütun

Sütun 2 Yapışkan Ayarlar

Ardından, ikinci sıramızın ikinci sütununu da yapışkan hale getireceğiz.

• Yapışkan Konum: En Üstte Yapış
• Yapışkan Üst Ofset: 150 piksel
• Alt Yapışkan Limit: Bölüm
• Çevredeki Yapışkan Elemanlardan Ofset: Hayır
• Geçiş Varsayılanı ve Yapışkan Stiller: Hayır

Yapışkan Sütundaki Metin Modülü

Yapışkan Arka Plan Rengi

Şimdi 2. satırın 2. sütunu yapışkan hale getirildi, bu sütunun içindeki Metin Modülüne bazı yapışkan stiller uygulayabiliriz. Yapışkan bir durumda arka plan rengini değiştirerek başlayın.

• Yapışkan Arka Plan Rengi: #333333

Yapışkan Metin Rengi

Ardından, metin rengini yapışkan durumda değiştirin.

• Yapışkan Metin Rengi: #ffffff

Geçiş

Ve gelişmiş sekmesinde geçiş süresini artırarak modül ayarlarını tamamlayın. Bu kadar!

• Geçiş Süresi: 1000ms

Ö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, zahmetsiz geçişler oluşturmak için örtüşmeleri Divi'nin yapışkan seçenekleriyle nasıl birleştireceğinizi gösterdik. Bu eğitimde kullanılan yaklaşımı öğrendikten sonra, sonsuz farklı varyasyonlar oluşturabileceksiniz. 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.