Divi ile Başlıklarınıza Ekleyebileceğiniz 3 Zahmetsiz Kaydırma Hareketi Efekti

Divi'nin yeni kaydırma efektleri, oluşturduğunuz sayfalara tonlarca yeni tasarım olanağı getiriyor. Her kapsayıcıya özelleştirilmiş bir kaydırma efekti ekleyebilir ve efektleri buna göre senkronize edebilirsiniz. Bu tasarım özgürlüğü, belirli içerikleri zarif bir şekilde kolayca öne çıkarmanıza yardımcı olur. Bu eğitimde, başlıklarınıza kaydırma hareketi efektlerini nasıl ekleyeceğinizi göstereceğiz. Bu şekilde, başlıklarınıza ekstra vurgu yapabilir ve ziyaretçilerinizin katılımını sağlayabilirsiniz. JSON dosyaları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.

Örnek 1

masaüstü

Mobil

Örnek #2

masaüstü

Mobil

Örnek 3

masaüstü

Mobil

Kaydırma Hareketi Efektleri Bölüm Düzenlerini ÜCRETSİZ İndirin

Ellerinizi ücretsiz bölüm düzenlerine koymak için önce aşağıdaki düğmeyi kullanarak bunları 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. Kahraman Bölüm Tasarımınızı Yeni veya Mevcut Bir Sayfada 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 beyaz olarak değiştirin.

• Arka Plan Rengi: #FFFFFF

aralık

Tasarım sekmesine geçin ve boşluk değerlerini de değiştirin.

• Üst Dolgu: 15vw (Masaüstü), 20vw (Tablet), 25vw (Telefon)
• Alt Dolgu: 0vw

taşmalar

Kaydırma efektlerinin yatay kaydırma çubuklarının görünmesine neden olmadığından emin olmak için bölümün taşmalarını da gizleriz.

• Yatay Taşma: Gizli
• Dikey Taşma: Gizli

1. Satır Ekle

Sütun Yapısı

Aşağıdaki sütun yapısını kullanarak bölüme 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ında genişlik ve maksimum genişliği değiştirin.

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

aralık

Tüm varsayılan üst ve alt dolguyu da kaldırın.

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

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.

H1 Metin Ayarları

Modülün H1 metin ayarlarını uygun şekilde değiştirin:

• Başlık Yazı Tipi: Playfair Ekranı
• Başlık Yazı Tipi Ağırlığı: Kalın
• Başlık Metni Hizalama: Orta
• Başlık Metni Rengi: #000000
• Başlık Metni Boyutu: 6vw

2. Satır Ekle

Sütun Yapısı

Ardından, aşağıdaki sütun yapısını kullanarak başka bir satır ekleyin:

Degrade Arka Plan

Henüz herhangi bir modül eklemeden satır ayarlarını açın ve degrade bir arka plan kullanın.

• Renk 1: #444444
• Renk 2: #000000
• Gradyan Türü: Doğrusal
• Gradyan Yönü: 237deg

boyutlandırma

Satırın boyutlandırma ayarlarını da değiştirin.

• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1
• Genişlik: %100
• Maksimum Genişlik: %100

aralık

Ardından, bazı özel üst ve alt dolgu ekleyin.

• Üst Dolgu: 0vw
• Alt Dolgu: 10vw (Masaüstü), 15vw (Tablet), 20vw (Telefon)

Sütuna Metin Modülü #2 Ekle

İçerik Ekle

Bu satırda ihtiyacımız olan ilk modül, içeriği olan bir Metin Modülüdür.

Metin Ayarları

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

• Metin Yazı Tipi: Playfair Ekranı
• Metin Rengi: #dddddd
• Metin Boyutu: 6vw
• Metin Satırı Yüksekliği: 1em
• Metin Gölge Bulanıklığı Gücü: 0.29em
• Metin Gölge Rengi: #ffffff
• Metin Hizalama: Merkez

Sütuna Metin Modülü #3 Ekle

İçerik Ekle

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

Metin Ayarları

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

• Metin Yazı Tipi: Sans'ı Aç
• Metin Rengi: #e8e8e8
• Metin Boyutu: 0.9vw (Masaüstü), 2vw (Tablet), 2.5vw (Telefon)
• Metin Satır Yüksekliği: 2em
• Metin Hizalama: Merkez

boyutlandırma

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

• Genişlik: %40 (Masaüstü), %90 (Tablet ve Telefon)
• Modül Hizalaması: Merkez

aralık

Ve farklı ekran boyutlarına bazı üst ve alt kenar boşlukları ekleyin.

• Üst Marj: 10vw (Masaüstü), 15vw (Tablet), 20vw (Telefon)
• Alt Kenar Boşluğu: 3vw (Masaüstü), 8vw (Tablet), 13vw (Telefon)

Sütuna Düğme Modülü Ekle

Kopya Ekle

İhtiyacımız olan sonraki ve son modül bir Düğme Modülü. Seçtiğiniz bir kopyayı ekleyin.

hizalama

Tasarım sekmesindeki düğme hizalamasını değiştirerek devam edin.

• Düğme Hizalama: Merkez

Düğme Ayarları

Ardından, düğmeyi aşağıdaki gibi biçimlendirin:

• Düğme İçin Özel Stiller Kullan: Evet
• Düğme Metin Boyutu: 0.8vw (Masaüstü), 1.5vw (Tablet), 2.5vw (Telefon)
• Düğme Metin Rengi: #ffffff
• Düğme Kenar Rengi: #ffffff
• Düğme Sınır Yarıçapı: 1 piksel
• Düğme Yazı Tipi: Sans'ı Aç
• Düğme Yazı Ağırlığı: Kalın
• Düğme Yazı Tipi Stili: Büyük Harf

aralık

Ve farklı ekran boyutlarına bazı özel dolgu değerleri ekleyin.

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

2. Kaydırma Efektlerini Uygulayın

Örnek 1

Metin Modülü #1

Yatay Hareket

Artık kahraman bölümümüzün genel görünümünü ve verdiği hissi tasarladığımıza göre, farklı kaydırma hareketi efektlerini kopyamıza uygulama zamanı geldi. İlk örneği yeniden oluşturmak için ilk Metin Modülünü açın ve aşağıdaki yatay hareketi kullanın:

• Yatay Hareketi Etkinleştir: Evet
• Başlangıç ​​Ofseti: 0
• Orta Ofset: 0
  • %0 – %80 (Masaüstü)
  • %0 – %95 (Tablet ve Telefon)
• Bitiş Ofseti: -10

Soldurma ve Çıkma

İçeri ve dışarı solma efekti de ekleyeceğiz.

• Soldurmayı ve Yavaşlamayı Etkinleştir: Evet
• Opaklığı Başlatma: %100
• Orta Opaklık: %100
  • %0 – %70 (Masaüstü)
  • %0 – %95 (Tablet ve Telefon)
• Bitiş Opaklığı: %0

Metin Modülü #2

Yatay Hareket

Ardından, bölümünüzdeki ikinci Metin Modülünü açın ve aşağıdaki yatay hareketi uygulayın:

• Yatay Hareketi Etkinleştir: Evet
• Başlangıç ​​Ofseti: 10
• Orta Ofset: 0
  • %10 – %70 (Masaüstü)
  • %10 – %95 (Tablet ve Telefon)
• Bitiş Ofseti: 10

Soldurma ve Çıkma

Eşleşen bir solma ve sönme efektiyle birlikte:

• Soldurmayı ve Yavaşlamayı Etkinleştir: Evet
• Opaklığı Başlatma: %0
• Orta Opaklık: %100
  • %35 – %60 (Masaüstü)
  • %35 – %95 (Tablet ve Telefon)
• Bitiş Opaklığı: %0

Örnek #2

Metin Modülü #1

Dikey Hareket

Bunun yerine ikinci kaydırma hareketi efektini yeniden oluşturmak ister misiniz? Bölümünüzdeki ilk Metin Modülünü açın ve aşağıdaki dikey hareketi ekleyin:

• Dikey Hareketi Etkinleştir: Evet
• Başlangıç ​​Ofseti: 0
• Orta Ofset: 0
  • %90 (Masaüstü)
  • %95 (Tablet ve Telefon)
• Bitiş Ofseti: -8

Yukarı ve Aşağı Ö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: %20
• Orta Ölçek: %100
  • %20 – %80 (Masaüstü)
  • %20 – %95 (Tablet ve Telefon)
• Bitiş Ölçeği: 20%

Metin Modülü #2

Dikey Hareket

Ardından ikinci Metin Modülünü açın ve aşağıdaki dikey hareket ayarlarını kullanın:

• Dikey Hareketi Etkinleştir: Evet
• Başlangıç ​​Ofseti: 0
• Orta Ofset: 0
  • %15 – %70 (Masaüstü)
  • %15 – %90 (Tablet ve Telefon)
• Bitiş Ofseti: -8

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

Ardından bir ölçek yukarı ve aşağı efekti ekleyin.

• Yukarı ve Aşağı Ölçeklendirmeyi Etkinleştir: Evet
• Başlangıç ​​Ölçeği: %0
• Orta Ölçek: %100
  • %30 – %70 (Masaüstü)
  • %30 – %90 (Tablet & Telefon)
• Bitiş Ölçeği: %100

Bulanıklık

Ve bölümünüzün ikinci Metin Modülüne bir bulanıklık efekti ekleyerek kaydırma efektini tamamlayın.

• Bulanıklığı Etkinleştir: Evet
• Başlangıç ​​Bulanıklığı: 10 piksel
• Orta Bulanıklık: 0px
  • %40 – %73 (Masaüstü)
  • %40 – %95 (Tablet ve Telefon)
• Bitiş Bulanıklığı: 100 piksel

Örnek 3

Metin Modülü #1

Yatay Hareket

Son olarak, üçüncü kaydırma hareketi efektini nasıl yeniden oluşturacağınızı göstereceğiz. Bölümün ilk Metin Modülünü açın ve yatay hareket efekti ekleyin.

• Yatay Hareketi Etkinleştir: Evet
• Başlangıç ​​Ofseti: 0
• Orta Ofset: 0
  • %0 – %90
• Bitiş Ofseti: 10

Soldurma ve Çıkma

Bu modül için de bir solma ve sönme efekti kullanın.

• Soldurmayı ve Yavaşlamayı Etkinleştir: Evet
• Opaklığı Başlatma: %100
• Orta Opaklık: %100
  • %0 – %90 (Masaüstü)
  • %0 – %95 (Tablet ve Telefon)
• Bitiş Opaklığı: %0

Dönen

Ayrıca dönen bir efekt de uygulayacağız.

• Döndürmeyi Etkinleştir: Evet
• Başlangıç ​​Dönüşü: 0°
• Orta Dönüş: 0°
  • %0 – %90 (Masaüstü)
  • %0 – %95 (Tablet ve Telefon)
• Bitiş Dönüşü: 90°

Metin Modülü #2

Yatay Hareket

Ardından, bölümünüzdeki ikinci Metin Modülünü açın ve aşağıdaki yatay hareket ayarlarını uygulayın:

• Yatay Hareketi Etkinleştir: Evet
• Başlangıç ​​Ofseti: 0
• Orta Ofset: 0
  • %0 – %90
• Bitiş Ofseti: -10

Soldurma ve Çıkma

İçeri ve dışarı kaydırma hareketi efektini kullanarak devam edin.

• Soldurmayı ve Yavaşlamayı Etkinleştir: Evet
• Opaklığı Başlatma: %100
• Orta Opaklık: %100
  • %0 – %80 (Masaüstü)
  • %0 – %95 (Tablet ve Telefon)
• Bitiş Opaklığı: %0

Dönen

Dönen bir kaydırma efekti de ekleyerek modülün ayarlarını tamamlayın.

• Döndürmeyi Etkinleştir: Evet
• Başlangıç ​​Dönüşü: 0°
• Orta Dönüş: 0°
  • %0 – %80 (Masaüstü)
  • %0 – %90 (Tablet ve Telefon)
• Bitiş Dönüşü: -90°

Ön izleme

Artık tüm adımların üzerinden geçtik, şimdi farklı ekran boyutlarındaki sonuca son bir göz atalım.

Örnek 1

masaüstü

Mobil

Örnek #2

masaüstü

Mobil

Örnek 3

masaüstü

Mobil

Son düşünceler

Bu gönderide, başlığınıza kaydırma hareketi efektleri eklemek için Divi'nin yeni kaydırma efektlerini nasıl kullanacağınızı gösterdik. Üç farklı örneği ele aldık ama olasılıklar gerçekten sonsuz. JSON dosyaları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.