Divi ile bloglar bile bir modüldür ve “blogunuz” web sitenizin herhangi bir yerine yerleştirilebilir. Site Web ve farklı formatlarda. Klasik blog tasarımları oluşturmak için blog ve kenar çubuğu modüllerini birleştirebilirsiniz. Blog ve kenar çubuğu modülü kullanılarak 1 sütun, 2 sütun veya 3 sütun oluşturulabilir.

Sayfanıza blog modülü nasıl eklenir

Sayfanıza bir blog modülü ekleyebilmeniz için öncelikle Divi Builder'a erişmeniz gerekir. Bir kere Divi teması senin üzerine kurulu Site Web, bir düğme göreceksiniz Divi Builder'ı Kullan yeni bir sayfa oluşturduğunuzda yayın düzenleyicisinin üzerinde. Bu düğmeye tıklayarak, tüm Divi Builder modüllerine erişmenizi sağlayacak Divi Builder'ı etkinleştirebilirsiniz. Ardından düğmeye tıklayın Visual Builder'ı kullan Jeneratörü görsel modda başlatmak için. Düğmeye de tıklayabilirsiniz Visual Builder'ı kullan göz attığınızda Site Web WordPress kontrol panelinize giriş yaptıysanız yukarı akış.

Visual Builder'a girdikten sonra, sayfanıza yeni bir modül eklemek için gri artı düğmesini tıklayabilirsiniz. Yeni modüller yalnızca satırların içine eklenebilir. Yeni bir sayfaya başlıyorsanız, önce sayfanıza bir satır eklemeyi unutmayın. Öğelerini kullanma konusunda harika öğreticilerimiz var hatları ve bölümler Divi tarafından.

Modül listesinde blog modülünü bulun ve sayfanıza eklemek için üzerine tıklayın. Modül listesi aranabilir, yani "blog" kelimesini de yazabilir ve ardından blog modülünü otomatik olarak bulup eklemek için enter'a tıklayabilirsiniz! Modül eklendiğinde, modül seçenekleri listesi ile karşılaşacaksınız. Bu seçenekler üç ana gruba ayrılmıştır: içindekiler , Gebe kalma et gelişmiş .

Sağ kenar çubuğuna sahip özel bir bölümde ızgara düzenine sahip blog modülünün durumunu kullanın

Bu örnek için, bir blog sayfasına bir blog modülü ekleyeceğim. Bu blog sayfası, aşağıda bir arama modülüyle birlikte tam bir başlığa sahiptir. Arama modülünün altına, sol tarafta blog modülü ve sağda bir kenar çubuğu bölümü ile özel bir bölüm ekleyeceğim. Sağdaki kenar çubuğu, yeni bir gönderi widget'ı, bir e-posta tercih modülü ve bir kişi modülü içerir.

Örnek sayfa böyle görünüyor.

Blog modülünün özel bölümün sol tarafında bir ızgara düzeninde olduğuna dikkat edin.

Başlayalım.

Aşağıdaki düzende özel bir bölüm eklemek için görsel oluşturucuyu kullanın:

Sol taraf için bir sütun veya iki sütun eklemeniz istenecektir. 1. satır sütununu seçin.

Ardından blog modülünü satıra ekleyin.

Blog ayarlarını şu şekilde güncelleyin:

İçerik seçenekleri

Mesaj Sayısı: 6
Daha fazla bilgi Düğme: AÇIK
Sayfalandırmayı göster: Hayır
Izgara arka plan rengi: #ffffff

Tasarım seçenekleri

Düzen: Izgara
Dropshadow Kullanımı: AÇIK
Yerleşimi Renk Simgesi: #ffffff
Hover Yerleşimi Renk: rgba (224,153,0,0.51) Başlık
Polis:
Yazı Tipi Boyutu Başlığı: 21px
Üstbilgi Metin rengi: # 333333
Harf aralığı: 1px
Başlık Satır Yüksekliği: 1.2 em
Sınır: evet
Kenarlığın rengi: # f0f0f0
Kenarlığın genişliği: 1px
Sınır stili: katı

Seçenekler AVANCEES

Özel CSS (Daha Fazla Oku düğmesi):

renk: # e09900;
görüntüleme bloğu;
text-align: center;
kenar boşluğu: 10px;
kenarlık: 1px katı #ccc;
dolgu malzemesi: 5px;
Metin Dönüşümü: Büyük harfle yaz;
harf aralığı: 1px;

Devamını Oku düğmesinin gelişmiş özel CSS düğmesi, tasarıma uyan özel bir görünüm oluşturur.

Uzman bölüm düzeninin sağ kenar çubuğu bölümünde, son gönderiler widget'ını ekleyen bir kenar çubuğu modülü eklemeniz gerekecektir. Aşağıda bir E-posta Optin modülü eklemeniz gerekecek. Ve sonra E-posta Optin altında, yazar bilgilerini içeren Kişi modülünü eklemeniz gerekir.

İşte bu kadar!

Blog içerik seçenekleri

İçerik sekmesinde, modülün metin, resimler ve simgeler gibi tüm içerik öğelerini bulacaksınız. Tüm kontroller ce qui modülünüzde beliren her zaman bu sekmede olacaktır.

Öğe numarası (Öğe sayısı)

Görüntülemek istediğiniz mesaj sayısını ayarlayın. Bu modülde görünen her şey için mesajlara ihtiyacınız olacak.

Gönderi beslemesine dahil etmek istediğiniz kategorileri seçin. Oluşturduğunuz tüm mesaj kategorileri, seçmeniz / seçimi kaldırmanız için burada görünecektir.

Kategoriler dahil

Özet akışına eklemek istediğiniz kategorileri seçin.

Meta-tarih formatı

Blog yazılarınızda görüntülemek istediğiniz tarih formatını buradan ayarlayın. Varsayılan düzen M j, Y biçimidir (6 Ocak 2014) Bkz. WordPress kodeksi daha fazla seçenek için tarih formatlarında.

içindekiler

Tam içeriğin gösterilmesi, dizin sayfasındaki gönderilerinizi kesmez. Snippet'i Göster, yalnızca snippet metninizi görüntüler.

Ofset numarası

Dengelemek istediğiniz mesaj sayısını seçin. Örneğin 3 gönderi ile telafi ederseniz, blog yayınınızdaki ilk üç gönderi gösterilmez.

Öne Çıkan Resmi Göster

Bu seçenek, blog modülünüzde küçük resimlerin görünmesini isteyip istemediğinizi seçmenizi sağlar.

Daha fazla oku düğmesi

Burada, ön bilgiden sonra "daha fazla oku" bağlantısının gösterilip gösterilmeyeceğini ayarlayabilirsiniz.

Yazarı göster

Her blog gönderisinin yazarını, gönderi başlığının altındaki gönderi meta kutusunda görüntülemek isteyip istemediğinizi seçin.

Tarihi göster

Her bir makalenin oluşturulduğu tarihi, mesaj başlığının altındaki Öğe Meta kutusunda görüntülemek isteyip istemediğinizi seçin.

Kategorileri göster

Yayın kategorilerinin yayın başlığının altındaki yazı meta alanında gösterilip gösterilmeyeceğini seçin.

Yorum sayısını göster

Yazı başlığının altındaki yazı meta kutusundaki yorum sayısını görüntülemek isteyip istemediğinizi seçin.

Sayfalandırmayı görüntüle

Bu özet akışı için sayfalandırmayı görüntülemek isteyip istemediğinizi seçin. Numaralandırılmış sayfalamayı etkinleştirmek için, eklentiyi kurmanız gerekecek WP Sayfa Navi .

Yönetim etiketi

Bu, kolay tanımlama için jeneratördeki modül etiketini değiştirecektir. WireFrame görünümünü Visual Builder'da kullanırken, bu etiketler Divi Builder arayüzünün modül bloğunda görünecektir.

Blog tasarım seçenekleri

Tasarım sekmesinde yazı tipleri, renkler, boyut ve boşluk gibi tüm modül stil seçeneklerini bulacaksınız. Bu sekme, modülünüzün görünümünü değiştirmenize olanak tanır. Her Divi modülünde, hemen hemen her şeyi değiştirmek için kullanabileceğiniz uzun bir tasarım ayarları listesi vardır.

hüküm

Blog yayınlarınızı bir ızgarada veya tam genişlikte bir düzende görüntülemeyi seçebilirsiniz.

Üst üste görüntü

Bu seçenek etkinleştirilirse, ziyaretçi bir mesajın seçili görüntüsünün üzerine geldiğinde bir renk ve bir kaplama simgesi görüntülenir.

Yer paylaşımlı simge rengi

Burada, kaplama simgesi için özel bir renk ayarlayabilirsiniz.

Kapak rengi geziniyor

Burada bindirme için özel bir renk tanımlayabilirsiniz.

Vurgulu Simge Seçici

Burada bindirme için özel bir simge tanımlayabilirsiniz.

Metin rengi

Si blogunuzun Açık renkli bir arka plana yerleştirildiğinde metin rengi “Koyu” olarak ayarlanmalıdır. Vize evet blogunuzun koyu bir arka plan üzerine yerleştirildiğinde metin rengi “Açık” olarak ayarlanmalıdır.

Üstbilgi yazı tipi

Açılır menüden istediğiniz yazı tipini seçerek başlığınızın yazı tipini değiştirebilirsiniz. Divi, Google Fonts tarafından desteklenen düzinelerce harika yazı tipiyle birlikte gelir. Varsayılan olarak Divi, sayfanızdaki tüm metinler için Open Sans yazı tipini kullanır. Ayrıca kalın, italik, büyük ve altı çizili seçenekleri kullanarak metninizin stilini özelleştirebilirsiniz.

Üstbilgi yazı tipi boyutu

Burada başlık metninizin boyutunu ayarlayabilirsiniz. Metninizin boyutunu artırmak veya azaltmak için aralık kaydırıcısını sürükleyebilir veya istediğiniz metin boyutu değerini kaydırıcının sağındaki giriş alanına doğrudan girebilirsiniz. Giriş alanları farklı ölçü birimlerini destekler; bu, birim türünü değiştirmek için boyutunuza bağlı olarak "px" veya "em" girebileceğiniz anlamına gelir.

Üstbilgi Metin Rengi

Varsayılan olarak Divi'deki tüm metin renkleri beyaz veya koyu gri görünür. Başlığınızın rengini değiştirmek istiyorsanız, bu seçeneği kullanarak renk seçiciden istediğiniz rengi seçin.

Başlık harf aralığı

Harf aralığı, her harf arasındaki boşluğu etkiler. Başlık metninizin her bir harfi arasındaki boşluğu artırmak istiyorsanız, aralığı ayarlamak için aralık kaydırıcısını kullanın veya kaydırıcının sağındaki giriş alanına istediğiniz aralığın boyutunu girin. Giriş alanları farklı ölçü birimlerini destekler; bu, birim türünü değiştirmek için boyutunuza bağlı olarak "px" veya "em" girebileceğiniz anlamına gelir.

Başlık Satır Yüksekliği

Satır yüksekliği, başlık metninizin her satırı arasındaki boşluğu etkiler. Her satır arasındaki boşluğu artırmak istiyorsanız, aralığı ayarlamak için aralık kaydırıcısını kullanın veya istediğiniz aralık boyutunu girin. imlecin sağındaki giriş alanı. Giriş alanları farklı ölçü birimlerini destekler; bu, birim türünü değiştirmek için boyutunuza bağlı olarak "px" veya "em" girebileceğiniz anlamına gelir.

Vücut yazı tipi

Açılır menüden istediğiniz yazı tipini seçerek gövde yazı tipinizi değiştirebilirsiniz. Divi, Google Fonts tarafından desteklenen düzinelerce harika yazı tipiyle birlikte gelir. Varsayılan olarak Divi, sayfanızdaki tüm metinler için Open Sans yazı tipini kullanır. Ayrıca kalın, italik, büyük ve altı çizili seçenekleri kullanarak metninizin stilini özelleştirebilirsiniz.

Vücut yazı tipi boyutu

Burada gövde metninizin boyutunu ayarlayabilirsiniz. Metninizin boyutunu artırmak veya azaltmak için aralık kaydırıcısını sürükleyebilir veya istediğiniz metin boyutu değerini kaydırıcının sağındaki giriş alanına doğrudan girebilirsiniz. Giriş alanları farklı ölçü birimlerini destekler; bu, birim türünü değiştirmek için boyutunuza bağlı olarak "px" veya "em" girebileceğiniz anlamına gelir.

Gövde metni rengi

Varsayılan olarak Divi'deki tüm metin renkleri beyaz veya koyu gri görünür. Gövde metninizin rengini değiştirmek istiyorsanız, bu seçeneği kullanarak renk seçiciden istediğiniz rengi seçin.

Vücut harflerinin aralığı

Harf aralığı, her harf arasındaki boşluğu etkiler. Gövde metninizin her bir harfi arasındaki boşluğu artırmak istiyorsanız, aralığı ayarlamak için aralık kaydırıcısını kullanın veya kaydırıcının sağındaki giriş alanına istenen boşluk boyutunu girin. Giriş alanları farklı ölçü birimlerini destekler; bu, birim türünü değiştirmek için boyutunuza bağlı olarak "px" veya "em" girebileceğiniz anlamına gelir.

Vücut hattı yüksekliği

Satır yüksekliği, gövde metninin her satırı arasındaki boşluğu etkiler. Her satır arasındaki boşluğu artırmak istiyorsanız, aralığı ayarlamak için aralık kaydırıcısını kullanın veya kaydırıcının sağındaki giriş alanına istenen boşluk boyutunu girin. Giriş alanları farklı ölçü birimlerini destekler; bu, birim türünü değiştirmek için boyutunuza bağlı olarak "px" veya "em" girebileceğiniz anlamına gelir.

Metas yazı tipi

Açılır menüden istediğiniz yazı tipini seçerek meta metninizin yazı tipini değiştirebilirsiniz. Divi, Google Fonts tarafından desteklenen düzinelerce harika yazı tipiyle birlikte gelir. Varsayılan olarak Divi, sayfanızdaki tüm metinler için Open Sans yazı tipini kullanır. Ayrıca kalın, italik, büyük ve altı çizili seçenekleri kullanarak metninizin stilini özelleştirebilirsiniz.

Metas yazı tipi boyutu

Burada meta metninizin boyutunu ayarlayabilirsiniz. Metninizin boyutunu artırmak veya azaltmak için aralık kaydırıcısını sürükleyebilir veya istediğiniz metin boyutu değerini kaydırıcının sağındaki giriş alanına doğrudan girebilirsiniz. Giriş alanları farklı ölçü birimlerini destekler; bu, birim türünü değiştirmek için boyutunuza bağlı olarak "px" veya "em" girebileceğiniz anlamına gelir.

Meta için metin rengi

Varsayılan olarak Divi'deki tüm metin renkleri beyaz veya koyu gri görünür. Metninizin rengini değiştirmek istiyorsanız, bu seçeneği kullanarak renk seçiciden tercih ettiğiniz rengi seçin.

Meta harflerin aralığı

Harf aralığı, her harf arasındaki boşluğu etkiler. Metninizin her bir harfi arasındaki boşluğu artırmak istiyorsanız, aralığı ayarlamak için aralık kaydırıcısını kullanın veya kaydırıcının sağındaki giriş alanına istenen boşluk boyutunu girin. Giriş alanları farklı ölçü birimlerini destekler; bu, birim türünü değiştirmek için boyutunuza bağlı olarak "px" veya "em" girebileceğiniz anlamına gelir.

Meta Hattı Yüksekliği

Satır yüksekliği, meta metninizin her satırı arasındaki boşluğu etkiler.Her satır arasındaki boşluğu artırmak istiyorsanız, alanı ayarlamak için aralık kaydırıcısını kullanın veya alana istediğiniz boşluk boyutunu girin imlecin sağında. Giriş alanları farklı ölçü birimlerini destekler; bu, birim türünü değiştirmek için boyutunuza bağlı olarak "px" veya "em" girebileceğiniz anlamına gelir.

Sınırı kullan

Bu seçeneğin etkinleştirilmesi, modülünüzün etrafına bir sınır koyacaktır. Bu sınır, aşağıdaki koşullu parametreler kullanılarak özelleştirilebilir.

Sınırın rengi

Bu seçenek, kenarlığınızın rengini etkiler. Kenarlığınıza uygulamak için renk seçiciden özel bir renk seçin.

Sınırın genişliği

Varsayılan olarak, kenarlıklar 1 piksel genişliğindedir. Aralık kaydırıcısını sürükleyerek veya kaydırıcının sağındaki giriş alanına özel bir değer girerek bu değeri artırabilirsiniz. Desteklenen özel ölçü birimleri, yani varsayılan birimi "px" den başka bir şeye, örneğin em, vh, vw vb.

Sınır tarzı

Kenarlıklar, düz, noktalı, noktalı, çift, oluk, sırt, iç metin ve başlangıç ​​dahil olmak üzere sekiz farklı stili destekler. Kenarlığınıza uygulamak için açılır menüden istediğiniz stili seçin.

Gelişmiş blog seçenekleri

Gelişmiş sekmesinde, özel CSS ve HTML öznitelikleri gibi daha deneyimli web tasarımcılarının yararlı bulabileceği seçenekler bulacaksınız. Burada, modülün birçok öğesinden herhangi birine özel CSS uygulayabilirsiniz. Ayrıca, alt temanızın style.css dosyasında modülü özelleştirmek için kullanılabilen modüle özel CSS sınıfları ve kimlikleri de uygulayabilirsiniz.

CSS Kimliği

Bu modül için kullanmak üzere isteğe bağlı bir CSS kimliği girin. Kimlik, özel bir CSS stili oluşturmak veya sayfanızın belirli bölümlerine bağlanmak için kullanılabilir.

CSS sınıfı

Bu modül için kullanılacak isteğe bağlı CSS sınıflarını girin. Özel CSS stili oluşturmak için bir CSS sınıfı kullanılabilir. Bir boşlukla ayırarak birden çok sınıf ekleyebilirsiniz. Bu sınıflar sizin için kullanılabilir. Divi teması Divi Tema Seçenekleri veya Divi Builder Sayfa Ayarları'nı kullanarak sayfanıza veya web sitenize eklediğiniz alt veya özel CSS'de.

Özel CSS

Özel CSS, modüle ve modülün herhangi bir dahili öğesine de uygulanabilir. Özel CSS bölümünde, her bir öğeye doğrudan CSS ekleyebileceğiniz bir metin alanı bulacaksınız. Bu ayarlardaki CSS girişleri zaten stil etiketleriyle gömülüdür. Yani CSS kurallarını noktalı virgülle ayırarak girmeniz yeterlidir.

görünürlük

Bu seçenek, modülünüzün göründüğü cihazları kontrol etmenizi sağlar. Modülünüzü tabletlerde, akıllı telefonlarda veya masaüstlerinde ayrı ayrı devre dışı bırakmayı seçebilirsiniz. Bu, farklı cihazlarda farklı modüller kullanmak istiyorsanız veya sayfadan belirli öğeleri kaldırarak mobil tasarımı basitleştirmek istiyorsanız kullanışlıdır.

Bu eğitim için bu kadar.