Divi ile bir paralaks görüntüsü görüntülemek için modülün arka planını kullanın
CSS satırında bir paralaks arka planı kullanmak, web sitenizin görünümünü ve hissini geliştirmeye gerçekten yardımcı olabilir ve bu öğretici mükemmel bir örnektir. Arka plan görüntüsünüzün bazı bölümlerini gösteren şaşırtıcı ve tutarlı sonuçlar elde etmek için birkaç modül arka planı kullanacağız. JSON dosyalarını ücretsiz olarak da indirebilirsiniz! Haydi Yapalım şunu. Önizleme Öğreticiyi girmeden önce sonuçlara çeşitli ekran boyutlarında bakalım. Masaüstü
Hücresel Ücretsiz bir paralaks düzeni almak için ücretsiz paralaks düzenini indirin, önce aşağıdaki düğmeyi kullanarak indirmeniz gerekir. İndirmelere erişmek için, aşağıdaki formu kullanarak Divi Daily E -posta listemize abone olmanız gerekir. Yeni bir müşteri olarak, her Pazartesi daha fazla Divi’nin iyi ve ücretsiz Divi düzen paketleri alacaksınız! Zaten listede iseniz, e -posta adresinizi aşağıya girin ve İndir’i tıklayın. “Abone olmayacak” veya ek e -postalar almayacaksınız.Dosyayı indir
Divi bültenine katılmak için ücretsiz indirin ve en iyi divi düzen paketinin kopyasına bir e -posta göndereceğiz, ayrıca birçok kaynak, ipucu ve olağanüstü ve ücretsiz divi hileleri. Takip et ve kısa sürede bir divi ustası olacaksınız. Abone olduysanız, e -posta adresinizi aşağıya yazın ve Düzen Paketine erişmek için İndir’i tıklayın.
Abone olmayı başardınız. Aboneliğinizi onaylamak için lütfen e -posta adresinizi kontrol edin ve ÜCRETSİZ DIVI Düzen Paketine erişin!
YouTube kanalımıza abone olun, yaratıcı başlayalım, yeni bir parça ekleyelim, üzerinde çalıştığınız sayfaya yeni bir normal parça ekleyerek başlayın. Sütun yapısının yeni bir satırı ekleyin, aşağıdaki sütun yapısını kullanarak yeni bir satır ekleyerek devam edin : SABLE SAĞLIĞI 1 Mesafe İlk sütuna üst dolgu değerini ekleyin. Üst Rulman:
Masaüstü: 2VW
Tablet + Telefon: 6VW
SABLE 2 SAĞLIĞI SAVAŞI İkinci sütuna da üst dolgu değerini ekleyin. Üst Rulman:
Masaüstü: 4VW
Tablet + Telefon: 6VW
Sütun 4 mesafe geçişi sütunu 3’ü ayarlayın ve sütun 4’e bazı boşluk değerleri ekleyin. Üst katman
Masaüstü: 19VW
Tablet: 0VW
Telefon: 1VW
Sol ve sağ dolgu
Masaüstü ve Tablet: 1VW
Telefon: 0VW
Metin modülünü 1 Sütun 1’e ekleyin Geçerli H2 içeriğini ekleyin, ilk metin modülünü sütun 1’e ekleyin. İstediğiniz bazı H2 içeriğini girin. Başlık metni Tasarım sekmesine geçer ve uygun H2 metin ayarlarını değiştirir: Başlık Metin Seviyesi: H2
H2 yazı tipi: Eb Garamond
H2 Style: TT
Metin Rengi H2: Siyah #OOOOOOO
Metin Boyutu H2:
Masaüstü: 3.1vw
Tablet: 5.4vw
Telefon: 10VW
H2 hat yüksekliği:
Masaüstü + Tablet: 1.1em
Telefon: 1.3em
Mesafe Ardından, modüle bazı boşluklar ekleyin. Üst Rulman:
Masaüstü: 4VW
Tablet + Telefon: 0VW
Sol pedler:
Masaüstü ve Tablet: 1VW
Telefon: 2VW
Sağ pedler
Masaüstü ve Tablet: 1VW
Telefon: 0VW
Sütun 1’e 2. metin modülünü ekleyin, geçerli içerikleri ekleyin, ikinci metin modülünü birincinin altına ekleyin. Bazı paragraf içeriği ekleyin. Metin tasarım sekmesine geçer ve metin ayarlarını aşağıdaki gibi değiştirir: Metin Yazı Tipi: EB Garamond
Metin Rengi: Koyu Gri #3D3D3D
Yazı Boyutu:
Masaüstü: 1VW
Tablet: 2.2vw
Telefon: 3.8vw
Yüksek çizgi metin: 1.8em
Mesafe Bir sonraki modül mesafe ayarları. Alt pedler:
Telefon: 4VW
Sol pedler:
Masaüstü + Tablet: 1.4VW
Doğru yatak:
Masaüstü: 1.3vw
Tablet + Telefon: 1.7VW
Düğme modülünü Sütun 1’e ekleyin Birinci sütunu tamamlamak için içeriği ekleyin, düğme modülünü ekleyin. Birkaç kopya girin. Bir bağlantı ekleyin, düğmeye bağlantıyı da ekleyin. Düğmeyi uygun Anahtar Tasarım sekmesine ve Ayarlar stiline taşıyın: Metin Boyutu Düğmesi:
Masaüstü: 1VW
Tablet: 2VW
Telefon: 4VW
Metin Renk Düğmesi: Koyu Gri #3D3D3D
Sınır sınır genişliği: 1px
Yazı tipi düğmesi: Eb Garamond
Mesafe Ardından, düğmenin mesafe ayarlarını ayarlayın. Üst sınır:
Masaüstü + Tablet: 1VW
Alt marj:
Telefon: 5VW
Metin modülünü 1 sütun 2’ye ekleyin, içeriği bir sonraki sütuna ekleyin! H4 içerik seçiminiz olan bir metin modülü ekleyin. Arka plan arka plan görüntüleri ekleyerek devam edin. Masaüstü bilgisayarlar için Paralax CSS arka plan görüntülerini yükleyin ve daha küçük ekran boyutlarında (CSS paralaks olmadan) sıradan görüntüler kullanın. Masaüstü Arka Plan: Resim
Paralax: CSS
Tablet + Arka Plan Telefon: Resim
Bir sonraki arka plana gidin, gradyanın arka planını yalnızca Hover’a ekleyin. İmleci arka plana yönlendirin: Renk gradyanı
Renk gradyanı 1: açık altın sarısı #edba63
Gradyan Renk 2: Altın Sarı #ED9D12
Gradyan yönü: 23 derece
Degradeyi arka plan görüntüsünün üzerine yerleştirin: evet
Başlık metni Tasarım sekmesine geçer ve H4 metin ayarlarını değiştirir.
Telefon: -6vw
Üst Rulman:
Masaüstü: 15VW
Tablet: 22VW
Telefon: 43VWBANDALAN DÜŞÜK:
Masaüstü + Tablet: 1VW
Sol ve sağ pedler:
Masaüstü ve Tablet: 1.5VW
Telefon: 5VW
Sınır organize ederek sınır devam eder.
Yuvarlak açı: 1vw Tüm açılar Sınır Kuvvetleri: Tüm Taraflar
Sınır Genişliği: 0.3VW
Sınır rengi: beyaz #ffffff
İmleçi yönlendirirken zoom efektleri ekleyerek ölçek komisyonunu tamamlayın.
Yüzerken Dönüşüm Ölçeği:% 102 2. Metin Modülünü Sütun 2’ye ekleyin Dolgu Ekle Dolgu Ekle İkinci Modülü, istediğiniz bazı H4 içeriğiyle ikinci sütuna ekleyin.
Arka Plan önceki metin modülü ile aynı, masaüstüne bir CSS paralaksı arka plan görüntüsü ve sıradan arka plan görüntüleri daha küçük ekran boyutlarına ekleyin. Masaüstü Arka Plan: Resim Paralax: CSS
Tablet + Arka Plan Telefon: Resim
Arka plana gidin, ayrıca Hover gradyanının arka planını da ekleyin.
İmleci arka plana yönlendirin: Renk gradyanı Renk gradyanı 1: Young Macenta #91463F
Renk gradyanı 2: macenta #910400
Gradyan yönü: 23 derece
Degradeyi arka plan görüntüsünün üzerine yerleştirin: evet
Başlık Metni Sonraki H4 Metin Ayarları Style.
Metin Başlığı Seviyesi: H4 H4 yazı tipi: Eb Garamond
Metin Rengi H4: Beyaz #ffffff
Metin Boyutu H4:
Masaüstü: 2.3vw
Tablet: 4.5vw
Telefon: 8.5VW
Mesafe ve değişim alanı ayarları.
Üst Rulman: Masaüstü: 15VW
Tablet: 21.1vw
Telefon: 43VW
Alt pedler:
Masaüstü + Tablet: 1VW
Sol ve sağ pedler:
Masaüstü ve Tablet: 1.5VW
Telefon: 5VW
Ayrıca sınır kenarlık ayarları.
Yuvarlak açı: 1vw Tüm açılar Sınır Kuvvetleri: Tüm Taraflar
Sınır Genişliği: 0.3VW
Sınır rengi: beyaz #ffffff
Dönüşüm Ölçeği Notu Son olarak, Zoom efektini metin modülüne ekleyin.
Yüzerken Dönüşüm Ölçeği:% 102 Metin modülünü sütun 2’den sütuna 3’e kadar yinelendirin ve ikinci klonlama metin modülünün metin modülünü sürükleyin ve üçüncü sıra sütununa yerleştirin. Metin modülünü 1 sütun 3’teki ayarla H4 içeriğini değiştirin Sütundaki ilk yinelenen metin modülünü açın 3 ve içeriği değiştirin.
Tabletler ve cep telefonları için arka planı değiştirin Arka plan görüntüsünü bir sonraki küçük ekran boyutunda değiştirin. Yüzerken renk gradyanını değiştirin, gelişim gradyanındaki rengi değiştirerek devam edin. Renk gradyanı 1: Pembe Gül #CC9293 Renk gradyanı 2: pembe #cc9293 Son mesafe, mesafeyi aşağıdaki gibi ayarlayın.
Üst sınır:
Tablet: -6.4vw Telefon: 0VW
Sütun 3’teki 2. metin modülünü ayarlayın İlk H4 içeriğini değiştirin, içeriğini değiştirin.
Tabletler ve cep telefonları için arka planı değiştirin, ardından arka plan görüntüsünü daha küçük bir ekran boyutunda değiştirin.
Yüzerken renk gradyanını değiştirin, gradyanın arka planını da değiştirin. Renk gradyanı 1: Yumuşak Çam #5C755C Gradien Renk 2: Yeşil Çam #4D754D Metin Modülü Ekle Sütun 4’e Ekle İçerikleri Ekle Sütun 4’e taşıyın, metin modülünü ekleyin. Seçtiğiniz bazı H3 içeriklerini girin.
Başlığın başlığı tasarım sekmesine geçer ve H3 metin ayarlarını aşağıdaki gibi değiştirir:
Başlık Metin Seviyesi: H3 Metin yazı tipi H3: Eb Garamond H3 Style: TT
Metin Rengi H3: Siyah #OOOOOOO
Metin Boyutu H3:
Masaüstü: 3VW
Tablet: 5VW
Telefon: 12VW
H3 hat yüksekliği
Masaüstü + Tablet: 1EM
Telefon: 1.1em
2. Metin Modülünü Sütun 4’e ekleyin Dolgu Ekle Birincinin altına başka bir metin modülü ekleyin. Bazı paragraf içeriği ekleyin.
Metin Tasarım sekmesine geçin ve uygun metin ayarlarını değiştirin:
Metin Yazı Tipi: EB Garamond Metin Rengi: Koyu Gri #3D3D3D Yazı Boyutu:
Masaüstü: 1VW
Tablet: 2.2vw
Telefon: 3.8vw
Yüksek çizgi metin: 1.8em
Mesafe Ardından, mesafeyi ayarlayın.
Telefon: 4VW
Sol dolgu: 0.9vw Sağ dolgu: 2.2vw
Sütun 1’den Sütun 4’e yinelenen düğme modülü ve modül düğmesini sürükle
Sütun 1’deki düğme modülünü iki katına çıkarın.
Metin modülünün altındaki Sütun 3’e sürükleyin.
Mesafe, yinelenen düğme modülündeki birkaç boşluk değerini ayarlar ve tamamlayın! Alt kenar boşluğu: 0VW
Sol kenar boşluğu:
Masaüstü + Tablet: 0.7VW Telefon: 0.9vw
Önizleme Şimdi tüm adımlardan geçtikten sonra, çeşitli ekran boyutlarındaki nihai sonuçlara bakalım.Masaüstü
Hücresel
Sonuç Bu yazıda, aynı resmin farklı bir bölümünü gösteren dört metin kutusu ile nasıl bir paralaks satırı oluşturacağınızı gösterdik.Bu tasarımdan hoşlanmanızı umuyoruz ve sorularınız veya önerileriniz varsa, aşağıdaki yorumlar bölümünde bir yorum bıraktığınızdan emin olun!
Abone olmayı başardınız. Aboneliğinizi onaylamak için lütfen e -posta adresinizi kontrol edin ve ÜCRETSİZ DIVI Düzen Paketine erişin!
YouTube kanalımıza abone olun, yaratıcı başlayalım, yeni bir parça ekleyelim, üzerinde çalıştığınız sayfaya yeni bir normal parça ekleyerek başlayın. Sütun yapısının yeni bir satırı ekleyin, aşağıdaki sütun yapısını kullanarak yeni bir satır ekleyerek devam edin : SABLE SAĞLIĞI 1 Mesafe İlk sütuna üst dolgu değerini ekleyin. Üst Rulman:
Masaüstü: 2VW
Tablet + Telefon: 6VW
SABLE 2 SAĞLIĞI SAVAŞI İkinci sütuna da üst dolgu değerini ekleyin. Üst Rulman:
Masaüstü: 4VW
Tablet + Telefon: 6VW
Sütun 4 mesafe geçişi sütunu 3’ü ayarlayın ve sütun 4’e bazı boşluk değerleri ekleyin. Üst katman
Masaüstü: 19VW
Tablet: 0VW
Telefon: 1VW
Sol ve sağ dolgu
Masaüstü ve Tablet: 1VW
Telefon: 0VW
Metin modülünü 1 Sütun 1’e ekleyin Geçerli H2 içeriğini ekleyin, ilk metin modülünü sütun 1’e ekleyin. İstediğiniz bazı H2 içeriğini girin. Başlık metni Tasarım sekmesine geçer ve uygun H2 metin ayarlarını değiştirir: Başlık Metin Seviyesi: H2
H2 yazı tipi: Eb Garamond
H2 Style: TT
Metin Rengi H2: Siyah #OOOOOOO
Metin Boyutu H2:
Masaüstü: 3.1vw
Tablet: 5.4vw
Telefon: 10VW
H2 hat yüksekliği:
Masaüstü + Tablet: 1.1em
Telefon: 1.3em
Mesafe Ardından, modüle bazı boşluklar ekleyin. Üst Rulman:
Masaüstü: 4VW
Tablet + Telefon: 0VW
Sol pedler:
Masaüstü ve Tablet: 1VW
Telefon: 2VW
Sağ pedler
Masaüstü ve Tablet: 1VW
Telefon: 0VW
Sütun 1’e 2. metin modülünü ekleyin, geçerli içerikleri ekleyin, ikinci metin modülünü birincinin altına ekleyin. Bazı paragraf içeriği ekleyin. Metin tasarım sekmesine geçer ve metin ayarlarını aşağıdaki gibi değiştirir: Metin Yazı Tipi: EB Garamond
Metin Rengi: Koyu Gri #3D3D3D
Yazı Boyutu:
Masaüstü: 1VW
Tablet: 2.2vw
Telefon: 3.8vw
Yüksek çizgi metin: 1.8em
Mesafe Bir sonraki modül mesafe ayarları. Alt pedler:
Telefon: 4VW
Sol pedler:
Masaüstü + Tablet: 1.4VW
Doğru yatak:
Masaüstü: 1.3vw
Tablet + Telefon: 1.7VW
Düğme modülünü Sütun 1’e ekleyin Birinci sütunu tamamlamak için içeriği ekleyin, düğme modülünü ekleyin. Birkaç kopya girin. Bir bağlantı ekleyin, düğmeye bağlantıyı da ekleyin. Düğmeyi uygun Anahtar Tasarım sekmesine ve Ayarlar stiline taşıyın: Metin Boyutu Düğmesi:
Masaüstü: 1VW
Tablet: 2VW
Telefon: 4VW
Metin Renk Düğmesi: Koyu Gri #3D3D3D
Sınır sınır genişliği: 1px
Yazı tipi düğmesi: Eb Garamond
Mesafe Ardından, düğmenin mesafe ayarlarını ayarlayın. Üst sınır:
Masaüstü + Tablet: 1VW
Alt marj:
Telefon: 5VW
Metin modülünü 1 sütun 2’ye ekleyin, içeriği bir sonraki sütuna ekleyin! H4 içerik seçiminiz olan bir metin modülü ekleyin. Arka plan arka plan görüntüleri ekleyerek devam edin. Masaüstü bilgisayarlar için Paralax CSS arka plan görüntülerini yükleyin ve daha küçük ekran boyutlarında (CSS paralaks olmadan) sıradan görüntüler kullanın. Masaüstü Arka Plan: Resim
Paralax: CSS
Tablet + Arka Plan Telefon: Resim
Bir sonraki arka plana gidin, gradyanın arka planını yalnızca Hover’a ekleyin. İmleci arka plana yönlendirin: Renk gradyanı
Renk gradyanı 1: açık altın sarısı #edba63
Gradyan Renk 2: Altın Sarı #ED9D12
Gradyan yönü: 23 derece
Degradeyi arka plan görüntüsünün üzerine yerleştirin: evet
Başlık metni Tasarım sekmesine geçer ve H4 metin ayarlarını değiştirir.
Metin Başlığı Seviyesi: H4
H4 yazı tipi: Eb Garamond
Metin Rengi H4: Beyaz #ffffff
Metin Boyutu H4:
Masaüstü: 2.3vw
Tablet: 4.5vw
Telefon: 8.5VW
Mesafe Ardından, mesafeyi ayarlayın.
Telefon: -6vw
Üst Rulman:
Masaüstü: 15VW
Tablet: 22VW
Telefon: 43VWBANDALAN DÜŞÜK:
Masaüstü + Tablet: 1VW
Sol ve sağ pedler:
Masaüstü ve Tablet: 1.5VW
Telefon: 5VW
Sınır organize ederek sınır devam eder.
Yuvarlak açı: 1vw Tüm açılar Sınır Kuvvetleri: Tüm Taraflar
Sınır Genişliği: 0.3VW
Sınır rengi: beyaz #ffffff
İmleçi yönlendirirken zoom efektleri ekleyerek ölçek komisyonunu tamamlayın.
Yüzerken Dönüşüm Ölçeği:% 102 2. Metin Modülünü Sütun 2’ye ekleyin Dolgu Ekle Dolgu Ekle İkinci Modülü, istediğiniz bazı H4 içeriğiyle ikinci sütuna ekleyin.
Arka Plan önceki metin modülü ile aynı, masaüstüne bir CSS paralaksı arka plan görüntüsü ve sıradan arka plan görüntüleri daha küçük ekran boyutlarına ekleyin. Masaüstü Arka Plan: Resim Paralax: CSS
Tablet + Arka Plan Telefon: Resim
Arka plana gidin, ayrıca Hover gradyanının arka planını da ekleyin.
İmleci arka plana yönlendirin: Renk gradyanı Renk gradyanı 1: Young Macenta #91463F
Renk gradyanı 2: macenta #910400
Gradyan yönü: 23 derece
Degradeyi arka plan görüntüsünün üzerine yerleştirin: evet
Başlık Metni Sonraki H4 Metin Ayarları Style.
Metin Başlığı Seviyesi: H4 H4 yazı tipi: Eb Garamond
Metin Rengi H4: Beyaz #ffffff
Metin Boyutu H4:
Masaüstü: 2.3vw
Tablet: 4.5vw
Telefon: 8.5VW
Mesafe ve değişim alanı ayarları.
Üst Rulman: Masaüstü: 15VW
Tablet: 21.1vw
Telefon: 43VW
Alt pedler:
Masaüstü + Tablet: 1VW
Sol ve sağ pedler:
Masaüstü ve Tablet: 1.5VW
Telefon: 5VW
Ayrıca sınır kenarlık ayarları.
Yuvarlak açı: 1vw Tüm açılar Sınır Kuvvetleri: Tüm Taraflar
Sınır Genişliği: 0.3VW
Sınır rengi: beyaz #ffffff
Dönüşüm Ölçeği Notu Son olarak, Zoom efektini metin modülüne ekleyin.
Yüzerken Dönüşüm Ölçeği:% 102 Metin modülünü sütun 2’den sütuna 3’e kadar yinelendirin ve ikinci klonlama metin modülünün metin modülünü sürükleyin ve üçüncü sıra sütununa yerleştirin. Metin modülünü 1 sütun 3’teki ayarla H4 içeriğini değiştirin Sütundaki ilk yinelenen metin modülünü açın 3 ve içeriği değiştirin.
Tabletler ve cep telefonları için arka planı değiştirin Arka plan görüntüsünü bir sonraki küçük ekran boyutunda değiştirin. Yüzerken renk gradyanını değiştirin, gelişim gradyanındaki rengi değiştirerek devam edin. Renk gradyanı 1: Pembe Gül #CC9293 Renk gradyanı 2: pembe #cc9293 Son mesafe, mesafeyi aşağıdaki gibi ayarlayın.
Üst sınır:
Tablet: -6.4vw Telefon: 0VW
Sütun 3’teki 2. metin modülünü ayarlayın İlk H4 içeriğini değiştirin, içeriğini değiştirin.
Tabletler ve cep telefonları için arka planı değiştirin, ardından arka plan görüntüsünü daha küçük bir ekran boyutunda değiştirin.
Yüzerken renk gradyanını değiştirin, gradyanın arka planını da değiştirin. Renk gradyanı 1: Yumuşak Çam #5C755C Gradien Renk 2: Yeşil Çam #4D754D Metin Modülü Ekle Sütun 4’e Ekle İçerikleri Ekle Sütun 4’e taşıyın, metin modülünü ekleyin. Seçtiğiniz bazı H3 içeriklerini girin.
Başlığın başlığı tasarım sekmesine geçer ve H3 metin ayarlarını aşağıdaki gibi değiştirir:
Başlık Metin Seviyesi: H3 Metin yazı tipi H3: Eb Garamond H3 Style: TT
Metin Rengi H3: Siyah #OOOOOOO
Metin Boyutu H3:
Masaüstü: 3VW
Tablet: 5VW
Telefon: 12VW
H3 hat yüksekliği
Masaüstü + Tablet: 1EM
Telefon: 1.1em
2. Metin Modülünü Sütun 4’e ekleyin Dolgu Ekle Birincinin altına başka bir metin modülü ekleyin. Bazı paragraf içeriği ekleyin.
Metin Tasarım sekmesine geçin ve uygun metin ayarlarını değiştirin:
Metin Yazı Tipi: EB Garamond Metin Rengi: Koyu Gri #3D3D3D Yazı Boyutu:
Masaüstü: 1VW
Tablet: 2.2vw
Telefon: 3.8vw
Yüksek çizgi metin: 1.8em
Mesafe Ardından, mesafeyi ayarlayın.
Telefon: 4VW
Sol dolgu: 0.9vw Sağ dolgu: 2.2vw
Sütun 1’den Sütun 4’e yinelenen düğme modülü ve modül düğmesini sürükle
Sütun 1’deki düğme modülünü iki katına çıkarın.
Metin modülünün altındaki Sütun 3’e sürükleyin.
Mesafe, yinelenen düğme modülündeki birkaç boşluk değerini ayarlar ve tamamlayın! Alt kenar boşluğu: 0VW
Sol kenar boşluğu:
Masaüstü + Tablet: 0.7VW Telefon: 0.9vw
Önizleme Şimdi tüm adımlardan geçtikten sonra, çeşitli ekran boyutlarındaki nihai sonuçlara bakalım.Masaüstü
Hücresel
Sonuç Bu yazıda, aynı resmin farklı bir bölümünü gösteren dört metin kutusu ile nasıl bir paralaks satırı oluşturacağınızı gösterdik.Bu tasarımdan hoşlanmanızı umuyoruz ve sorularınız veya önerileriniz varsa, aşağıdaki yorumlar bölümünde bir yorum bıraktığınızdan emin olun!
