Divi için 5 Ücretsiz, Soyut ve Benzersiz Kahraman Bölümü Arka Plan Dokusunu İndirin

Web sitenizde kahraman bölümleri tasarlamanın birçok farklı yolu vardır. Düz renkler, arka plan resimleri kullanabilir veya web sitenizi aynı anda daha sofistike ve modern hale getiren dokulu arka planlar da kullanabilirsiniz. Bu gönderide, ücretsiz olarak indirebileceğiniz önceden hazırlanmış 5 dokulu arka planı paylaşacağız. Bunun da ötesinde, size bu dokulu arka planları Divi ile nasıl kullanacağınızı ve renk paletini ihtiyaçlarınıza göre nasıl değiştireceğinizi göstereceğiz.

Sonuç

Öğreticiye dalmadan önce, bir sayfaya eklendikten ve Divi ile değiştirildikten sonra ücretsiz olarak indirebileceğiniz farklı dokulu arka planlara hızlı bir göz atalım.

Dokulu Arka Plan #1

Dokulu Arka Plan #2

Dokulu Arka Plan #3

Dokulu Arka Plan #4

Dokulu Arka Plan #5

Bu Eğitimin Dosyalarını İndirin

Ellerinizi bu ücretsiz dokulu arka planlara koymak için önce aşağıdaki düğmeyi kullanarak indirmeniz gerekir. İndirmeye erişmek için aşağıdaki formu kullanarak Divi Daily e-posta listemize abone olmanız gerekir. Yeni bir abone olarak her Pazartesi daha fazla Divi iyiliği ve ücretsiz bir Divi Düzen paketi alacaksınız! Zaten listedeyseniz, 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.

Divi için 5 Ücretsiz, Soyut ve Benzersiz Kahraman Bölümü Arka Plan Dokusunu İndirin

Youtube Kanalımıza Abone Olun

Kahraman Bölümünü Yeniden Oluştur

Bölüm Ayarları

aralık

Yeni bir standart bölüm oluşturarak başlayın ve Aralık alt kategorisine aşağıdaki dolguyu ekleyin:

• Üst: 228 piksel
• Alt: 228 piksel

İlk Satır Ayarları

Sütun Yapısı

Bu bölüme aşağıdaki sütun yapısına sahip bir satır ekleyerek hemen devam edin:

İkinci Satır Ayarları

Sütun Yapısı

Az önce oluşturduğunuz satırın hemen altına, bir sütunlu başka bir satır ekleyin.

İlk Metin Modülü

Metin Ayarları

Şimdi, oluşturduğunuz ilk satıra dönün, ikinci sütuna bir Metin Modülü ekleyin ve Metin alt kategorisinde Metin Rengi olarak 'Koyu'yu kullanın.

Başlık Metni Ayarları

Ardından, Başlık Metni alt kategorisini açın ve aşağıdaki ayarları uygulayın:

• Başlık Yazı Tipi: Poppins
• Başlık Yazı Tipi Ağırlığı: Normal
• Başlık Metni Hizalama: Orta
• Başlık Metni Boyutu: 56px
• Başlık Çizgisi Yüksekliği: 1.3em

aralık

Aralık alt kategorisini açarak ve alt kenar boşluğuna '10px' ekleyerek devam edin.

İkinci Metin Modülü

Metin Ayarları

Önceki Metin Modülünün hemen altına başka bir Metin Modülü ekleyin ve aşağıdaki ayarları Metin alt kategorisine uygulayın:

• Metin Rengi: Koyu
• Metin Yazı Tipi: Poppins
• Metin Yazı Tipi Ağırlığı: Normal
• Metin Boyutu: 16px
• Metin Satır Yüksekliği: 2em
• Metin Yönü: Merkez

Düğme Modülü

hizalama

Artık ilk satırı tamamladığınıza göre, bir sonraki satıra geçin, bir Düğme Modülü ekleyin ve Düğme Hizalaması olarak 'orta'yı seçin.

Düğme Ayarları

Ardından, Düğme alt kategorisini açın ve aşağıdaki ayarlardan yararlanın:

• Düğme için Özel Stilleri Kullan: Evet
• Düğme Metin Boyutu: 14px
• Düğme Metin Rengi: #FFFFFF
• Düğme Arka Plan Rengi: #000000
• Düğme Yazı Tipi: Poppins
• Yazı Ağırlığı: Yarı Kalın
• Yazı Tipi Stili: Büyük Harf

aralık

Son olarak, Aralık alt kategorisini açın ve düğmenize aşağıdaki Özel Dolguyu ekleyin:

• Üst: 12 piksel
• Sağ: 24 piksel
• Alt: 12 piksel
• Sol: 24 piksel

Dokulu Arka Plan 1 Ekle

Arka Plan Resmi Ayarları

Bu gönderinin başında indirdiğiniz klasördeki ' textured-background-1.png ' dosyasını bulun ve aşağıdaki ayarlarla birlikte bölümünüzün arka plan resmi olarak ekleyin:

• Arka Plan Resmi Boyutu: Dönüştür
• Arka Plan Resmi Konumu: Alt Merkez veya Merkez
• Arka Plan Resmi Tekrarı: Tekrar Yok
• Arka Plan Resmi Karışımı: Normal

Degrade Arka Plan

Dokulu arka planlar, tüm görüntünüze uygulamanıza gerek kalmadan degrade veya tek renkli arka plan eklemenize olanak tanıyan bazı şeffaf şekilli parçalar içerir. İstediğiniz degrade arka planını seçebilirsiniz (web sitenizin renk paletine uygun olanı), ancak aşağıda oluşturduğumuz örnek için aşağıdaki ayarları seçtik:

• İlk Renk: #2a00ff
• İkinci Renk: #baffdb
• Gradyan Türü: Radyal
• Radyal Yön: Merkez
• Başlangıç ​​Konumu: %0
• Bitiş Konumu: %100

Dokulu Arka Plan Ekle #2

Arka Plan Resmi Ayarları

Bunun yerine ikinci dokulu arka planı eklemek isterseniz, bu yazının başında indirdiğiniz klasördeki ' textured-background-2.png ' dosyasını bulun, onu bölüm arka plan resminiz olarak kullanın ve aşağıdaki ayarları uygulayın. o:

• Arka Plan Resmi Boyutu: Kapak
• Arka Plan Resmi Konumu: Alt Merkez veya Merkez
• Arka Plan Resmi Tekrarı: Tekrar Yok
• Arka Plan Resmi Karışımı: Normal

Degrade Arka Plan

Aşağıdaki gradyan arka planını (veya başka herhangi bir gradyan arka planı) onunla birlikte kullanın:

• İlk Renk: rgba(255,229,102,0.66)
• İkinci Renk: rgba(172,95,232,0.68)
• Gradyan Türü: Doğrusal
• Gradyan Yönü: 102 derece
• Başlangıç ​​Konumu: %44
• Bitiş Konumu: %58

Dokulu Arka Plan Ekle #3

Arka Plan Resmi Ayarları

Üçüncü dokulu arka plan için, indirilen klasördeki ' textured-background-3.png ' dosyasını bulun ve önceki iki dokulu arka planla aynı ayarları kullanın.

Degrade Arka Plan

Bu dokulu arka planı aşağıdaki gradyan arka planıyla birlikte kullandık:

• İlk Renk: #dd008c
• İkinci Renk: #ecef4c
• Gradyan Türü: Doğrusal
• Gradyan Yönü: 120deg
• Başlangıç ​​Konumu: %19
• Bitiş Konumu: %19

Dokulu Arka Plan Ekle #4

Arka Plan Resmi Ayarları

Sonraki dokulu arka plan için, indirilen klasördeki ' textured-background-4.png ' dosyasını bulun ve bunun için önceki örneklerde olduğu gibi aynı ayarları kullanın.

Degrade Arka Plan

Dokulu arka planla birlikte aşağıdaki gradyan arka planını kullanın:

• İlk Renk: rgba(198,198,198,0.84)
• İkinci Renk: #0eafea
• Gradyan Türü: Doğrusal
• Gradyan Yönü: 90deg
• Başlangıç ​​Konumu: %50
• Bitiş Konumu: %50

Dokulu Arka Plan Ekle #5

Arka Plan Resmi Ayarları

Son dokulu arka plan resim dosyasına ' textured-background-5.png ' denir. Bunu bölüm arka plan resminiz olarak yükleyin ve önceki dokulu arka planlarla aynı ayarları koruyun.

Degrade Arka Plan

Bu son örnek için aşağıdaki gradyan arka planını kullanıyoruz:

• İlk Renk: #e04f47
• İkinci Renk: rgba(131,0233,0.68)
• Gradyan Türü: Doğrusal
• Gradyan Yönü: 190deg
• Başlangıç ​​Konumu: %0
• Bitiş Konumu: %100

Etkileşim için CSS Paralaksı Ekleyin

Arka Plan Resmi Ayarları

Bu paralaks efektini, arka plan görüntüsü sekmesine giderek, 'Paralaks Etkisini Kullan' seçeneğini etkinleştirerek ve 'CSS' Paralaks Yöntemini seçerek dokulu arka planların her birine uygulayabilirsiniz.

Sonuç

Artık tüm dokulu arka planları gözden geçirdiğimize göre, sonuca son bir göz atalım.

Eylemde Dokulu Arka Plan #1

Dokulu Arka Plan #2 Eylemde

Dokulu Arka Plan #3 Hareket Halinde

Dokulu Arka Plan #4 Hareket Halinde

Dokulu Arka Plan #5 Hareket Halinde

Son düşünceler

Umarız bu blog gönderisini ve onunla birlikte gelen tüm ücretsiz kaynakları beğenmişsinizdir. Bir sonraki projeniz için dokulu arka planlar kullanmak, özellikle yaratıcı sektörde web sitenizin tasarımını yükseltmeye gerçekten yardımcı olabilir. Herhangi bir sorunuz veya öneriniz varsa; Aşağıdaki yorum bölümünde bir yorum bıraktığınızdan emin olun!