Divi Blog Yazılarınız için 5 Canlı Arka Plan Stili İndirin
Yayınlanan: 2018-10-25Başka bir ücretsiz Divi indirmesiyle karşınızdayız! Bu sefer size, web sitenizdeki blog yazıları için kullanabileceğiniz 5 farklı canlı arka plan stilini sunuyoruz. Yayınladığınız çeşitli blog gönderilerine farklı bir görünüm ve his vermek için bu arka plan stillerini aynı web sitesinde kolayca birleştirebilirsiniz. Size tüm bu canlı arka plan stillerini ücretsiz olarak sunmanın yanı sıra, oluşturduğunuz ve web sitenizde yayınladığınız herhangi bir blog gönderisi için yeniden kullanabileceğiniz blog gönderisi şablonunu oluşturma konusunda size rehberlik edeceğiz.
Hadi hadi bakalım!
Ön izleme
5 farklı sonuca ve farklı ekran boyutlarındaki görünüme bir göz atarak başlayalım.
Canlı Arka Plan Stillerini ÜCRETSİZ İndirin
Ellerinizi canlı arka plan stillerine sokmak 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 da 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.
Ü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.
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!
Renk Paletleri
Arka plan stillerinin her biri için aşağıda bir renk paleti bulabilirsiniz. Eğitim boyunca renk numarasına atıfta bulunacağız, bu nedenle oluşturmak istediğiniz arka plan stilini ve paleti seçin ve oradan gidin.
Palet #1
- Renk #1: #886DFC
- Renk #2: #7C56BD
- Renk #3: #372C66
2 numaralı palet
- Renk #1: #42bcb2
- Renk #2: #9CFEF0
- Renk #3: #a8baf7
Palet #3
- Renk #1: #96b2ff
- Renk #2: #d999ff
- Renk #3: #357ff4
4 numaralı palet
- Renk #1: #B981FF
- Renk #2: #24EEFA
- Renk #3: #be7bf2
Palet #5
- Renk #1: #e02b20
- Renk #2: #f6ff56
- Renk #3: #db241e
Yeni Gönderi Oluştur
Ayrıntıları Ekle ve Divi Builder'ı Etkinleştir
Hadi baştan başlayalım! WordPress web sitenize yeni bir sayfa ekleyin, sayfa başlığınızı ekleyin, öne çıkan bir resim yükleyin ve Divi Builder'ı etkinleştirin.
Divi Sayfa Ayarları
Visual Builder'a geçmeden önce bulunduğunuz sayfanın sağ üst köşesindeki Divi Sayfa Ayarları kutusunda bazı değişiklikler yapın. Bu, blog yazısı düzenini oluşturmak için tamamen Divi ile çalışmanızı sağlayacaktır. Şablonu web sitenizde yeniden kullanmayı planlıyorsanız, her yeni blog yazısı oluşturduğunuzda bu ayarları değiştirmeyi hatırlamanız gerekir.
- Sayfa Düzeni: Tam Genişlik
- Yazı Başlığı: Gizle
Visual Builder'a Geçin
Artık Visual Builder'a geçebilirsiniz.
Bunu yaptığınızda, ekranınızda üç seçenek görünecektir. Sıfırdan inşa etmeye başlamak için mavi düğmeye tıklayın.
Blog Yazısı Tasarımı Oluştur
1. Bölüm Ekle
Arka plan görüntüsü
Şablonu oluşturmaya başlayalım! En üstte boş bir bölümle başlayın. Bölüm ayarlarını açın, arka plan ayarlarına gidin ve istediğiniz arka plan stilini yükleyin. İndirilen klasör > Hero'ya giderek 5 varyasyonun tümünü bulabilirsiniz.
- Arka Plan Resmi Boyutu: Kapak
- Arka Plan Resmi Konumu: Üst Merkez
aralık
Arka plan görüntüsünün tamamen görünmesini sağlamak için bölümün üst dolgusu ile oynayın.
- Üst Dolgu: 660px
2. Bölüm Ekle
aralık
Az önce eklediğiniz bölümün hemen altında, devam edin ve bir tane daha ekleyin. Ayarları açın, boşluk ayarlarına gidin ve tüm varsayılan özel dolguyu kaldırın.
- Üst Dolgu: 0px
- Alt Dolgu: 0px
Yeni Satır Ekle
Sütun Yapısı
Aşağıdaki sütun yapısını kullanarak bölüme yeni bir satır ekleyerek devam edin:
aralık
Sonraki bölümün altındaki tüm varsayılan dolguyu kaldırın.
- Alt Dolgu: 0px
Yazı Başlığı Modülü Ekle
Elementler
Modül eklemeye başlama zamanı! Bu satırda, yalnızca bir Yazı Başlığı Modülüne ihtiyacımız olacak. Bir tane ekledikten sonra, görünmesini istediğiniz öğeleri seçin.
Başlık Metni Ayarları
Ardından, başlık metni ayarlarına gidin ve bazı değişiklikler yapın.
- Başlık Yazı Tipi: Abril Fatface
- Başlık Metni Hizalama: Orta
- Başlık Metin Boyutu: 73px (Masaüstü), 50px (Tablet), 40px (Telefon)
Meta Metin Ayarları
Meta metin ayarlarının da değiştirilmesi gerekiyor.
- Meta Metin Hizalama: Merkez
- Meta Metin Rengi: Renk #1 (Palette Bul)
- Meta Metin Boyutu: 18px
- Meta Çizgi Yüksekliği: 3em
3. Bölüm Ekle
Arka plan görüntüsü
Bu sayfadaki son bölüm, blog yazısı içeriğini ve CTA'yı içerecektir. Seçtiğiniz arka plan stilini yükleyerek başlayın. Varyasyonları, indirilen klasör > Body'ye giderek bulabilirsiniz. Arka plan resmini yükledikten sonra arka plan ayarlarında bazı değişiklikler yapın.
- Arka Plan Resmi Boyutu: Gerçek Boyut
- Arka Plan Resmi Konumu: Üst Merkez
- Arka Plan Resmi Tekrarı: Boşluk
aralık
Bu bölüm ile önceki bölüm arasındaki tüm boşluklardan kurtulmak için bu bölümün tüm varsayılan üst dolgusunu kaldırın.
- Üst Dolgu: 0px
1. Satır Ekle
Sütun Yapısı
Aşağıdaki sütun yapısını kullanarak bölüme yeni bir satır ekleyerek devam edin:
Arka plan rengi
Sonraki satıra biraz şeffaf bir arka plan rengi ekleyin.
- Arka Plan Rengi: rgba(255,255,255,0.86)
aralık
Buradaki varsayılan özel dolguyu da kaldırın.
- Üst Dolgu: 0px
- Alt Dolgu: 0px
Metin Modülü Ekle
İçerik Ekle
Eklediğiniz satıra bir Metin Modülü ekleyerek devam edin. Burada, istediğiniz tüm blog yazısı içeriğini ekleyebilir ve istediğiniz sonucu elde etmek için farklı metin stillerini kullanabilirsiniz. Aşağıdaki baskı ekranında başlıklar ve paragraflar kullanıyoruz.
Metin Ayarları
Metin ayarlarına gidin ve orada bazı değişiklikler yapın.
- Metin Boyutu: 21px (Masaüstü), 18px (Tablet), 15px (Telefon)
- Metin Satır Yüksekliği: 2em
Başlık Ayarları
Başlık metni ayarlarının da değiştirilmesi gerekir.
- Başlık Yazı Tipi: Abril Fatface
- Başlık Metni Boyutu: 46px (Masaüstü), 40px (Tablet), 30px (Telefon)
- Başlık Çizgisi Yüksekliği: 1.5em
aralık
Daha sonra bazı özel dolgu değerleri ekleyin.
- Üst Dolgu: 80px
- Alt Dolgu: 80px
- Sol Dolgu: 80px (Masaüstü), 40px (Tablet), 30px (Telefon)
- Sağ Doldurma: 80px (Masaüstü), 40px (Tablet), 30px (Telefon)
Kutu Gölge
Bitirmek için Metin Modülüne ince bir kutu gölgesi ekleyin. Bu, blog yazısı şablonuna biraz derinlik katacaktır.
- Kutu Gölge Bulanıklığı Gücü: 80px
- Kutu Gölge Yayılma Gücü: -14px
2. Satır Ekle
Sütun Yapısı
Bir sütun kullanarak öncekinin hemen altına yeni bir satır ekleyerek devam edin.
aralık
Bu satırın tüm varsayılan özel dolgusunu da kaldırın.
- Üst Dolgu: 0px
- Alt Dolgu: 0px
E-posta Opsiyon Modülü Ekle
İçerik Ekle
Ardından, CTA'nızı ekleyin. Bir E-posta Optin Modülü kullanıyoruz. Ekledikten sonra içeriği değiştirin.
Alanlar
Bu modülde yalnızca e-posta adresini kullanıyoruz, bu yüzden devam edin ve alan ayarlarında ad ve soyadını devre dışı bırakın.
Degrade Arka Plan
Email Optin Module'e degrade bir arka plan ekleyerek devam edin.
- Renk 1: Renk #2 (Palette Bul)
- Renk 2: Renk #3 (Palette Bul)
- Gradyan Yönü: 144deg
Düzen
Ardından, modülün düzenini değiştirin.
- Düzen: Gövde Üstte, Form Altta
Metin Ayarları
Metin ayarlarını da değiştirin.
- Metin Yönü: Merkez
- Metin Rengi: Açık
Başlık Metni Ayarları
Ardından, başlık metni ayarlarını açın ve bazı değişiklikler yapın.
- Başlık Yazı Tipi: Abril Fatface
- Başlık Metin Boyutu: 54px (Masaüstü), 40px (Tablet), 35px (Telefon)
Düğme Ayarları
Düğme görünümünü de değiştirin.
- Düğme Kenar Genişliği: 0px
- Düğme Sınır Yarıçapı: 0px
- Yazı Tipi Stili: Altı çizili
- Alt Çizgi Stili: Çift
aralık
Son olarak, Email Optin Module'ün boşluk ayarlarında farklı özel dolgu değerleri kullanın.
- Üst Dolgu: 100 piksel
- Alt Dolgu: 100px
- Sol Dolgu: 300 piksel (Masaüstü), 50 piksel (Tablet ve Telefon)
- Sağ Doldurma: 300px (Masaüstü), 50px (Tablet ve Telefon)
Yeniden Kullanım için Divi Kitaplığındaki Düzeni Kaydet
Yapılması gereken tek şey, düzeni Divi Kitaplığı'na kaydetmek. Bu şekilde, diğer sayfalar için de yeniden kullanabilirsiniz! Yeni bir sayfa oluştururken blog gönderilerine mevcut sayfalar olarak da erişebilirsiniz.
Ön izleme
Artık tüm adımların üzerinden geçtik, şimdi oluşturduğumuz sonuca son bir göz atalım.
Son düşünceler
Bu gönderide, ücretsiz olarak indirebileceğiniz bazı çarpıcı ve canlı arka plan stillerini sizinle paylaştık. Bunun da ötesinde, blog gönderisi şablonunu sıfırdan oluşturmanız için size rehberlik ettik. Kendiniz tasarladığınız blog yazısı şablonları için bu arka plan stillerini kullanmaktan çekinmeyin. Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümüne bir yorum bıraktığınızdan emin olun!