Divi'nin maskesini ve arka plan deseni kaplamasını kullanmak ister misiniz?
sonuncusu ile arka plan maskesinin sürümü ve arka plan deseni özelliği Divi'de kendi kahramanınız için benzersiz Kahraman bölümleri oluşturabilirsiniz. Site Web. Bir kahraman bölümü, oyununuzun ilk bölümüdür. Site Web ve bu senin ilk şeyin ziyaretçi kaydırmadan önce bakın Site Web, bu yüzden göz alıcı olmak önemlidir!
Bu makale, gerçekten çarpıcı Kahraman Bölümleri oluşturmak için bir arka plan görüntüsüne uygulayabileceğiniz beş benzersiz arka plan maskesini ve desen kaplamalarını nasıl oluşturacağınızı gösterecektir.
Bu eğitim, her bir Hero bölümünü oluşturmak için gereken temel adımları kapsayacak ve web siteniz için birkaç dakika içinde çarpıcı bir Hero bölümü oluşturmak için ihtiyacınız olan araçları size verecektir.
Hadi başlayalım!
anket
İşte bugün bu makalede oluşturacağımız beş Kahraman Bölümüne hızlı bir genel bakış.
DIVI'yı şimdi indirin!!!
Tasarımlar ince, basit ve yine de etkileyici.
Ayrıca Oku: Divi: Resimlerinizi güzelleştirmek için "Gradient Builder" nasıl kullanılır?
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.
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)
Bundan sonra, Divi'de tasarlamaya başlamak için boş bir tuvaliniz olacak.
Arka plan görüntüsüne uygulanacak beş arka plan maskesi ve desen bindirme örneği
İlk önce Hero bölümünü oluşturalım
Tüm örnek tasarımlarımız aynı bölüm, satır ve sütun yapısını kullanır, şimdi bunları ayarlayalım.
1. Bir yerleşim yapısı oluşturun
Sayfanıza bir satır ekleyin, ardından sütun yapısını göstermek için yeşil "+" simgesine tıklayın ve ilk sütunu, tam genişlikteki sütunu seçin.
2. Bölüm Aralığı Ekle
Artık satır ve sütunumuzu tanımladığımıza göre, bölüme biraz boşluk eklemenin zamanı geldi.
Aralık sekmesinde aşağıdakileri güncelleyin:
- Masaüstü: 400 piksel (Üst ve Alt)
- Tablet: 200 piksel (Üst ve Alt); 25px (Sol ve Sağ)
- Telefon: 50 piksel (Üst ve Alt); 25px (Sol ve Sağ)
Kahraman Bölüm Tasarımı #1
İlk Kahraman bölümünü tasarlayalım.
DIVI'yı şimdi indirin!!!
1. Başlık metni ekleyin
Modül kitaplığını getirmek için gri “+” simgesine tıklayın. Metne ilerleyin ve yüklemek için tıklayın.
Başlık metnini girin, ardından sekmenin altına Başlık Metni, şu ayarları yapılandırın:
- Başlık Yazı Tipi: Work Sans
- Metin Rengi: Beyaz #ffffff
- Başlık Metni Boyutu:
- Masaüstü: 3 em
- Tablet: 2,2 em
- Telefon: 1.4em
2. Düğme Modülü Ekle
Bir düğme ekleyin ve şu ayarları yapılandırın:
- Sekmenin altında içeriks: Daha fazlasını öğrenin
- Sekmenin altında hiza, seçin: Merkez
- Tıkla Düğme İçin Özel Stiller Kullan sonra yapılandırın:
- Düğme Metin Boyutu:
- Masaüstü: 20 piksel
- Tablet: 16 piksel
- Telefon: 14 piksel
- Düğme Metin Rengi: #ffffff
- Arkaplan: #1d1d1d
- Düğme Kenar Genişliği: 0
- Sınır Yarıçapı: 0
- Harf Aralığı: 3 puan
- Düğme Yazı Tipi: İş Sans
- Yazı Tipi Stili: TT
- Düğme Metin Boyutu:
3. Bir arka plan resmi ekleyin
Artık bizim içindekiler Yapılandırılmıştır, bölümün arka planını tasarlamaya başlamanın zamanı geldi.
- Arka plan geçişine gidin ve 3. sekmeye, resim sekmesine tıklayın, ardından “Arka Plan Resmi Ekle”ye tıklayın.
- Bu, bir fotoğraf seçebileceğiniz veya yeni bir tane yükleyebileceğiniz medya kitaplığınızı getirecektir.
- Fotoğrafınızı seçtikten sonra sağ alt köşedeki "Resim Yükle" düğmesini tıklayın.
4. Bir arka plan deseni ekleyin
Artık arka plan resmimizi oluşturduğumuza göre bir desen ekleyelim.
- Sekmede Olayın Arka Planı, 5. sekmeye gidin, sekme Arka Plan Deseni, ardından “Arka Plan Deseni Ekle”yi tıklayın.
- seçmek tepeli açılır menüden şu ayarları yapılandırın:
- Desen Rengi – rgba(255,255,255,0.31)
- Desen Dönüşümü: yok
- Boyut : Gerçek Boyut
- Desen Tekrarı Menşei: Üst Alt
- Desen Tekrarı: Tekrarla
- Karışım Modu: normal
5. Arka plan maskesi ekleyin
Artık arka plan resmimizi ve desenimizi oluşturduğumuza göre bir arka plan maskesi ekleyelim.
- Sekmede Olayın Arka Planı, 6. sekmeye gidin, sekme Arka Plan Maskesi, ardından “Arka Plan Maskesi Ekle”ye tıklayın.
- seçmek Fasulye açılır menüden şu ayarları yapılandırın:
- Maske Rengi: rgba(0,0,0,0.36)
- Maske En Boy Oranı: yatay dikdörtgen
- Boyut: Doldurmak için Uzat
Yani ! Artık güzel tasarlanmış bir Kahraman bölümünüz var.
Bölüm Kahramanı #2 tasarımı
Şimdi ikinci kahraman bölümünü tasarlayalım.
1. Bir arka plan resmi ekleyin ve karıştırma modunu Kaplama olarak ayarlayın
Arka plan resminizi seçin, karıştırma modunu Kaplama olarak ayarlayın ve kaplama rengi olarak rgba (10,10,10,0.64) ekleyin.
2. Bir arka plan deseni ekleyin
Şimdi arka plan resmini ayarladık, şimdi bir arka plan deseni ekleyelim.
- Arka Plan sekmesinde, 5. sekmeye gidin, sekme Arka Plan Deseni, ardından “Arka Plan Deseni Ekle”yi tıklayın.
- seçmek tepeli açılır menüden şu ayarları yapılandırın:
- Desen Rengi – rgba(255,255,255,0.09)
- Desen Dönüşümü: yok
- Boyut: Kapak
- Desen Tekrar Menşei: Sol Üst
- Desen Tekrarı: Tekrarla
- Karışım Modu: normal
3. Arka plan maskesi ekleyin
Artık arka plan resmimizi ve desenimizi oluşturduğumuza göre bir arka plan maskesi ekleyelim.
- Sekmede Olayın Arka Planı, 6. sekmeye gidin, sekme Arka Plan Maskesi, ardından “Arka Plan Maskesi Ekle”ye tıklayın.
- seçmek Düzeltme işareti açılır menüden şu ayarları yapılandırın:
- Maske Rengi: rgba(0,0,0,0.36)
- Maske Dönüşümü: Yok
- En Boy Oranı: yatay dikdörtgen
- Maske Boyutu: Doldurmak İçin Uzat
- Maske Karışım Modu: Normal
Bölüm Kahramanı #3 tasarımı
Şimdi üçüncü Kahraman bölümünü tasarlayalım.
1. Bir arka plan resmi ekleyin ve karıştırma modunu Kaplama olarak ayarlayın
Arka plan resminizi seçin, karıştırma modunu Kaplama olarak ayarlayın ve kaplama rengi olarak rgba (10,10,10,0.39) ekleyin.
2. Bir arka plan deseni ekleyin
Artık arka plan resmimizi oluşturduğumuza göre, bir arka plan deseni ekleyelim.
- Sekmede Olayın Arka Planı, 5. sekmeye gidin, sekme Arka Plan Deseni, ardından “Arka Plan Deseni Ekle”yi tıklayın.
- seçmek Çapraz Çizgiler 2 açılır menüden şu ayarları yapılandırın:
- Desen Rengi – rgba(0,0,0,0.06)
- Desen Dönüşümü: yok
- Boyut : Gerçek Boyut
- Desen Tekrar Menşei: Sol Üst
- Desen Tekrarı: Tekrarla
- Karışım Modu: Normal
3. Arka plan maskesi ekleyin
Artık bir arka plan resmi ve bir desen eklediğimize göre, bir arka plan maskesi ekleyelim.
- Sekmede Olayın Arka Planı, 6. sekmeye gidin, sekme Arka Plan Maskesi, ardından “Arka Plan Maskesi Ekle”ye tıklayın.
- seçmek Üçgenler açılır menüden şu ayarları yapılandırın:
- Maske Rengi: rgba(10, 10, 10, 0,61)
- Maske Dönüşümü: yok
- En Boy Oranı: yatay dikdörtgen
- Maske Boyutu: Doldurmak İçin Uzat
- Maske Karışım Modu: Normal
Bölüm Kahramanı #4 tasarımı
Şimdi Hero'nun dördüncü bölümünü tasarlayalım.
1. Bir arka plan resmi ekleyin
Arka plan resminizi seçin.
2. Bir arka plan deseni ekleyin
Şimdi arka plan resmimizi eklediğimize göre, bir arka plan deseni ekleyelim.
- Sekmede Olayın Arka Planı, 5. sekmeye gidin, sekme Arka Plan Deseni, ardından “Arka Plan Deseni Ekle”yi tıklayın.
- seçmek Smiles açılır menüden şu ayarları yapılandırın:
- Desen Rengi – rgba(0,0,0,0.2)
- Desen Dönüşümü: yok
- Boyut: Kapak
- Tekrar Menşei: sol üst
- Desen Tekrarı: Tekrarla
- Desen Karışım Modu: Normal
3. Arka plan maskesi ekleyin
Artık arka plan resmimizi ve desenimizi uyguladığımıza göre bir arka plan maskesi ekleyelim.
- Sekmede Olayın Arka Planı, 6. sekmeye gidin, sekme Arka Plan Maskesi, ardından “Arka Plan Maskesi Ekle”ye tıklayın.
- seçmek Köşe Gölü açılır menüden şu ayarları yapılandırın:
- Maske Rengi: rgba(10, 10, 10, 0,61)
- Maske Dönüşümü: yatay
- En Boy Oranı: Yatay Dikdörtgen
- Boyut: Kapak
- Maske Konumu: Orta Sol
- Maske Blender Modu: Normal
3. Hat parametrelerini yapılandırın
Başlamadan önce, bu Kahraman bölümü benzersiz çizgi stillerine sahiptir. Bunu ayarlayalım.
- boyutlandırma:
- Genişlik: %80
- Maksimum Genişlik: 800 piksel
- Satır Hizalama:
- Masaüstü: Varsayılan
- Tablet: Merkez
- Telefon: Merkez
- Kenar Boşlukları:
- Sol: 20vw
Bölüm Kahramanı #5 tasarımı
Şimdi beşinci Kahraman bölümünü tasarlayalım.
DIVI'yı şimdi indirin!!!
1. Bir arka plan resmi ekleyin
Arka plan resminizi seçin.
2. Bir desen ekleyin
Artık arka plan resmimizi oluşturduğumuza göre, bir arka plan deseni uygulayalım.
- Sekmede Olayın Arka Planı, 5. sekmeye gidin, sekme Arka Plan Deseni, ardından “Arka Plan Deseni Ekle”yi tıklayın.
- seçmek Çaprazlar açılır menüden şu ayarları yapılandırın:
- Desen Rengi – #ffffff
- Desen Dönüşümü: yok
- Boyut: Özel Boyut
- Desen Genişliği: 10px
- Desen Yüksekliği: 10px
- Tekrar Menşei: Üst Alt
- Desen Tekrarı: Tekrarla
- Desen Karışım Modu: Normal
3. Arka plan maskesi ekleyin
Artık bir arka plan resmimiz ve desenimiz uygulandığına göre, bir arka plan maskesi ekleyelim.
- Sekmede Olayın Arka Planı, 6. sekmeye gidin, sekme Arka Plan Maskesi, ardından “Arka Plan Maskesi Ekle”ye tıklayın.
- seçmek çapraz haplar açılır menüden şu ayarları yapılandırın:
- Maske Rengi: rgba(10, 10, 10, 0,61)
- Maske Dönüşümü: yatay
- En Boy Oranı: Yatay Dikdörtgen
- Boyut: Kapak
- Maske Konumu: orta sol
- Maske Karışım Modu: Normal
3. Hat parametrelerini yapılandırın
Başlamadan önce, bu Kahraman bölümü de benzersiz çizgi stillerine sahiptir. Bunu ayarlayalım.
- boyutlandırma:
- Genişlik: %80
- Maksimum Genişlik: 800 piksel
- Satır Hizalama:
- Masaüstü: Varsayılan
- Tablet: Merkez
- Telefon: Merkez
- boşluk:
- Marj (Sağ): 18vw
Ayrıca bakınız: Divi: Bir başlığa maskeler ve arka plan desenleri nasıl eklenir
Sonuç
Yeni seçeneklerle web siteniz için benzersiz ve göz alıcı bir Hero bölümü tasarlamak çok kolay arka plan ve desen maskesi Divi'den. Her özelliğin gerçekten yaratıcı arka planlar oluşturmanıza olanak tanıyan birçok seçeneği vardır.
Ayrıca, herhangi bir Divi Builder öğesine arka plan desenleri ve maskeler ekleyebilirsiniz! Tasarım seçenekleri sonsuzdur.
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ş.
...
