Divi Paralaks ve Video Arka Planlarına Renk ve Gradyan Katmanları Nasıl Eklenir

Renk ve degrade kaplamalar, hedef kitlenizin dikkatini çekebilecek ve içeriğinizi öne çıkarabilecek mükemmel tasarım öğeleridir. Arka plan resimleriyle harika çalışıyorlar. Bir bölüme, satıra veya sütuna arka plan resmi ekleyin, bir renk veya degrade kaplaması ekleyin ve ardından içeriğinizi bunun üzerine yerleştirin. Yine de bir sorun, renk ve degrade kaplamaların Divi'de varsayılan olarak paralaks ve video arka planlarıyla çalışmamasıdır.

Bu eğitimde, paralakstaki bir görüntüyle veya pazarımızdan üçüncü taraf bir eklenti kullanarak bir videoyla arka planlara nasıl renk ve gradyan bindirmeleri ekleyeceğinizi göstereceğiz. Ayrıca bölüm ayırıcılarla çalışan bindirmeleri de göreceğiz. Bu normalde kod gerektirir, ancak doğru araçlarla, herkesin uygulaması zor değildir.

Hadi başlayalım.

Gizlice Bakış

İşte bu eğitimde ne inşa edeceğimize bir göz atın.

Bir bölümde paralaks arka planı ve diğerinde video arka planı olan bir düzen oluşturuyorum. Paralaks arka planı bir degradeye sahip olacak ve video arka planı tek bir renk katmanına sahip olacaktır. Ayrıca bölüm bölücüleri de şekillendireceğiz. Pizzeria Layout Pack'in açılış sayfasını kullanıyorum çünkü pizza. Masaüstünde böyle görünüyor.

Aynı tasarım bir telefonda böyle görünüyor.

Standart Divi Paralaks ve Video Arka Planları

Standart Divi araçları, bölümlere, satırlara ve sütunlara arka plan resimleri ve videolar eklemenize izin verir, ancak bunların bindirmeleri sınırlıdır. Arka plan resimleri için degrade kaplama ekleyebilir, ancak düz renk için kaplama ekleyemezsiniz. Video seçenekleri, bindirmeleri içermez.

Arka plan görüntüleri için seçenekler paralaks içerir, ancak arka plan görüntüsü için paralaksı etkinleştirirseniz kaplama artık görüntünün üzerinde görüntülenmez. Kaplamayı görüntülemeyi seçmiş olsanız bile kapalı.

Divi Paralaks ve Video Arka Planlarına Renk ve Gradyan Katmanları Nasıl Eklenir

Divi Background Plus adlı üçüncü taraf bir eklenti kullanarak paralaks ve video arka planlarına renk ve gradyan kaplamaları ekleyeceğiz. Ayrıca bu eklentiyi kullanarak bölüm ayırıcıların nasıl şekillendirileceğini de göreceğiz.

Divi Background Plus'ı yükleyin

Divi Background Plus, Divi Marketplace'te mevcuttur. Nasıl başlayacağımıza bir bakalım. Öncelikle Divi Background Plus'ı satın alın ve bilgisayarınıza indirin.

WordPress kontrol panelinizde Eklentiler'e gidin ve Yeni Ekle'yi seçin. Ekranın üst kısmındaki Eklenti Yükle'ye tıklayın.

Dosya Seç'i seçin , bilgisayarınızdaki sıkıştırılmış dosyaya gidin, dosyayı seçin ve Şimdi Yükle'yi tıklayın.

Dosya yüklendikten sonra Eklentiyi Etkinleştir 'i tıklayın. Başka bir kuruluma gerek yoktur. Eklenti artık kullanıma hazırdır.

Divi Builder'a Divi Background Plus adlı yeni bir modül eklendi. Paralaks reklam video arka planları için gradyan ve renk bindirmelerimizi oluşturmak için bu modülü kullanacağız. Bu eklenti ve bölümlerdeki arka planlar, bu eğitim için ihtiyacımız olan tek şey.

Divi Paralaks Arka Planına Degrade Bindirmeleri Ekleme

Arka plan resminizi yükleyeceğiniz bölüm ayarlarını açın. Bu örnekte, Pizzeria mizanpaj paketindeki ilk bölümle birlikte arka plan resmini kullanıyorum, ancak bunu istediğiniz herhangi bir bölüme, satıra veya sütuna yükleyebilirsiniz.

İçerik ayarlarında görüntü sekmesini açın. Paralaks Efektini Kullan'ı etkinleştirin. Varsayılan ayar olan True Paralaks kullanıyorum. CSS Paralaks da çalışır.

Paralaks efektinin etkinleştirilmesi degradeyi devre dışı bırakır, ancak degrade ayarları hala yerindedir. Degradeyi bölümün ayarlarında kullanmak yerine, degradeyi Divi Background Plus modülündeki ayarlara ekleyeceğiz.

Bu bölüm için halihazırda kullanılan aynı degradeyi kullanmak istiyorsanız (benim gibi), Degrade sekmesini seçin ve degrade üzerinde bir yere sağ tıklayın. Arka Plan Degrade Renklerini Kopyala'yı tıklayın.

Arka plan resminizle bölüme yeni bir modül eklemek için seçin ve Divi Background Plus'ı seçin.

İçerik sekmesindeki Düzen ayarlarında, ayarları bölüme, satıra veya sütuna uygulamayı seçin. Bölüm seçiyorum .

Arka Plan ayarlarını açın ve Degrade sekmesini seçin. Varsayılan gradyan otomatik olarak uygulanır. Opaklığı arka planınızın görünmesi için ayarlayabilir, kendi degradenizi oluşturabilir veya mizanpajdan birini kullanabilirsiniz.

Düzenden birini kullanmak için sağ tıklayın ve Arka Plan Degrade Renklerini Yapıştır öğesini seçin. Bu, yalnızca renkleri değil, aynı zamanda degrade türü, yönü, başlangıç ​​konumu, bitiş konumu ve degradeyi arka plan görüntüsünün üzerine yerleştirme ayarlarını da uygular.

İşte sonuç. Artık orijinalin aynı görüntü ve kaplamayı içeren bir sürümüne sahibim, ancak şimdi arka planı gerçek paralaks olarak gösteriyor.

İşte aynı düzen bir telefonda nasıl göründüğü.

Divi Video Arka Planına Renk Yerleşimi Ekleme

İlk bölümün altına yeni bir normal bölüm ekleyin. Bu bölüme arka plan videosunu, bindirme için bir Divi Background Plus modülü ekleyeceğiz ve bindirmede mesajları, iletişim bilgilerini ve bir CTA'yı görüntülemek için metin modülleri ekleyeceğiz.

Harekete Geçirici Mesaj bölümündeki metni kullanmayı planlıyorum. Bunu Divi's Layer araçlarıyla yapmak kolaydır. Bunu yapmak için kopyalamak istediğiniz bölüme sağ tıklayın ve Katmana Git'i seçin.

Kopyalamak istediğiniz satırlara sağ tıklayın ve Satırı Kopyala'yı seçin.

Ardından, satırı yerleştirmek istediğiniz bölümü seçin, sağ tıklayın ve Satır Yapıştır'ı seçin. Bu bölümden kopyalamak istediğim her iki satır için de bunu yapıyorum. Alternatif olarak, bu bölümü kopyalayabilir ve Divi Background Plus modülünü buna ekleyebilirdim.

Artık Divi Background Plus, birkaç metin modülü ve bir CTA ile yeni bir bölümüm var.

Ardından, videoyu bölümün arka planına ekleyin. Videodaki renkler metindeki renklerle iyi çalışıyor, ancak onları biraz daha öne çıkarmak için bir bindirme eklemek istiyorum. Arka plan videom için, Pexels'ten Tima Miroshnichenko'nun Pizza Üzerine Karışık Soslar adlı ücretsiz videosunu kullanıyorum.

Divi Background Plus ayarlarını açın ve düzen için Bölüm'ü seçin.

Arka Plan sekmesine ilerleyin ve renk seçeneğini seçin. Elbette, videonuza bağlı olarak renkleriniz farklı olacaktır. Videoya kırmızı bir ton vermek istedim. ben kullandım:

• rgba(150,0,0,0,15)

Kırmızı renkli kaplamamla arka plan videosunun masaüstünde nasıl göründüğü aşağıda açıklanmıştır.

İşte bir telefondaki aynı düzen.

Birkaç örnek için, burada %30 opaklığa sahip standart mor arka plan var.

Bu, %80 opaklığa sahip standart portakaldır.

Bölüm Bölücünün Stilini Oluşturun

Bindirmeler ayrıca bölüm ayırıcılarla da çalışır. Bölüm ayırıcı eklemek için bölümün ayarlarını açın.

Tasarım sekmesine gidin, Bölücüler öğesini seçin ve ayırıcı eklemek istediğiniz yere bağlı olarak Üst veya Alt öğesini seçin. Sadece en alta bir bölücü ekliyorum. Ayırıcınızı seçmek için Bölücü Stili etiketli açılır kutuya tıklayın.

İstediğiniz bölücü stilini seçin. İki renkle açı oluşturan beşinci stili seçiyorum.

Özel bir renk eklemek için düzenle simgesini seçin. Bu, bölücünün görünmediği bölümde görünen renktir. Önceki örnekte görebileceğiniz gibi varsayılan renk beyazdır. Rengi onaltılı kod olarak ekleyin veya renk seçiciden rengi seçin. Videonun altındaki bölümdeki renklerden biri olan #0d0d0d rengini ekliyorum.

• Renk #0d0d0d

Videonun artık bu bölümün alt kısmı için stilize edilmiş bir ayırıcı var. Ayırıcının şeffaf kısımlarından gösterilen videoyu görebilirsiniz ve her iki bölümle de iyi uyum sağlar.

Sonuç

Düzenin masaüstü ve mobil cihazlarda nasıl göründüğüne bir göz atalım.

İşte masaüstü sürümüne bir bakış. İlk bölümde gradyan kaplamalı gerçek bir paralaks arka planı vardır. İkinci bölüm, renkli bir kaplamaya sahip bir arka plan görüntüsü ve onu bir sonraki bölümden ayıran bir bölüm ayırıcı içerir.

Düzen bir telefonda böyle görünüyor. Tüm öğeler mobil cihazlarda iyi çalışır.

Biten Düşünceler

Divi paralaks ve video arka planlarına nasıl renk ve gradyan bindirmeleri ekleyeceğimize bakışımız bu. Divi Background Plus, bunları oluşturmayı ve kullanmayı kolaylaştırır. Bölümler, satırlar ve sütunlarla çalışır ve aralarından seçim yapmak kolaydır. Tüm özelleştirmeler standart Divi araçları ve ayarlarıdır, bu nedenle aşinadırlar.

Artık arka planlarınız, paralaks ve videoları devre dışı bırakmak zorunda kalmadan renk ve gradyan bindirmeleri içerebilir!

Senden duymak istiyoruz. Divi Background Plus ile paralaks resimleriniz ve videolarınız için renk ve degrade kaplamalar oluşturdunuz mu? Yorumlarda bunun hakkında ne düşündüğünüzü bize bildirin.

Lauritta / Shutterstock.com üzerinden Öne Çıkan Görsel