Divi'de Paralaks Arka Plan Görüntü Geçişleri ile Tam Ekran Düzeni Oluşturma

Tam ekran bölümleri olan bir web sayfası oluşturmak, tarayıcının tüm genişliğini ve yüksekliğini kapsayan yumuşak geçişler ve temiz bölüm düzenleriyle kullanıcı deneyimini geliştirmenin harika bir yoludur. Tipik olarak, bu, ürünleri veya hizmetleri birer birer sergilemek için işe yarar ve kullanıcının sayfayı aşağı kaydırırken her birine kolayca odaklanmasını sağlar. Bu tasarım türü, içeriğe hitap eden ve güzel bir tasarım vurgusu sağlayan arka plan resimleriyle de gerçekten iyi çalışır. Biraz yaratıcı olmak istiyorsanız, bir tam ekran bölümünden diğerine geçerken oldukça benzersiz geçişler oluşturmak için arka plan resimlerinize biraz paralaks işlevi ekleyebilirsiniz.

Bu eğitimde, size Divi'de tam ekran sayfa düzenine bazı paralaks arka plan görüntüsü geçişlerini nasıl ekleyeceğinizi göstereceğim. İşlem basittir ve onunla bazı güçlü sonuçlar yaratabilirsiniz.

Gizlice Bakış

Birlikte inşa edeceğimiz tasarımlardan bazılarına göz atın.

Başlarken

Youtube Kanalımıza Abone Olun

Bu eğitim için ihtiyacınız olan tek şey Divi ve farklı ürün resimleri ve arka plan resimleri için kullanılacak bir resim koleksiyonu. Juice Shop Düzen Paketi'ndeki görüntüleri kullanıyorum. Bu düzen paketini içeren blog gönderisinin alt kısmında bu resimlerin bulunduğu zip dosyasını indirebilirsiniz. "Tam Çözünürlüklü Görüntü Varlıklarını İndir" düğmesini tıklamanız yeterlidir.

Yeni Sayfanızı Hazırlama

Görüntülerinizi hazırladıktan sonra. Yeni bir sayfa oluşturun ve sayfanıza bir başlık verin. Ardından Divi Builder'ı dağıtın ve "Sıfırdan Oluştur"u seçin. Ardından, ön uçta oluşturmak için düğmeye tıklayın.

Artık yuvarlanmaya hazırsınız!

Temel Fikir

Bu konseptin arkasındaki temel fikir, her biri tam genişlikte bir başlık modülüne sahip birden çok tam genişlikli bölümün istiflenmesini içerir. Her başlık modülüne, bölüm arka planı ortaya çıkarken sola, ortaya veya sağa hizalanabilen özel bir genişlik verilir. Daha sonra her bölüme belirli bir paralaks yöntemi ile bir arka plan görüntüsü verilir. Bu, siz sayfayı aşağı kaydırırken farklı arka plan görüntüsü geçiş efektleri oluşturur.

İşte nasıl yapılacağı.

Tam Genişlik Başlık Bölümünü Oluşturma

Öncelikle yeni bir tam genişlikli bölüm oluşturmanız ve ardından bölüme tam genişlikte bir başlık modülü eklemeniz gerekecek.

Tam genişlikli başlık ayarlarını aşağıdakilerle bazı içeriklerle güncelleyin:

Başlık: “Domates Suyu”
Düğme #1 Bağlantı Metni: “Tarife Bakın”
İçerik: “İçeriğiniz buraya gider. Bu metni satır içi veya modül İçerik ayarlarında düzenleyin veya kaldırın."
Logo Resmi: [ekran görüntüsüne bakın] (Resim 240 piksele 300 pikseldir)

Şimdi başlık tasarımınızı aşağıdaki gibi güncellemeye devam edin:

Arka Plan Rengi: rgba(255,255,255,0.92)

Tam Ekran Yap: EVET

Aşağı Kaydır Düğmesini Göster: EVET
Simge: ekran görüntüsüne bakın
Aşağı Kaydır Simge Rengi: #222222

Metin Rengi: Koyu

Başlık Başlık Düzeyi: H2
Başlık Yazı Tipi: Raleway
Başlık Metin Boyutu: 50px

Gövde Yazı Tipi: Lato
Gövde Metin Boyutu: 16px
Gövde Harf Aralığı: 1px

Düğme Bir Metin Boyutu: 16px
Düğme fBir Metin Rengi: #ffffff
Bir Arka Plan Rengi Düğmesi: #222222
Düğme Bir Kenar Yarıçapı: 50 piksel
Düğme Bir Harf Aralığı: 2px
Düğme Bir Yazı Tipi Stili: TT

Genişlik: %45 (masaüstü), %60 (tablet), %100 (akıllı telefon)

Ayarları kaydet.

Buradaki ana anahtar tasarım öğeleri, "Tam ekran yap" seçeneği ve "Genişlik: %45"tir. Bu, bölümün her zaman tarayıcı penceresinin tam genişliğine ve yüksekliğine yayılmasına olanak tanır. Ve özel genişlik, daha sonra ekleyeceğimiz bölüm arka planını ortaya çıkarmak için başlık modülünü küçültür.

Bölüm arka planının eklenmesi

Artık başlık modülümüzü tasarladığımıza göre, bölüm arka plan resmimizi ekleyebiliriz. Tam genişlik bölümü ayarlarınıza gidin ve bir arka plan resmi ekleyin. Tarayıcı penceresinin tüm genişliğini ve yüksekliğini kaplayacak kadar büyük olduğundan emin olun. Ardından CSS Paralaks yöntemini kullanmayı seçin.

Bölümleri Çoğaltmak

Her bölüm yeni içerik göstereceğinden, sayfanızda her birinde bir başlık modülü bulunan toplam dört bölüm olması için tam genişlikli bölümümüzü üç kez çoğaltmamız gerekiyor.

CSS Paralaks ile Aynı Bölüm Arka Plan Görüntüsünü kullanarak Statik bir arka plan görüntüsü oluşturma

Artık dört özdeş bölüme sahip olduğumuza göre, tasarımı daha iyi anlayabilmek için tam genişlikte başlık içeriğini yeni logo resimleri ve Başlıklarla güncelleyebiliriz. Ancak, dört bölümün tamamı için CSS paralaksını kullanarak aynı arka plan görüntüsünü korursak, sonuç, siz farklı tam ekran bölümlerine ilerlerken yerinde kalan statik bir arka plan görüntüsü olur. Ve her başlıkta aşağı kaydırma düğmesi kullandığımızdan, kullanıcıların her yeni bölüme temiz bir şekilde kaydırmak için oku tıklama seçeneği vardır.

Sonucu kontrol edin.

CSS Paralaks Geçişleriyle Farklı Arka Plan Resimleri Kullanma

Her bölüm için farklı bir arka plan Resmi (CSS paralaks ile) kullanmak, siz kaydırdıkça tasarımın hissini değiştirecektir. Dört bölümlü arka plan resimlerimiz için zaten CSS paralaksını etkinleştirdiğimizden, tek yapmamız gereken her bir resmi farklı bir şeye değiştirmek. Bu durumda, her bölüm için arka plan resmi olarak ürünün büyük bir sürümünü ekliyorum.

Dört bölümün her biri için farklı bir arka plan resminiz (CSS Paralaks ile) olduğunda, sonucu kontrol edin.

Gerçek Paralaks Geçişleriyle Farklı Arka Plan Görüntüleri Kullanma

Arka plan görüntüsü geçiş efektini değiştirmek istiyorsanız, dört bölümlü arka plan görüntülerinin tümü için paralaks yöntemini CSS'den True Parallax'a değiştirebilirsiniz.

Bölüm ayarlarından birini açın ve CSS yöntemini “True Parallax” olarak değiştirin.

Ardından kalan üç bölüm için de aynısını yapmanız gerekecektir. Veya Paralaks Yöntemi seçeneğine sağ tıklayıp sayfa boyunca tüm tam genişlikte başlık modüllerine "Paralaks Yöntemini Genişlet" seçeneğini seçebilirsiniz.

Bittiğinde, arka plan görüntüsü geçiş efektini kontrol edin.

Farklı Modül Hizalamalarını Keşfetmek

Fullwidth Header modülünüzün hizalamasını değiştirmek çok kolay. Tam genişlikli başlık modülümüz %45'lik özel bir genişliğe sahip olduğundan, farklı bir düzen elde etmek için modül hizalamasını sola, ortaya veya sağa kolayca ayarlayabilirsiniz. Özellikle statik bir arka plana sahip ortalanmış hizalamayı seviyorum.

Modülü ortalamak için, tam genişlik başlık ayarlarını açın ve Modül Hizalamasını Ortalanmış olarak güncelleyin.

Modülü sayfanın sağına hizalamak için modül hizalamasını sağa hizalı olarak güncellemeniz yeterlidir.

Bir hizalamaya karar verdikten sonra, "modül hizalama" stilini sayfa boyunca diğer başlık modüllerine genişletebilirsiniz.

Statik bir arka plana sahip bir ortalanmış hizalama örneği (CSS paralakslı her biri için aynı arka plan görüntüsü).

Aşağıda, CSS Paralaks yöntemini kullanarak farklı arka plan görüntüleri ile ortalanmış hizalama örneği verilmiştir.

İşte True Parallax yöntemini kullanarak farklı arka plan görüntüleri ile ortalanmış hizalamaya bir örnek.

Burada, css ve gerçek paralaks kombinasyonunu kullanarak farklı arka plan görüntüleri ile bir sağa hizalama örneği verilmiştir.

Son düşünceler

Bu arka plan görüntüsü geçişleri, tam ekran bölümleri ve özelleştirilmiş başlık modülleriyle birlikte kullanıldığında gerçekten harika görünüyor. İşlevsellik temiz ve tasarım ince ve benzersiz. Herhangi bir şey varsa, içeriğiniz için statik arka planlar oluşturmanın hızlı ve kolay bir yoludur. Arka plan geçişlerini, yazı tiplerini ve görselleri kullanarak daha gelişmiş tasarımları keşfetmekten çekinmeyin!

Yorumlarda sizden haber bekliyorum.

Şerefe!