Divi ile Scroll'da Hikayenizi Nasıl Anlatırsınız

Hakkında sayfanız, web sitenizdeki en önemli sayfalardan biridir. İnsanların sizi daha iyi tanımasına ve bir sonraki adımı atmakta rahat olup olmadıklarına karar vermelerine olanak tanır. Hakkında sayfanıza hikaye anlatımı eklemenin sorunsuz bir yolunu arıyorsanız, bu öğreticiyi seveceksiniz. Kaydırmada akıcı bir hikaye anlatımı geçişi oluşturmak için Divi'nin kaydırma efektlerini kullanacağız. Hikâyenin bir kısmı silinip gider gitmez, başka bir kısım devreye girer. Bu, ziyaretçilere ilginç bir hikâye okudukları hissini verir. 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

Youtube Kanalımıza Abone Olun

Scroll Layout'taki Hakkında Sayfası Hikayesini ÜCRETSİZ olarak indirin

Ellerinizi kaydırma düzeninde ücretsiz sayfa hikayesine 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. Sayfanın İlk 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

Boyutlandırma ayarlarına bir minimum yükseklik ekleyerek bölümü tam ekrana çevirin.

• Min Yükseklik: 100vh

2. Hareketli Satır Ekle

Yeni 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

Satır ayarlarını açın ve boyutlandırma ayarlarını değiştirerek satırın tüm bölüm kabının genişliğini almasına izin verin.

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

aralık

Ardından, farklı ekran boyutlarına biraz sol ve sağ dolgu ekleyin.

• Sol Dolgu: 20vw (Masaüstü), 10vw (Tablet ve Telefon)
• Sağ Dolgu: 20vw (Masaüstü) 10vw (Tablet ve Telefon)

Animasyon

Hikaye anlatımı etkisini artırmak için satır için bir solma animasyonu da kullanacağız.

• Animasyon Stili: Soluk
• Animasyon Süresi: 3000ms
• Animasyon Hızı Eğrisi: Kolay Giriş-Çıkış
• Animasyon Tekrarı: Bir kez

Konum

Son olarak, konum seçeneklerini değiştirerek satırın bölüm kabının içinde merkezi olarak konumlandırıldığından emin olacağız.

• Pozisyon: Mutlak
• Yer: Merkez

3. Kaydırma Efektleri ile Başlık Ekle

Sütuna Metin Modülü #1 Ekle

H1 İçeriği Ekle

Bu satırda ihtiyacımız olan tek modül, bazı H1 içeriğine sahip bir Metin Modülüdür.

Başlık 1 Metin Ayarları

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

• Başlık Yazı Tipi: Nunito
• Başlık Yazı Tipi Ağırlığı: Yarı Kalın
• Başlık Metni Rengi: #ffffff
• Başlık Metni 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)
• Orta Ofset: 10 (%100'de)
• Bitiş Ofseti: 10

Solma ve Kaydırma Efekti

Bir solma içeri ve dışarı etkisi ile birlikte.

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

Yukarı ve Aşağı Kaydırma Etkisi Ölçekleme

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

• Yukarı ve Aşağı Ölçeklendirmeyi Etkinleştir: Evet
• Başlangıç ​​Ölçeği: %100 (%40'ta)
• Orta Ölçek: %95 (%74'te)
• Bitiş Ölçeği: 90%

4. Tüm Bölümü Bir Kez Klonla ve Açıklama Metnini Kaydırma Efektleriyle Dahil Et

İçerik Başlığını Değiştir ve Kopyala

İ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 miktar H2 kopyası kullanın.

Metin Modülü H2 Metin Ayarlarını Değiştir

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

• Başlık 2 Yazı Tipi: Nunito
• Başlık 2 Yazı Ağırlığı: Yarı Kalın
• Başlık 2 Metin Rengi: #ffffff
• Başlık 2 Metin Boyutu: 5vw (Masaüstü), 7vw (Tablet), 8vw (Telefon)
• Başlık 2 Satır Yüksekliği: 1em (Masaüstü), 1,2em (Tablet ve Telefon)

Sütuna Metin Modülü #2 Ekle

İçerik Ekle

Ardından, seçtiğiniz bazı açıklama içeriğiyle sütuna başka bir Metin Modülü ekleyin.

Metin Ayarları

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

• Metin Yazı Tipi: Sans'ı Aç
• Metin Rengi: #ffffff
• Metin Boyutu: 1vw (Masaüstü), 2.5vw (Tablet), 3vw (Telefon)
• Metin Satırı Yüksekliği: 3,1em (Masaüstü), 2,5em (Tablet ve Telefon)

aralık

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

• Üst Marj: 8vw

Solma ve Kaydırma Efekti

Ardından, gelişmiş sekmesindeki kaydırma efektlerine geçin ve aşağıdaki solma ve azalma ayarlarını kullanın:

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

Yukarı ve Aşağı Kaydırma Etkisi Ölçekleme

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

• Yukarı ve Aşağı Ölçeklendirmeyi Etkinleştir: Evet
• Başlangıç ​​Ölçeği: %100 (%40'ta)
• Orta Ölçek: %95 (%74'te)
• Bitiş Ölçeği: 90%

5. İkinci Bölümü İstediğiniz Kadar Klonlayın

İçeriği Gittikçe Değiştirin

Sayfanızdaki ikinci bölümü tamamladıktan sonra, sayfanızın hikayesine bağlı olarak, istediğiniz kadar kopyalayabilirsiniz. Her bölümdeki içeriği değiştirdiğinizden emin olun.

6. Sayfayı CTA Bölümüyle Tamamlayın

Açıklama Metin Modülü Aralığını Değiştir

Hakkında sayfasını sonunda bir CTA bölümü ile tamamlayın. Açıklama Metin Modülünü açın ve üst ve alt kenar boşluklarını değiştirin.

• Üst Marj: 4vw
• Alt Marj: 4vw

Düğme Modülü Ekle

Kopya Ekle

Ardından, seçtiğiniz bir kopyayla birlikte bir Düğme Modülü 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: 1vw (Masaüstü), 2.5vw (Tablet), 3.5vw (Telefon)
• 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ı: 100 piksel
• Düğme Yazı Tipi: Nunito
• Düğme Yazı Ağırlığı: Kalın

aralık

Farklı ekran boyutlarına bazı özel dolgu değerleri ekleyerek Düğme Modülü ayarlarını tamamlayın.

• Üst Dolgu: 1vw (Masaüstü), 2vw (Tablet), 3vw (Telefon)
• Alt Dolgu: 1vw (Masaüstü), 2vw (Tablet), 3vw (Telefon)
• Sol Dolgu: 3vw (Masaüstü), 6vw (Tablet), 8vw (Telefon)
• Sağ Doldurma: 3vw (Masaüstü), 6vw (Tablet), 8vw (Telefon)

Ö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 gönderide, Divi'nin yerleşik kaydırma efektlerini kullanarak hakkında sayfanızda nasıl bir hikaye anlatacağınızı gösterdik. Yarattığımız efekt, art arda gelen kopyaların solup gitmesine izin vererek ziyaretçilere bir hikaye okudukları izlenimini veriyor. 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.