Divi’de ekran düzenini paralaks arka plan görüntülerinin geçişleriyle dolu yapın
Tam ekrana sahip bir web sayfası oluşturmak, tarayıcının genişliğine ve yüksekliğine ulaşan temiz parçaların düzgün geçişleri ve düzenleri ile kullanıcı deneyimini geliştirmenin iyi bir yoludur. Genellikle bu, kullanıcıların sayfaların her birine kolayca odaklanmasını sağlayan bir seferde tek bölümlük bir ürün veya hizmet görüntülemek için iyi çalışır. Bu tür bir tasarım aynı zamanda içerikle konuşan ve güzel tasarım aksanları sağlayan arka plan görüntüleri ile çok iyi çalışır. Biraz yaratıcı olmak istiyorsanız, bir tam ekrandan diğerine geçerken oldukça benzersiz olan bazı geçişler yapmak için arka plan görüntüsünüze bazı paralaks işlevleri ekleyebilirsiniz.
Bu öğreticide, Divi’deki tam ekran sayfası düzenine bazı paralaks arka plan görüntü geçişlerinin nasıl ekleneceğini göstereceğim. Süreç basittir ve bununla bazı güçlü sonuçlar verebilirsiniz. Sneak Peek Birlikte yapacağımız bazı tasarımları görün.
Bazı içeriklerle dolu geniş gölgelik ayarlarını aşağıdakilerle güncelleyin: Başlık: “Domates Suyu” Düğmesi #1 Bağlantı Metni: “Tarife Bkz. İçeriğe bakın” İçeriğiniz: “İçeriğiniz burada. Bu metni sırayla veya modül içerik ayarlarında düzenleyin veya silin. ” Logo görüntüsü: [Ekran yakalamaya bakın] (240px kali 300px resim) Şimdi başlık tasarımınızı şu şekilde güncellemeye devam edin: Arka Plan Rengi: RGBA (255,255,255,0.92) Tam ekranı yapın: evet Alt Top Boğalarını Göster: Evet Icon: Ekran Ekrana Bakın Ekran Aşağı Aşağı Renk simgesi: #222222 Renk Metin: H2 Başlık Yazı Tipi: H2 Başlık Yazı Tipi: Rale Yolu Metin Boyutu Başlık: 50PX Yazı Tipi Yazı Tipi: Lato Gövde Metin Boyut: 16px Aralık Gövde Harfleri: 1px Bir Metin Boyutu Düğmesi: 16px Fone Fone Düğme Metin: #fffffff Bir Arka Plan Renk Düğmesi: #222222 Bir Radius Düğmesi Sınırı: 50px Bir Boşluk Harf Düğmesi: 2px One Font Style Düğmesi: TT Genişlik: 45 % (masaüstü),% 60 (tablet),% 100 (akıllı telefon) ayarları kaydedin. Buradaki ana tasarım öğesi “Tam Ekran Oluştur” ve “Genişlik:%45” seçenekleridir. Bu, parçanın herhangi bir zamanda tarayıcı penceresinin genişliğine ve yüksekliğine ulaşmasına izin verecektir. Ve özelliğin genişliği, bir sonraki ekleyeceğimiz parçanın arka planını ortaya çıkarmak için başlık modülünü daraltır. Mevcut parçanın arka planını ekleyin Tasarlanan bir başlık modülümüz var, parçamızın bir arka plan görüntüsünü ekleyebiliriz. Tam geniş bölüm ayarlarınızı açın ve arka plan resimleri ekleyin. Tarayıcı penceresinin genişliğine ve yüksekliğine ulaşmanın yeterince büyük olduğundan emin olun. Ardından Parallax CSS yöntemini kullanmayı seçin.
Parçaları çoğaltma her bir parça yeni içerik görüntülediğinden, tam geniş bölümümüzü üç kez çoğaltmamız gerekir, böylece başlık modülüyle ilgili sayfalarınızda toplam dört parçanız vardır. CSS Parallax ile aynı arka plan görüntüsünü kullanarak statik bir arka plan görüntüsü oluşturmak artık dört aynı parçamız var, daha iyi bir tasarım anlayışı elde etmek için yeni logo görüntüleri ve başlıklarıyla dolu geniş başlık içeriğini güncelleyebiliriz. Ancak, dört parçanın tümü için CSS paralaksını kullanarak aynı arka plan görüntüsünü kaydedersek, sonuç farklı bir tam ekrana kaydırdığınızda yerinde kalan statik bir arka plan görüntüsüdür. Her bir gölgede kaydırma düğmesini kullandığımız için, kullanıcının her yeni bölüme temiz bir şekilde kaydırmak için oku tıklama seçeneği vardır. Sonuçlara bakın. Her bölüm için farklı bir arka plan görüntüsü (CSS paralakslı) kullanarak paralaks geçiş CSS ile farklı bir arka plan görüntüsü kullanmak, kaydırdığınızda tasarımın nüanslarını değiştirecektir. Dört bölümlü arka plan görüntülerimiz için CSS paralaksını etkinleştirdiğimiz için, yapmamız gereken her görüntüyü farklı bir şeye dönüştürmektir. Bu durumda, ürünün büyük bir sürümünü her bölüm için arka plan görüntüsü olarak ekliyorum.
Dört parçanın her biri için farklı bir arka plan görüntüsünüz (CSS paralakslı) olduktan sonra sonuçlara bakın.
Gerçek bir paralaks geçişine sahip farklı bir arka plan görüntüsü kullanarak, arka plan görüntüsü geçiş efekti değiştirmek istiyorsanız, arka plan görüntüsünün dört parçası için paralaks yöntemini CSS’den gerçek paralaks olarak değiştirebilirsiniz. Ayarlardan birini açın ve CSS yöntemini “gerçek paralaks” olarak değiştirin. O zaman kalan üç parça için de aynısını yapmanız gerekir. Veya paralaks yöntemi seçeneğine sağ tıklayın ve “Paralaks yöntemini genişletin” yi, tüm sayfadaki tüm geniş başlık modüllerine seçin.
Yorumlarda sizden haber almayı umuyorum.Kızarmış ekmek!
