Ana İçeriğe Geç

Divi Builder'da blog modülü nasıl kullanılır?

Divi: Kullanılacak en kolay WordPress teması

Divi: Tüm zamanların en iyi WordPress teması!

daha fazla 901.000 indirmeler, Divi, dünyanın en popüler WordPress teması. Tamamen, kullanımı kolay ve 62 ücretsiz şablonlardan daha fazlasını sunuyor. [Önerilen]

Divi ile blog oluşturma bile bir modüldür ve "blogunuz" web sitenizin herhangi bir yerine ve farklı biçimlerde yerleştirilebilir. 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.

önizleme blog divi modülü blog.png

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

Sayfanıza bir blog modülü eklemeden önce Divi Builder'a erişmeniz gerekir. Divi teması web sitenize yüklendikten sonra 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 WordPress panonuza giriş yaptıysanız, yukarı akış web sitenize göz atarken.

düğme divi oluşturucu modülü blog divi.png

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.

blog ekle divi builder.png

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.

sayfa örneği divi.jpg

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:

düzen uzmanlığı divi.png

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

seletion zone divi builder.png

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

blog.png modülünü kullan

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;

blog ayarları divi.png

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

Elementor ile web sitenizi kolayca oluşturun

Elementor, profesyonel bir görünüme sahip herhangi bir web sitesi tasarımını kolayca oluşturmanıza olanak sağlar. Kendin yapabileceğin için pahalı ödemeyi kes. [Ücretsiz]

blok tasarım makaleleri divi.jpg

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.

blog modülü divi.png

Öğ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.

divi module blog.png gösterilecek öğeler

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.

tasarım seçeneği divi oluşturucu modülü blog.png

En iyi WordPress temalarını ve eklentilerini mi arıyorsunuz?

Envato'daki en iyi eklentileri ve WordPress temalarını indirin ve web sitenizi kolayca oluşturun. 49.720.000 indirme işleminden daha fazla. [ÖZEL]

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

Blogunuz açık renkli bir arka plan üzerine yerleştirilmişse, metin rengi "Koyu" olarak ayarlanmalıdır. Visa, blogunuz koyu bir arka plan üzerine yerleştirilmişse, 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.

yapılandırma aralığı üstbilgisi divi.png

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.

bölüm meta veri diiv builder.png

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.

Çevrimiçi Mağazanızı kolayca oluşturun

WordPress'te fiziksel ve dijital ürünlerinizi satmak için ücretsiz WooCommerce, en iyi e-ticaret eklentilerini indirin. [Önerilen]

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.

blog.png modülünün gelişmiş bölümü

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 kullanmak üzere 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, Divi Alt temanızda veya Divi tema seçeneklerini veya Divi Builder sayfa ayarlarını kullanarak sayfanıza veya web sitenize eklediğiniz özel CSS'de kullanılabilir.

Ö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.

Bu makalede, 1 yorumunu içeren

  1. Bonjour
    Sayfalandırmanın yönünü nasıl tersine çevireceğinizi biliyor musunuz? En güncelden en eskiye makalelerimi sunmak istiyorum.
    Cevabınız için teşekkür ederiz.
    Manolita

YORUM BIRAKIN

E-posta hesabınız yayımlanmayacak. Doldurulması zorunlu alanlar * ile işaretlenmiştir *

Bu site, istenmeyenleri azaltmak için Akismet'i kullanıyor. Yorum verilerinizin nasıl kullanıldığı hakkında daha fazla bilgi edinin..

Başa dönüş
10 hisseleri
hisse4
cıvıltı2
Enregistrer4