Blog modülü ile bir blog sayfası oluşturmak ister misiniz? de Divi?
Genellikle yayınlanan her Divi düzen paketi Zarif Temalar oluşturmanıza yardımcı olan bir blog düzeni sunar blogunuzun yeterince hızlı. Peki hiç bu blog sayfalarından birini kendiniz nasıl oluşturacağınızı görmek istediniz mi?
Bu yazımızda Divi's Blog modülü ile nasıl blog sayfası oluşturulur onu göreceğiz. Her ayarı adım adım inceleyeceğiz.
Hadi başlayalım!
anket
Başlamadan önce, oluşturacağımız şeye genel bir bakış görelim.
Yeni bir blog sayfası oluşturun
Yeni bir sayfa oluştur
İlk olarak sayfamızı oluşturacağız. WordPress kontrol panelinde, tıklayın Sayfalar > Ayriyeten.
Sayfaya sizin için anlamlı olan bir başlık verin.
- Sayfanın başlığı: Divi'de Blog
Divi Builder'a geç
Sayfanın ortasındaki mor düğmeye tıklayın: Divi Builder'ı Kullan .
Blog sayfası başlığı için bir bölüm ekleyin
Bölümü özelleştir
İlk bölümle başlayacağız. Onları aç bölüm parametreleri .
Kaydırın Arka plân ve rengi #f9f3fd olarak değiştirin. Yönetici etiketi olarak Blog'u girin. Bölüm ayarlarını kapatın.
- Arkaplan: #f9f3fd
- Yönetici Etiketi: Blog
Blog sayfası başlığı oluştur
Sonra bir ekleyeceğiz hat başlık için. Yeşil simgeyi seçin ve tek sütun satırını seçin.
Sonra bir ekleyin metin modülü çizgide.
Blog Başlığı Metni modülünü özelleştirin
Aç onları Metin modülü ayarları ve H1'i seçin. Blogumuz başlığını ekleyin.
- Yazı Tipi: Başlık 1
- Metin: Blogumuz
sonra gitStil sekmesi ve hizalamayı Ortalanmış olarak ayarlayın. H1 başlık metni için yazı tipi olarak Karabatak Bebek'i seçin ve kalın yapın.
- Metin Hizalama: Ortalanmış
- Başlık metni: H1
- Başlık Yazı Tipi: Karabatak Bebek
- Yumuşak Işık Başlık: Kalın Metin
Rengi #442854, Boyutu 130 piksel ve Çizgi Yüksekliğini 0,8em olarak ayarlayın.
- Renk: #442854
- Masaüstü metin boyutu: 130 piksel
- Çizgi yüksekliği: 0,8em
En Son Makaleyi ve Harekete Geçirici Mesaj Bölümünü Oluşturun
Bölümümüz en son makaleden ve bir katılım e-postasından oluşur.
Yeni bir satır ekle ilk satırımızın altında ve 2/3 sol ve 1/3 sağ sütun tasarımını seçin.
Aç onları hat parametreleri dişli simgesine tıklayarak.
seçinStil sekmesi, kaydır aralık ve Alt İç Kenar Boşluğuna 0px ekleyin. Ayarları kapatın.
- Alt İç Kenar Boşluğu: 0px
Öne çıkan blog gönderisi modülünü ekleyin ve özelleştirin
Sonra bir ekleyeceğiz blog modülü . Bu son makalemizi içerecek. Yeni satırımızın sol sütunundaki gri artı simgesine tıklayın ve Blog modülünü ekleyin.
içindekiler
Sous içindekiler , gönderi sayısı için 1 girin.
- Görev sayısı: 1
Elemanları
Kaydırın Elemanları ve Yazar ve Sayfalandırmanın işaretini kaldırın. Gerisini varsayılan değerlerinde bırakacağız.
- Yazarı göster: hayır
- Sayfalandırmayı göster: Hayır
hüküm
Ardından Stil sekmesi ve düzen için Tam Ekran'ı seçin ve öne çıkan görüntü bindirmesini kapatın.
- Model: Tam Ekran
- Seçili Görüntü Yerleşimi: Devre Dışı
Başlık metni
Kaydırın Başlık metni . H2'yi seçin ve Cormoran Infant'ı seçin. Kalın'ı seçin ve rengi #442854 olarak değiştirin.
- Üçüncü Başlık Ekle: H2
- Yazı Tipi Başlığı: Karabatak Bebek
- Yumuşak Işık Başlık: Kalın Metin
- Başlık metni rengi: #442854
Yazı tipi boyutunu 30 piksele ayarlayın. Satır yüksekliğini 1.1em olarak değiştirin.
- Boyut: Masaüstü için 30 piksel, tablet için 20 piksel, telefon için 18 piksel
- Başlık satırı yüksekliği: 1,1 em
Gövde metni
Ardından aşağı kaydırın gövde metni . Yazı tipi için Kabin'i seçin, rengi #442854 olarak değiştirin ve satır yüksekliğini 1,8em olarak değiştirin.
- Polis Kolordusu: Kabin
- Gövde metni rengi: #442854
- Gövde çizgisi yüksekliği: 1,8 em
Metin meta verileri
Ardından aşağı kaydırın Metin Meta Verileri . Parametreleri aşağıdaki gibi ayarlayın:
- Meta Veri Yazı Tipi: Karabatak Bebek
- Meta Veri Loş Işık: Normal
- Meta Veri Kopyalama Stili: Yok
- Meta veri metin rengi: #442854
- Meta veri metin boyutu: Masaüstü 16 piksel, Tablet 15 piksel, Telefon 14 piksel
- Meta veri satır yüksekliği: 1,8 em
aralık
Ardından aşağı kaydırın aralık ve üst kenar boşluğunu 0vw olarak değiştirin.
- Üst Marj: 0vw
Gölge kutusu
Son olarak, aşağı kaydırın Gölge kutusu ve devre dışı bırakın.
- Gölge Kutusu: Devre Dışı Bırak
Blog E-posta Metni Modülünü Ekleyin ve Özelleştirin
Şimdi sağ sütuna geçeceğiz ve Eylem Çağrısını e-posta yoluyla oluşturun . İlk olarak, sağ sütuna bir Metin modülü ekleyin. Gri artı simgesine tıklayın ve Metin'i arayın.
içindekiler
Başlık 2'yi seçin ve Tekliflerimize abone olun metnini girin.
- Yazı Tipi: Başlık 2
- Metin: Tekliflerimize abone olun
Başlık metni
için metinler başlığın, Ortaya Hizalama'yı seçin, H2'yi seçin, Karabatak Bebek'i seçin ve Kalın olarak ayarlayın.
- Metin Hizalama: Ortalanmış
- Başlık metni: H2
- Başlık Yazı Tipi: Karabatak Bebek
- Yumuşak Işık Başlığı: Kalın
Rengi #442854, boyutu 32px ve satır yüksekliğini 0,95em olarak değiştirin.
- Başlık metni rengi: #442854
- Başlık Metin Boyutu: 32 piksel
- Başlık satırı yüksekliği: 0,95 em
aralık
Son olarak, aşağı kaydırın aralık ve alt kenar boşluğuna 10 piksel ekleyin. Metin modülü ayarlarını kapatın.
- Alt Kenar Boşluğu: 10px
Blog E-posta Opsiyonu modülünü ekleyin ve özelleştirin
Sonra gidiyoruz yarat formulaire e-posta . Sağ sütundaki Metin modülünün altına bir Email Optin modülü ekleyin.
içindekiler
İlk olarak, başlığı ve gövde metnini kaldırın.
- Başlık: Yok
- Gövde metni: yok
Kaydırın E-posta hesabı ve servis sağlayıcınızı ekleyin.
Ardından aşağı kaydırın Arka plân ve arka plan renginin seçimini kaldırın.
- Arka plan rengini kullan: hayır
alanlar
içine git Stil sekmesi ve Alanların Arka Plan Rengini rgba(255,255,255,0) ve Metin Rengini #442854 olarak değiştirin.
- Arka Plan Renk Alanları: rgba(255,255,255,0)
- Metin Rengi Alanları: #442854
Aşağı kaydır yazı tipi seçenekleri ve yazı tipini kabin, boyutu 16 piksel ve satır yüksekliğini 1,8em olarak değiştirin.
- Yazı Tipi Alanları: Kabin
- Metin Boyutu alanları: 16 piksel
- Alan satır yüksekliği: 1,8 em
Ardından, alanların yuvarlatılmış köşesini 32 piksele, kenarlık genişliğini 2 piksele ayarlayın ve kenarlık rengini #442854 olarak değiştirin.
- Yuvarlak Dikdörtgen kontrolleri: 32px
- Kenarlık genişliği alanları: 2px
- Kenarlık Rengi alanları: #442854
Bouton
Düğmeye ilerleyin ve seçin Düğme için özel stiller kullanın . Boyutu 18ps, düğme rengini beyaz ve düğme arka plan rengini #442854 olarak değiştirin.
- Düğme için özel stiller kullanın: Evet
- Düğme Metin Boyutu: 18 piksel
- Düğme Metin Rengi: #ffffff
- Arka plan düğmesi: #442854
Kenarlık yarıçapını 50 piksel, yazı tipini Karabatak Bebek olarak değiştirin ve ağırlığı kalın yapın.
- Sınır Yarıçapı Düğmesi: 50px
- Yazı Tipi Düğmesi: Karabatak Bebek
- Yumuşak Işık düğmesi: Kalın metin
Son olarak, biraz Marj ekleyelim. Üst kenar boşluğu için 20px, Üst ve Alt dolgu için 12px ve Sol ve Sağ dolgu için 32px girin. E-posta Seçeneği ayarlarını kapatın.
- Üst Kenar Boşluğu düğmesi: 20 piksel
- Üst ve Alt Dolgu Düğmesi: 12 piksel
- Düğme Sol ve Sağ Dolgu: 32px
Blog gönderi listesi için yeni satır ekle
şimdi yapacağız öğe listesi oluştur sayfanın. İlk olarak, önceki bölümümüzün altına yeni bir tek sütunlu satır ekleyin.
Satır Parametreleri
git Stil sekmesi ve Vertex İç Marjına 0px ekleyin. Hat Ayarlarını Kapatın.
- İç Kenar Boşluğu Tepe Noktası: 0px
Hattınıza bir Blog modülü ekleyin
Ekle blog modülü gri artı simgesine ve Blog'a tıklayarak yeni satırınıza.
Blog gönderisi akışını şekillendirme
Blog Sayfası beslemesini değiştirelim.
Blog besleme içeriği
Aç onları Blog modülü ayarları ve gönderi sayısı için 3 girin. Bu, ekranda görüntülenen gönderi sayısını seçmenize olanak tanır.
3 gibi daha düşük bir sayı, son gönderilere odaklanmamıza ve sayfa boyutunu küçültmemize olanak tanır. Sık gönderi göndermiyorsanız veya sayfayı daha temiz tutmak istiyorsanız bu iyi bir seçimdir. 6-9 gibi daha fazla gönderi göstermek, blog akışına odaklanmak istiyorsanız iyi bir fikirdir.
- Mesaj sayısı: 3
Ofset için 1 girin. Bu, Divi'ye ikinci blog gönderisiyle başlamasını söyler ve bu, yukarıda gösterilen blog gönderisinde zaten görüntülenen aynı makaleyi görüntülememizi engeller.
- Post ofset numarası: 1
Elemanları
Kaydırın Elemanları . Öne çıkan görseli, tarihi, kategori snippet'ini ve sayfalandırmayı etkinleştirin. Gerisini devre dışı bırakın.
- Öne Çıkan Resmi Göster: Evet
- Veri: Evet
- Kategoriler: Evet
- Alıntı: Evet
- Sayfalandırma: Evet
Arka fon
Erişim Arka plân ve ızgara döşemesi arka plan rengini rgba(255,255,255,0) olarak ayarlayın
- Izgara ızgara döşemesi arka plan rengi: rgba (255,255,255,0)
Düzen ve bindirme
sonra git Stil sekmesi . Düzen ayarını Izgara olarak bırakın. Bunun üzerinde yer alan blog gönderisi için tam genişlikte düzeni seçtik. Bu blog beslemesi için varsayılan seçenek olan ızgara düzenini kullanacağız. Öne çıkan görüntü bindirmesini devre dışı bırakın.
- Düzen: Izgara
- Seçili Görüntü Yerleşimi: Devre Dışı
Başlık metni
için başlık metni , H2'yi seçin. Karabatak Bebek'i seçin, Kalın olarak ayarlayın ve renk için #442854 girin.
- Üçüncü Başlık Ekle: H2
- Yazı Tipi Başlığı: Karabatak Bebek
- Yumuşak Işık Başlık: Kalın Metin
- Başlık metni rengi: #442854
Metin boyutu için 20px'i seçin. Satır yüksekliğini 1,1 em olarak ayarlayın.
- Başlık Metin Boyutu: Masaüstü 20px
- Başlık satırı yüksekliği: 1,1 em
Gövde metni
Kaydırın Gövde metni ve Kabin'i seçin. Rengi #442854 olarak ayarlayın.
- Polis Kolordusu: Kabin
- Gövde metni rengi: #442854
Satır yüksekliğini 1,8 em olarak ayarlayın.
- Çizgi yüksekliği: 1,8 em
Metin meta verileri
Kaydırın Metin Meta Verileri ve Karabatak Bebek'i seçin. Ağırlığı normal, stili yok ve rengi #442854 olarak ayarlayın.
- Meta Veri Yazı Tipi: Karabatak Bebek
- Meta Veri Loş Işık: Normal
- Meta Veri Kopyalama Stili: Yok
- Meta veri metin rengi: #442854
- Meta Veri Metin Boyutu: masaüstü 16 piksel, tablet 15 piksel, telefon 14 piksel
- Meta veri satır yüksekliği: 1,8 em
Sayfalandırma metni
şimdi şuraya gidelim Sayfalara numara koyma . Yazı tipi için Karabatak Bebek'i seçin, Kalın'ı seçin ve rengi #442854 olarak değiştirin.
- Yazı Tipi Sayfalandırmasını Göster: Karabatak Bebek
- Çağrı Yumuşak Işığını Göster: Kalın
- Metin rengi Sayfalandırmayı göster: #442854
aralık
Sonra konuya geçeceğiz aralık ve en üste 0vw kenar boşluğunu ekleyin. Bu, modülümüzün önceki modülle çakışmasını önler.
- Üst Marj: 0vw
sınır
Kaydırın sınır ve dört köşenin tümü için 0px girin. Bu bize kart için kare şeklimizi verir.
- Yuvarlak Dikdörtgen Izgara Düzeni: 0px
Gölge kutusu
Son olarak, aşağı kaydırın Kutu Gölgesi ve devre dışı bırakın. Blog ayarlarını kapatın. Blog bölümü bitti.
- Gölge kutusu: yok
Blog sayfasına yeni bir "Harekete Geçirici Mesaj" bölümü ekleyin
Sonra gidiyoruz "Harekete Geçirici Mesaj" bölümünü oluşturun sayfanın Bu bölüm bir paralaks tam ekran arka plan görüntüsü içerir, UAF ile ve sosyal aşağıdaki bağlantılar.
Yeni bölüm ekle
için mavi simgeye tıklayın yeni bir normal bölüm ekle sayfanın sonunda.
- Bölüm: Normal
Harekete Geçirici Mesaj bölümünün stilini belirleyin
Aç onları bölüm parametreleri dişli simgesine tıklayarak.
Arka fon
Kaydırın Arka plân ve Görüntü sekmesini seçin. Arka Plan Resmi etiketli gri simgeye tıklayın.
Medya kitaplığınızdan tam ekran bir görüntü seçin. Paralaks efekti kullan'ı seçin, ardından paralaks yöntemi için CSS'yi seçin.
- Arka plan resmi
- Paralaks efekti kullan: Evet
- Paralaks yöntemi: CSS
Yönetici Etiketi'ne gidin ve alana "Altbilgi" girin. Bu, bölümleri takip etmenize yardımcı olacaktır.
- Yönetici Etiketi: Altbilgi
sonra git Stil sekmesi.
- İç Marj: 10vw (Üst ve Alt)
Yeni bir satır ekle
Yeşil artı simgesine tıklayın ve tek bir sütuna bir satır ekle içeriğimiz için.
boyutlandırma
Aç onları hat parametreleri ve Stil sekmesine gidin.
- Maksimum genişlik: 320 piksel
Başlık metni modülü
Harekete Geçirici Mesaj bölümümüz bir başlık ile sunulmaktadır. Bunu oluşturmak için, metin modülü ekle çizgide.
Başlık metnini özelleştirin
Başlığınızı ekleyin ve yazı tipini Başlık 3 olarak değiştirin.
- Yazı Tipi: Başlık 3
- Metin: Divi hakkında her şey
Başlık metni
git Stil sekmesi ve kaydır altyazı metni . Hizalama için merkezi seçin, H3'ü seçin, Karabatak Bebek'i seçin, Kalın olarak ayarlayın ve renk için beyazı seçin.
- Metin hizalama: Orta
- Başlık metni: H3
- Başlık Yazı Tipi: Karabatak Bebek
- Yumuşak Işık Başlığı: Kalın
- Başlık metni rengi: #ffffff
- Başlık Metni Boyutu: Masaüstü için 42 piksel, tablet için 20 piksel, telefon için 16 piksel
- Başlık satırı yüksekliği: 1,1 em
aralık
Son olarak, aşağı kaydırın aralık ve alt kenar boşluğuna 10 piksel ekleyin. Modül ayarlarını kapatın.
- Alt Kenar Boşluğu: 10px
Adres için metin modülü
Başka bir Metin modülü ekle fiziksel adresiniz için.
Fiziksel Adres Metni modülünün stilini belirleyin
Adres metni
Adresinizi paragraf metni olarak ekleyin.
- Tarz: Paragraf
- Metin: adresiniz
paragraf metni
Ardından, Metin'e gidin. Stil sekmesi ve Karabatak Bebek'i seçin, yarı kalın ve beyaza ayarlayın.
- Yazı Tipi: Karabatak Bebek
- Yumuşak ışık metni: yarı kalın
- Metin rengi Metin: #ffffff
- Metin Metin boyutu: Masaüstü için 28 piksel, tablet için 20 piksel, telefon için 16 piksel
- Metin satırı yüksekliği: 1,2 em
Modülü ekleyin bizi sosyal ağlarda takip edin
Son modülümüz modül Sosyal ağlarda bizi takip edin . Satırın en altına ekleyin.
Stilize edin Bizi sosyal medya modülünden takip edin
ile başlayacağız Stil sekmesi bu zaman. Modül Hizalama Merkezi'ni seçin ve simge rengini #442854 olarak değiştirin.
- Modül Hizalaması: Merkez
- Simge Rengi: #442854
Kaydırın Bordure ve yuvarlatılmış köşeler için 23 piksel ekleyin.
- Yuvarlatılmış dikdörtgen: 32 piksel
Sosyal ağlarınızı ekleyin ve özelleştirin
Şimdi geri dön İçerik sekmesi ve eklemek istediğiniz sosyal ağları ekleyin. Gri artı simgesine tıklayın.
Aç onları sosyal ağlarınızın her biri için ayarlar , ağı seçin ve bağlantıyı hesabınıza ekleyin. Arka plan rengini #f9f3fd olarak ayarlayın. Alt modül ayarlarını kapatın.
- Sosyal ağ: seçiminiz
- Hesap bağlantı URL'si: bağlantınız
- Arka plan rengi: #f9f3fd
Blog sayfasını kaydedin ve görsel oluşturucudan çıkın
Son olarak, sayfayı kaydet sağ alt köşede ve öğesini seçin Visual Builder'dan çıkın sayfanın üst kısmında. İşinizi görmeye hazırsınız.
Blog Sayfası Önizlemesi
İşte sonuçlarımız.
DIVI'yı Şimdi İndirin !!!
Sonuç
Yani ! Bu, Divi ile nasıl blog sayfası oluşturacağımıza bakışımızdır.
Divi Builder, ilginç düzenler oluşturmayı kolaylaştırır ve modüllerin her birini kullanmanın birden çok yolu vardır. Bu öğreticide incelendiği gibi, blog akışını farklı şekillerde görüntülemek için Blog modülünün birden çok sürümünü aynı sayfada kullanmak mümkündür.
Herhangi bir endişeniz veya öneriniz varsa, bizi yorumlar bölümü bunu tartışmak için.
Ancak, ayrıca kaynaklarımızİnternet siteleri oluşturma projelerinizi yürütmek için daha fazla elemana ihtiyacınız varsa, 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ş.
...
