Divi ile Scroll'da Arka Plan Görüntülerine Hareket Nasıl Eklenir

Divi'nin yeni kaydırma efektleriyle, Divi'nin yerleşik seçeneklerini kullanarak istediğiniz herhangi bir tasarımı oluşturabilir ve tasarımınızı bir sonraki düzeye taşımak için bazı güzel kaydırma hareketi efektleri ekleyebilirsiniz. Bugünkü eğitimde, listenize gelecek projeler için kullanabileceğiniz yaratıcı bir teknik ekleyeceğiz. Daha spesifik olarak, size Divi'nin Görüntü Modülünü ve mutlak konumu kullanarak arka plan görüntülerine nasıl hareket ekleyeceğinizi 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.

Hareketli Arka Plan Resmi #1

masaüstü

Mobil

Hareketli Arka Plan Resmi #2

masaüstü

Mobil

Hareketli Arka Plan Düzenlerini ÜCRETSİZ İndirin

Ellerinizi serbest hareketli arka plan düzenlerine koymak için, önce aşağıdaki düğmeyi kullanarak bunları 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.

Genel Adımlar

Yeni Bölüm Ekle

Üzerinde çalıştığınız sayfaya yeni bir Divi bölümü ekleyerek başlayın.

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 tüm bölümün genişliğini almasına izin verin.

• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1
• 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

Sütun 2 Aralığı

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

• Üst Dolgu: 10vw
• Alt Dolgu: 10vw
• Sol Dolgu: 5vw
• Sağ Dolgu: 5vw

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

Görüntü Kutusunu Boş Bırak

Modül ekleme zamanı! Arka plan resmini ilk sütunumuza eklemek için boş bir Resim Modülü kabı kullanacağız. Arka plan görüntüsünü ayrı bir modül kapsayıcısına yerleştirmek, yalnızca o öğeye kaydırma efektleri eklememize yardımcı olacaktır. Eğitimin ilerleyen bölümlerinde Divi'nin mutlak konumunu kullanarak diğer modülleri en üste yerleştireceğiz. Görüntü Modülünün görüntü kutusunu boş bıraktığınızdan emin olun.

Degrade Arka Plan

Bunun yerine bir degrade arka planı ekleyin.

• Renk 1: rgba(255,255,255,0)
• Renk 2: #000000
• Gradyan Türü: Doğrusal
• Gradyan Yönü: 185 derece
• Gradyanı Arka Plan Resminin Üstüne Yerleştir: Evet

Arka plan görüntüsü

Seçtiğiniz bir arka plan resmi ile birlikte.

aralık

Daha sonra bazı özel dolgu değerleri ekleyerek modülün yüksekliğini artırın.

• Üst Dolgu: 21vw
• Alt Dolgu: 21vw

Sütun 1'e Bölücü Modülü Ekle

görünürlük

Sütun 1'de ihtiyacımız olan bir sonraki modül bir Bölücü Modüldür. 'Bölücüyü Göster' seçeneğinin etkinleştirildiğinden emin olun.

• Bölücüyü Göster: Evet

Hat

Daha sonra modülün çizgi rengini değiştirin.

• Çizgi Rengi: #ffffff

boyutlandırma

Boyutlandırma ayarlarını da değiştirin.

• Bölücü Ağırlığı: 6px
• Genişlik: %100

aralık

Ardından, farklı ekran boyutlarına biraz üst kenar boşluğu ekleyin.

• Üst Kenar Boşluğu: 30px (Masaüstü), 20px (Tablet ve Telefon)

Konum

Ve Divi'nin mutlak konumunu kullanarak Bölücü Modülü yeniden konumlandırın.

• Pozisyon: Mutlak
• Yer: Merkez

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

H2 İçeriği Ekle

İlk sütunda ihtiyacımız olan bir sonraki modül, bazı H2 içeriğine sahip bir Metin Modülüdür.

H2 Metin Ayarları

Modülün tasarım sekmesine gidin ve H2 metin ayarlarını buna göre değiştirin:

• Başlık 2 Yazı Tipi: Raleway
• Başlık 2 Yazı Tipi Ağırlığı: Kalın
• Başlık 2 Metin Rengi: #ffffff
• Başlık 2 Metin Boyutu: 70px (Masaüstü), 50px (Tablet), 40px (Telefon)

• Başlık 2 Metin Gölge Rengi: rgba(0,0,0,0.95)

aralık

Daha sonra bazı özel üst ve alt dolgu ekleyin.

• Üst Dolgu: 150 piksel
• Alt Dolgu: 150 piksel

Konum

Ve modülü gelişmiş sekmesinde yeniden konumlandırın.

• Pozisyon: Mutlak
• Yer: Merkez

Metin Modülü #1'i Sütun 2'ye ekleyin

H3 İçeriği Ekle

Bir sonraki sütuna. Seçtiğiniz bazı H3 içeriğiyle ilk Metin Modülünü ekleyin.

H3 Metin Ayarları

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

• Başlık 3 Yazı Tipi: Raleway
• Başlık 3 Metin Boyutu: 50px (Masaüstü), 35px (Tablet), 30px (Telefon)
• Başlık 3 Çizgi Yüksekliği: 1.2em

aralık

Biraz alt kenar boşluğu da ekleyin.

• Alt Kenar Boşluğu: 50px

Metin Modülü #2'yi Sütun 2'ye ekleyin

İçerik Ekle

Seçtiğiniz bazı açıklama içeriğiyle bir öncekinin hemen altına başka bir Metin Modülü ekleyin.

Metin Ayarları

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

• Metin Yazı Tipi: Raleway
• Metin Satır Yüksekliği: 2.5em

Sütun 2'ye Düğme Modülü Ekle

Kopya Ekle

2. sütunda ihtiyacımız olan sonraki ve son modül bir Düğme Modülüdür. Seçtiğiniz bir kopyayı girin.

Düğme Ayarları

Sonraki düğmeyi stilleyin.

• Düğme İçin Özel Stiller Kullan: Evet
• Düğme Metin Boyutu: 25px
• Düğme Metin Rengi: #000000
• Düğme Kenar Genişliği: 0px

• Düğme Yazı Tipi: Raleway
• Düğme Yazı Ağırlığı: Kalın
• Düğme Simgesini Göster: Evet
• Düğme Simge Rengi: #000000

aralık

Ve biraz üst kenar boşluğu ekleyerek modül ayarlarını tamamlayın.

• Üst Kenar Boşluğu: 50px

Hareketli Arka Plan #1'i Görüntü Modülüne Ekleyin

Dikey Hareket

Şimdi, bu noktada, 1. sütundaki Görüntü Modülüne istediğiniz herhangi bir kaydırma efektini ekleyebilirsiniz. Bu yazının önizlemesinde gösterilen ilk örneği yeniden oluşturmak için, Görüntü Modülünü açın ve aşağıdaki dikey öğeyi kullanın. hareket ayarları:

• Dikey Hareketi Etkinleştir: Evet
• Başlangıç ​​Ofseti: 0
• Orta Ofset: 0 (%69'da)
• Bitiş Ofseti: -2

Yatay Hareket

Biraz yatay hareket de ekleyin.

• Yatay Hareketi Etkinleştir: Evet
• Başlangıç ​​Ofseti: -2
• Orta Ofset: 0
• Bitiş Ofseti: 0

Yukarı ve Aşağı Ölçekleme

Ölçekleme yukarı ve aşağı kaydırma efekti ile birlikte.

• Yukarı ve Aşağı Ölçeklendirmeyi Etkinleştir: Evet
• Başlangıç ​​Ölçeği: %70 (%21'de)
• Orta Ölçek: %80 (%39'da)
• Bitiş Ölçeği: %100 (%54'te)

Hareketli Arka Plan #2'yi Görüntü Modülüne Ekleyin

Yatay Hareket

Bunun yerine ikinci hareketli arka plan görüntüsü örneğini yeniden oluşturmayı tercih ederseniz, aşağıdaki yatay hareket efektini ekleyin:

• Yatay Hareketi Etkinleştir: Evet
• Başlangıç ​​Ofseti: -10
• Orta Ofset: -10 (%40'ta)
• Bitiş Ofseti: 0 (%50'de)

İçeri ve Dışarı Soluk

Solma içeri ve dışarı efektini de kullanın:

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

Dönen

Dönen bir efekt ekleyerek modülün kaydırma efekti ayarlarını tamamlayın:

• Döndürmeyi Etkinleştir: Evet
• Başlangıç ​​Dönüşü: 30°
• Orta Dönüş: 0° (%40'ta)
• Bitiş Dönüşü: 0° (%50'de)

Satırı İstediğiniz Kadar Kez Klonlayın

Tüm modülleri ile satırı tamamladığınızda, tüm satırı istediğiniz kadar klonlayabilirsiniz.

Arka Plan Resmini Değiştir

Her kopya için Görüntü Modülünün arka plan görüntüsünü değiştirin.

İçeriği Değiştir

İçerikle birlikte ve bitirdiniz!

Ö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 Arka Plan Resmi #1

masaüstü

Mobil

Hareketli Arka Plan Resmi #2

masaüstü

Mobil

Son düşünceler

Bu eğitimde, Divi'nin kaydırma efektleriyle nasıl yaratıcı olabileceğinizi gösterdik. Bir arka plan görüntüsüne kaydırma efektleri eklediğimiz sıfırdan güzel bir örnek oluşturduk. Oraya ulaşmak için Divi'nin yerleşik mutlak konum ayarlarını kullandık ve siz de JSON dosyasını ü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.