Divi için Scroll'da ÜCRETSİZ Blurb Genişleyen Bölümünü İndirin

Sayfa tasarımınız boyunca Bulanıklaştırma Modüllerini kullanmanın birçok yolu vardır ve şimdi Divi'nin kaydırma efektleriyle kaydırma üzerinde animasyon yapmak zahmetsiz bir deneyim haline geliyor. Bugünkü eğitimde, dört farklı Blurb Modülünü vurgulamak için kullanabileceğiniz genişleyen dairesel bir tanıtım yazısı düzeninin nasıl oluşturulacağını göstereceğiz. İstediğimiz sonucu elde etmek için Divi'nin mutlak konumlandırmasını kullanacağız ve tüm satır kabına ayrı bir kaydırma efekti ekleyeceğ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

Blurb Genişleyen Düzeni ÜCRETSİZ İndirin

Ellerinizi ücretsiz tanıtıcı genişletme 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.

1. Tüm Öğeleri Yeniden Oluşturun

Yeni Bölüm Ekle

aralık

Üzerinde çalıştığınız sayfaya yeni bir bölüm ekleyerek başlayın. Bölüm ayarlarını açın ve üst ve alt dolguyu değiştirin.

• Üst Dolgu: 7vw
• Alt Dolgu: 7vw

Satır ekle

Sütun Yapısı

Aşağıdaki sütun yapısını kullanarak 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ı aşağıdaki gibi değiştirin:

• Genişlik: 43vw (Masaüstü), 85vw (Tablet ve Telefon)
• Maksimum Genişlik: 100vw

aralık

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

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

Sütun Ayarları

aralık

Ardından, sütun ayarlarını açın ve farklı ekran boyutlarına bazı özel dolgu değerleri ekleyin.

• Üst Dolgu: 22vw (Masaüstü), 40vw (Tablet), 44vw (Telefon)
• Alt Dolgu: 22vw (Masaüstü), 40vw (Tablet), 44vw (Telefon)

Sütuna Metin Modülü Ekle

H2 İçeriği Ekle

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

H2 Metin Ayarları

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

• Başlık 2 Yazı Tipi: Bataklık
• Başlık 2 Metin Hizalama: Orta
• Başlık 2 Metin Rengi: #ffffff (Masaüstü), #000000 (Tablet ve Telefon)
• Başlık 2 Metin Boyutu: 2vw (Masaüstü), 6vw (Tablet), 7vw (Telefon)
• Başlık 2 Çizgi Yüksekliği: 1.4em

boyutlandırma

Genişlik değerlerini farklı ekran boyutlarında da değiştirin.

• Genişlik: %53 (Masaüstü), %70 (Tablet ve Telefon)

aralık

Ardından, biraz duyarlı üst kenar boşluğu ekleyin.

• Üst Marj: %0 (Masaüstü), -%70 (Tablet), -%80 (Telefon)

Sütuna Blurb Modülü Ekle

İçerik Ekle

İhtiyacımız olan bir sonraki modül bir Blurb Modülü. Seçtiğiniz bir başlık girin.

Fotoğraf yükleniyor

Daha sonra bir resim yükleyin. Bu eğitim boyunca kullandıklarımızı bu eğitimin başındaki indirme dosyasında bulabilirsiniz.

Link ekle

Bir de bağlantı ekleyin.

Arka plan rengi

Bir arka plan rengiyle birlikte.

• Arka Plan Rengi: #ffffff

Başlık Metni Ayarları

Tasarım sekmesine gidin ve başlık metni ayarlarını aşağıdaki gibi değiştirin:

• Başlık Başlık Düzeyi: H3
• Başlık Yazı Tipi: Bataklık
• Başlık Yazı Tipi Ağırlığı: Kalın
• Başlık Metni Hizalama: Orta
• Başlık Metin Boyutu: 1vw (Masaüstü), 3vw (Tablet ve Telefon)

boyutlandırma

Ardından, boyutlandırma ayarlarında bazı değişiklikler yapın.

• Görüntü Genişliği: %50 (Masaüstü), %30 (Tablet), %25 (Telefon)
• Genişlik: %18 (Masaüstü), %23 (Tablet), %30 (Telefon)
• Yükseklik: %18 (Masaüstü), %23 (Tablet), %30 (Telefon)

Sınır

Biz de biraz sınır yarıçapı ekliyoruz.

• Tüm Köşeler: 500px

Kutu Gölge

Sırada, ince bir kutu gölgemiz var.

• Kutu Gölge Dikey Konumu: 23px
• Kutu Gölge Bulanıklığı Gücü: 80px
• Gölge Rengi: rgba(0,0,0,0.19)

Filtre

Ayrıca filtre ayarlarındaki tonu da değiştireceğiz.

• Renk tonu: 67 derece

Ana Öğe ve Bulanık Resim CSS'si

Şimdi, gelişmiş sekmeye gidin ve bazı ek duyarlı ince ayarlar yapmak için bazı özel CSS kod satırları ekleyin.

Ana Eleman:

display: flex;
align-items: center;

Bulanık Görüntü:

margin-bottom: 0px

Blurb Modülünü Üç Kez Klonla

İlk Bulanıklık Modülünü tamamladığınızda, onu üç kez klonlayabilirsiniz.

İçeriği, Simgeyi ve Bağlantıyı Değiştir

Her kopya için başlığı, simgeyi ve bağlantıyı değiştirdiğinizden emin olun.

2. Parçaları Birleştirin

Duyarlı Bölüm Arka Plan Resmi Ekle

Artık tüm unsurları yerine getirdiğimize göre, parçaları bir araya getirme zamanı. İlk olarak, bir bölüm arka plan görüntüsü yükleyeceğiz ve daha küçük ekran boyutlarında arka plan görüntüsünün konumunu değiştireceğiz. Kullandığımız arka plan resmini bu eğitimin başında paylaşılan indirme gönderisinde bulabilirsiniz.

• Arka Plan Resmi Boyutu: Sığdır
• Arka Plan Resmi Konumu: Orta (Masaüstü), Alt Orta (Tablet ve Telefon)

Metin Modülü Konumu

Ardından, Metin Modülünü açıp konumu değiştireceğiz.

• Pozisyon: Mutlak
• Yer: Merkez

Blurb Modülü #1 Konumu

Ardından listedeki ilk Blurb Modülünü açacağız ve konumu buna göre değiştireceğiz:

• Pozisyon: Mutlak
• Yer: Üst Merkez

Blurb Modülü #2 Konumu

İkinci Blurb Module'ün konumunu da değiştireceğiz.

• Pozisyon: Mutlak
• Yer: Alt Merkez

Blurb Modülü #3 Konumu

Sırada, üçüncü Blurb Modülünün konumu var.

• Pozisyon: Mutlak
• Konum: Sağ Merkez

Blurb Modülü #4 Konumu

Son olarak, dördüncü Blurb Modülünü aşağıdaki gibi yeniden konumlandıracağız:

• Pozisyon: Mutlak
• Konum: Sol Merkez

Satır Solma İçeri ve Dışarı Kaydırma Efekti

Bu öğreticinin son adımları, satır kapsayıcısına bir solma içeri ve dışarı kaydırma efekti eklemeyi içerir.

• Soldurmayı ve Yavaşlamayı Etkinleştir: Evet
• Opaklığı Başlatma: %0
• Orta Opaklık: %0 (%25'te)
• Bitiş Opaklığı: %100 (%29'da)

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

Satır yukarı ve aşağı kaydırma efektini kullanarak tasarımı ve efekti tamamlayın ve işiniz bitti!

• Yukarı ve Aşağı Ölçeklendirmeyi Etkinleştir: Evet
• Başlangıç ​​Ölçeği: %20
• Orta Ölçek: %20 (%23'te)
• Bitiş Ölçeği: %120 (%37'de)

Ö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 kaydırma efektleriyle nasıl yaratıcı olabileceğinizi gösterdik. Daha spesifik olarak, dairesel bir öğedeki farklı tanıtım öğelerini vurgulayan genişleyen bir tanıtım yazısı efektinin nasıl oluşturulacağını gösterdik. JSON dosyasını da ücretsiz olarak indirebildiniz! Herhangi bir sorunuz 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.