Divi Blog Modülü ile Blog Sayfası Nasıl Oluşturulur
Genellikle, blogumuzda ortaya çıkan her düzen paketi, kısa sürede bir blog hazırlamanıza yardımcı olan blog düzenini içerir. Ancak, blog sayfalarından birini kendiniz nasıl yapacağınızı görmek istediniz mi? Bu makalede, Divi blog modülüne sahip bir blog sayfasının nasıl oluşturulacağını görmek için blog düzenlerinden birini kullanacağız. Her ayar boyunca adım adım tartışacağız. Başlayalım! İlk blog sayfasının önizlemesi, ne oluşturduğumuzu görelim. Masaüstü önizleme
Hücresel önizleme İlk yeni sayfa için yeni bir blog sayfası oluşturun, sayfamızı oluşturacağız. WordPress kontrol panelinde sayfa> Yeni Ekle’yi seçin. Sizin için makul bir başlık sayfası verin. Düzen paketinden, ACAI blog sayfasından sayfa adını kullanıyorum. Sağ tarafta istediğiniz sayfa özniteliğini seçin. Varsayılan özelliklere izin verdim.Başlık Sayfası: ACAI Blog Sayfası Bir sonraki Divi Builder’a dönersek, Divi Builder’a geçme zamanı. Sayfanın ortasındaki Mor düğmesini tıklayın: Divi Builder’ı kullanın. Bu, bir sayfa oluşturmaya başlayabiliriz, böylece bir sayfa oluşturmaya başlayabiliriz. Kahramanların blog tarzı sayfasının başlığı ile bir kahraman ekleyin, ilk bölümle başlayacağız. Ayarları açın. Arka plana kaydırın ve rengi #F9F3FD olarak değiştirin. Blogu yönetici etiketi olarak girin. Bölümün ayarlarını kapatın.
Arka plan: #f9f3fd
Yönetici Etiketi: Blog Bir sonraki blog sayfası başlığını oluşturun, başlık için satır ekleyeceğiz. Yeşil bir simge seçin ve bir sütun satırı seçin. Ardından, metin modülünü satıra ekleyin. Sıra eklediğinizde sermaye açık değilse, Gray Plus simgesini seçin ve metin arayın. Metin Modülü Metin Başlığı Blog Açık Ayarlar Metin Modülünü Açın ve Başlık 1. Blog Başlıkımızı Ekleyin. Yazı Tipi: Başlık 1
Metin: Blogumuz
Ardından, Tasarım sekmesini açın ve hizalamayı merkeze ayarlayın. H1 başlığının başlığı için yazı tipleri için bir bebek karabatışı seçin ve kalın oluşturun. Hizalama Metni: Orta
Başlık Metni: H1
Yazı Tipi: Baby Kormoran
Ağırlık: Kalın
Renk #442854, boyut 130 piksel olarak ayarlayın (bu masaüstü için, tabletleri ve cep telefonlarını bir dakika içinde değiştireceğiz) ve hat yüksekliğini 0.8EM olarak ayarlayacağız. Renk: #442854
Masaüstü Metin Boyutu: 130px
Çizgi Yüksekliği: 0.8EM
İmleci başlık metin boyutu seçeneğine gidin ve ekran simgesini seçin. Tablet simgesini seçin ve boyutu 60 piksel olarak ayarlayın. Tablet metin boyutu: 60px
Son olarak, telefon simgesini seçin ve boyutu 40 piksel olarak ayarlayın. Telefon: 40 piksel
En son blog gönderisini oluşturun ve CTA Fazında Kahramanlarımız en son yayınları ve Optin e -postalarını içerir. İlk satırımızın altına yeni bir çizgi ekleyin ve solda 2/3 ve sağda 1/3 olan sütun tasarımını seçin. Dişleleri tıklayarak satır ayarlarını açın. Tasarım sekmesini seçin, aralığa gidin ve alt dolguya 0 piksel ekleyin. Ayarları kapatın. Aşağıda dolgu: 0px
ADD ve bir sonraki Üstün Blog Gönderi Modülü, bir blog modülü ekleyeceğiz. Bu son gönderimizi içerecek. Yeni satırımızın sol sütunundaki Gri Icon Plus Grey’i tıklayın ve bir blog modülü ekleyin. İçeriği doldurun, yayın sayısı için 1 girin. Gönderi sayısı: 1
Eleman öğeye gidin ve yazarı ve sayfayı silin. Gerisini varsayılanlarına izin vereceğiz. Yazarları Göster: Hayır
Paination’ı gösterin: Bir sonraki konum veri değil, tasarım sekmesini seçin ve düzen için FullWidth’i seçin ve özellikli görüntü kaplamasını devre dışı bırakın.
Düzen: Tam Genişlik Üstün Görüntüler: Ölüm
Başlık Metni Başlık metnine doğru kaydırın. H2’yi seçin ve bir bebek karabatağı seçin. Kalın seçin ve rengi #442854 olarak değiştirin.
Başlık Seviyesi: H2 Yazı Tipi: Baby Kormoran
Ağırlık: Kalın
Renk: #442854
Masaüstü yazı tipi boyutunu 30 piksel, tablet 20px olarak ayarlayın ve 18px’e telefonla. Çizginin yüksekliğini 1.1em olarak değiştirin.
Boyut: Masaüstü 30px, tablet 20px, mobil 18px Hat yüksekliği başlığı: 1.1em
Bir sonraki vücut metni, vücut metnine gidin. Yazı tipi için kabini seçin, rengi #442854 olarak değiştirin ve çizgi yüksekliğini 1.8EM olarak değiştirin.
Yazı Tipi: Kabin Renk: #442854
Hat yüksekliği: 1.8em
Sonraki meta metin, meta metnine kaydırın. Yazı tipini karabatak olarak değiştirin, ağırlığı normal olarak ayarlayın, TT kuvvetini silin ve rengi #442854 olarak ayarlayın. Boyut için masaüstünü 16 piksel, tablet 15 piksel olarak ayarlayın ve 14 piksel olarak telefon edin. Çizginin yüksekliğini 1.8EM olarak değiştirin.
Yazı Tipi: Baby Kormoran Ağırlık: Normal
Stil: Hiçbir şey
Renk: #442854
Boyut: Masaüstü 16px, tablet 15px, telefon 14px
Hat yüksekliği: 1.8em
Bir sonraki mesafe, alana gidin ve üst kenar boşluğunu 0VW olarak değiştirin.
Üst kenar boşluğu: 0vw Son kutu gölgesi, kutu gölgesine gidin ve devre dışı bırakın.
Gölge Kutusu: Devre Dışı Bırak Ekle ve Blog E -posta Metin Modülünün Stili Şimdi, sağ sütuna geçeceğiz ve bir e -posta CTA oluşturacağız. İlk olarak, metin modülünü sağ sütuna ekleyin. Gri Plus simgesini tıklayın ve metin arayın.
Başlık 2’yi doldurun ve Fırsatlar ve Tarifler Metni için Abone Olun. Mektup Türü: H2 Metin: Tekliflere ve Tariflere Abone Olun
Başlık Metni Başlık Metni için, Orta Hizalama’yı seçin, H2’yi seçin, Kormorant Bebek’i seçin ve kalın olarak ayarlayın.
Başlık Metni: H2 Yazı Tipi: Baby Kormoran
Ağırlık: Kalın
Rengi #442854, boyut 32 piksel olarak değiştirin ve hat yüksekliği 0.95EM olarak değiştirin.
Renk: #442854
Boyut: 32px Çizgi Yüksekliği: 0.95EM
Son mesafe, alana gidin ve alt kenar boşluğuna 10 piksel ekleyin. Metin modülü ayarlarını kapatın.
Alt kenar boşluğu: 10 piksel
Ekle ve bir sonraki Optin E -posta Blog Modülü stili, bir e -posta formu oluşturacağız. Optin e -posta modülünü sağ sütundaki metin modülünün altına ekleyin. Önce doldurun, başlığın başlığını silin ve doldurun.
Başlık: Hiçbir şey Vücut metni: Hiçbir şey E -posta hesabınıza gidin ve servis sağlayıcınızı ekleyin.
Ardından, arka plana kaydırın ve arka plan rengi seçimini iptal edin.
Arka plan rengini kullanın: hayır Alan Tasarım sekmesini açın ve arka plan renk alanlarını RGBA (255.255.255.0) ve metin rengini #442854 olarak değiştirin. Arka plan rengi: RGBA (255,255,255.0)
Alan Metni Rengi: #442854 Yazı tipi seçeneğine gidin ve yazı tipini kabine, boyutu 16px’e ve hat yüksekliğine 1.8EM olarak değiştirin.
Yazı tipi yazı tipi: kabin
Boyut: 16px Hat yüksekliği: 1.8em
Ardından, yuvarlak köşe alanlarını 32 piksel, kenar genişliği 2px’e ayarlayın ve sınır rengini #442854 olarak değiştirin.
Yuvarlak açılı alan: 32px
Sınır Genişliği: 2 piksel Sınır rengi: #442854
Düğmeyi düğmeye kaydırın ve düğme için özel stilleri kullanın. Boyutu 18PS olarak, düğmenin rengini beyaza ve düğmenin arka plan rengini #442854 olarak değiştirin.
Düğmeler için özel bir stil kullanın: evet
Boyut: 18px Renk: #ffffff
Arka Plan düğmesi: #442854
Yarıçap Sınırını 50 piksel olarak değiştirin, yazı tipinden karabataktan bebeğe ve ağırlığı kalın yapın. Radius Limit: 50px
Yazı Tipi: Baby Kormoran
Ağırlık: Kalın Son olarak, biraz marj ve dolgu düğmesi ekleyelim. Üst kenar boşluğu için 20 piksel, üst ve alt dolgu için 12 piksel ve sol ve sağ dolgu için 32 piksel girin. Optin e -posta ayarlarını kapatın.
Düğme Marjı: 20px
Üst dolgu, dip: 12 piksel
Sol dolgu, sağ: 32px Blog sayfalarını listelemek için yeni bir satır ekleyin Şimdi blog sayfaları için bir blog listesi oluşturacağız. İlk olarak, kahramanlarımızın altına yeni bir sütun satırı ekleyin.
Ayarlar Satır Blog Listesi Tasarım sekmesini açın ve üst dolguya 0px ekleyin. Satır ayarlarını kapatın.
Üst dolgu: 0px
Satırınıza bir blog modülü ekleyin, Gray Plus simgesini tıklayıp bloga tıklayarak blog modülünü yeni satırınıza ekleyin. Blog Yem Stili Blog sayfaları için besleme stili hadi. Blog Yemi İçeriği Blog modülü ayarlarını açın ve yayın sayısı için 3 girin. Post sayısı, ekranda görüntülenen yayın sayısını seçmenizi sağlar. 3 gibi daha düşük sayılar, son birkaç gönderiye odaklanmamıza ve sayfaları daha küçük hale getirmemize izin verir. Sık sık yayınlamazsanız veya sayfayı temiz tutmak istiyorsanız bu iyi bir seçimdir. Blog yemine odaklanmak istiyorsanız, 6-9 gibi daha fazla gönderi göstermek iyi bir fikirdir.
Gönderi sayısı: 3
Ofset için 1 girin. Bu, Divi’ye, bunun üzerindeki üstün blog yayın satırında görüntülenen aynı yayını göstermemizi engelleyen ikinci bir blog yayınlamaya başlamasını söyler.
Tarih: Evet Kategori: Evet
Alıntı: evet Paginasyonlar: Evet
Arka plan arka plana gidin ve ızgara karo arka plan rengini RGBA’ya ayarlayın (255,255,255.0)
Arka Plan Renk Izgarası: RGBA (255,255,255.0)
Bir sonraki düzen ve genişlik, tasarım sekmesini açın. Düzenin ızgaraya ayarlanmasına izin verin. Yukarıdaki üstün blogu yayınlamak için tam geniş düzeni seçtik. Varsayılan seçenek olan bu blog yemi için kafes düzenini kullanacağız. Görüntülerin üstün genişliğini devre dışı bırakın.
Düzen: Kutu
Üstün Görüntüler: Ölüm Başlık Metni Başlık Metni için, H2’yi seçin. Karabatak bebeği seçin, kalın olarak ayarlayın ve renk için #442854 girin.
Başlık Seviyesi: H2 Yazı Tipi: Baby Kormoran
Ağırlık: Kalın
Renk: #442854 Masaüstü metin boyutu için 20px’i seçin. Telefon simgesini seçin ve 18px olarak ayarlayın. Çizginin yüksekliğini 1.1em olarak ayarlayın.
Boyut: Masaüstü 20px, 18px telefon
Hat yüksekliği: 1.1em
Vücut metni gövde metnine girer ve kabin seçer. Rengi #442854 olarak ayarlayın.
Yazı Tipi: Kabin Renk: #442854
Çizginin yüksekliğini 1.8EM olarak ayarlayın.
Hat yüksekliği: 1.8em Meta Metin Meta metnine doğru kaydırın ve karabatak bebeği seçin. Ağırlığı normal, stil olarak ve renk #442854 olarak ayarlayın.
Yazı Tipi: Baby Kormoran
Ağırlık: Normal Stil: Hiçbir şey
Renk: #442854 Masaüstü boyutunu 16px, 15px tabletler ve 14px telefon olarak ayarlayın. Çizginin yüksekliğini 1.8EM olarak değiştirin.
Boyut: Masaüstü 16px, tablet 15px, mobil 14px
Hat yüksekliği: 1.8em
Paination Metni Şimdi, Sayfa metnine geçelim. Yazı tipleri için karabatak bebek seçin, kalın seçin ve rengi #442854 olarak değiştirin.
Yazı Tipi: Baby Kormoran Ağırlık: Kalın
Renk: #442854 Bir sonraki mesafe, aralığa gideceğiz ve 0VW marjı ekleyeceğiz. Bu, modülümüzün önceki modülle örtüşmesini önler.
Üst kenar boşluğu: 0vw Sınır kenarına kaydırın ve dört köşenin tümü için 0px girin. Bu bize kart için kare bir form verir.
Yuvarlak açı: 0px
Son kutu gölgesi, kutu gölgesine gidin ve devre dışı bırakın. Blog ayarlarını kapatın. Blog bölümü tamamlandı.
Gölge Kutusu: Hiçbir şey Yeni CTA bölümünü bir sonraki blog sayfasına ekleyin, CTA sayfasını oluşturacağız. Bu bölüm, paralaks, iletişim bilgileri ve sosyal aşağıdaki bağlantılarda tam geniş bir arka plan görüntüsü içerir.
Yeni bir parça ekleyin, sayfanın altına yeni bir normal bölüm eklemek için mavi simgeyi tıklayın. Bölüm: Düzenli
CTA parça kuvveti, dişlerin simgesine tıklayarak ayarları açar. Arka plan arka plana kaydırın ve görüntü sekmesini seçin. Bir arka plan görüntüsü ekle etiketli gri simgeyi tıklayın.
Kütüphane ortamınızın tam genişliğinde görüntüleri seçin. Paralaks efekti kullanın ve ardından Paralaks yöntemi için CSS’yi seçin. Arka plan görüntüsü Paralax efektlerini kullanın: evet
Paralaks yöntemi: CSS Yönetici etiketine gidin ve sahaya altbilgiyi girin. Bu, parçaları izlemenize yardımcı olacaktır. Yönetici etiketi: dipnotlar Ardından, Tasarım sekmesini açın. Alana kaydırın ve üst ve alt dolguya 10vw ekleyin. Bölümün ayarlarını kapatın.
Dolgu: 10VW (üst ve alt)
Yeni CTA satırını ekleyin, Green Plus simgesini tıklayın ve içeriğimiz için bir sütun satırı ekleyin.
Satır: Bir sütun Yapıştırıcı Satır ayarlarını açın ve tasarım sekmesini açın. Boyutun altında, maksimum genişliğin altındaki tablet simgesini seçin ve 320 piksel girin. Bu, telefon ayarlarına otomatik olarak yansıtılacaktır. Satır ayarlarını kapatın. Maks geniş: tablet 320px
CTA başlık metin modülümüz bir başlığa tanıtıldı. Bunu yapmak için metin modülünü satıra ekleyin. Başlık Metin Stili Başlıkınızı ekleyin ve yazı tipini başlık 3 olarak değiştirin.
Mektup Türü: H3 Metin: Sağlık buradan başlar
Başlık Metni Tasarım sekmesini açın ve başlık metnine gidin. Hizalama Merkezi’ni seçin, H3’ü seçin, karabatak seçin, kalın olarak ayarlayın ve renk için beyaz seçin. Exposs: Merkez
Başlık Metni: H3 Yazı Tipi: Baby Kormoran Ağırlık: Kalın
Renk: #ffffff
Masaüstü boyutunu 42 piksel, tablet boyutu 20 piksel olarak ve telefon boyutunu 16px olarak değiştirin. Hat yüksekliği için 1.1em’i seçin. Boyut: Masaüstü 42px, tablet 20px, telefon 16px
Hat yüksekliği: 1.1em
Son mesafe, alana gidin ve alt kenar boşluğuna 10 piksel ekleyin. Modül ayarlarını kapatın.
Alt kenar boşluğu: 10 piksel
Metin Modülü Adresi Fiziksel adresiniz için CTA başlığı altında başka bir metin modülü ekleyin.
Modül Metin Modülü Metin Adresi Adresinizi paragraf metni olarak ekleyin. Stil: Paragraf
Metin: Adresiniz
Bir sonraki paragraf metni, Tasarım sekmesindeki metni açın ve karabaşaşaylığı seçin, yarı kalın ve beyaza ayarlayın. Yazı Tipi: Baby Kormoran
Ağırlık: yarı kalınlık Renk: #ffffff Boyut için masaüstünü 28 piksel, tablet 20 piksel olarak ayarlayın ve 16 piksel olarak telefon edin. Hat yüksekliğini 1.2EM olarak değiştirin ve modül ayarlarını kapatın.
Boyut: Masaüstü 28px, tablet 20px, telefon 16px
Hat yüksekliği: 1.2em Sosyal medyayı takip etmek için modülü ekleyin Son modülümüz sosyal medyayı takip etmek için modüldür. Satırın altına ekleyin.
Modül tarzı, sosyal medyamızın bu sefer tasarım sekmesi ile başlayacağını takip ediyor. Hizalama Merkezi Modülünü seçin ve renk simgesini #442854 olarak değiştirin.
Renk simgesi: #442854
Sınıra kaydırın ve yuvarlak köşeler için 23px ekleyin. Yuvarlak açı: 23px
Ekle ve sosyal ağ stilinizi şimdi, içerik sekmesine dönün ve dahil etmek istediğiniz tüm sosyal ağları ekleyin. Gri Plus simgesini tıklayın. Düzenlemek için dişliler seçin.
Sosyal ağlarınızın her biri için ayarları açın, ağı seçin ve hesabınıza bağlantılar ekleyin. Arka plan rengini #f9f3fd olarak ayarlayın. Alt modül ayarlarını kapatın. Sosyal Ağ: Seçiminiz URL bağlantı hesabı: bağlantınız
Arka plan rengi: #f9f3fd
Blog sayfasını kaydedin ve son Visual Builder’dan çıkın, sayfayı sağ alt köşeye kaydedin ve sayfanın üst kısmındaki görsel üreticiyi seçin. Çalışmanızı görmeye hazırsınız. Aşağıdaki blog sayfaları sonuçlarımızdır. Masaüstü önizleme
Hücresel önizleme Divi ile bir blog sayfası oluşturma konusundaki görünümümüz olan zihni bitirmek. Divi Builder çekici bir düzen oluşturmayı kolaylaştırır ve her modülün kullanılmasının birkaç yolu vardır. Bu öğretici araştırıldığında, blog yemini farklı şekillerde görüntülemek için blog modülünün birkaç sürümünü aynı sayfada kullanmak mümkündür. Senden duymak istiyoruz. Divi ile kendi blog sayfanızı oluşturdunuz mu? Bize yorumlardaki deneyiminizden bahsedin.
