Divi'de Kaydırmada Değişen Metin ve Görüntüler Nasıl Oluşturulur

Divi kaydırma efektleri, ilginç düzenler oluşturmak için mükemmeldir. Özellik kullanıma sunulduğundan bu yana epeyce yayınladık. Bu öğreticide, kaydırma sırasında değişen metin ve resimlerle nasıl bir düzen oluşturacağınızı göstereceğiz. Bu tasarım, bir hizmetler sayfası veya ihtiyacınız olan herhangi bir sayfa türü için kullanılabilir. Kaydırma efektinin dikkat çekmesi için temiz ve basit tuttuk.

Düzeni bir JSON dosyası olarak indirebilir veya kendi Divi web sitenizde yeniden oluşturabilirsiniz.

Başlayalım.

Ön izleme

Başlamadan önce, farklı ekran boyutlarındaki düzene bir göz atalım.

masaüstü

Mobil

Kaydırma Bölümünde Değişen Metin ve Görselleri ÜCRETSİZ İndirin

Kaydırıldığında değişen metin ve resimlerin olduğu ücretsiz bölüme 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.

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!

Kaydırmada Değişen Metin ve Resimlerle Bölümü Yeniden Oluşturun

Yeni Bölüm Ekle

Arka plan

Tasarımı yeniden oluşturmaya başlamak için yeni veya mevcut bir sayfaya yeni bir bölüm ekleyin. Yukarıdaki indirmede sağladığımız arka plan resimlerini ekleyin.

• Arka Plan Resmi: kutu ve nokta tasarımı
  • Masaüstü: Resim 1
  • Tablet: Resim 2
  • Telefon: Resim 3
• Resim Boyutu: Kapak
• Arka Plan Resmi Tekrarı: Y Tekrarı (dikey)

aralık

Bölüme biraz boşluk ekleyin.

• Üst ve Alt Dolgu: %30

görünürlük

Taşmaları da gizleyin.

• Yatay ve Dikey Taşma: Gizli

Yeni Satır Ekle

görünürlük

Şimdi ilk satırı ekleyin ve gelişmiş sekmesinde görünürlük ayarlarını yapın.

• Yatay: Gizli
• Dikey Taşma: Varsayılan

Metin Modülü Ekle

Metin

Başlık için bir ilk metin modülü ekleyin. Seçtiğiniz bazı H1 içeriğini ekleyin.

• Gövde: H1 İçerik – Üretim Ekibi

Başlık Metni

Tasarım sekmesine gidin ve başlık metnine stil verin.

• Başlık Seviyesi: H1
• Yazı Tipi: Fredoke Bir
• Ağırlık: Kalın
• Siyah renk
• Boy
  • Masaüstü: 100 piksel
  • tablet: 75 piksel
  • Telefon: 33 piksel
• Harf boşluğu
  • Masaüstü: 4 piksel
  • Tablet: 3 piksel
  • Telefon: 2 piksel

boyutlandırma

Ardından genişliği ayarlayın.

• Genişlik: %100

Yeni Satır Ekle

boyutlandırma

Şimdi ikinci bir satır ekleyin ve boyutlandırma ayarlarını buna göre yapın:

• Genişlik: %80
• Maksimum Genişlik: 1000 piksel

görünürlük

Taşmaları da gizleyin.

• Yatay ve Dikey Taşmalar: Gizli

1. Metin Modülü Ekle

Metin

Başka bir metin modülü ekleyin. Bu sefer, seçtiğiniz bazı H2 içeriğini girin.

• Gövde: H2 İçerik – Set Fotoğrafı

Başlık Metni

Sonraki başlığı stillendirin.

• Başlık Seviyesi: H2
• Ağırlık: Kalın
• stil: TT
• Renk: Siyah #000000
• Boy
  • Masaüstü: 50 piksel
  • Tablet: 40 piksel
  • Telefon: 28 piksel
• Harf Aralığı: 3px

aralık

Modül için de biraz boşluk ayarlayın.

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

Kaydırma Efektleri

Aşağıdaki kaydırma efektlerini ekleyerek modül ayarlarını tamamlayın:

• İçeri ve Dışarı Soluklaşma: Etkinleştir
• Görünüm Alt
  • pozisyon: %42
  • Opaklığı Başlatma:0%
• Orta Opaklık
  • Alt Konum: %43
  • Üst Konum: %53
  • Orta Opaklık: %100
• Görünüm Üstü
  • pozisyon: %54
  • Bitiş Opaklığı: %0

Metin Modülünü İki Kez Çoğalt

Metin modülünü iki kez klonlayın.

2. Metin Modülünü Ayarla

Metin

Yeni metin modülündeki içeriği değiştirin.

• Gövde: H2 İçerik – Sanat Yönetmenliği

Konum

Modüle de mutlak konumlandırma ekleyin.

• Pozisyon: Mutlak
• Konum: Sol Üst

Kaydırma Efektleri

Ardından, kaydırma efekti ayarlarını güncelleyin.

• İçeri ve Dışarı Soluklaşma: Etkinleştir
• Görünüm Alt
  • pozisyon: %56
  • Opaklığı Başlatma:0%
• Orta Opaklık
• Alt Konum: %57
• En Üst Konum: %67
• Orta Opaklık: %100
• Görünüm Üstü
  • • pozisyon: %68
    • Bitiş Opaklığı: %0

  

3. Metin Modülünü Ayarlayın

Metin

Şimdi ikinci metin modülü kopyasını ayarlayın. Önce içeriği değiştirin.

• Gövde: H2 İçerik – Aksesuarlar ve Gardırop

Konum

Sonraki mutlak bir konum ekleyin.

• Pozisyon: Mutlak
• Konum: Sol Üst

Kaydırma Efektleri

Ardından kaydırma efektlerini değiştirin.

• İçeri ve Dışarı Soluklaşma: Etkinleştir
• Görünüm Alt
  • pozisyon: %70
  • Opaklığı Başlatma:0%
• Orta Opaklık
  • Alt Konum: %71
  • Üst Konum: %80
  • Orta Opaklık: %100
• Görünüm Üstü
  • pozisyon: %81
  • Bitiş Opaklığı: %0

Resim Modülü Ekle

resim

Şimdi bir görüntü modülü ekleme zamanı. 350 x 350 piksel görüntü boyutunda kare bir görüntü kullanın.

• Resim: Kare resim 350 x 350 piksel

hizalama

Hizalamayı sola ayarlayın.

• Görüntü Hizalama: Sol

aralık

Aralığı da ayarlayın.

• Resmin Altındaki Boşluğu Göster: Hayır
• Üst Kenar Boşluğu: -60px

Filtreler

Ardından, görüntünün doygunluğunu gidermek için bir filtre ekleyin.

• Doygunluk: %0

görünürlük

Şimdi, gelişmiş sekmeye gidin ve taşmaları gizli olarak ayarlayın.

• Yatay ve Dikey Taşma: Gizli

Kaydırma Efektleri

Son olarak, bir solma içeri ve dışarı kaydırma efekti ekleyin.

• İçeri ve Dışarı Soluklaşma: Etkinleştir
• Görünüm Alt
  • pozisyon: %70
  • Opaklığı Başlatma:0%
• Orta Opaklık
  • pozisyon: %71
  • Orta: %100
• Görünüm Üstü
  • pozisyon: %100
  • Bitiş Opaklığı: %0

Harekete Geçirici Mesaj Modülü ekleyin

Metin

Eylem çağrısı modülü olan bir sonraki modüle geçin. Seçtiğiniz bazı içeriği ekleyin.

• Başlık: Jason'ın Sanat Ekibi
• Düğme: Jason'ın Sanat Ekibi'ni rezerve edin
• Gövde: Açıklayıcı içerik

Bağlantı

Bir sonraki bağlantı ekleyin.

• Bağlantı: Bağlantınız

Arka plan

Varsayılan arka plan rengini de kaldırın.

• Arka Plan Rengini Kullan: Hayır

Metin

Ardından, hizalamayı sağa ayarlayın.

• Metin Hizalama: Sağ

Başlık Metni

Başlık metnine de stil verin.

• Başlık Seviyesi: H3
• Yazı Tipi: Fredoke Bir
• Başlık Metni Hizalama: Sol
• Renk: Siyah #oooooo
• Boy
  • Masaüstü: 48 piksel
  • Tablet: 42 piksel
  • Telefon: 33 piksel
• Harf boşluğu
  • Masaüstü ve Tablet: 1 piksel
  • Telefon: 0px
• Satır yüksekliği
  • Masaüstü ve Tablet: 1.6em
  • Telefon: 1.1em

Gövde metni

Ardından, gövde metni.

• Yazı Tipi: Verdana
• Renk: Siyah #000000
• Boyut: 14 piksel
• Harf Aralığı: 0,5 piksel

Buton

Düğme stillerini de ayarlayın.

• Özel Stiller
• Metin Boyutu: 17px
• Metin Rengi: Beyaz #ffffff
• Arkaplan: Siyah #000000
• Harf Aralığı: 1px
• Yazı Tipi: Verdana
• Üst Kenar Boşluğu: 20px
• Üst ve Alt Dolgu: 10px
• Sol ve Sağ Dolgu: 25px

Konum

Gelişmiş sekmesine geçin ve konum ayarlarını aşağıdaki gibi değiştirin:

• pozisyon: akraba
• Ofset Menşei: Sol Üst
• Yatay Ofset: 25 piksel

görünürlük

Ardından, taşmaları gizleyin.

• Yatay ve Dikey Taşma: Gizli

Kaydırma Efektleri

Son olarak, bir solma içeri ve dışarı kaydırma efektini etkinleştirin.

• İçeri ve Dışarı Soluklaşma: Etkinleştir
• Görünüm Alt
  • pozisyon: %54
  • Opaklığı Başlatma:0%
• Orta Opaklık
  • Alt Konum: %55
  • Üst Konum: %80
  • Orta: %100
• Görünüm Üstü
  • pozisyon: %100
  • Bitiş Opaklığı: %0

2. Satırı Çoğalt

Satırı tüm modülleriyle klonlayın.

1. Metin Modülünü Ayarla

Metin

Şimdi klonlanmış metin modüllerinin içeriğini değiştirin. En baştan başlayın.

• Gövde: H2 İçeriği / Üretim Öncesi

Metin

Hizalamayı sağa değiştirin.

• Metin Hizalama: Sağ

Metin Hizalamasını Genişlet

Hizalamayı aynı satırdaki tüm klonlanmış metin modüllerine uygulayın.

• Metin hizalamasını genişlet: Bu satırdaki tüm metin modüllerine

2. Metin Modülünü Ayarla

Metin

Şimdi 2. klonlanmış metin modülündeki içeriği güncelleyin.

• Gövde: H2 İçerik / Sette Üretim

Konum

Konum ayarlarında da konumu değiştirin.

• Konum: Sağ Üst

3. Metin Modülünü Ayarlayın

Metin

Şimdi 3. klonlanmış metin modülünün içeriğini değiştirin.

• Gövde: H2 İçerik / Takımlar Arası Koordinasyon

Konum

Konum ayarlarında da konumu değiştirin.

• Konum: Sağ Üst

Yeni Görüntü Modülünü Ayarla

resim

Ardından, resim modülündeki fotoğrafı değiştirin.

• Resim: Yeni Resim 350 x 350 piksel

hizalama

Görüntü hizalamasını da değiştirin.

• Görüntü Hizalama: Sağ

Yeni Harekete Geçirici Mesaj Modülünü Ayarlayın

Metin

Sonraki eylem çağrısı modülünü açın ve tüm içeriği değiştirin.

• Başlık: Alice'in Yapım Ekibi
• Düğme: Alice'in Yapım Ekibini Ayarlayın
• Gövde: Yeni açıklayıcı içerik.

Bağlantı

Linki de değiştirin.

• Bağlantı: Yeni bağlantı

Metin

Hizalamayı da değiştirin.

• Metin Hizalama: Sol

Başlık Metni

Başlık metninin hizalamasını da değiştirin.

• Başlık Metni Hizalama: Sol

Gövde metni

Gövde metninin yanı sıra.

• Gövde Metni Hizalama: Sol

boyutlandırma

Tüm modülün hizalamasını boyutlandırma ayarlarında da değiştirmeyi unutmayın.

• Modül Hizalama: Sol

Konum

Son olarak, konum ayarlarını varsayılana sıfırlayın ve işiniz bitti!

• Konum: Varsayılana Sıfırla

Ön izleme

Farklı ekran boyutlarındaki sayfa düzenine son bir kez bakalım.

masaüstü

Mobil

Bu, Kaydırmada Değişen Metin ve Resimlerle Düzen İçin Bir Sarma!

Kaydırmada değişen metin ve resimleri yeniden oluşturmayı bitirdik. Divi'nin yerleşik kaydırma efektleri sayesinde bu efekti elde edebildik. Bu düzeni hizmetler sayfası, hakkında sayfası, ekiple tanış sayfası veya beğendiğiniz herhangi bir şey için kullanın! Sağlanan arka planları kullanın veya arka planı beyaz bırakın.

Yorumlarda ne düşündüğünüzü bize bildirin!