Öğeler arasında arka plan geçişleri oluşturmak istiyor musunuz? Divi ?

Öğeler arasında sorunsuz arka plan tasarımı geçişleri oluşturun Divi tasarımınızı geliştirmenin harika bir yoludur. Site Web Divi.

Bu, bir çizgi ve bir bölüm arasında bir degrade, desen ve arka plan maskesini yaratıcı bir şekilde sorunsuz bir şekilde değiştirmenize olanak tanır.

Örneğin, tasarımın genel hizasını ve simetrik görünümünü kaybetmeden farklı renklerde desen veya maske geçişi yapabilirsiniz.

Bu öğreticide, Divi bölümü ve çizgisi arasında sorunsuz bir arka plan tasarımı geçişi oluşturmak için Divi'nin yerleşik arka plan tasarım seçeneklerini kullanacağız. Bu tasarımın uygulaması ve çok yönlülüğü sınırsızdır ve Divi'nin arka plan tasarım seçeneklerini tamamen yeni bir düzeye taşır!

Başlayalım.

anket

İşte bu eğitimde oluşturacağımız tasarıma hızlı bir bakış.

Divi öğeleri arasında kesintisiz arka plan geçişleri oluşturun

Maskelerde ve arka plan desenlerinde yalnızca birkaç basit değişiklikle yapılabilecek diğer bazı örnek tasarımlar burada.

Divi öğeleri arasında kesintisiz arka plan geçişleri oluşturun
Divi öğeleri arasında kesintisiz arka plan geçişleri oluşturun
Divi öğeleri arasında kesintisiz arka plan geçişleri oluşturun

Divi Builder ile yeni bir sayfa oluşturun

Başlamak için aşağıdakileri yapmanız gerekir:

WordPress kontrol panelinden şuraya gidin: Sayfalar> Yeni Ekle yeni bir sayfa oluşturmak için.

Sekmelere dönüştürülen bölme çizgileri

Size mantıklı gelen bir başlık verin ve tıklayın Divi Builder'ı kullanın

Ardından İnşaata Başla (Sıfırdan Oluşturun)

Sekmelere dönüştürülen bölme çizgileri

Bundan sonra, Divi'de tasarlamaya başlamak için boş bir tuvaliniz olacak.

Bir Divi bölümü ve bir çizgi arasında arka planda kesintisiz bir geçiş oluşturma

Yer tutucu içerik olarak bir başlık oluşturma

Ayrıca Oku: Divi: Çizgilerden vurgulu efektli sekmeler nasıl oluşturulur

İçeri girmeden önce şu şekilde bir başlık eklememiz gerekiyor: içindekiler hayali. Başlamak için sayfanın varsayılan bölümüne tek sütunlu bir satır ekleyin.

Ardından satıra bir Metin modülü ekleyin.

H1 boyutunda metin ekleyin.

Sekmenin altında Dizayn, başlık metni tasarımını istediğiniz gibi güncelleyin.

  • Yazı Tipi: Roboto Yoğun
  • Yazı Ağırlığı: Kalın
  • stil: TT
  • Metin Hizalama: Ortalanmış
  • Metin Rengi: #000000
  • Başlık Metni Boyutu: 4vw
  • Harf Aralığı: 0.1em
  • Çizgi Yüksekliği: 1.3em

Bölüm arka plan tasarımı

Bölüme dolgu eklendi

Sahte başlık yerleştirildiğinde, bölüm ayarlarını açın ve aralığı aşağıdaki gibi güncelleyin:

  • Dolgu (Üst ve Alt): 15vw

Bölüme arka plan gradyanı eklendi

Artık çalışmak için daha fazla alanımız olduğuna göre, arka plan tasarımımızı bölüme eklemeye hazırız. sekmenin altında Arka Plan Gradyanı, aşağıdaki degrade noktalarını ekleyin:

  • Gradyan Durakları:
    • %0: #4f0f75 (%0'da)
    • %25: #2843c9 (%25'te)
    • %50: #4ae2e0 (%50'de)
    • %75: #3881ff (%75'te)
    • %100: #4f0f75 (%100'da)

Bölüme bir arka plan deseni ekleme

Sekmenin altında Arka Plan Deseni, aşağıdakileri güncelleyin:

  • Desen: Çapraz Çizgiler
  • Desen Rengi: rgba(79,15,117,0.23)
  • Dönüştür: Döndür
  • Desen Boyutu: Özel Boyut
  • Genişlik: 7vw
  • Yükseklik: 5vw
  • Desen Tekrar Menşei: Merkez

Not: Desenin genişliği ve yüksekliği için VW uzunluk birimini kullandığınızdan emin olun. Ayrıca, tekrarlanan orijini "merkez" olarak ayarladığınızdan emin olun. Bu, arka plan desenini, daha sonra satıra ekleyeceğimiz arka plan deseni ile aynı yerde tutacaktır.

Bölüme arka plan maskesi ekleme

Sekmenin altında Arka Plan Maskesi, şunları ekleyin:

  • Arka Plan Maskesi: Katman Blobu
  • Maske Rengi: rgba(0,0,0,0.7)
  • Maske Genişliği: 100vw
  • Pozisyon: Merkez

Not: Tıpkı desende olduğu gibi, VW uzunluk birimini kullanarak maskeyi boyutlandırmamız gerekiyor. Ayrıca maskeye merkezi bir konum vermemiz gerekiyor.

Satır arka plan tasarımı

Bölüm arka planını satır arka planına kopyalayıp yapıştırın

Çizgi arka plan tasarım sürecini hızlandırmak için bölüm arka plan ayarlarını kopyalayın.

Ardından arka planı mevcut satıra yapıştırın.

Bu noktada zaten arka plan deseninin ve çizgi üzerindeki maskenin bölümün arka planına nasıl sorunsuz bir geçiş yaptığını görebilirsiniz.

Çizgi şeffaf bir arka plana sahip gibi görünüyor, ancak aslında aynı boyut ve konumdaki bölümde kullanılan desen ve maskenin aynısı.

VW kullanarak satır boyutunu ve dolguyu ayarlayın

Ardından, VW uzunluk birimini kullanarak sıramıza özel bir genişlik vermemiz gerekiyor. Aşağıdakileri güncelleyin:

  • Genişlik: 75vw
  • Maksimum Genişlik: 75vw
  • Dolgu (Üst, Alt, Sol ve Sağ): 10vw

Hat üzerinde gradyan duraklarını ayarlayın

Ardından, kesit arka planı gradyanına kesintisiz bir geçiş için çizgi arka planındaki gradyan duraklarını ayarlamamız gerekiyor.

Sekmenin altında Arka Plan Gradyanı, bölüm arka planından miras alınan üç orta gradyan noktasını koruyacağız) ve ilk ve son gradyan duraklarını kaldıracağız.

Ardından ilk durağı %0'a ve üçüncü durağı %100'e ayarlayın. Tamamlandığında, aşağıdaki degradelere sahip olmalısınız.

  • Gradyan Durakları
    • %0: #2843c9
    • %50: #4ae2e0
    • %100: #3881ff

Satıra kutu gölgesi ekle

Tasarıma biraz ağırlık vermek ve arka planın kesintisiz geçişini vurgulamak için satıra bir kutu gölgesi ekleyebiliriz.

  • Kutu Gölgesi: ekran görüntüsüne bakın
  • Dikey Konum: 0px
  • Kutu Gölge Bulanıklığı Gücü: 4vw
  • Gölge Rengi: rgba(0,0,0,0.5)

Çizgi arka plan desen rengini ayarla

Artık tüm arka plan öğelerini yerleştirdiğimize göre, daha yaratıcı bir tasarım için renkleri ayarlamaya başlayabiliriz.

Seçeneğin altında Arka Plan Deseni satır, aşağıdakileri güncelleyin:

  • Desen Rengi: rgba(255,255,255,0.23)

Çizgi arka plan maskesi rengini ayarla

Tasarımın gerçekten öne çıkmasını sağlamak için çizginin maske rengini de güncelleyebiliriz.

Sekmenin altında Arka Plan Maskesi, aşağıdakileri güncelleyin:

  • Maske Rengi: #ffffff
  • Maske Dönüşümü: ters

Nihai sonuç

Son sonucu görelim.

Divi öğeleri arasında kesintisiz arka plan geçişleri oluşturun

DIVI'yı şimdi indirin!!!

Daha fazla olasılık

Maskelerde ve arka plan desenlerinde yalnızca birkaç basit değişiklikle yapılabilecek diğer bazı örnek tasarımlar burada.

Divi öğeleri arasında kesintisiz arka plan geçişleri oluşturun

Ayrıca bakınız: Divi: Resimlerinizi güzelleştirmek için "Gradient Builder" nasıl kullanılır?

Divi öğeleri arasında kesintisiz arka plan geçişleri oluşturun
Divi öğeleri arasında kesintisiz arka plan geçişleri oluşturun

DIVI'yı şimdi indirin!!!

Sonuç

Divi'de kusursuz arka plan tasarımı geçişleri yaratmanın anahtarı, bu VW uzunluk birimlerini akıllıca kullanmaktır.

İlk olarak, tarayıcı görünüm alanının genişliğine (sayfada ortalanmış bir konumdan) uyan bir bölüm arka plan tasarımı oluşturmamız gerekiyor. Bir kez bittiğinde, aynı tek satırlık arka plan tasarımını kullanabiliriz. Bundan sonra, harika bir tasarım için bazı gradyan ve renk düzenlemelerimiz var.

Umarım bu teknik, gelecekteki projeler için başka bir yararlı tasarım becerisi katacaktır.

Bu eğitimin bir sonraki Divi projeleriniz için size ilham vereceğini umuyoruz. Herhangi bir endişeniz veya öneriniz varsa, bizi yorumlar bölümü bunu tartışmak için.

Ayrıca danışabilirsiniz kaynaklarımızİnternet siteleri oluşturma projelerinizi yürütmek için daha fazla elemana ihtiyacınız varsa.

Rehberimize de danışmaktan çekinmeyin. WordPress blog oluşturma ya da Divi: Tüm zamanların en iyi WordPress teması.

Ama bu arada, bu yazıyı farklı sosyal ağlarda paylaş.

...