Divi ile Hover'da 3 Adımda Bir Blurb Reveal Nasıl Oluşturulur

Dışarıdaki birçok şirket web sitesi, bir noktada yaklaşımlarının bir önizlemesini paylaşıyor. Bir yaklaşım bölümü oluştururken, onu geleneksel şekilde ele alabilir veya ona daha fazla etkileşim eklemeyi deneyebilirsiniz. İkinci seçeneği gerçekleştirmenin bir yolunu arıyorsanız, bu gönderiye bayılacaksınız.

Bu eğitimde, Divi'nin yeni boyutlandırma seçeneklerini kullanarak 3 adımlı tanıtım tanıtımını nasıl oluşturacağınızı göstereceğiz. Başlığı göstererek başlayacağız, adımlara giden üç oku görüntüleyerek devam edeceğiz ve animasyonlu tanıtım yazılarını ortaya çıkararak efekti tamamlayacağız. 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

3 Adımlı Bulanıklık Gösterimi Düzenini ÜCRETSİZ İndirin

3 adımlı tanıtım yazısı düzenine el 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!

Yeniden Yaratmaya Başlayalım!

Youtube Kanalımıza Abone Olun

Yeni Bölüm Ekle

Varsayılan Degrade Arka Planı

Yapmanız gereken ilk şey, üzerinde çalıştığınız sayfaya yeni bir bölüm eklemek. Bölüm ayarlarını açın ve aşağıdaki degrade arka planını buna ekleyin:

• Renk 1: #ffa3ad
• Renk 2: #ffcea3
• Gradyan Yönü: 122deg

Hover Gradyan Arka Planı

Fareyle üzerine gelindiğinde degrade arka planını değiştirin:

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

aralık

Tasarım sekmesine gidin ve ardından bazı özel üst ve alt dolgu ekleyin.

• Üst Dolgu: 1vw
• Alt Dolgu: 1vw

taşma

Bu gönderide daha sonra, bölümün yüksekliği ile oynayacağız. Hiçbir şeyin bölüm kapsayıcısını aşmadığından emin olmak için görünürlük ayarlarındaki taşmaları gizleyeceğiz.

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

1. Satır Ekle

Sütun Yapısı

Bölüm ayarlarını tamamladıktan sonra, aşağıdaki sütun yapısını kullanarak bölüme ilk satırı ekleyerek devam edebilirsiniz:

Satıra Metin Modülü Ekle

H2 İçeriği Ekle

Satırın sütununa yeni bir Metin Modülü ekleyin ve seçtiğiniz bazı H2 içeriğini girin.

H2 Metin Ayarları

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

• Başlık 2 Yazı Tipi: Montserrat
• Başlık 2 Yazı Ağırlığı: Yarı Kalın
• Başlık 2 Metin Hizalama: Orta
• Başlık 2 Metin Rengi: #ffffff
• Başlık 2 Metin Boyutu: 2vw (Masaüstü), 5vw (Tablet), 6vw (Telefon)
• Başlık 2 Harf Aralığı: -2px

2. Satır Ekle

Sütun Yapısı

Aşağıdaki sütun yapısını kullanarak ikinci satırı ekleyerek devam edin:

aralık

Henüz herhangi bir modül eklemeden, satır ayarlarını açın ve farklı ekran boyutlarına bazı özel üst ve alt dolgular ekleyin.

• Üst Dolgu: 2vw (Masaüstü), 4vw (Tablet), 5vw (Telefon)
• Alt Dolgu: 2vw (Masaüstü), 4vw (Tablet), 5vw (Telefon)

Görüntülemek

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

display: flex;

Sütun 1'e Ok Metin Modülü Ekleme

Sembol Ekle

Animasyonlu okları eklemek için bu satırı kullanacağız. Satırın ilk sütununa yeni bir Metin Modülü ekleyin ve içerik kutusuna '↓' sembolünü ekleyin.

Metin Ayarları

Tasarım sekmesine gidin ve metin ayarlarını değiştirin.

• Metin Hizalama: Sağ
• Metin Rengi: #ffa3ad
• Metin Boyutu: 4vw (Masaüstü), 6vw (Tablet), 8vw (Telefon)

aralık

Sonraki boşluk ayarlarına bazı özel kenar boşlukları değerleri ekleyin.

• Üst Marj: -3vw
• Alt Marj: 8vw

Dönüştür Döndür

Modülü dönüştürme ayarlarında döndürün.

• Sol: 45 derece

Animasyon

Ve aşağıdaki ayarları kullanarak özel bir animasyon ekleyin:

• Animasyon Stili: Slayt
• Animasyon Yönü: Merkez
• Animasyon Gecikmesi: 1000ms

Sütun 2'ye Ok Metin Modülü Ekleme

Sembol Ekle

İkinci sütuna yeni bir satır ekleyerek devam edin ve içerik kutusuna '↓' sembolünü ekleyin.

Metin Ayarları

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

• Metin Hizalama: Merkez
• Metin Rengi: #ffa3ad
• Metin Boyutu: 4vw (Masaüstü), 6vw (Tablet), 8vw (Telefon)

aralık

Sonraki bazı özel üst kenar boşluğu ekleyin.

• Üst Marj: 1vw

Animasyon

Ve aşağıdaki animasyon ayarlarını uygulayın:

• Animasyon Stili: Slayt
• Animasyon Yönü: Merkez

Sütun 3'e Ok Metni Modülü Ekleme

Sembol Ekle

Sütun 3'teki son oka Metin Modülü üzerine. İçerik kutusuna '↓' okunu ekleyin.

Metin Ayarları

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

• Metin Hizalama: Sol
• Metin Rengi: #ffa3ad
• Metin Boyutu: 4vw (Masaüstü), 6vw (Tablet), 8vw (Telefon)

aralık

Sonra bir miktar negatif üst kenar boşluğu ekleyin.

• Üst Marj: -3vw

Dönüştür Döndür

Modülü dönüştürme ayarlarında döndürün.

• Sol: 315 derece

Animasyon

Ve aşağıdaki animasyonu ekleyerek modülün ayarlarını tamamlayın:

• Animasyon Stili: Slayt
• Animasyon Yönü: Merkez
• Animasyon Gecikmesi: 1000ms

3. Satır Ekle

Sütun Yapısı

İkinci satırı tamamladıktan sonra, aşağıdaki sütun yapısını kullanarak yeni bir satır ekleyerek devam edebilirsiniz:

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şlik değerlerini değiştirin.

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

aralık

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

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

Görüntülemek

Tüm sütunların daha küçük ekran boyutlarında yan yana görünmesini sağlamak için satırın ana öğesine tek bir CSS kodu satırı ekleyin.

display: flex;

taşma

Bu öğreticinin son bölümünde, satırın yüksekliğini değiştireceğiz. Buna hazırlanmak için, görünürlük ayarlarında taşmaları gizleyerek hiçbir şeyin satır kapsayıcısını aşmadığından emin olmamız gerekecek.

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

Sütun 1'e Numara Metin Modülü Ekle

İçerik Ekle

Modül eklemeye başlama zamanı! İlk sütuna yeni bir Metin Modülü ekleyin ve bir sayı girin.

Degrade Arka Plan

Aşağıdaki ayarları kullanarak modüle bir degrade arka planı ekleyin:

• Renk 1: #ffa3ad
• Renk 2: #ffcea3
• Gradyan Yönü: 122deg

Metin Ayarları

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

• Metin Yazı Tipi: Montserrat
• Metin Yazı Tipi Ağırlığı: Ultra Kalın
• Metin Hizalama: Merkez
• Metin Rengi: #ffffff
• Metin Boyutu: 2vw (Masaüstü), 4vw (Tablet), 8vw (Telefon)
• Metin Satırı Yüksekliği: 1em

aralık

Farklı ekran boyutlarına da biraz üst ve alt dolgu ekleyin.

• Üst Dolgu: 1vw (Masaüstü), 2vw (Tablet), 3vw (Telefon)
• Alt Dolgu: 1vw (Masaüstü), 2vw (Tablet), 3vw (Telefon)

Sınır

Ve kenarlık ayarlarında köşelerin her birine '20px' ekleyerek modülün ayarlarını tamamlayın.

Klon Numarası Metin Modülü İki Kez ve Kopyaları Kalan Sütunlara Yerleştirin

1. sütundaki Metin Modülünü iki kez klonlayarak devam edin ve kopyaları satırın kalan iki sütununa yerleştirin.

Numaraları Değiştir

Yinelenenlerin her birinde numarayı değiştirdiğinizden emin olun.

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

İçerik Ekle

İlk sütunda ihtiyacımız olan ikinci modül bir Blurb Modülü. Seçtiğiniz bazı içeriği girin.

Simge Seç

Bir simge seçerek devam edin.

Arka plan rengi

Ve arka plan rengini beyaza çevirin.

• Arka Plan Rengi: #ffffff

Simge Ayarları

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

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

Başlık Metni Ayarları

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

• Başlık Yazı Tipi: Montserrat
• Başlık Yazı Tipi Ağırlığı: Kalın
• Başlık Metni Hizalama: Orta
• Başlık Metin Rengi: #000000
• Başlık Metin Boyutu: 1vw (Masaüstü), 2vw (Tablet), 4vw (Telefon)

Gövde Metni Ayarları

Gövde metni ayarlarıyla birlikte.

• Gövde Metni Hizalama: Orta
• Gövde Metni Boyutu: 0.6vw (Masaüstü), 1.3vw (Tablet), 2vw (Telefon)
• Gövde Çizgisi Yüksekliği: 2.5em

aralık

Ayrıca, farklı ekran boyutlarına aşağıdaki özel dolgu değerlerini ekleyerek modülümüze istenen şekli veriyoruz:

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

Sınır

Sonraki kenarlık ayarlarındaki köşelerin her birine '20px' ekleyin.

Kutu Gölge

Ve ince bir kutu gölgesi ekleyerek biraz derinlik yaratın.

• Gölge Rengi: rgba(0,0,0,0.07)

Animasyon

Son olarak, modüle bir animasyon ekleyin.

• Animasyon Stili: Slayt
• Animasyon Yönü: Merkez
• Animasyon Gecikmesi: 1000ms

Blurb Modülünü İki Kez Klonla ve Kopyaları Kalan Sütunlara Yerleştir

1. sütundaki Bulanıklık Modülünü tamamladıktan sonra, onu üç kez kopyalayabilir ve kopyaları satırın kalan iki sütununa yerleştirebilirsiniz.

Her İki Kopyaların İçeriğini Değiştirin

Yinelenenlerin her birinin içeriğini değiştirdiğinizden emin olun.

Satır #3 Boyutlandırma Ayarlarını Değiştirin

Varsayılan Yükseklik

Şimdi, vurgulu efektin çalışması için son satırın ayarlarını açıp boyutlandırma ayarlarına gideceğiz. Oradayken, farklı ekran boyutlarındaki yüksekliği değiştireceğiz.

• Yükseklik: 6vw (Masaüstü), 18vw (Tablet), 24vw (Telefon)

Hover Yüksekliği

Vurguluyken yüksekliği normale döndüreceğiz.

• Yükseklik: otomatik

Bölüm Boyutlandırma Ayarlarını Değiştirin

Varsayılan Yükseklik

Sonraki bölüm ayarlarını açın ve yüksekliği buna göre değiştirin:

• Yükseklik: 7vw (Masaüstü), 15vw (Tablet), 20vw (Telefon)

Hover Yüksekliği

Vurguluyken yüksekliği geri getirin ve işiniz bitti!

• Yükseklik: otomatik

Ö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 yeni boyutlandırma seçeneklerini kullanarak nasıl 3 adımlı tanıtım yazısı oluşturacağınızı gösterdik. Örneğin sonucu oldukça duyarlıdır ve sayfanıza ekstra etkileşim eklemenize olanak tanır. Bu öğreticinin, kendi alternatif 3 adımlı tasarımlarınızı yaratmanız için size ilham vermesini umuyoruz. Herhangi bir sorunuz veya öneriniz 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.