Mutlak Konumlandırılmış Görüntü Modülleri Divi ile Uzaklaştırma Paralaks Arka Planları Olarak Nasıl Kullanılır
Yayınlanan: 2020-04-23Bölümünüzde bir arka plan görüntüsü kullanırken, o görüntüyü hemen biçimlendirmenin birkaç yolu vardır. Karışım modlarını, degrade arka plan kaplamalarını kullanabilir ve paralaks efektlerini etkinleştirebilirsiniz. Şimdi, Divi'nin yeni kaydırma efektleriyle, animasyonu bir adım daha ileri götürebilir ve web tasarımınızda boyutunuzun başka bir türünü büyütmek için uzaklaştırma efektini paralaks efektiyle güzel bir şekilde birleştirebilirsiniz. Bunu yapmak için mutlak konumlandırılmış görüntü modüllerini ve görünüm alanı genişliği birimini kullanacağız. Bu eğitimde, ücretsiz olarak da indirebileceğiniz güzel bir vaka çalışması CTA tasarımını yeniden oluşturarak süreç boyunca size rehberlik edeceğiz!
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
Mutlak Konumlandırılmış Görüntü Modülleri Düzenini ÜCRETSİZ İndirin
Ellerinizi ücretsiz mutlak konumlandırılmış görüntü modülleri 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.
Ü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.
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
Arka plan rengi
Üzerinde çalıştığınız sayfaya yeni bir bölüm ekleyerek başlayın. Bölüm ayarlarını açın ve arka plan rengini değiştirin.
- Arka Plan Rengi: #000000
boyutlandırma
Bölümün tasarım sekmesine gidin ve boyutlandırma ayarlarında genişliği değiştirin.
- Genişlik: %95
- Bölüm Hizalama: Merkez
aralık
Bazı özel boşluk değerleri de ekleyin.
- Üst Marj: %5
- Alt Marj: %5
- Üst Dolgu: 0px
- Alt Dolgu: 0px
taşmalar
Ve bölümün taşmalarını gizlediğinizden emin olun. Bu, öğreticinin çalışmasını sağlamak için önemli bir adımdır. Taşmaları gizleyerek, hiçbir şeyin bölüm kapsayıcısını aşmamasını sağlayacağız.
- Yatay Taşma: Gizli
- Dikey Taşma: Gizli
Yeni Satır Ekle
Sütun Yapısı
Aşağıdaki sütun yapısını kullanarak bölümünüze 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:
- Ö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ütuna Metin Modülü #1 Ekle
H2 İçeriği Ekle
Ardından, seçtiğiniz bazı H2 içeriğine sahip bir ilk Metin Modülü ekleyin.
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: Lato
- Başlık 2 Yazı Tipi Ağırlığı: Hafif
- Başlık 2 Metin Rengi: #ffffff
- Başlık 2 Metin Boyutu: 4vw (Masaüstü), 8vw (Tablet ve Telefon)
- Başlık 2 Harf Aralığı: 1px
aralık
Bazı özel boşluk değerleri de ekleyeceğiz.
- Üst Marj: 25vw (Masaüstü), 50vw (Tablet ve Telefon)
- Sol Kenar Boşluğu: %5
- Sağ Marj: %5
Sütuna Metin Modülü #2 Ekle
İçerik Ekle
İhtiyacımız olan bir sonraki modül başka bir Metin Modülü. Seçtiğiniz bazı açıklama içeriğini ekleyin.
Metin Ayarları
Modülün tasarım sekmesine gidin ve metin ayarlarını aşağıdaki gibi değiştirin:
- Metin Yazı Tipi: Lato
- Metin Rengi: #ffffff
- Metin Boyutu: 0.8vw (Masaüstü), 2vw (Tablet), 3vw (Telefon)
- Metin Satırı Yüksekliği: 2.1em
boyutlandırma
Daha sonra farklı ekran boyutlarının genişliğini değiştirin.
- Genişlik: 800px (Masaüstü), %80 (Tablet), %90 (Telefon)
aralık
Ve boşluk ayarlarına bazı özel kenar boşlukları değerleri ekleyerek modül ayarlarını tamamlayın.
- Üst Marj: %2
- Alt Marj: %2
- Sol Kenar Boşluğu: %5
- Sağ Marj: %5
Sütuna Düğme Modülü Ekle
Kopya Ekle
Bir Düğme Modülü olan bir sonraki modüle geçin. Seçtiğiniz bir kopyayı ekleyin.
Düğme Ayarları
Ardından, tasarım sekmesine gidin ve düğmeyi buna göre biçimlendirin:
- Düğme İçin Özel Stiller Kullan: Evet
- Düğme Metin Boyutu: 1.5vw (Masaüstü), 2.5vw (Tablet), 3vw (Telefon)
- Düğme Metin Rengi: #ffffff
- Gradyan Rengi 1: rgba(255,255,255,0)
- Gradyan Rengi 2: #ffffff
- Gradyan Türü: Doğrusal
- Başlangıç Konumu: %98
- Bitiş Konumu: %98
- Düğme Kenar Genişliği: 0px
- Düğme Yazı Tipi: Lato
- Düğme Yazı Tipi Ağırlığı: Ağır
- Düğme Simgesini Göster: Evet
- Düğme Simge Yerleşimi: Sol
- Yalnızca Düğmenin Üzerine Geldiğinde Simgeyi Göster: Hayır
aralık
Farklı ekran boyutlarında da bazı özel boşluk değerleri kullanıyoruz.
- Alt Kenar Boşluğu: 7vw (Masaüstü), 20vw (Tablet), 25vw (Telefon)
- Sol Kenar Boşluğu: %5
- Sağ Marj: %5
Sütunun Başına Resim Modülü Ekle
Satırınızın sütunundaki ilk üç modülü tamamladıktan sonra, mutlak konumlandırılmış görüntü modülünü eklemenin ve onu uzaklaştırma arka plan görüntüsü olarak kullanmanın zamanı geldi. Bunu yapmanın ilk adımı, sütununuzun en üstüne yeni bir Görüntü Modülü eklemektir.
Görüntü Kutusunu Boş Bırak
Görüntü kutusunu boş bırakın.
Arka plan görüntüsü
Bunun yerine bir paralaks arka plan resmi kullanın. İstediğiniz herhangi bir görüntüyü kullanabilirsiniz, ancak aynı sonucu yeniden oluşturmak istiyorsanız, bu öğreticide kullanılan görüntüleri bu öğreticinin başındaki klasörü indirerek bulabilirsiniz.
- Paralaks Etkisini Kullan: Evet
- Paralaks Yöntemi: CSS
boyutlandırma
Modülün tasarım sekmesine gidin ve tam genişliğe zorlayın.
- Tam Genişliği Zorla: Evet
aralık
Farklı ekran boyutlarına da bazı özel üst ve alt dolgu ekleyin.
- Üst Dolgu: 27vw (Masaüstü), 54vw (Tablet), 68vw (Telefon)
- Alt Dolgu: 27vw (Masaüstü), 54vw (Tablet), 68vw (Telefon)
Konum
Şimdi, modülün sütunumuzda herhangi bir kapsayıcı alanı kaplamadığından emin olmak için, tüm modülü gelişmiş sekmesinde yeniden konumlandıracağız.
- Pozisyon: Mutlak
- Konum: Sol Üst
Yukarı ve Aşağı Kaydırma Etkisi Ölçekleme
Ve ölçekleme yukarı ve aşağı kaydırma efekti ekleyerek modül ayarlarını tamamlayacağız.
- Yukarı ve Aşağı Ölçeklendirmeyi Etkinleştir: Evet
- Başlangıç Ölçeği: %150 (%30'da)
- Orta Ölçek: %150 (%45'te)
- Bitiş Ölçeği: %100 (%55'te)
- Hareket Efekti Tetikleyicisi: Elemanın Ortası
Tüm Bölümü Gerektiği Kadar Kez Klonlayın
İlk bölümü tamamladıktan sonra, istediğiniz kadar klonlayabilirsiniz.
Her Yinelenen Bölüm için Kopyayı Değiştir
Her kopya için kopyayı değiştirdiğinizden emin olun.
Her Yinelenen Bölüm için Görüntü Modülü Arka Plan Görüntüsünü Değiştirin
Görüntü Modülü arka plan görüntüsü ile 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.
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, güzel bir bölüm uzaklaştırma efekti oluşturmak için paralaks arka planlarla birlikte mutlak konumlandırılmış Görüntü Modülleri kullandık. Bu eğiticiye, ücretsiz olarak indirebileceğiniz güzel bir vaka çalışması CTA düzeni ile eşlik ettik! 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.