Divi ile Scroll'da Genişleyen Kopyayı Senkronize Etme

Belirli bir bölümün vurgusu kopya üzerinde olduğunda, kopyanın gözden kaçmamasını sağlamak önemlidir. Kopyanızı öne çıkarmak için kullanabileceğiniz birçok teknik var, ancak bu eğitimde, Divi'nin yeni kaydırma efektlerini kullanarak kaydırmada genişleyen kopyayı nasıl senkronize edeceğinizi göstereceğiz. Kullanıcılar sayfayı kaydırırken, kopyanın başka bir bölümü görünerek, sağladığınız içeriği adım adım okumalarına olanak tanı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

Kaydırma Düzenindeki Genişleyen Kopyayı ÜCRETSİZ İndirin

Ellerinizi kaydırma düzeninde genişleyen kopyaya 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. Bölüm Tasarımı Oluşturun

Yeni Bölüm Ekle

Arka plan rengi

Üzerinde çalıştığınız sayfaya yeni bir bölüm ekleyerek başlayın. Bölüm ayarlarını açın ve arka plan rengini değiştirin.

• Arka Plan Rengi: #151515

aralık

Sonraki tüm varsayılan üst ve alt dolguyu kaldırın.

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

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: %90
• Maksimum Genişlik: 1380 piksel

aralık

Daha sonra bazı özel üst ve alt dolgu ekleyin.

• Üst Dolgu: 150 piksel
• Alt Dolgu: 150 piksel

Sütuna Metin Modülü #1 Ekle

İçerik Ekle

Ardından, seçtiğiniz içerikle ilk Metin Modülünü ekleyin.

Metin Ayarları

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

• Yazı Tipi: Livvic
• Metin Yazı Tipi Ağırlığı: Kalın
• Metin Rengi: #f1f1f1
• Metin Boyutu: 170px (Masaüstü), 100px (Tablet), 70px (Telefon)
• Metin Satırı Yüksekliği: 1em

• Metin Gölgesi Yatay Uzunluğu: 0.06em
• Metin Gölgesi Dikey Uzunluğu: 0em
• Metin Gölge Rengi: rgba(79,79,79,0.74)
• Metin Hizalama: Orta (Masaüstü), Sol (Tablet ve Telefon)

Metin Modülünü İki Kez Klonla

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

İçeriği Değiştir

Her iki yinelenen Metin Modülünün içeriğini değiştirin.

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

aralık

Sonraki satırın varsayılan üst ve alt dolgusunu kaldırın.

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

Sınır

Sonraki bir üst kenarlık ekleyin.

• Üst Kenar Genişliği: 1px
• Üst Kenar Rengi: #4c4c4c

Sütun Ayarları

aralık

Sütun ayarlarında da bazı değişiklikler yapıyoruz. Ayarları açın ve bazı özel dolgu değerleri ekleyin.

• Üst Dolgu: 5vw
• Alt Dolgu: 10vw
• Sol Dolgu: 6vw
• Sağ Dolgu: 6vw

Sınır

Sağ kenarlık da kullanın.

• Sağ Kenar Genişliği: 1px
• Sağ Kenar Rengi: #4c4c4c

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

İçerik Ekle

Seçtiğiniz içeriğin bulunduğu sütuna bir Blurb Modülü ekleyerek devam edin.

Simge Seç

Daha sonra istediğiniz bir simgeyi seçin.

Simge Ayarları

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

• Simge Rengi: #a3acff
• Görüntü/Simge Hizalama: Sol

Başlık Metni Ayarları

Başlık metni ayarlarını da değiştirin.

• Başlık Yazı Tipi: Livvic
• Başlık Yazı Tipi Ağırlığı: Kalın
• Başlık Metin Rengi: #c1c1c1
• Başlık Metin Boyutu: 35px

• Başlık Metni Gölge Yatay Uzunluk: 0.06em
• Başlık Metni Gölge Dikey Uzunluk: 0em
• Başlık Metni Gölge Rengi: rgba(79,79,79,0.74)

Gövde Metni Ayarları

Gövde metni ayarlarında da bazı değişiklikler yapıyoruz.

• Gövde Metni Rengi: #878787
• Gövde Metin Boyutu: 16px
• Gövde Çizgisi Yüksekliği: 2.4em

Bulanık Başlık CSS

Ve gelişmiş sekmesindeki tanıtım başlığına ekleyeceğimiz tek bir CSS kodu satırı ile başlığın etrafında biraz boşluk oluşturacağız.

margin: 30px 0 40px 0;

Tüm Sütunu İki Kez Klonla

Tüm sütunu ve içindeki Blurb Module'ü tamamladıktan sonra, tüm sütunu iki kez klonlayabilirsiniz.

Sütun 3 Kenarlığını Kaldır

Sütun 3 ayarlarını açın ve sağ kenarlığı kaldırın.

• Sağ Kenar Genişliği: 0px

İçeriği Değiştir

Ve her kopya için Blurb Module içeriğini değiştirin.

2. Kaydırma Efektleri Ekleyin

Bölüm

Yukarı ve Aşağı Ölçekleme

Bölümden başlayarak kaydırma efektleri ekleme zamanı. Aşağıdaki değerlerle ölçekleme yukarı ve aşağı kaydırma efektini kullanın:

• Yukarı ve Aşağı Ölçeklendirmeyi Etkinleştir: Evet
• Başlangıç ​​Ölçeği: %70
• Orta Ölçek: %100
• Bitiş Ölçeği: %100

Metin Modülü #1

İçeri ve Dışarı Soluk

Ardından, bölümünüzün ilk satırındaki ilk Metin Modülünü açın ve bir solma efekti ekleyin.

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

Yukarı ve Aşağı Ölçekleme

Bir ölçek yukarı ve aşağı efekti de kullanın.

• Yukarı ve Aşağı Ölçeklendirmeyi Etkinleştir: Evet
• Başlangıç ​​Ölçeği: %0 (%47'de)
• Orta Ölçek: %100 (%56'da)
• Bitiş Ölçeği: %100 (%64'te)

Genişlet Metin Modülü #1 Kaydırma Efektleri

Kaydırma efektlerini sütundaki diğer iki Metin Modülüne genişleterek devam edin.

• Kime: Tüm Metinler
• Boyunca: Bu Sütun

Blurb Modülü #1

Yukarı ve Aşağı Ölçekleme

Ardından, sütun 1'deki Blurb Module'e yukarı ve aşağı kaydırma efekti ekleyeceğiz.

• Yukarı ve Aşağı Ölçeklendirmeyi Etkinleştir: Evet
• Başlangıç ​​Ölçeği:
  • Masaüstü: %0
  • Tablet ve Telefon: %100
• Orta Ölçek: %100 (%33'te)
• Bitiş Ölçeği: %100 (%64'te)

Blurb Modülünü Genişlet #1 Kaydırma Efektleri

Kaydırma efektini satırdaki tüm Blurb Modüllerine genişleterek öğreticiyi tamamlayın ve işiniz bitti!

• Kime: Tüm Bulanıklıklar
• Boyunca: Bu Satır

Ö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 öğreticide, Divi bölümünüzde genişleyen kopyayı senkronize etmenin yaratıcı bir yolunu gösterdik. Bu, kopyayı vurgulamanın ve ziyaretçilerin bölümünüzün farklı bölümlerini adım adım okumasına izin vermenin harika bir yoludur. 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.