Divi tutorial: Post Title modülünü kullanma

Divi'nin İş Unvanı modülü, mevcut gönderinizin başlığını ve varsa, gönderi resmini ve meta verileri zarif bir şekilde görüntüler. Bu, Divi Builder kullanarak gönderilerinizi oluştururken daha benzersiz gönderiler oluşturmanıza olanak tanır.

Sayfanıza bir Gönderi Başlığı modülü nasıl eklenir

Sayfanıza bir başlık modülü eklemeden önce Divi Builder'a atlamanız 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. Divi Builder'ı etkinleştirmek ve tüm Divi Builder modüllerine erişmek için bu düğmeye tıklayın. 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 ön planda.

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.

Modüller listesinden makale başlığı modülünü bulun ve sayfanıza eklemek için üzerine tıklayın. Modül listesi aranabilir, yani "gönderi başlığı" kelimesini de yazabilir ve ardından iş unvanı modülünü otomatik olarak bulup eklemek için enter'a tıklayabilirsiniz! Modül eklendiğinde, modül seçenekleri listesi tarafından karşılanacaksınız. Bu seçenekler üç ana gruba ayrılmıştır: içindekiler , Gebe kalma et gelişmiş .

Örnek kullanım örneği: bir blog yazısı için bir gönderi başlığı modülünü biçimlendirme

Bu örnekte, bir blog yazısı için bir yayın başlığını özelleştirmenin ne kadar kolay olduğunu göstereceğim.

Yapmanız gereken ilk şey, WordPress panosunun "Makaleyi Düzenle" sayfasına gitmektir. Sağ üstteki Divi Gönderi Ayarları alanında, düzeni Tam genişlik olarak ayarlayın ve makale başlığını gizleyin.

Visual Builder'ı kullanarak, tam genişlikte bir satırla (1 sütun) Normal Bölüm ekleyin. Ardından Yazı Başlığı modülünü satıra ekleyin.

Mesaj başlığı ayarlarını aşağıdaki gibi güncelleyin:

İçerik seçenekleri

Mesajı Görüntüle Kategoriler: HAYIR Yorumları Göster No: HAYIR Seçme Görüntü: YES Seçme Görüntü Konum: Başlık / Meta Arkaplan Resmi

Tasarım seçenekleri

Metin Yönü: orta Metin Rengi: Arka Plandaki Açık Renk Metin: YES Metin Arka Plan Rengi: rgba (0,0,0,0.35) Başlık Yazı Tipi: Roboto (kalın) Başlık Yazı Tipi Boyut: 50px Başlık Mektup aralığı: 2px başlık Satır Yüksekliği: 1em Meta Yazı Tipi: Raleway Light Meta Yazı Tipi Boyutu: 24px Meta Yazı Tipi Renk: # e0ba67

Ayarları kaydet

Bu kadar. Artık bir daha asla sıkıcı bir iş unvanıyla yetinmek zorunda değilsiniz!

Yayın başlığı için 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 bulunur.

Başlığı göster

Burada makalenin başlığını görüntülemeyi veya görüntülememeyi seçebilirsiniz.

Meta göster

Burada Yazı Metasının görüntülenip görüntülenmeyeceğini seçebilirsiniz.

Yazarı göster

Burada yazarın adının Post Meta'da gösterilip gösterilmeyeceğini seçebilirsiniz.

Tarihi göster

Burada tarihin gösterilip gösterilmeyeceğini seçebilirsiniz.

Tarih formatı

Burada, Post Meta'da tarih formatını ayarlayabilirsiniz. Varsayılan 'M j, Y'dir

Makale kategorilerini göster

Burada kategorileri Post Meta'da görüntüleyip görüntülememeyi seçebilirsiniz. Not: Bu seçenek, özel gönderi türleriyle çalışmaz.

Yorumları görüntüle

Burada, Post Meta'daki yorum sayısının görüntülenip görüntülenmeyeceğini seçebilirsiniz.

Öne Çıkan Resmi Göster

Burada seçili görüntünün gösterilip gösterilmeyeceğini seçebilirsiniz.

Öne Çıkan Görüntü Yerleşimi

Burada seçilen görüntünün nereye yerleştirileceğini seçebilirsiniz.

Arka plan rengi

Modülünüz için özel bir arka plan rengi tanımlayın veya varsayılan rengi kullanmak için boş bırakın.

Yönetici Etiketi

Bu, kolay tanımlama için yapıcıdaki modül etiketini değiştirecektir. WireFrame görünümünü Visual Builder'da kullandığınızda, bu etiketler Divi Builder arayüzünün modül bloğunda görünür.

Başlık tasarımı seçenekleri ekle

Tasarım sekmesinde yazı tipleri, renkler, boyutlandırma ve aralık gibi tüm modül stil seçeneklerini bulacaksınız. Bu, modülünüzün görünümünü değiştirmek için kullanacağınız sekmedir. Her Divi modülünde, herhangi bir şeyi değiştirmek için kullanabileceğiniz uzun bir tasarım ayarları listesi vardır.

Paralaks efektini kullanın

Seçilen görüntünün konumu "başlık / Meta Arka Plan Görüntüsü" olarak ayarlanmışsa, seçili görüntü için paralaks efektini kullanıp kullanmamayı seçebilirsiniz.

Paralaks yöntemi

Burada seçilen görüntü için hangi paralaks yönteminin kullanılacağını seçebilirsiniz - CSS veya True Parallax.

Metin oryantasyonu

Burada Başlık / Meta metninin yönünü seçebilirsiniz.

Metin rengi

Burada Başlık / Meta metni için rengi seçebilirsiniz.

Metnin arka plan rengini kullan

Burada başlık / meta-tex için arka plan rengini kullanıp kullanmamayı seçebilirsiniz.

Metin arka plan rengi

Arka plan rengi etkinse, burada istenen arka plan rengini seçin.

Başlık yazı tipi

Açılır menüden istediğiniz yazı tipini seçerek başlık metninizin yazı tipini değiştirebilirsiniz. Divi, Google Yazı Tipleri 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. Kalın, italik, büyük harf ve altı çizili seçenekleri kullanarak metninizin stilini de özelleştirebilirsiniz.

Başlık 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 kaydırıcının sağındaki giriş alanına doğrudan istenen metin boyutunun değerini girebilirsiniz. Giriş alanları farklı ölçü birimlerini destekler; bu, birim türünü değiştirmek için beden değerinize bağlı olarak "px" veya "em" girebileceğiniz anlamına gelir.

Başlık metni rengi

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

Başlık harflerinin aralığı

Harf aralığı, her harf arasındaki boşluğu etkiler. Başlık metninizdeki her harf 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 beden değerinize bağlı olarak "px" veya "em" girebileceğiniz anlamına gelir.

Başlık satırının 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 giriş alanına istediğiniz boşluk boyutunu girin imlecin sağında bulunur. Giriş alanları farklı ölçü birimlerini destekler; bu, birim türünü değiştirmek için beden değerinize 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 Yazı Tipleri 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 harf 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 kaydırıcının sağındaki giriş alanına doğrudan istenen metin boyutunun değerini girebilirsiniz. Giriş alanları farklı ölçü birimlerini destekler; bu, birim türünü değiştirmek için beden değerinize bağlı olarak "px" veya "em" girebileceğiniz anlamına gelir.

Metas verilerinin metin rengi

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

Metas veri harflerinin aralığı

Harf aralığı, her harf arasındaki boşluğu etkiler. Metninizdeki her harf 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 beden değerinize bağlı olarak "px" veya "em" girebileceğiniz anlamına gelir.

Metas çizgisinin 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, aralığı ayarlamak için aralık kaydırıcısını kullanın veya giriş alanına istediğiniz boşluk boyutunu girin imlecin sağında bulunur. Giriş alanları farklı ölçü birimlerini destekler; bu, birim türünü değiştirmek için beden değerinize 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. Özel ölçü birimleri desteklenir; bu, varsayılan birimi "px" den em, vh, vw vb. Gibi başka bir şeye değiştirebileceğiniz anlamına gelir.

Sınır tarzı

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

Özel marj

Kenar boşluğu, modülünüzün dışına, modül ile üstündeki, altındaki veya solundaki ve sağındaki sonraki öğe arasına eklenen boşluktur. Modülün dört kenarından herhangi birine özel kenar boşluğu değerleri ekleyebilirsiniz. Özel marjı kaldırmak için, giriş alanından katma değeri kaldırın. Varsayılan olarak, bu değerler piksel cinsinden ölçülür, ancak giriş alanlarına özel ölçü birimleri girebilirsiniz.

Özel dolgu

Dolgu, modülünüzün içine, modülün kenarı ile iç öğeleri arasına eklenen boşluktur. Modülün dört kenarından herhangi birine özel dolgu değerleri ekleyebilirsiniz. Özel marjı kaldırmak için, giriş alanından katma değeri kaldırın. Varsayılan olarak, bu değerler piksel cinsinden ölçülür, ancak giriş alanlarına özel ölçü birimleri girebilirsiniz.

Gelişmiş başlık seçeneklerini göster

Gelişmiş sekmesinde, özel CSS ve HTML özellikleri 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 fazla sınıf ekleyebilirsiniz. Bu sınıflar, Divi alt temanızda veya sayfanıza veya web sitenize eklediğiniz özel CSS stil sayfasında kullanılabilir. Site Web Divi tema seçeneklerini veya Divi Builder sayfa ayarlarını kullanarak.

Özel CSS

Özel CSS, modüle ve modülün herhangi bir dahili bileşenine de uygulanabilir. Özel CSS bölümünde, her öğeye doğrudan özel CSS stil sayfaları ekleyebileceğiniz bir metin alanı bulacaksınız. Bu ayarlardaki CSS girişleri zaten stil etiketlerine sarılmıştır. Bu yüzden CSS kurallarını noktalı virgülle ayırarak girin.

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ı modlar kullanmak istiyorsanız veya sayfadan belirli öğeleri kaldırarak mobil tasarımı basitleştirmek istiyorsanız kullanışlıdır.

[vc_row center_row=”yes”][vc_column width=”1/2″][vcex_button target=”blank” layout=”genişletilmiş” align=”center” font_family=”Raleway” font_weight=”700″ style=”flat” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]DIVI TEMASINI İNDİRİN [/vcex_button][/vc_column][vc_column width=” 1 /2"][vcex_button url=”https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials” target=”blank” layout=”genişletilmiş” align=”center” font_family = ”Raleway” font_weight=”700″ style=”flat” custom_background=”#c4226e” custom_hover_background=”#8d184f” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]YÜKLE ŞABLONLARI DIVI[/vcex_button][/vc_column][/vc_row]

Divi Eğitimi: İş Başlığı modülünün kullanımı