10 arka plan tasarım hilesi şimdi belki Divi’nin yeni arka plan ayarlarıyla

Divi’nin yeni arka plan seçeneği arayüzünün piyasaya sürülmesinden bu yana Divi daha da güçlendi. Yeni özellikler birçok olası yeni tasarım açtı. Bugün, bilmediğiniz bazı yeni tasarım hileleri tanıtacağım ve umarım şaşırtıcı arka plan tasarımları yapmanız için size ilham verebilirim. Visual Builder kullanarak yapabileceğiniz birçok kombinasyon ve arka plan tasarımı karışımı vardır. Bu yazı için belirttiğim 10 püf noktası sadece yüzeyi çizecektir, ancak sizi farklı kavramlarla tanıştırmak ve ilginizi tetiklemek amaçlanmaktadır. Bu tasarım hilelerinin çoğu, yeni gradyan arka plan seçenekleri ve arka plan görüntülerini gradyan renkleriyle birleştirme gibi yeni arka plan seçenekleri kullanılarak gerçekleştirilir.
Yine de seni uyarmalıyım. Arka plan seçeneklerini kazmaya başladıktan sonra asla duramazsınız! Bu çok eğlenceli. En azından benim için böyle. Zevk almak. İşte tasarım hilelerinden gizlice bir bakış

Yeni bir tasarımın hilelerini her açıkladığımda baştan başlamak yerine bu yazıyı nasıl takip edeceğim, çoğu için aynı tasarım örneğini kullanıyorum ve tasarıma farklı hileler ekliyorum. Bu, çoğu örneğin yeni hileler uygulayabilmeniz için önceki tasarım hilelerini tamamlamanızı gerektirdiği anlamına gelir. Hile #1-9 aynı temel ayarları takip eder ve ön koşul olarak hile #1 gerektirir. Özellikleri test ederseniz, hile #1 ile başlamanızı öneririm.
10 Arka Plan Tasarım Hileleri Divi ile YouTube kanalına abone olmak #1: Diagonal Genişleme Tam geniş parça ekleyin, ardından tam geniş başlık modülünü girin. Ardından başlık modülü ayarlarını aşağıdaki gibi güncelleyin: İçerik Seçenek Başlığı: [Başlık Enter] Altyazılar: [Girin Altyazılar] logo görüntü url: [logoya girin] gradyan renk arka plan: rgba (12.113.195.0.55), rgba (255.255.255.0) gradyan tipi: doğrusal gradyan yönü: 135deg başlangıç ​​konumu:% 60 (ne (% 60 veya daha düşük ne kadar çalışır)

Gradyan aynı noktada başladığı ve bittiği için, temel olarak hiç de meydana gelen bir gradyan etkisi yoktur. Dolayısıyla sonuç,%60 işaretçinin her iki tarafında iki renktir. Efektler oluşturmak için gradyan yönünün açısı ile birleştirilir.

Renk Tasarımı Metni Seçimi: Işık Yazı Tipi Başlık: Varsayılan, Kalınlık (B), Coper (TT) Yazı Tipi Boyutu Başlık: 40px Altyazılar Yazı Tipi Boyutu: 24px
Gelişmiş Seçenekler Ana öğe kutusundaki özel CSS altında aşağıdaki CSS ekleyin: Dolgu: 150px 0;

Bu sadece başlık modülünün üstüne ve altına bazı ek pedler eklemek içindir
Ayarları Kaydet Şimdi tam geniş bölümünüze arka plan ekleme zamanı. Mor kontrol kutusundaki dişli simgesini tıklamanın tam kısmının geniş ayarlarını açın.

Ardından İçerik Seçenek Ayarlama bölümünü aşağıdaki gibi güncelleyin: Arka Plan Görüntü: [Arka plan görüntüsünü buraya girin. Genişlik en az 1960 piksel olmalıdır. Bu resmi unssplash.com’dan seçtim ve görüntünün önde gelen kısmı sağ tarafta olacak şekilde kestim.] Paralaks efekti kullanın: evet (bu isteğe bağlı ama bence bu, ancak bunun çapraz kaplama ile iyi çalıştığını düşünüyorum) Paralax yöntemi: true paralaks

İşte burada! Gradyan renk opaklığını ve gradyan yönünün derecesini dileklerinize göre ayarlamaktan çekinmeyin. Sanırım iyi başlıyoruz. İkinci numaraya devam edelim. Hile #2: Diyagonal diyagonal tasarım hileleri kaplama Bu hile #1’in devamıdır, bu yüzden devam etmeden önce hile #1’i tamamladığınızdan emin olun. Hile #1’de, tam geniş başlık modülündeki arka plan gradyan seçeneğini kullanarak kaplama diyagonal ile ayrılıyoruz. Aynı örneği kullanarak, tam geniş bir parçaya ek bir arka plan gradyanı ekleyin. Bu kısım için zaten bir arka plan görüntüsümüz var, ancak yeni Divi seçeneği ile gradyanın rengini arka plan görüntüsünüze birleştirebilir ve ardından belirli bir etki ile birleştirebiliriz.

Tam genişlik bölüm ayarlarını açın ve aşağıdaki içerik seçeneğini güncelleyin: gradyan renk arka planı: RGBA (131,0,233,0,38), RGBA (255,255,255.0) Gradyan Türü: Doğrusal Yön Gradyan: 135deg (Başlık Modülündeki diğer gradyan yönleriyle aynı Siz) Başlangıç ​​Pozisyonu:% 38 Son Pozisyon:% 38

Şimdi arka plan görüntüsü simgesine tıklayın ve aşağıdakileri değiştirin: Paralax efektini kullanın: Arka plan karışımı yok görüntü: çarpın
Artık benzersiz bir arka plan tasarımına kolayca ayarlanabilen 2 örtüşen çapraz çapraz kaplama var.

Hile #3: Daire Of Circle Bu tasarım hilesi, hile #1’in devamıdır, bu yüzden devam etmeden önce hile #1’i tamamladığınızdan emin olun.

Şimdi diyagonal kaplamayı hile #1’den kaplama çevrelerine değiştireceğiz. Bunu yapmak için, aşağıdaki tam ve güncellenmiş genişlik modülü ayarlarını açın: İçerik seçeneği arka plan gradyan tipi: radyal radyal yön: başlangıç ​​konumu merkezi:% 30 nihai konum:% 30% 30

Metin Oryantasyon Tasarımı ve Logo Seçimi: Ortaokul Yeni başlığın arka planını kontrol edin.
Bu hile, iyi görünen harekete geçmeyi veya davetiyeyi yapar. Daire kaplamasının boyutu kolayca ayarlanabilir ve çeşitli ekran boyutlarına iyi yanıt verilebilir. Şu anda arka plan görüntüsünün üzerinde yarı saydam bir gradyan rengi kullanıyorum, ancak bu arka plan görüntüsü olmadan iyi görünecek.

İşte arka plan görüntüsü olmayan ve daha koyu bir metin rengi olmayan bir ekran örneği.

Hile #4: Bu daire sınırını yapmak için kaplama dairesinin kaplanması, tam genişlik başlık modülüne daire kaplamasını ekleyerek ayrıldığımız hile #3’ün devamıdır. Daire gerilmeniz kurulduktan sonra, birincisi için bir sınır olarak işlev görmesi için ikinci bir daire ekleyebiliriz. Bunu, Fullwidth başlık modülünün arkasındaki tam genişlik bölümüne başka bir arka plan gradyanı ekleyerek yapıyoruz. Tam ve güncellenmiş geniş bölüm ayarlarını açın:

Arka planın altındaki içerik seçeneği görüntü sekmesi: Paralax efekti kullanın: Arka plan karışımı yok görüntü: çarpma
Arka planda gradyan sekmesi: Arka plan gradyan rengi: RGBA (0.0,0,0.45), RGBA (255,255,255,0) Gradyan Arka Plan Türü: Radyal Radyal Yön: Başlangıç ​​Pozisyon Merkezi:% 34 Nihai Pozisyon:% 34

Ayarı kaydedin.
Ayrıca başlangıç ​​konumunun yüzdesini ayarlayarak arka plan gradyan çemberinizin boyutunu kolayca değiştirebilirsiniz. Hile #5: Bu ters daire, tam genişlik başlık modülünde bir daire kaplamasıyla biten hile #3’ün devamıdır. Şu anda yarı saydam mavi daire ve arka plan görüntüsünün geri kalanı, gradyan kaplama rengine sahip değildir. Bu hile için, bunu değiştireceğim ve daire kaplamasını tersine çevireceğim, böylece yarı saydam mavi gradyanın kaplanması daireyi çevreleyecek ve daire içinde arka plan görüntüsünü ortaya çıkaracak. Bunu yapmak için tam ve güncellenmiş geniş başlığı aç Ayarlar: İçerik Seçenekleri: İçerik Seçeneği Arka Plan Yasası: RGBA (255,255,255.0), RGBA (12,113,195,0,79)

Not: Burada yaptığınız tek şey solda ve sağda renk alışverişi yapmaktır. Şimdi şeffaf renk, çevreleyen daire ve mavi gradyanda görülen şeydir. Biraz daha karanlık olması için mavi opaklığı artıracağım. Bir bakayım…

Hile #6: Bu videonun arka planına sahip ters bir daire, bizi mavi arka planı olan devrilmiş bir daire kaplamasıyla bırakan #5 numarasının devamıdır. Şu anda daire arkasındaki arka plan görüntüsünü gösteriyor. Bu dairenin arkasına oturmak için kolayca video arka plan ekleyebilirsiniz. Çok sinir bozucu olmayan videoları kullanmanızı öneririm. Ayrıca bir video her kullandığınızda, sayfanızın açılış süresinin bozulmaması için dosya boyutunun küçük olduğundan emin olun.

Arka plan görüntüsünü video ile değiştirmek için, tam geniş bölüm ayarlarını açın, arka plan video simgesine tıklayın ve videonuzu ekleyin. Şimdi tam genişlik başlık ayarlarını açın ve aşağıdakileri güncelleyin: Arka Plan Gradyan Renk İçeriği seçeneği: RGBA (12.113.195.0 .67), #333333
Yeni bir gradyan rengi ile arka plan videosu yalnızca dairede görülür.Ve renk kaplaması metnin gerçekten görünmesini sağlar.Hile #7: Merkezin dışındaki ters dairenin genişliği, bizi devrilmiş bir daire kaplamasıyla bırakan hile #5’in devamıdır.Tam geniş başlık ayarlarına dönerseniz, başlığınız için farklı bir ekran oluşturmak için radyal yönü farklı ayarlara ayarlayabilirsiniz.Aşağıdaki Fulwidth başlık ayarlarını açın: Radyal Yön İçeriği seçeneği: Doğru

Metin Oryantasyon Tasarımı ve Logo Seçimi: Sol

Aşağıdakiler nihai sonuçlar ve bazı farklı radyal yön örnekleri:
Bu örnekler açıkça bazı işler gerektirir, ancak fikri alırsınız. Hile #8: Bu hilenin gölge etkisi için bir gradyan kullanmak şaşırtıcı olmayabilir, ancak çok kullanışlı olabilir. Görüntünüze gölgeler eklemek için Photoshop gibi fotoğraf editörlerini kullanmak istemeyenler için bu sizin için. Bu, tam geniş başlık modülündeki arka plan gradyan seçeneğini kullanılarak kaplama diyagonal tarafından bırakılan hile #1’in devamıdır. Şimdi yarı şeffaf mavi kaplamayı resmin soluna başlayan ve yavaş yavaş sağa doğru soluk olan bazı koyu gölgelere değiştirelim. Bu şekilde sağdaki görüntünün ana kısmı el değmemiş kalır ve soldaki karanlık gölge metnin okumasını kolaylaştırmaya yardımcı olur. Gölge efektleri eklemek için, tam genişliği ve yenilenen başlık ayarlarını açın: Arka Plan Gradyan Renk İçeriği Seçeneği: RGBA (0.0.0.0.55), RGBA (0.0.0.55) Gradyan yönü: 90 derece başlangıç ​​pozisyonu:% 38 Nihai Konum: % 85 Bu sonuç.

Hile #9: Divi’nin yeni arka plan arka plan görüntü karışımı, görüntüyü ayarlamak için CSS karışım modu içerir. Farklı bir görüntü karışımını keşfetmek çok eğlencelidir ve bazı şaşırtıcı tasarımlar yaratma eğilimindedir. Tasarımcı olmayanlarınız için, bu harika seçenekten yararlanmak için doygunluk veya parlaklık tanımını bilmenize gerek yoktur. Tüm harika efektleri görmek için arka plan görüntüsü ile bir kombinasyonda arka plan rengine veya gradyan setine sahip olmalısınız (gerçekten sadece bir arka plan görüntüsü ile çalışmaz). Ardından, istediğiniz görünümü elde edene kadar oynayın. Sonuçlar sizi şaşırtabilir. Bu örnek için, tam geniş başlık modülündeki arka plan gradyan seçeneğini kullanarak kaplama diyagonal ile biten hile #1’den devam edeceğim. Tam geniş başlık ayarlarını açın ve içerik seçeneğinin altındaki arka plan gradyanını silin. Ayarları Kaydet Şimdi aşağıdaki bölümleri açın ve aşağıdakileri güncelleyin: DEhliyet Renk İçeriği Arka Plan seçeneği: RGBA (0,0,0,0.0.76), #, #, #, #, # 0C71C3 Gradyan Yönü: 90 Başlangıç ​​Pozisyon Derecesi:% 50 Son Pozisyon:% 50

Herhangi bir değişiklik göremediniz. Önemli değil. Aşağıdaki Arka Plan Görüntüsünü Açın ve Güncelleme: Paralax Etkisini Kullan: Karışık Arka Plan Yok Resim: Sert Işık

İşte burada. Sonuçlara bakın.

Not: Burada kullanılan renk, kullandığınız arka plan görüntüsüne dayalı farklı bir etki yaratacaktır. Bu yüzden istediğiniz şeyi elde edene kadar renk ve karışım seçenekleriyle oynamayı öneririm. Hile #10: Degrade arka planınıza daha fazla renk eklemek için katmanlama. Varsayılan olarak, her parça, satır, sütun ve modül iki renk gradyanına sahip olabilir. Ancak, birleştirdiğinizde ve birbirinin üstüne kapladığınızda, gradyan arka planınız için 5 renk kazanabilirsiniz. Ve bu 5 renk kaynaştığında, oldukça havalı bir spektrum yapabilirsiniz. Bunu yaptığınız yol budur. İlk olarak, 1 sütun yapısı satırı ile normal bölümü ekleyin. Daha sonra satırda, bulanıklık modülünü ekleyin. Bulanık modülün yeni modül ayarları aşağıdaki gibi: İçerik Seçenek Başlığı: [Başlık Enter] İçerik: [İçerik Gir] Renk Tasarım Seçenekleri Metin: Işık Oryantasyon Metni: Orta Yazı Tipi Başlığı: Varsayılan, varsayılan, varsayılan, Kalınlık (b) Boyut Düzenleyici Yazı Tipi: 56px gövde yazı tipi boyutu: 22px dolgu özel: 100px üst, 100 piksel aşağıda

Açıklamanın metni beyaz arka planla beyaz olduğu için göremezsiniz, ancak sorun değil. Yakında olacaksın. Gradyan renkleri eklemeye başlama zamanı. Arka önden soldan sağa doğru çalışacağız. Başlamak için aşağıdaki bölüm ayarlarını açın ve güncelleme: gradyan renk içeriği seçeneği Arka plan: #ff0077, #0c71c3 gradyan yönü: 90 derece Başlangıç ​​Konumu:% 0 Nihai Konum:% 30

Özel Dolgu Tasarım Seçenekleri: 0px üst, 0px aşağıda

Şimdi bir sonraki gradyan renk seviyesini güncelleyelim – çizgimiz. Aşağıdaki satır ve güncelleme ayarlarını açın: Arka Plan Gradyan Renk İçeriği Seçeneği: RGBA (255,255,255,0), #8300E9 Gradyan Yönü: 90 Derece Başlangıç ​​Pozisyonu:% 25 Nihai Konum:% 50 Sütun 1 Renk Gradyan Arka Plan: RGBA (255,255,255, 0) , #E02B20 Gradyan Yönü: 90 Derece Başlangıç ​​Pozisyonu:% 50 Nihai Konum:% 75 Tasarım Seçeneği Bu çizgiyi oluşturun Tam Genişlik: Evet Özel Oluklar: Evet Talang genişliği: 1 Özel Dolgu: 0px üst, 0px aşağıda

Geçerli ayarları son gradyan katmanı için kaydedin Blurb modülüne gitmemiz ve aşağıdakileri güncellememiz gerekir: gradyan renk içeriği seçeneği arka plan: RGBA (255,255,255,0), #EDF000 gradyan yönü: 90 derece Başlangıç ​​Pozisyonu:% 75 Final Pozisyon:% 100

Özel Dolgu Tasarım Seçenekleri: 100px üst, 100 piksel aşağıda

İşte burada. Artık oldukça renkli bir arka plan oluşturmak için entegre olan beş gradyan renginiz var.

Unutmayın, gradyan tipini radyal (dairesel) olarak da değiştirebilir ve tasarımı tamamen değiştirebilirsiniz (yaklaşık 20 saniye sürer). Gradyan türünü tüm katmanlar (bölümler, satırlar, sütunlar ve açıklama modülleri) için radyal olarak değiştirirseniz, böyle bir şey elde edersiniz.

Aşağıdaki bonus hileleri, arka plan görüntüsünü paralaks ile nasıl kaplayabileceğinize örneklerdir. Bu, gerçek paralaks kullanarak arka plan görüntüsü olan sıradan bir kısımdır. Bölümün içinde, bölümden tam genişliği uzatması için tam genişlikte ve dolgu olmadan 1 sıra sütun vardır. Satırlar için, CSS paralaks yöntemini kullanarak birkaç gradyan çevresine (kabarcıklar gibi görünmeli) şeffaf bir arka plan görüntüsü ekledim. Sonra davet modülünü şeffaf bir arka planla satıra hareket ettirmek için ekledim. Bu kombinasyon, sayfanın bir kısmını aşağı kaydırırken bir hareket yaratır. Sadece size olanakları göstermeyi umuyorum. Bazı örnekler bunu, bu yazıda belirtilen aynı hileyi test ederken yaptığım birkaç tasarım örneği ile bitireceğim.

Son zihin Umarım bu yeni arka plan seçeneğini keşfetmekten hoşlanırsınız ve taşıdıkları olasılıklar hakkında heyecanlanırsınız. Ve bu seçenek bölüm, satır, sütun ve modülde mevcut olduğundan, bu tasarım hilesini web sitenizin herhangi bir bölümüne uygulayabilirsiniz. Yapmadıysanız, daha derine inmek için zaman ayırın ve yaratıcı meyve suyunun akmasına izin verin. Eminim kendi arka plan seçeneklerinizi keşfetmek için zaman ayırırsanız, bir sonraki projenize uygulamak için istekli olacaksınız. Ne aldığını görmek için sabırsızlanıyorum. Yorumlarda sizden haber almak için sabırsızlanıyoruz.

admin

Serbest Kariyerinizi Başlat – WordPress ile bir yan gelir yaratmak için ilk adım

Çevrimiçi İş Analizi: Altı önemli metrik mevcut (ve nasıl artırılır)

WordPress Professional: Nasıl Teşvik Edilir, Arazi & Amp;Küçük işletme müşterileri ile çalışın

WordPress Gösterge Tablosunu Müşterileriniz için daha sezgisel hale getirmenin 3 yolu

Teknik olmayan WordPress müşterileriyle 2015 Konuşma Teknolojisi Kılavuzu

WordPress gerçekten topluluk siteleri için en iyi seçim mi?

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir