Divi'de Arka Plan Maskeleri ile Bölüm Bölücüler Nasıl Birleştirilir

Divi'de arka plan maskelerini bölüm ayırıcılarla birleştirmek, zaten güçlü bir arka plan tasarım seçenekleri cephaneliğine başka bir yaratıcılık katmanı ekler. Divi'nin arka plan seçenekleri konusunda fazla deneyiminiz yoksa kesinlikle çok şey kaçırıyorsunuz. Kullanışlı, ancak güçlü bir seçenek, yalnızca birkaç tıklamayla arka plan gradyanınıza (veya resminize) bir arka plan maskesi ekleme olanağı sağlar. Arka plan seçeneklerine ek olarak, bölüm ayırıcılar kullanıcılara arka plan tasarımlarını geliştirme olanağı da verir.

Bu derste, arka plan maskelerini Divi'de bölüm ayırıcılarla nasıl birleştireceğinizi göstereceğiz. Bu tekniği kullanarak bir Divi bölümü için arka plan tasarımını nasıl tamamlayacağınız konusunda size adım adım talimatlar vereceğiz. Ayrıca, sadece birkaç basit ince ayar ile bazı alternatif tasarımların nasıl oluşturulacağını bile ele alacağız.

Zevk almak!

Gizlice Bakış

İşte bu eğitimdeki tasarımlara hızlı bir bakış.

Kavram

Bu öğreticinin temel konsepti, daha da benzersiz maske şekilleri oluşturmak için bir arka plan maskesini ve bölüm ayırıcıları birleştirmektir.

İlk olarak, bir arka plan maskesi ekliyoruz.

Ardından maske şeklini yaratıcı bir şekilde tamamlamak için bölüm ayırıcılar ekliyoruz.

Düzeni ÜCRETSİZ İndirin

Bu eğitimdeki tasarımlara el koymak için önce aşağıdaki düğmeyi kullanarak indirmeniz gerekecek. Kazanmak için
İndirmeye erişmek için aşağıdaki formu kullanarak Divi Daily e-posta listemize abone olmanız gerekir. yeni olarak
abone, her Pazartesi daha da fazla Divi iyiliği ve ücretsiz bir Divi Düzen paketi alacaksınız! Eğer zaten
liste, sadece aşağıya e-posta adresinizi girin ve indir'i tıklayın. "Yeniden abone olmayacaksınız" veya fazladan e-posta almayacaksınız.

Dosyaları İndir

Ücretsiz İndir

Divi Bültenine katılın ve size nihai Divi Açılış Sayfası Düzen Paketinin bir kopyasını ve ayrıca tonlarca başka şaşırtıcı ve ücretsiz Divi kaynağı, ipucu ve püf noktası e-posta ile gönderelim. Takip edin ve kısa sürede bir Divi ustası olacaksınız. Zaten aboneyseniz, e-posta adresinizi aşağıya yazın ve düzen paketine erişmek için indir'i tıklayın.

İNDİRMEK

Başarıyla abone oldunuz. Aboneliğinizi onaylamak ve haftalık ücretsiz Divi düzen paketlerine erişmek için lütfen e-posta adresinizi kontrol edin!

Bölüm düzenini Divi Kitaplığınıza aktarmak için aşağıdakileri yapın:

1. Divi Kitaplığına gidin.
2. Sayfanın üst kısmındaki İçe Aktar düğmesini tıklayın.
3. Taşınabilirlik açılır penceresinde, içe aktarma sekmesini seçin
4. Bilgisayarınızdan indirme dosyasını seçin (önce dosyayı açıp JSON dosyasını kullandığınızdan emin olun).
5. Ardından içe aktar düğmesini tıklayın.

Tamamlandığında, bölüm düzeni Divi Builder'da mevcut olacaktır.

Hadi öğreticiye geçelim, olur mu?

Başlamak için Gerekenler

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

1. Henüz yapmadıysanız Divi Temasını kurun ve etkinleştirin.
2. WordPress'te yeni bir sayfa oluşturun ve sayfayı ön uçta düzenlemek için Divi Builder'ı kullanın (görsel oluşturucu).
3. “Sıfırdan Oluştur” seçeneğini seçin.
4. Şimdi Divi'de tasarlamaya başlamak için boş bir tuvaliniz var!

Divi'de Arka Plan Maskeleri ve Bölücüler Nasıl Birleştirilir

1. Bölüm Boyutunu ve Aralığını Ekleyin

Başlamak için, oluşturucudaki mevcut bölüme boyut ve boşluk ekleyeceğiz. Bölümün arka plan tasarımına konsantre olabilmemiz için bir satır veya herhangi bir içerik eklemeyi erteleyeceğiz.

Bölüm için ayarları açın. Tasarım sekmesi altında, boyutu ve aralığı aşağıdaki gibi güncelleyin:

• Min Yükseklik: 50vw
• Dolgu: 0 piksel üst, 0 piksel alt

Yükseklik için VW uzunluk birimini kullanmak garip görünebilir. Ancak, arka plan öğelerimizi boyutlandırmak için VW uzunluk birimini kullanacağımızdan, bu, tasarımın farklı tarayıcı genişliklerinde akıcı bir şekilde ölçeklenmesini sağlayacaktır.

2. Arka Plan Gradyanını Oluşturun

Bölüm biraz yüksekliğe ulaştığında, bölüme arka plan gradyanını eklemeye hazırız. Bu bize biraz arka plan rengi verecektir, böylece daha sonra arka plan maskesini ve ayırıcı kombinasyonunu gösterebiliriz.

İçerik sekmesinin altında, arka plan seçeneklerinin altındaki arka plan gradyan sekmesine tıklayın. Ardından aşağıdaki gibi bir degrade ekleyin:

• Renk Durdurma 1: #1a2a6c (%20'de)
• Renkli Durdurma 2: #b21f1f (%60'ta)
• Renk Durdurma 2: #fdbb2d (%100'de)

3. Arka Plan Maskesini Oluşturun

Artık bir renk gradyanımız olduğuna göre, bir arka plan maskesi oluşturmaya hazırız.

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

• Maske: Köşeli çift ayraç
• Maske Rengi: #000
• Maske Dönüşümü: Ters
• En Boy Oranını Maskele: Ekran Görüntüsüne Bakın

4. Bölüm Arka Plan Bölücülerini Ekleyin

Maskemiz yerine oturduğunda, bölüm bölücüler kullanarak maskeleme şeklini daha da değiştirebiliriz. Bu örnekte, üst ve alt kısımlara yarım daire bölüm ayırıcı ekleyeceğiz. Bu, arka plan maskesini daha çok süslü bir ok tasarımına benzeyecek şekilde sıkıştıracaktır.

Bunu yapmak için Tasarım sekmesine tıklayın ve aşağıdaki Bölücüleri ekleyin:

İlk önce, Üst sekmesinin altına bir üst ayırıcı ekleyin.

• Bölücü Stili: Ekran Görüntüsüne bakın
• Bölücü Rengi: #000
• Bölücü Yüksekliği: 10vw

Ardından, Alt sekmesinin altına bir alt ayırıcı ekleyin.

• Bölücü Stili: Ekran Görüntüsüne bakın
• Bölücü Rengi: #000
• Bölücü Yüksekliği: 10vw
• Bölücü Çevirme: Dikey Çevirme

Sonuç

İşte şimdiye kadarki sonuç.

Daha Fazla Tasarım için Arka Plan Seçeneklerini ve Bölücüleri Ayarlama

Artık temel fikre sahip olduğunuza göre, daha fazla tasarım oluşturmak için arka plan seçenekleri bölüm ayırıcılarıyla kolayca oynayabiliriz.

Alternatif Tasarım #1

İlk alternatif tasarımımız için mevcut arka plan maskesini döndüreceğiz ve yarım daire bölüm ayırıcıları üçgenlerle değiştireceğiz.

Bunu yapmak için mevcut bölüm ayarlarını açın, arka plan Maskesi sekmesine tıklayın ve aşağıdakileri güncelleyin:

• Maske Dönüşümü: Dikey Çevir, Döndür
• En Boy Oranını Maskele: Ekran Görüntüsüne Bakın

Ardından, Bölüm Bölücüleri aşağıdaki gibi güncelleyin:

Üst Bölücü

• Bölücü Stili: Ekran Görüntüsüne bakın
• Bölücü Yüksekliği: 13vw

Alt Bölücü

• Bölücü Stili: Ekran Görüntüsüne bakın
• Bölücü Yüksekliği: 13vw
• Bölücü Çevir: devre dışı bırak

Sonuç

İşte sonuç.

Alternatif Tasarım #2

İkinci ve son alternatif tasarımımız için, Chevrons Mask'i Diagonal Bars 2 Mask ile değiştireceğiz ve ayrıca tasarıma ince bir swooshing efekti eklemek için ona yeni bir üst bölüm ayırıcı vereceğiz.

Bunu yapmak için mevcut bölüm ayarlarını açın, arka plan Maskesi sekmesine tıklayın ve aşağıdakileri güncelleyin:

• Maske: Çapraz Çubuklar 2
• Maske Dönüşümü: Yatay Çevirme
• En Boy Oranını Maskele: Ekran Görüntüsüne Bakın

Ardından, Bölüm Bölücüleri aşağıdaki gibi güncelleyin:

Üst Bölücü

• Bölücü Stili: Ekran Görüntüsüne bakın
• Bölücü Çevirme: Yatay Çevirme

Alt Bölücü

• Bölücü Tarzı: Yok

Sonuç

İşte sonuç.

Nihai sonuçlar

Bu arka planların bazı içeriklerle nasıl görüneceği hakkında size daha iyi bir fikir vermek için, bölümün ortasına yerleştirilmiş büyük bir başlığı olan tek sütunlu bir satır ekledim. Ayrıca her biri için karışım modu olan bir görüntü içeren ek bir tasarım ekledim.

Onları kontrol et!

İçerik ve resimler için kullanılan ayarları keşfetmek için, bu eğitimin (yukarıya bakın) her tasarımı içeren ücretsiz düzenini indirmekten çekinmeyin.

Son düşünceler

Arka plan tasarımları için maskeleri ve bölüm ayırıcıları birleştirmek, bu yerleşik maskeler için benzersiz şekiller oluşturmak için daha fazla olanak sunar. Farklı kombinasyonları kendi başınıza keşfetmekten çekinmeyin. Umarım bu, kendi web siteniz veya bir sonraki projeniz için kullanışlı olacaktır.

Yorumlarda sizden haber bekliyorum.

Şerefe!