Divi, anında sınırsız sayıda kullanıma hazır alan oluşturmanıza olanak tanır. Daha sonra herhangi bir sayfaya kenar çubukları eklenebilir ve böylece sayfanızın farklı bölümleri için benzersiz kenar çubukları oluşturabilirsiniz. Site Web.
Divi'den Zonde widget modülü nasıl eklenir?
Sayfanıza bir kenar çubuğu modülü ekleyebilmeniz için ö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'ı kullandıktan sonra, sayfanıza yeni bir modül eklemek için gri (+) düğmesine 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ül listesinde kenar çubuğu modülünü bulun ve sayfanıza eklemek için üzerine tıklayın. Modül listesi aranabilir, yani kenar çubuğu modülünü otomatik olarak bulup eklemek için "kenar çubuğu" kelimesini yazıp ardından "Gir" düğmesini 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: Blog sayfanıza bir kenar çubuğu ekleme
Kenar çubuğu modülü, sayfanızın herhangi bir yerine bir kenar çubuğu (ve tüm yerleşik widget'larını) eklemenizi sağlar. Aslında, kenar çubuğu modülünü kullanarak herhangi bir widget alanı ekleyebilirsiniz. Bu örnek için, WordPress'te Arama ve Son Gönderiler widget'ını görüntülemek için özel bölümü kullanarak blog sayfanıza nasıl özel bir kenar çubuğu ekleyeceğinizi göstereceğim.
Bu blog sayfası, sayfanın en üstünde blog başlığını görüntülemek için tam genişlikte bir başlığa sahiptir. Tam genişlikte başlık modülünün altında, solda bir blog modülü ve sağda sağ dikey kenar çubuğu alanı bulunan özel bir düzen bulunur.
Özel bölümün kullanılması, sayfaya istenmeyen kesmeler eklemeden dikey kenar çubuklarının yanına karmaşık sütun varyasyonları eklemenize olanak tanır. Bu, kenar çubuğu olan bir blog için mükemmeldir.
Öncelikle, WordPress panonuzun Widget'lar sayfasında widget'ların ayarlandığından emin olmanız gerekir. Bu örnek için, Kenar Çubuğu widget'ına Arama widget'ını ve Son Makaleler widget'ını ekliyorum.
Ardından blog sayfasını düzenlemek için Visual Builder'ı dağıtın. Aşağıdaki düzende sayfanıza (başlığınızın hemen altına) özel bir bölüm ekleyin:
Sayfaya özel bir bölüm ekledikten sonra, bir alanda (solda) "Modül Ekle" düğmesi olduğunu fark edeceksiniz. Bu örnek için, blog gönderilerini görüntülemek için ızgara düzenine sahip Blog modülünün eklendiği yer burasıdır.
Diğerinde (sağda) "Satır Ekle" düğmesi bulunur. "Modül ekle" alanı, dikey kenar çubuğunuzu temsil eder. Kenar çubuğu modülüne gireceğiniz yer burasıdır. Buraya tek bir satıra istediğiniz kadar modül ekleyebilirsiniz ve bunlar, yanına oluşturduğunuz sütun yapısına bitişik olarak bölümün dikey genişliğini kapsayacaktır. Aslında, bu örnekte, blog sayfasında zaten bir E-posta Optin modülü ve Uzmanlık düzeninin dikey kenar çubuğunun bu alanında bir Kişi modülü vardır.
Şimdi, kenar çubuğu modülünü dikey kenar çubuğu alanınızdaki diğer modüllerin üstüne ekleyin.
Kenar Çubuğu Modülü ayarında aşağıdakileri güncelleyin:
İçerik sekmesi
Widget alanı: Kenar Çubuğunu seç
Tasarım sekmesi
Oryantasyon: Sağ (kenar çubuğu sağda olduğu için)
Kenarlık Ayırıcısını Sil: YES
Metin rengi:
Koyu Başlık Yazı Tipi Boyutu: 26px
Harflerin aralığı
başlık: 3px Başlık satırı yüksekliği: 1.1em
Gelişmiş sekmesi
Özel CSS bölümü altında, Widget metin kutusuna aşağıdaki CSS'yi ekleyin. Bu, kenar çubuğu widget'larının tasarımının sitenin tasarımıyla eşleşmesini sağlayacaktır:
arkaplan: #fff; dolgu malzemesi: 20px; -webkit-box-shadow: 0 1px 5px rgba (0, 0, 0, 0.1) -moz-box-shadow: 0 1px 5px rgba (0, 0, 0, 0.1); kutu-gölge: 0 1px 5px rgba (0, 0, 0, 0.1);
Ayarları kaydet
Artık kenar çubuğu modülünün Kenar Çubuğu küçük aracının öğelerini (Arama ve Son Makaleler) gösterdiğini ve bunları uzmanlık bölümünüzün dikey kenar çubuğu alanında gösterdiğini görebilirsiniz.
Kenar çubuğu için içerik seçenekleri
İçerik sekmesinde, metin, resimler ve simgeler gibi modülün tüm içeriğini bulacaksınız. Modülünüzde görünenleri kontrol eden her şey her zaman bu sekmede bulunacaktır.
Widget alanı
Kenar Çubuğu modülü, Görünümler> Pencere Öğeleri sekmesinde oluşturabileceğiniz pencere öğesi oluşturma kutularını kullanır. Bu açılır menüden özel widget alanlarınızdan birini seçebilirsiniz.
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.
Kenar çubuğu tasarım seçenekleri
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.
Oryantasyon
Burada, kenar çubuğunuzun sayfanın hangi tarafında görüntüleneceğini seçebilirsiniz. Bu parametre metnin yönünü ve sınırın konumunu kontrol eder.
Kenarlık ayırıcısını silin
Burada kenar çubuğunu sayfanızın içeriğinden ayıran ince gri kenarlığı kaldırabilirsiniz.
Metin rengi
Burada metninizin açık mı yoksa koyu mu olacağını seçebilirsiniz. Koyu bir arka plan üzerinde çalışıyorsanız, metniniz açık olmalıdır. Arka planınız açıksa, metniniz koyu olmalıdır.
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.
Üstbilgi yazı tipi boyutu
Burada başlık metninizin boyutunu ayarlayabilirsiniz. Metninizin boyutunu büyütmek veya küçültmek 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 boyutu 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.
Üstbilgi Metin Rengi
Varsayılan olarak, Divi'deki tüm metin renkleri beyaz veya koyu gri olarak görünür. Başlık metninizin 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 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 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, alanı ayarlamak için kaydırıcıyı kullanın veya alana istenen boşluk boyutunu girin. kaydırıcının sağında bulunan giriş. 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.
Vücut yazı tipi
Açılır menüden istediğiniz yazı tipini seçerek gövde yazı tipinizi 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.
Vücut yazı tipi boyutu
Burada gövde metni boyutunuzu ayarlayabilirsiniz. Metninizin boyutunu büyütmek veya küçültmek için kaydırıcıyı sürükleyebilir veya doğrudan kaydırıcının sağındaki giriş alanına 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.
Gövde metni 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 istediğiniz rengi seçin.
Vücut 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.
Vücut hattı yüksekliği
Satır yüksekliği, vücudunuzdaki her metin 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.
Gelişmiş kenar çubuğu seçenekleri
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 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 stil sayfasında kullanılabilir.
Ö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]
Diğer Divi öğreticiler
- restoran kullanımı Divi tema için 5 siteleri
- Bir Divi WooCommerce ürününe metin ekleme
- Divi sayfaları arasındaki menü rengini değiştirme
- Bir blog'un ızgaralarını Divi ile kişiselleştirme
- Nasıl WordPress üzerinde rol Divi editörü kullanımı
- Tam ekran Divi sürgüsü nasıl oluşturulur
- Divi sayfaları arasındaki menünün rengi nasıl değiştirilir
- Divi hakkında muhtemelen bilmediğiniz özellikler
- WordPress üzerinde Divi Builder nasıl kullanılır
- Divi video kaydırma modülü nasıl kullanılır
- Divi Builder Flip modülü nasıl kullanılır
- Divi Builder'da referans modülü nasıl eklenir?
- Divi metin modülü nasıl kullanılır?
- Divi'de kaydırıcı nasıl oluşturulur
- Divi kullanıcı rolü nasıl düzenlenir
- Divi Sosyal Medya modülü nasıl kullanılır?
- WordPress Divi konulu mağaza modülü nasıl kullanılır?
- Divi kenar çubuğu modülü nasıl kullanılır
- Divi Fiyat Tablosu Modülünün Kullanımı
- Divi yayınlarının başlık modülünü nasıl kullanırım
- Divi video modülü nasıl eklenir
- Makale navigasyon modülü nasıl kullanılır
- Divi arama modülü nasıl kullanılır?
- Divi cüzdan modülü nasıl kullanılır?
- Divi Builder'da kişi modülünün kullanımı
- Divi filtreli cüzdan modülü nasıl kullanılır
- Tam genişlikte sürgü modülü nasıl kullanılır
- Divi Builder Görüntü Modülü nasıl kullanılır?
- Divi Builder'ın tam genişlikli gezinme modülünü nasıl kullanırım?
- Resim galerisi modülü nasıl kullanılır?
- Divi Builder Tam Genişlik Kart Modülü nasıl kullanılır?
- Divi Tam Genişlik Portföy Modülü nasıl kullanılır?
- Divi tam genişlikli başlık modülü nasıl kullanılır?
- Divi Sayaç Modülünün Kullanımı
- Divi Builder'daki makaleler sürgüsünü kullanma
- Divi Email Optin modülü nasıl kullanılır?
Merhaba
Sizden farklı olarak, blog makaleleri sayfalarımdaki kenar çubuğunu kaldırmaya çalışıyorum ve bunu yeni Divi 4 sürümünde nasıl yapacağımı bilmiyorum
Bir ipucun var mı?
sağol
Aurélie
Merhaba ve bu dersler için teşekkür ederim.
Bu örnekte tam genişlikte bir sayfayla mı yoksa orijinal kenar çubuğuna sahip bir şablonla mı başladınız?
Merhaba Cess, gerçekten hatırlamıyorum.