Divi ile Her Kapsayıcı İçin Güzel Bir Animasyonlu Anahat Nasıl Oluşturulur

Divi'nin animasyon seçenekleri, özel koda ihtiyaç duymadan tonlarca web sitesini hayata geçirmeye yardımcı oldu. Yerleşik animasyon ayarları son derece ayarlanabilir ve gerçekten benzersiz tasarımlar oluşturmanıza olanak tanır. Örneğin yapabileceğiniz şeylerden biri, animasyonlu bir kap taslağı oluşturmaktır. Bu yazıda size tam olarak bunu göstereceğiz. Her kapsayıcıya bir kenarlık ekleyeceğiz ve her öğenin akışıyla eşleşen animasyon ayarları ekleyeceğiz. JSON dosyasını da ücretsiz olarak indirebileceksiniz!

Hadi hadi bakalım.

Ön izleme

Eğiticiye dalmadan önce, tüm ekran boyutlarındaki sonuca hızlıca bir göz atalım.

masaüstü

Mobil

Animasyonlu Anahat Düzenini ÜCRETSİZ İndirin

Ellerinizi ücretsiz animasyonlu anahat düzenine 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!

Youtube Kanalımıza Abone Olun

Yeniden Oluşturmaya Başlayalım

Yeni Bölüm Ekle

Arka plan rengi

Üzerinde çalıştığınız sayfaya yeni bir normal bölüm ekleyerek başlayın ve beyaz bir arka plan rengi kullanın.

• Arka Plan Rengi: #FFFFFF

aralık

Tasarım sekmesine gidin ve bazı özel kenar boşluğu ve dolgu değerleri ekleyin.

• Üst Marj: 3vw
• Alt Marj: 3vw
• Sol Kenar Boşluğu: 3vw
• Sağ Kenar Boşluğu: 3vw
• Üst Dolgu: 3vw
• Alt Dolgu: 3vw

Sınır

Ardından kenarlık ayarlarını açın ve köşelerin her birine '2vw' ekleyin. Kenarlık da kullanın.

• Kenar Genişliği: 1px
• Kenar Rengi: #000000

Animasyon

Özel bir animasyon da ekleyin.

• Animasyon Stili: Slayt
• Animasyon Yönü: Aşağı
• Animasyon Opaklığı Başlatma: %100

görünürlük

Hiçbir şeyin bölüm kapsayıcısını aşmadığından emin olmak için bölümün görünürlük ayarlarındaki taşmaları gizleyeceğiz.

• 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 boyutlandırma ayarlarını buna göre değiştirin:

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

aralık

Daha sonra bazı özel dolgu değerleri ekleyin.

• Üst Dolgu: 3vw
• Alt Dolgu: 3vw
• Sol Dolgu: 3vw
• Sağ Dolgu: 3vw

Sınır

Kenarlık ayarlarına geçin ve köşelerin her birine '2vw' ekleyin. Kenarlık da ekleyin.

• Kenar Genişliği: 1px
• Kenar Rengi: #000000

Animasyon

Ayrıca satıra bir animasyon ekliyoruz.

• Animasyon Stili: Slayt
• Animasyon Yönü: Yukarı
• Animasyon Gecikmesi: 500ms
• Animasyon Opaklığı Başlatma: %100

görünürlük

Ve sütun animasyonunun (daha sonra ekleyeceğimiz) çalıştığından emin olmak için satır taşmalarını görünür hale getireceğiz.

• Yatay Taşma: Görünür
• Dikey Taşma: Görünür

Sütun 1 Ayarları

İlk sütunun ayarlarını açarak devam edin.

Sınır

Tasarım sekmesine gidin, köşelerin her birine '2vw' ekleyin ve bir kenarlık kullanın.

• Kenar Genişliği: 1px
• Kenar Rengi: #000000

Animasyon

Özel bir animasyon ekleyerek sütun ayarlarını tamamlayın.

• Animasyon Stili: Slayt
• Animasyon Yönü: Aşağı
• Animasyon Gecikmesi: 1000ms
• Animasyon Opaklığı Başlatma: %100

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

İçerik Ekle

Modül eklemeye başlama zamanı! İhtiyacımız olan ilk şey bir Blurb Modülü. Seçtiğiniz bazı içeriği girin.

Simge Seç

Sonraki bir simge seçin.

Simge Ayarları

Tasarım sekmesine gidin ve simge ayarlarını buna göre değiştirin:

• Simge Rengi: #000000
• Simge Yerleşimi: Üst
• Simge Yazı Tipi Boyutunu Kullan: Evet
• Simge Yazı Tipi Boyutu: 6vw (Masaüstü), 8vw (Tablet), 10vw (Telefon)

Başlık Metni Ayarları

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

• Başlık Yazı Tipi: Poppins
• Başlık Yazı Tipi Ağırlığı: Ultra Kalın
• Başlık Metni Hizalama: Orta
• Başlık Metin Boyutu: 1.2vw (Masaüstü), 2.5vw (Tablet), 3vw (Telefon)

Gövde Metni Ayarları

Gövde metni ayarlarıyla birlikte.

• Gövde Yazı Tipi: Açık Sans
• Gövde Metni Hizalama: Orta
• Gövde Metni Boyutu: 0.8vw (Masaüstü), 1.7vw (Tablet), 2.3vw (Telefon)

aralık

Farklı ekran boyutlarına özel boşluk değerleri ekleyerek Blurb Modülünün etrafında biraz boşluk yaratın.

• Üst Marj: 3vw
• Alt Marj: 3vw
• Sol Kenar Boşluğu: 3vw
• Sağ Kenar Boşluğu: 3vw
• Üst Dolgu: 10vw (Masaüstü), 18vw (Tablet ve Telefon)
• Alt Dolgu: 10vw (Masaüstü), 18vw (Tablet ve Telefon)
• Sol Dolgu: 2vw (Masaüstü), 8vw (Tablet ve Telefon)
• Sağ Dolgu: 2vw (Masaüstü), 8vw (Tablet ve Telefon)

Sınır

Kenarlık ayarlarına geçin, köşelerin her birine '2vw' ekleyin ve bir kenarlık kullanın.

• Kenar Genişliği: 1px
• Kenar Rengi: #000000

Animasyon

Özel bir animasyon ekleyerek Blurb Module tasarımını tamamlayın.

• Animasyon Stili: Slayt
• Animasyon Yönü: Aşağı
• Animasyon Süresi: 1300ms
• Animasyon Gecikmesi: 1200ms
• Animasyon Yoğunluğu: %60
• Animasyon Opaklığı Başlatma: %100
• Simge Animasyonu: Animasyon Yok

Sütun 1'e Düğme Modülü Ekle

Kopya Ekle

Bir Düğme Modülü olan bir sonraki ve son modüle geçin. Seçtiğiniz bir kopyayı girin.

hizalama

Tasarım sekmesine gidin ve hizalamayı değiştirin.

• Düğme Hizalama: Merkez

Düğme Ayarları

Sonraki düğme ayarlarını değiştirin.

• Düğme İçin Özel Stiller Kullan: Evet
• Düğme Metin Boyutu: 0.8vw (Masaüstü), 1.5vw (Tablet), 2.2vw (Telefon)
• Düğme Metin Rengi: #000000
• Düğme Arka Plan Rengi: #FFFFFF
• Düğme Kenar Genişliği: 1px
• Düğme Kenar Rengi: #000000
• Düğme Sınır Yarıçapı: 50vw
• Düğme Yazı Tipi: Sans'ı Aç
• Düğme Yazı Tipi Ağırlığı: Ultra Kalın
• Düğme Yazı Tipi Stili: Büyük Harf

aralık

Ve farklı ekran boyutlarında özel boşluk değerleri kullanarak Düğme Modülünü şekillendirin.

• Üst Kenar Boşluğu: -5vw (Masaüstü), -6.5vw (Tablet), -7vw (Telefon)
• Alt Kenar Boşluğu: 2vw (Masaüstü), 3vw (Tablet ve Telefon)
• Üst Dolgu: 1vw (Masaüstü), 2vw (Tablet ve Telefon)
• Alt Dolgu: 1vw (Masaüstü), 2vw (Tablet ve Telefon)
• Sol Dolgu: 5vw (Masaüstü), 8vw (Tablet ve Telefon)
• Sağ Doldurma: 5vw (Masaüstü), 8vw (Tablet ve Telefon)

Animasyon

Özel bir animasyon ekleyerek Düğme Modülü tasarımını tamamlayın.

• Animasyon Stili: Slayt
• Animasyon Yönü: Yukarı
• Animasyon Gecikmesi: 1400ms
• Animasyon Yoğunluğu: %200
• Animasyon Opaklığı Başlatma: %100

Sütun 2'yi Kaldır ve Sütun 1'i Klonla

1. sütunu ve içindeki modülleri tamamladığınızda, ikinci (boş) sütunu silebilir ve ilkini klonlayabilirsiniz. Tüm Blurb Module içeriğini web sitenize uyacak şekilde değiştirin ve işiniz bitti!

Ö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 size sağladığı çeşitli kapsayıcılarla ve bunların kenarlık ayarlarıyla birlikte Divi'nin animasyon ayarlarını nasıl kullanacağınızı gösterdik. Umarız bu eğitim size bu tekniğin kendi varyasyonlarınızı yaratmanız için ilham verir! Herhangi bir sorunuz varsa, aşağıdaki yorum bölümüne bir yorum bıraktığınızdan emin olun.

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.