Divi's Theme Builder ile Animasyonlu Sayfa Geçişleri Nasıl Oluşturulur

Normalde, ziyaretçiler Divi web sitenizde sayfadan sayfaya gezinirken geçiş anında gerçekleşir. Peki ya bu sayfa geçişlerini canlandırmanın bir yolu varsa? Divi's Theme Builder ile herhangi bir özel koda ihtiyaç duymadan kesinlikle vardır! Ziyaretçileriniz başka bir sayfaya girmek için bir sayfadan ayrılır ayrılmaz bir animasyon uygulayabilirsiniz. Bugünkü eğitimde size bu hareketli sayfa geçişlerini nasıl oluşturacağınızı göstereceğiz. Dahası, bir sonraki projenize hemen uygulayabileceğiniz üç farklı örneği de paylaşacağız. Şablon 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.

Hareketli Sayfa Geçişi #1

masaüstü

Mobil

Hareketli Sayfa Geçişi #2

masaüstü

Mobil

Hareketli Sayfa Geçişi #3

masaüstü

Mobil

Sayfa Şablonlarını ÜCRETSİZ İndirin

Ellerinizi ücretsiz sayfa şablonlarına 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. Divi Tema Oluşturucuya Git ve Yeni Sayfa Şablonu Ekle

Divi Tema Oluşturucu'ya Git ve Yeni Şablon Ekle

Yapmanız gereken ilk şey Divi Tema Oluşturucunuza gitmek ve 'Yeni Şablon Ekle'yi tıklamak.

Şablonu Tüm Sayfalarda Kullan

Tüm sayfalarda (veya geçişin uygulanmasını istediğiniz sayfalarda) yeni şablonu kullanın.

• Kullanım Yeri: Tüm Sayfalar

Şablon Gövdesi Oluşturmaya Başlayın

Ardından, sayfa şablonunuzun özel gövdesini oluşturmaya başlayın.

2. İçerik Sonrası Modülünü Kullanarak Sayfa Gövdesi Oluşturun

Bölüm Ayarları

aralık

Şablon düzenleyicinin içine girdikten sonra bir bölüm göreceksiniz. Bu bölümü açın ve tüm varsayılan üst ve alt dolguyu kaldırın.

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

görünürlük

Animasyon gerçekleşirken yatay kaydırma çubuğunun görünmediğinden emin olmak için, bölüm ayarlarının gelişmiş sekmesinde her iki bölüm taşmasını da gizlememiz gerekecek.

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

Yeni 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 satırın, bölüm kabının tüm genişliğini kaplamasına izin verin.

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

aralık

Ayrıca satırın varsayılan üst ve alt dolgusunu da kaldırıyoruz. Bu noktada, bölüm, satır ve sütun kapları tam olarak aynı boyuta sahiptir. Konteynerler arasında hiç boşluk yok. Bu, bir sonraki adımda ne olacağı için önemlidir; dinamik sayfa içeriği ekleme.

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

Sütuna Gönderi İçeriği Modülü Ekle

Sayfa içeriğinin dinamik görünmesini sağlamak için ihtiyacımız olan tek modül Post Content Modülüdür. Devam edin ve bu modülü satırınızın sütununa ekleyin. Bu yazının önceki bölümlerinde uyguladığımız bölüm ve satır ayarları sayesinde dinamik sayfa içeriği, bölüm kapsayıcısının tüm genişliğini ve yüksekliğini kaplayacaktır.

3. İstediğiniz Animasyonlu Sayfa Geçişini Uygulayın

Animasyonlu Sayfa Geçişini Yeniden Oluştur #1

Bölüm Ayarları

Arka plan rengi

Animasyonlu sayfa geçişlerini uygulama zamanı! Üç farklı örnek paylaşıyoruz, ancak Divi'nin yerleşik seçenekleriyle animasyon olanakları sonsuzdur. İlk animasyonlu sayfa geçişini uygulamak için bölüm kapsayıcısını açın ve bir arka plan rengi ekleyin.

• Arka Plan Rengi: #d8cdbe

Animasyon

Ayrıca bölüme aşağıdaki animasyon ayarlarını da uyguluyoruz:

• Animasyon Stili: Slayt
• Animasyon Yönü: Sağ
• Animasyon Opaklığı Başlatma: %100
• Animasyon Hızı Eğrisi: Kolay Giriş-Çıkış
• Animasyon Tekrarı: Bir kez

Satır Ayarları

Arka plan rengi

Sonraki satır ayarlarını açın ve aşağıdaki arka plan rengini ekleyin:

• Arka Plan Rengi: #e2e2e2

Animasyon

Satıra aşağıdaki animasyonu uygulayarak devam edin:

• Animasyon Stili: Slayt
• Animasyon Yönü: Sağ
• Animasyon Gecikmesi: 500ms
• Animasyon Opaklığı Başlatma: %100
• Animasyon Hızı Eğrisi: Kolay Giriş-Çıkış
• Animasyon Tekrarı: Bir kez

Sütun Ayarları

Arka plan rengi

Canlandıracağımız bir sonraki kapsayıcıya, sütun kapsayıcısına. Sütun ayarlarını açın ve beyaz bir arka plan rengi ekleyin.

• Arka Plan Rengi: #ffffff

Animasyon

Sütuna özel bir animasyon da ekleyin.

• Animasyon Stili: Slayt
• Animasyon Yönü: Sol
• Animasyon Gecikmesi: 1200ms
• Animasyon Hızı Eğrisi: Kolay Giriş-Çıkış
• Animasyon Tekrarı: Bir kez

İçerik Modülü Ayarları Gönder

Animasyon

Son olarak, İçerik Sonrası Modülünü (tüm dinamik sayfa içeriğini içeren) canlandıracağız.

• Animasyon Stili: Soluk
• Animasyon Gecikmesi: 2500ms
• Animasyon Hızı Eğrisi: Kolay Giriş-Çıkış
• Animasyon Tekrarı: Bir kez

Animasyonlu Sayfa Geçişini Yeniden Oluştur #2

Bölüm Ayarları

Arka plan rengi

Bunun yerine ikinci animasyonu oluşturmak ister misiniz? Bölüm ayarlarını açın ve aşağıdaki arka plan rengini kullanın:

• Arka Plan Rengi: #d8cdbe

Animasyon

Ardından, bölüme özel bir animasyon uygulayın.

• Animasyon Stili: Slayt
• Animasyon Yönü: Sol
• Animasyon Opaklığı Başlatma: %100
• Animasyon Hızı Eğrisi: Kolay Giriş-Çıkış
• Animasyon Tekrarı: Bir kez

Satır Ayarları

Degrade Arka Plan

Sonraki satır ayarlarını açın ve bunun için aşağıdaki gradyan arka planını kullanın:

• Renk 1: rgba(255,255,255,0)
• Renk 2: #ffffff
• Gradyan Türü: Doğrusal
• Gradyan Yönü: 90deg
• Başlangıç ​​Konumu: %50
• Bitiş Konumu: %50

Animasyon

Satırınıza da özel bir animasyon ekleyin.

• Animasyon Stili: Slayt
• Animasyon Yönü: Yukarı
• Animasyon Gecikmesi: 800ms
• Animasyon Opaklığı Başlatma: %100
• Animasyon Hızı Eğrisi: Kolaylık
• Animasyon Tekrarı: Bir kez

Sütun Ayarları

Arka plan rengi

Ardından, satırın sütun ayarlarını açın ve beyaz bir arka plan rengi kullanın.

• Arka Plan Rengi: #ffffff

Animasyon

Sütuna bir animasyon ekleyerek devam edin.

• Animasyon Stili: Slayt
• Animasyon Yönü: Sağ
• Animasyon Gecikmesi: 2000ms
• Animasyon Opaklığı Başlatma: %100
• Animasyon Hızı Eğrisi: Kolay Giriş-Çıkış
• Animasyon Tekrarı: Bir kez

İçerik Modülü Ayarları Gönder

Animasyon

Son olarak, İçerik Sonrası Modülü ayarlarını açın ve aşağıdaki animasyon ayarlarını kullanın:

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

Animasyonlu Sayfa Geçişini Yeniden Oluştur #3

Bölüm Ayarları

Degrade Arka Plan

Sonraki ve son hareketli sayfa geçişine! Bölüm ayarlarını açın ve aşağıdaki gradyan arka planını kullanın:

• Renk 1: #d8cdbe
• Renk 2: #ffffff
• Gradyan Türü: Radyal
• Radyal Yön: Üst
• Başlangıç ​​Konumu: %20
• Bitiş Konumu: %20

Animasyon

Bölümün tasarım sekmesine geçin ve buna göre animasyon ayarlarını değiştirin:

• Animasyon Stili: Slayt
• Animasyon Yönü: Aşağı
• Animasyon Yoğunluğu: %10
• Animasyon Opaklığı Başlatma: %100
• Animasyon Hızı Eğrisi: Kolay Giriş-Çıkış
• Animasyon Tekrarı: Bir kez

Satır Ayarları

Degrade Arka Plan

Ardından, satır ayarlarını açın ve bir degrade arka planı uygulayın:

• Renk 1: #ffffff
• Renk 2: rgba(255,255,255,0)
• Gradyan Türü: Radyal
• Radyal Yön: Merkez
• Başlangıç ​​Konumu: %50
• Bitiş Konumu: %50

Animasyon

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

• Animasyon Stili: Slayt
• Animasyon Yönü: Aşağı
• Animasyon Gecikmesi: 1000ms
• Animasyon Opaklığı Başlatma: %100
• Animasyon Hızı Eğrisi: Kolaylık
• Animasyon Tekrarı: Bir kez

Sütun Ayarları

Arka plan rengi

Sütun ayarlarını açarak devam edin. Arka plan rengini değiştirin.

• Arka Plan Rengi: #ffffff

Animasyon

Aşağıdaki animasyon ayarlarını da sütuna uygulayın:

• Animasyon Stili: Slayt
• Animasyon Yönü: Aşağı
• Animasyon Gecikmesi: 1500ms
• Animasyon Hızı Eğrisi: Kolay Giriş-Çıkış
• Animasyon Tekrarı: Bir kez

İçerik Modülü Ayarları Gönder

Animasyon

Ve aşağıdaki animasyon ayarlarını İçerik Sonrası Modülüne uygulayarak üçüncü animasyonlu sayfa geçişini tamamlayın:

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

6. Tüm Tema Oluşturucu Değişikliklerini Kaydet ve Sonucu Önizleme

Sayfa şablonunuzun gövdesini oluşturduktan ve istediğiniz animasyonlu sayfa geçişini ekledikten sonra, tüm Tema Oluşturucu değişikliklerini kaydedebilir ve sonucu web sitenizde görüntüleyebilirsiniz!

Ön izleme

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

Hareketli Sayfa Geçişi #1

masaüstü

Mobil

Hareketli Sayfa Geçişi #2

masaüstü

Mobil

Hareketli Sayfa Geçişi #3

masaüstü

Mobil

Son düşünceler

Bu gönderide, Divi'nin yerleşik seçenekleri ve yalnızca Tema Oluşturucu ile animasyonlu sayfa geçişlerinin nasıl oluşturulacağını gösterdik. Bu, ek koda gerek kalmadan web sitenize başka bir etkileşim düzeyi eklemenin harika bir yoludur. Örnek şablon 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.