Divi Eklentisi Vurgusu: Divi Background Plus

Divi'nin birçok arka plan özelliği vardır. Düz renkli bir arka plan, degrade, resim veya video ekleyebilirsiniz. Görüntü, düz rengi veya gradyanı kaplama olarak kullanabileceğiniz Görüntü Karışımı nedeniyle özellikle ilgi çekicidir. Yine de bir sorun, bunun paralaks üzerinde çalışmamasıdır. Başka bir sorun, videonun hiç bindirmesi olmamasıdır.

Bindirmeler ve paralaks eklemek istiyorsanız, CSS kullanmanız gerekir. Bu işe yarar, ancak elle yapılması gerekir, yani tüm ayarlamalar kod içinde yapılır, bu da işlenmesi daha uzun sürer. Çoğu müşterinin kodunuzda değişiklik yapmasını istemezsiniz. Neyse ki, bu sorunu çözmenin daha kolay ve daha güvenli bir yolu var.

Divi Background Plus adlı üçüncü taraf bir eklenti, her ikisine de bindirmeler ekler. Bu eklenti ile bir videoya bir bindirme ve bir görüntüye paralaks içinde bir bindirme ekleyebilirsiniz. Bu yazıda Divi Background Plus'a bir göz atacağız ve neler yapabileceğini göreceğiz.

Eklentiyi geliştiricinin web sitesinden satın alabilirsiniz.

Divi Background Plus'ı Yükleme

İlk olarak, indirilen dosyayı açın. Bu dosyanın içinde beni oku dosyası ve eklentinin zip dosyası var. Beni oku dosyası, yükleme ve başlamayla ilgili bazı kısa yönergeler sağlar. Divi-background-plus adlı dosyayı yükleyin ve etkinleştirin. Başka bir kurulum gerekmez.

Divi Arka Plan Artı Modülü

Divi Builder'a Background Plus adlı yeni bir modül eklenir.

Modül, bir İçerik sekmesi ve bir Gelişmiş sekmesi içerir. İçerik sekmesi, düzen düzeyi (bindirmeyi yerleştirmek için bölüm, satır veya sütun arasındaki düzeyi seçin) ve arka plan (standart renk, gradyan, görüntü ve video seçenekleriyle) için ayarları içerir. Gelişmiş sekmesi, standart özel CSS özelliklerini içerir.

Divi Background Plus, arka planla çalışan bindirme modülüdür. Başka bir deyişle, arka plan resminiz veya videonuz bölüm, satır veya sütun içine yerleştirilir ve bu yeni modül bunun üzerine bir kaplama ekler. Yani arka plan görüntüsü veya video bir yerde ve bindirme başka bir yerde. Renk ve degrade kaplamaların nasıl kullanılacağını biliyorsanız, bu modülün üreteceği kaplamaları nasıl oluşturacağınızı zaten biliyorsunuzdur.

Background Plus modülünü kullanmak için önce görüntüyü veya video arka planını nereye yerleştirmek istediğinize karar verin. Bölüm, satır veya sütun içine yerleştirebilirsiniz. Ardından, Background Plus modülünü bu bölüm, satır veya sütun içine bırakın. Düzen Düzeyi ayarında, arka planın hedeflemek istediğiniz yeri seçin. Hadi bir bakalım.

Divi Arka Plan Artı Resim Örneği

Burada arka plan resmini bir satıra yerleştirdim. Paralaks efektini etkinleştirdim ve paralaks yöntemi olarak CSS'yi seçtim.

İşte bindirme olmadan görüntü. Tam beklediğimiz gibi çalışan bir paralaks görüntüsü.

Ardından, bu sütuna bir Arka Plan Artı modülü bıraktım.

Arka Plan Artı ayarlarında Düzey için Satır'ı seçtim ve degrade bir arka plan oluşturdum. Gradient Direction'ı 118 dereceye değiştirdim. Gradyan yerine düz bir renk de kullanabiliriz.

Artık paralaks bir arka plan üzerinde bir kaplamamız var. Bindirmeye biraz metin ekleyeceğim ve sonra onu eylemde göreceğiz.

İşte metin modülleri. Onları sağ sütuna yerleştirdim. Background Plus modülü, sütun konumunda hiçbir şey göstermediğinden, hiçbir şey yokmuş gibi okur. Metni soldan biraz ileri itmek için sağ satırın sol tarafına dolgu ekledim. Alternatif olarak, iki yerine bir sütun kullanabilirdim.

Dosya boyutunu küçük tutmak için görüntü boyutunu küçülttüm, ancak burada görüntünün degrade ve metin kaplamasının arkasında paralaks arka planı olarak kaldığını görebilirsiniz.

Beni ve merakımı biliyorsun. İki Background Plus modülünün aynı arka plan görüntüsünü etkileyip etkilemediğini görmem gerekiyordu.

İlk modül, solda %80 opaklığa sahip kırmızı bir gradyan ve sağda net bir gradyan kullanır. Başlangıç ​​konumunu %8 ve bitiş konumunu %33 olarak ayarladım.

Sonraki modül, solda net bir gradyan ve sağda %74 opaklıkta mavi bir gradyan kullanır. %56'lık bir başlangıç ​​konumu ve %100'lük bir bitiş konumu kullanır.

Sonuç, her iki tarafta birer tane olmak üzere farklı renklerde, ortada kaplama olmayan iki kaplamaya sahip bir paralaks arka planıdır. Bindirmeler ilginç bir açı oluşturur.

Bunun için sol eğimin başlangıç ​​ve bitiş konumunu %33 olarak değiştirdim.

Sağ eğimin başlangıç ​​ve bitiş konumunu %87 olarak değiştirdim. Ayrıca gradyan yönünü 72 dereceye değiştiriyorum. Bu, kırmızı ve mavinin asimetrik olacağı anlamına gelir (bu, gözlerimi seğirmeye neden olabilir, ama yine de deneyeceğiz).

Sonuç, degradelerin daha kolay görülebilmesi için keskin bir çizgi oluşturur. Bu arka plan hala paralaks içinde. Yani paralaksta aynı arka plan görüntüsü için iki modül kullanabilirsiniz. Sayfa hızında hiçbir etki görmedim.

Divi Arka Planı Artı Video Örneği

Bindirme olarak metin içeren bir satıra arka plan videosu ekliyorum. Video arka planlarının doğal olarak bir paralaks seçeneği olmadığından, Divi Background Plus ile bile paralaks video arka planları oluşturamıyoruz. Ancak, bir videoya bindirme ekleme yeteneği bize hala birçok tasarım olanağı sağlıyor.

İşte metin içeren bir arka plan videosunun ekran görüntüsü. Metni okumak zor. Normalde metnin arkasına bir arka plan eklerdim, ancak istediğiniz görünümü elde etmek zor olabilir.

Videonun üzerine düz bir renk kullanarak bir kaplama ekledim. Opaklığı %50 olan siyah kullandım.

Bu örnek için bir degrade oluşturdum ve degrade türünü merkez radyal yönü olan radyal olarak değiştirdim. Başlangıç ​​konumu %41 ve bitiş konumu %100'dür. İlk rengi %80 opaklıkla siyah olarak ayarladım. İkinci renk, %40 opaklığa sahip açık gridir.

Sonuç, metnin öne çıkması için merkeze karanlık bir nokta yerleştirir.

Şimdi kırmızı bir kaplama ekliyorum. Sol renk %80 opaklık kullanırken sağ renk %56'ya sahiptir. Gradyan türü için tekrar doğrusala ayarladım ve yönü 162 dereceye, başlangıç ​​konumunu %42'ye ve bitiş konumunu %75'e ayarladım.

Degrade içindeki varyasyonlarla kalın bir kırmızı oluşturur.

Ve tabii ki videolu iki Background Plus modülünü denemek zorunda kaldım. Bu sefer arka plan videosunu bölüme taşıdım ve bir arka planla hedefledim ve ardından metin modülü için satırı hedeflemek için başka bir tane yerleştirdim.

Bölümü hedefleyen modül için her ikisi de %70 opaklıkla sola kırmızı, sağa mavi yerleştirdim. Eğim yönü 162 derece, başlangıç ​​konumu %40 ve bitiş konumu %60'tır.

Satırı hedefleyen modül için, bölümün tersi olan bir degrade oluşturdum. Her ikisi de %70 opaklıkla solda mavi ve sağda kırmızı kullanır. Renklerin daha yumuşak bir karışımını oluşturmak için degrade yönü 158 derece, başlangıç ​​konumu %0 ve bitiş konumu %100'dür. Satır ayarları için her tarafa 50 piksel dolgu ekledim ve bir kutu gölgesi ekledim.

Sonuç, arka plan videosunun gösterildiği bir yer paylaşımının üzerinde bir kaplamadır.

Divi Background Plus'ı Ekstra ile Kullanma

Divi Background Plus ile tüm ayarlar standart Divi Builder ayarlarıdır ve Extra ile iyi çalışır. İşte yukarıdaki örnekteki arka plan videosunun ekran görüntüsü. Tüm ayarlar hala yerinde. Bindirme üzerindeki bindirme, arka plan videosunun beklendiği gibi göz atmasını sağlar.

Divi Background Plus Lisansı ve Belgeleri

Eklenti 10 ABD dolarıdır ve istediğiniz kadar web sitesinde kullanabilirsiniz. Belgeler, indirme dosyası içinde bir belge olarak (gerçekte orada pek bir şey olmamasına rağmen) ve yayıncıların ürün sayfasında bir video incelemesi olarak sağlanır. Eklentiyi çalışırken gösterdiği için videoyu izlemenizi şiddetle tavsiye ederim.

Biten Düşünceler

Divi Background Plus, bazı ilginç tasarım olanakları sunar. Kullanımı kolaydır – renkler, degradeler, resimler ve videolar için arka plan ayarlarını nasıl kullanacağınızı biliyorsanız, bu eklentiyi kullanma becerisine zaten sahipsiniz. Tek fark, bu eklentinin arka plandan ayrı bir bindirme oluşturmasıdır. Paralakstaki görüntüler veya videolar üzerinde arka plan kaplamaları oluşturmakla ilgileniyorsanız, bu eklenti bir göz atmaya değer.

Senden duymak istiyoruz. Divi Background Plus'ı denediniz mi? Yorumlarda bunun hakkında ne düşündüğünüzü bize bildirin.

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