Sizden (hakkında) bahseden sayfa, sayfanızın en önemli sayfalarından biridir. Site Web. Bu, insanların sizi daha iyi tanımasına ve bir sonraki adımı atmakta rahat olup olmadıklarına karar vermelerine olanak tanır. Bu sayfaya anlatım eklemenin kolay bir yolunu arıyorsanız bu eğiticiyi seveceksiniz. Kaydırma sırasında yumuşak bir anlatım geçişi oluşturmak için Divi'nin kaydırma efektlerini kullanacağız. Hikâyenin bir kısmı kaybolurken, başka bir kısım ortaya çıkıyor. Bu şunu verir: ziyaretçi ilginç bir hikaye okuma hissi. 

Olası Sonuç

Eğiticiye geçmeden önce, farklı ekran boyutlarında sonuca bir göz atalım.

1. Sayfanın ilk tam ekran bölümünü oluşturun

Yeni bölüm ekle

Arka plan rengi

Hakkında sayfanıza bir ilk bölüm ekleyerek başlayın. Bölüm ayarlarını açın ve arka plan rengini siyah olarak değiştirin.

• Arka Plan Rengi: # 000000

boyutlandırma

Ardından boyutlandırma parametrelerine minimum yükseklik ekleyerek bölümü tam ekrana çevirin.

• Min yükseklik: 100vh

2. Animasyonlu bir çizgi ekleyin

Yeni bir satır ekle

Sütun yapısı

Ardından, aşağıdaki sütun yapısını kullanarak bölümünüze yeni bir satır ekleyin:

boyutlandırma

Çizgi parametrelerini açın ve boyutlandırma parametrelerini değiştirerek çizginin kesit kabının tüm genişliğini işgal etmesine izin verin.

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

aralık

Ardından farklı ekran boyutlarında sol ve sağ dolgu ekleyin.

• Sol dolgu: 20vw (masa), 10vw (tablet ve telefon)
• Sağ dolgu: 20vw (masa) 10vw (tablet ve telefon)

Animasyon

Hikaye anlatımı efektini artırmak için, çizgi için solma animasyonu da kullanacağız.

• Animasyon Stili: Fade
• Animasyon süresi: 3000 ms
• Animasyon hız eğrisi: kolay giriş
• Animasyon tekrarı: bir kez

Pozisyon

Son olarak, konum seçeneklerini değiştirerek hattın bölüm kabının ortasına yerleştirildiğinden emin olacağız.

• Pozisyon: mutlak
• Konum: Merkez

3. Kaydırma efektleriyle bir başlık ekleyin

Sütuna # 1 metin modülünü ekleyin

H1 içeriği ekle

Bu satırda ihtiyacımız olan tek modül bir metin modülüdür. içindekiler H1.

Başlık 1 Metin ayarları

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

• Başlık yazı tipi: Nunito
• Başlık yazı tipi ağırlığı: Yarı kalın
• Üstbilgi Metin Rengi: #ffffff
• Başlık Metin Boyutu: 7vw (masaüstü), 9vw (tablet), 11vw (telefon)

Dikey hareket

Ayrıca ince bir dikey animasyon ekleyeceğiz.

• Dikey hareketi etkinleştir: Evet
• Başlangıç ​​ofseti: 0 (% 50'de)
• Ortalama ofset: 10 (% 100'de)
• Son ofset: 10

Gelen ve giden kaydırma efekti

Gelen ve giden solma etkisi ile.

• Solmaya giriş ve çıkışı etkinleştir: Evet
• Başlangıç ​​opaklığı:% 100
• Ortalama opaklık:% 100 (% 55'de)
• Uç opaklığı:% 0 (% 62'ye kadar)

Kaydırma efektini yukarı ve aşağı ölçekleme

Son olarak, aynı zamanda bir yukarı ve aşağı ölçek kaydırma efekti kullanacağız.

• Yukarı ve aşağı ölçeklemeyi etkinleştirin: Evet
• Başlangıç ​​ölçeği:% 100 (% 40'a kadar)
• Ortalama ölçek:% 95 (% 74'e kadar)
• Son ölçek:% 90

4. Tüm bölümü bir kez klonlayın ve kaydırma efektleriyle açıklama metnini ekleyin

Başlığı ve içeriği düzenleme

İlk bölümü tamamladığınızda, tamamen klonlayabilirsiniz. Yinelenen bölüm kabının içindeki metin modülünü açın ve bir H2 kopyası kullanın.

H2 Metin modülünün metin parametrelerini değiştirme

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

• Başlık 2 Polis: Nunito
• Yazı tipi başlığı 2: yarı kalın
• Öğe 2 Metin rengi: #ffffff
• Öğe 2 Metin boyutu: 5vw (masaüstü), 7vw (tablet), 8vw (telefon)
• Satır 2'nin yüksekliği: 1em (ofis), 1.2em (tablet ve telefon)

Sütuna # 2 metin modülünü ekleyin

İçerik ekle

Daha sonra sütuna başka bir metin modülü ekleyin. içindekiler seçtiğiniz açıklama.

Metin ayarları

Metin modülü için metin ayarlarını aşağıdaki gibi değiştirin:

• Metin yazı tipi: Açık Sans
• Metin rengi: #ffffff
• Metin boyutu: 1vw (masaüstü), 2.5vw (tablet), 3vw (telefon)
• Metin satır yüksekliği: 3.1em (masa), 2.5em (tablet ve telefon)

aralık

Üst kenar boşluğu da kullanın.

• Üst kenar boşluğu: 8vw

Gelen ve giden kaydırma efekti

Ardından, gelişmiş sekmede kaydırma efektlerine geçin ve aşağıdaki belirme ve karartma ayarlarını kullanın:

• Solmaya giriş ve çıkışı etkinleştir: Evet
• Başlangıç ​​opaklığı:% 100
• Ortalama opaklık:% 0 (% 31'de)
• Son opaklık:% 0 (% 35'e kadar)

Kaydırma efektini yukarı ve aşağı ölçekleme

Ayrıca bir yukarı ve aşağı ölçekleme efekti ekleyin.

• Yukarı ve aşağı ölçeklemeyi etkinleştirin: Evet
• Başlangıç ​​ölçeği:% 100 (% 40'a kadar)
• Ortalama ölçek:% 95 (% 74'e kadar)
• Son ölçek:% 90

Artık bu son bölümü mümkün olduğunca çok kez kopyalayabilirsiniz. Ancak, ayarlamanız gerekecek içindekiler İhtiyaçlarınız için her bölümün.

anket

Artık tüm adımları attığımıza göre, farklı ekran boyutlarında sonuca son bir göz atalım.

Son düşünceler

Bu yazıda Divi'nin yerleşik kaydırma efektlerini kullanarak hakkında sayfanızda nasıl hikaye anlatacağınızı gösterdik. Yarattığımız efekt, ardışık kopyanın soluklaşıp kaybolmasına olanak tanıyarak, ziyaretçi hikaye okumak gibi Ayrıca JSON dosyasını ücretsiz olarak indirebildiniz! Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümünde yorum yapmaktan çekinmeyin.