Divi ve Divi Builder 'ı kullanarak güzel WordPress web siteleri oluşturun.

Divi'de Kaydırma Efektleriyle Yapışkan Seçenekleri Etkin Bir Şekilde Birleştirme

Rifat Divi Eğitimleri Jul 27, 2021

Divi Builder'ın yerleşik seçenekleri, tüm güzel tasarımları oluşturmak için kullanılabilir. Yapışkan seçenekleri ve kaydırma efektleri bu harika yerleşik özelliklerinden ikisidir Divi ve bu buluşmanızı uyumlaştırmak suretiyle, biz yürütebileceği bazı çok güzel tasarımlar. Bugünkü eğitimde, yapışkan seçenekleri ve kaydırma efektlerini birleştirerek bir sayfanın nasıl kolayca tasarlanacağını göreceğiz, bu da kuşkusuz ziyaretçilerin gezinme deneyimini bir adım daha ileriye taşıyacaktır. Soldan bir resmin süzüleceği bir sayfa bölümü tasarlayacağız ve ondan önce sağdan bir metin kaydırılacak. Kulağa karmaşık gelebilir, ancak doğrudan eğitimimize geçmeden önce, tasarım ön incelemesini kontrol edin.

Gizlice Bakış

İşte bugün oluşturacağımız tasarım düzeni. Bu duyarlı bir tasarımdır, bu nedenle tabletlerde ve mobil cihazlarda da çalışır.

Bina Tasarım Yapısı

İlk Bölüm Tasarımı

Degrade Arka Plan

İlk olarak yapıyı oluşturacağız ve daha sonra tüm ayarları uygulayarak yapışkan hale getireceğiz ve sorunsuz bir kaydırma deneyimi sunacağız. İlk bölüm ayarlarını açın ve bir degrade arka plan rengi ekleyin.

  • Renk 1: #854466
  • Renk 2: #DABFCD
  • Gradyan Türü: Doğrusal
  • Gradyan Yönü: 90deg
  • Başlangıç Konumu: %10
  • Bitiş Konumu: %10

görünürlük

Gelişmiş sekmesine gidin ve taşma görünürlüğünü gizleyelim.

Harika Web Siteleri Oluşturun

En iyi ücretsiz sayfa oluşturucu Elementor ile

Şimdi başla
  • Yatay Taşma: Gizli
  • Dikey Taşma: Gizli

Satır Ekleme

Sütun Yapısı

Aşağıdaki sütun yapısına sahip yeni bir satır ekleyeceğiz.

boyutlandırma

Yeni eklenen satır için boyutlandırma ayarlarını açın ve ayarları belirtildiği gibi değiştirin.

  • Genişlik: %100
  • Maksimum Genişlik: 2580 piksel

aralık

Ayrıca, satırımıza biraz alt kenar boşluğu eklememiz gerekiyor.

  • Alt Kenar Boşluğu: 50px

Sütun 2 Aralığı

Şimdi sütun 2 ayarlarına geçeceğiz ve dolgu değerlerini değiştireceğiz.

  • Üst Dolgu: 5vh
  • Alt Dolgu: 5vh
  • Sol Dolgu: %8
  • Sağ Dolgu: %8

Sütun 1: Metin Modülü

H3 İçeriği Ekle

Birinci sütuna bir Metin modülü ekleyin ve seçtiğiniz bazı kopyaları ekleyin.

Degrade Arka Plan

Sonraki degrade arka planını ekleyin:

  • Renk 1: rgba(107,45,18,0.52)
  • Renk 2: rgba(255,255,255,0)
  • Gradyan Türü: Doğrusal
  • Gradyanı Arka Plan Resminin Üstüne Yerleştir: Evet

Arka plan görüntüsü

Seçtiğiniz bir resmi ekleyin ve buna göre ayarlayın.

  • Arka plan resmi Boyutu: Kapak
  • Arka Plan Resmi Konumu: Merkez

H3 Metin Ayarları

Tasarım sekmesinden şimdi H3 ayarlarını değiştireceğiz.

  • Başlık 3 Yazı Tipi: Prata
  • Başlık 3 Yazı Tipi Stili: Büyük Harf
  • Başlık 3 Metin Hizalama: Merkez
  • Başlık 3 Metin Rengi: #ffffff
  • Başlık 3 Metin Boyutu: 42px
  • Başlık 3 Çizgi Yüksekliği: 1.2em

aralık

Şimdi modül için boşluk değerlerini değiştirin.

  • Üst Marj: 20vh
  • Alt Kenar Boşluğu: 20vh
  • Üst Dolgu: 48vh
  • Alt Dolgu: 48vh

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

H4 İçeriği Ekle

Sütun 2'ye birden fazla metin modülü ekleyeceğiz. İlk metin modülünü ekleyelim ve üzerine biraz H4 başlık kopyası ekleyelim.

H4 Metin Ayarları

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

  • Başlık 4 Yazı Tipi: Prata
  • Başlık 4 Yazı Tipi Stili: Büyük Harf
  • Başlık 4 Metin Rengi: #854466
  • Başlık 4 Metin Boyutu: Masaüstü: 45px, Tablet: 40px ve Telefon: 35px
  • Başlık 4 Çizgi Yüksekliği: 1.3em

Sütun 2'ye Bölücü Modülü Ekle

görünürlük

Şimdi metin modülünün hemen altına bir bölücü modül ekleyeceğiz ve bölücü görünürlüğünü etkinleştireceğiz.

  • Bölücüyü Göster: Evet

Astar

Tasarım sekmesinden çizgi rengini değiştirin.

  • Çizgi Rengi: #854466

boyutlandırma

Boyutlandırma ayarlarını değiştirmenin zamanı geldi.

  • Bölücü Ağırlığı: 5px
  • Yükseklik: 5 piksel

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

Açıklama İçeriği Ekle

2. sütuna başka bir Metin modülü ekleyin. Bölücü Modülünün hemen altında olacaktır. Ayrıca, seçtiğiniz bazı açıklama içeriğini ekleyin.

Metin Ayarları

Açıklamayı ekledikten sonra bu modül için stil ayarlarını değiştirelim.

  • Metin Yazı Tipi: Lato
  • Metin Rengi: #854466
  • Metin Boyutu: Masaüstü: 20px, Tablet ve Telefon: 16px
  • Metin Harf Aralığı: -0.5px
  • Metin Satır Yüksekliği: 1.8em

boyutlandırma

Boyutlandırma ayarlarını değiştirin.

  • Genişlik: Masaüstü: %72 , Tablet ve Telefon: %100

Sütun 2'ye Düğme Modülü Ekle

Kopya Ekle

2. sütuna ekleyeceğimiz son modül bir düğme modülüdür. Onu da ekleyelim ve bir kopyasını da ona ekleyelim.

Düğme Ayarları

Ve son olarak, düğme ayarlarını buna göre değiştirin.

  • Düğme İçin Özel Stiller Kullan: Evet
  • Düğme Metin Boyutu: 20px
  • Düğme Metin Rengi: #854466
  • Düğme Degrade Arka Plan
    • Renk 1: rgba(43,135,218,0)
    • Renk 2: rgba(188,128,160,0.95)
    • Başlangıç Konumu: %50
    • Bitiş Konumu: %50
  • Düğme Kenar Genişliği: 0px
  • Düğme Sınır Yarıçapı: 0px
  • Düğme Yazı Tipi: Prata
  • Düğme Yazı Tipi Stili: Büyük Harf

Ve bugünün tasarımı için yapıyı başarıyla oluşturduk.

Yapışkan Efektler

2. sütun

Her şey yerli yerinde olduğundan, 2. sütun ayarlarını açarak yapışkan ayarları eklemeye başlayacağız. Gelişmiş sekmesinden aşağıdaki ayarları uygulayın.

  • Yapışkan Konum: En Üstte Yapış
  • Yapışkan Üst Ofset: Masaüstü: 50 piksel. Tablet ve Telefon: 80px
  • Alt Yapışkan Limit: Satır
  • Çevredeki Yapışkan Öğelerden Ofset: Evet
  • Geçiş Varsayılanı ve Yapışkan Stiller: Evet

Sütun 2 İçin Yapışkan Ayarlar

Yapışkan Kenarlık

Sütunu başarılı bir şekilde yapışkan hale getirdik. Şimdi 2. sütuna bir kenarlık ekleyeceğiz. Bunun için kenarlık ayarlarına geçelim.

  • Yapışkan Sol Kenar Genişliği: 2px
  • Sol Kenar Rengi: #854466

Dönüştür Çeviri

varsayılan yapışkan durumda dönüştürme çevirme değerlerini ayarlayın.

  • Alt: 10vw
  • Yapışkan Alt: 0vw

Metin Modülleri ve Düğme Modülü İçin Yapışkan Opaklık

Opaklığı varsayılan ve yapışkan durumda da değiştiriyoruz.

  • Normal Durum Opaklığı: %0
  • Yapışkan Durum Opaklığı: %100

Bölücü Modül için Yapışkan Ayarlar

boyutlandırma

Şimdi bölücü modül için bazı yapışkan ayarlar yapalım.

  • Genişlik: 0 piksel
  • Yapışkan Genişlik: %21

Geçiş

Gelişmiş sekmesinden geçiş zamanlamasını artırın.

  • Geçiş Süresi: 800ms

Kaydırma Efektleri

Sütun 1 Metin Modülleri

Ardından, kaydırma efektlerini ekleyeceğiz. Sütun 1'in metin modülüne uygulayarak başlayalım. Metin modülü ayarlarını açın. Gelişmiş sekmesine gidin ve yatay hareket ekleyin.

  • Yatay Hareketi Etkinleştir: Evet
  • Başlangıç Ofseti: -5
  • Orta Ofset: 0 (%72'de)
  • Bitiş Ofseti: 0

Solma İçeri ve Dışarı Kaydırma Efekti Ekleyin

Aynı modüle solma yapılandırmasını uygulayarak kaydırma efektleri ayarlarını tamamlayın.

  • Soldurmayı ve Yavaşlamayı Etkinleştir: Evet
  • Opaklığı Başlatma: %0
  • Orta Opaklık: %0 (%46'da)
  • Bitiş Opaklığı: %100 (%52'de)

Son Görünüm

Gördüğünüz gibi kaydırma efektlerini ve yapışkan seçenekleri birleştirdiğimiz bir tasarımı başarıyla oluşturduk. Tamamen duyarlı ve her cihazda mükemmel görünüyor.

Çözüm

Divi , temel özellikleriyle güçlüdür ve olağanüstü düzenler oluşturabilir. Bu eğitici, yapışkan efektler ve kaydırma seçenekleriyle nasıl yaratıcı olabileceğimizi ve çarpıcı sayfalar tasarlayabileceğimizi gösteriyor. Bir geliştiriciyseniz, müşterinizi etkilemek için bu tür bir tasarım kullanmalısınız. Ayrıca, bu öğreticiyi arkadaşlarınızla paylaşın ve daha sonra hangi öğreticiyi istediğinizi bize bildirin. Teşekkürler.