Divi için ÜCRETSİZ Renkli Sıçrama Animasyonu Kahraman Bölümünü İndirin

Sayfanızın kahraman bölümünü tasarlama şekliniz, sayfanızın geri kalanı için beklentileri belirler. İster yıldönümü ister indirim olsun, bir şeyi kutlayan bir açılış sayfası tasarlıyorsanız, tasarımınıza şenlik havasını getirmenize kesinlikle yardımcı olabilir. Buna yaklaşmanın bir yolu, kahraman bölümünüzün arka planına renkli bir sıçrama animasyonu eklemektir. Odak, sağladığınız yazılı kopya ve CTA üzerinde kalmaya devam edecektir. Bu eğitimde, Divi'nin yerleşik ayarlarıyla güzel bir renkli sıçrama animasyonu bölümünün nasıl oluşturulacağını göstereceğiz. 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

Sıçrayan Animasyon Kahramanı Bölüm Düzenini ÜCRETSİZ İndirin

Ellerinizi ücretsiz sıçrama animasyonu kahraman bölümü düzenine sokmak 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!

Yeniden Yaratmaya Başlayalım!

Yeni Bölüm Ekle

Degrade Arka Plan

Üzerinde çalıştığınız sayfaya yeni bir bölüm ekleyerek başlayın. Bölüm ayarlarını açın ve seçtiğiniz bir degrade arka planı uygulayın.

• Renk 1: #070a49
• Renk 2: #6f00f7
• Gradyan Türü: Doğrusal
• Gradyan Yönü: 148deg

boyutlandırma

Bölümün tasarım sekmesine gidin ve boyutlandırma ayarlarına bir minimum yükseklik ekleyin. Bu, bölümümüzü tam ekran yapacaktır.

• Min Yükseklik: 100vh

aralık

Sonraki tüm varsayılan üst ve alt dolguyu kaldırıyoruz.

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

görünürlük

Ve tasarımımızda yatay kaydırma çubuğunun görünmediğinden emin olmak için bölümün taşmalarını gizleriz.

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

1. Satır Ekle

Sütun Yapısı

Bölüm ayarları yapıldığında, aşağıdaki sütun yapısını kullanarak ilk satırı ekleyin:

boyutlandırma

Henüz herhangi bir modül eklemeden, satır ayarlarını açın ve boyutlandırma ayarlarını aşağıdaki gibi değiştirerek satırın bölüm kabının hem sol hem de sağ taraflarına dokunmasına izin verin:

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

aralık

Sonraki tüm varsayılan üst ve alt dolguyu kaldırın.

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

Ana Eleman CSS

Modüllerin daha küçük ekran boyutlarında yan yana görünmesini sağlamak için satırın ana öğesine bir satır CSS kodu ekleyeceğiz.

display: flex;

Sütun 1 Animasyon

Genel satır ayarları yapıldığında, 1. sütun ayarlarını açın ve animasyon ekleyin.

• Animasyon Stili: Yakınlaştır
• Animasyon Yönü: Merkez
• Animasyon Yoğunluğu: %100

Sütun 2 Animasyon

Sonraki ikinci sütuna animasyon ekleyin.

• Animasyon Stili: Yakınlaştır
• Animasyon Yönü: Merkez
• Animasyon Gecikmesi: 250ms
• Animasyon Yoğunluğu: %100

Sütun 3 Animasyon

Üçüncü sütun için de animasyon kullanıyoruz.

• Animasyon Stili: Yakınlaştır
• Animasyon Yönü: Merkez
• Animasyon Gecikmesi: 500ms
• Animasyon Yoğunluğu: %100

Sütun 1'e Görüntü Modülü Ekle

Sıçrama Resmini Yükle

Sütun 1'deki Görüntü Modülü ile başlayarak modül ekleme zamanı. Bu öğreticinin başında indirebildiğiniz indirme klasöründe bulabileceğiniz sıçrama görüntüsünü yükleyin.

boyutlandırma

Modülün tasarım sekmesine gidin ve boyutlandırma ayarlarında tam genişliği zorlayın.

• Tam Genişliği Zorla: Evet

Filtreler

Ardından, filtre ayarlarını kullanarak modülün renklerini değiştirin.

• Renk tonu: 303 derece
• Doygunluk: %200

Ölçeği Dönüştür

Görüntüyü dönüştürme ayarlarında da ölçeklendiriyoruz.

• Alt: %150
• Sağ: %150

Dikey Hareket Kaydırma Etkisi

Ardından, gelişmiş sekmeye geçin ve biraz dikey hareketi etkinleştirin.

• Dikey Hareketi Etkinleştir: Evet
• Başlangıç ​​Ofseti: 0
• Orta Ofset:
  • Masaüstü: 0 (%50'de)
  • Tablet: 0 (%70'te)
  • Telefon: 0 (%85'te)
• Bitiş Ofseti: 2
• Hareket Efekti Tetikleyicisi: Elemanın Altı

Yatay Hareket Kaydırma Etkisi

Biz de biraz yatay hareket kullanıyoruz.

• Yatay Hareketi Etkinleştir: Evet
• Başlangıç ​​Ofseti:
  • Masaüstü: -10
  • Tablet & Telefon: 0
• Orta Ofset: 0
• Bitiş Ofseti: 4
• Hareket Efekti Tetikleyicisi: Elemanın Altı

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

Ölçekleme yukarı ve aşağı etkisi ile birlikte.

• Yukarı ve Aşağı Ölçeklendirmeyi Etkinleştir: Evet
• Başlangıç ​​Ölçeği: %100
• Orta Ölçek: %150
• Bitiş Ölçeği: %200
• Hareket Efekti Tetikleyicisi: Elemanın Altı

Görüntü Modülünü İki Kez Klonla ve Kopyaları Satırın Kalan Sütunlarına Yerleştir

İlk Görüntü Modülü tamamlandığında, tüm modülü iki kez klonlayabilir ve kopyaları satırın kalan sütunlarına yerleştirebilirsiniz.

Sütun 2'deki Görüntü Modülünü Değiştirin

aralık

2. sütundaki Görüntü Modülünü açın ve tablette ve telefonda biraz üst kenar boşluğu ekleyin.

• Üst Marj: %50 (Yalnızca Tablet ve Telefon)

Filtreler

Filtre ayarlarındaki tonu da değiştirin.

• Renk tonu: 55 derece

Sütun 3'teki Görüntü Modülünü Değiştirin

Filtreler

Ardından, üçüncü sütundaki Görüntü Modülünü açın ve filtre ayarlarını buna göre değiştirin:

• Renk tonu: 309 derece
• Parlaklık: %0

2. Satır Ekle

Sütun Yapısı

Bir sonraki satıra. Aşağıdaki sütun yapısını kullanın:

Konum

Satır ayarlarını açın ve gelişmiş sekmesinde satırın konum ayarlarını değiştirin.

• Pozisyon: Mutlak
• Yer: Merkez

Sütuna Metin Modülü #1 Ekle

H1 İçeriği Ekle

Seçtiğiniz bazı H1 içeriğini içeren bir Metin Modülü ile başlayarak modül ekleme zamanı.

H1 Metin Ayarları

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

• Başlık Yazı Tipi: Rubik
• Başlık Metni Rengi: #ffffff
• Başlık Metni Boyutu: 80px (Masaüstü), 50px (Tablet), 35px (Telefon)

• Başlık Metni Gölge Dikey Uzunluğu: 0.08em
• Başlık Metni Gölge Bulanıklığı Gücü: 0em
• Başlık Metni Gölge Rengi: #1a005b

Sütuna Metin Modülü #2 Ekle

İçerik Ekle

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

Metin Ayarları

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

• Metin Yazı Tipi: Muli
• Metin Rengi: #dddddd
• Metin Boyutu: 15px (Masaüstü), 14px (Tablet ve Telefon)
• Metin Satırı Yüksekliği: 2.1em

• Metin Gölge Rengi: #1a005b

boyutlandırma

Daha sonra modülün genişliğini değiştirin.

• Genişlik: %60 (Masaüstü), %100 (Tablet ve Telefon)

aralık

Ve farklı ekran boyutlarına bir miktar üst ve alt kenar boşluğu ekleyerek modül ayarlarını tamamlayın.

• Üst Marj: %6 (Masaüstü), %10 (Tablet), %14 (Telefon)
• Alt Marj: %6 (Masaüstü), %10 (Tablet), %14 (Telefon)

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

Kopya Ekle

Sütunumuzda ihtiyacımız olan son modül bir Düğme Modülüdür. Seçtiğiniz bir kopyayı ekleyin.

Düğme Ayarları

Ardından, tasarım sekmesine gidin ve düğmeyi aşağıdaki gibi biçimlendirin:

• Düğme İçin Özel Stiller Kullan: Evet
• Düğme Metin Boyutu: 17px
• Düğme Metin Rengi: #ffffff
• Düğme Arka Plan Rengi: #ea01a6
• Düğme Kenar Genişliği: 0px
• Düğme Sınır Yarıçapı: 100 piksel

• Düğme Yazı Tipi: Rubik
• Düğme Yazı Ağırlığı: Kalın
• Düğme Yazı Tipi Stili: Büyük Harf

aralık

Boşluk ayarlarına da bazı özel dolgu değerleri ekleyin.

• Üst Dolgu: 20px
• Alt Dolgu: 20px
• Sol Dolgu: 60px
• Sağ Dolgu: 60px

Kutu Gölge

Ve bir kutu gölgesi ekleyerek modül ayarlarını tamamlayın.

• Kutu Gölgesi Yatay Konumu: 5px
• Kutu Gölgesi Dikey Konumu: 5px
• Gölge Rengi: #30005b

Ö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 animasyon ve kaydırma efektleriyle nasıl yaratıcı olabileceğinizi gösterdik. Daha spesifik olarak, özel bir durum için ayarladığınız bir açılış sayfası için renkli sıçrama animasyonu kahraman bölümünün nasıl oluşturulacağını gösterdik. Bu fırsat, şirketinizin yıl dönümü veya özel bir indirim olabilir, ancak bununla sınırlı değildir. 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.