Ana İçeriğe Geç

Divi Builder'daki Özet modülünün kullanımı

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]

Sayfanıza bir Özet modülü eklemeden önce Divi Builder'a erişmelisiniz. 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ğlayan Divi Builder'ı etkinleştirirsiniz. 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

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ül özgeçmiş divi builder.png

Özet modülünü modül listesinde bulun ve sayfanıza eklemek için üzerine tıklayın. Modül listesi aranabilir, yani açıklayıcı metin modülünü otomatik olarak bulup eklemek için "Özet" kelimesini yazabilir ve ardından 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ş .

ana sayfada şirket hizmetlerini listelemek için durumu kullanın

Özet modülü, belirli özellikleri sergilemek için hem görüntüleri hem de metni birleştirdiğinden, bunu ana sayfanıza iş hizmetlerinizin bir listesini eklemek için kullanabilirsiniz. Blurb modülü ayrıca resminizi / simgenizi ve başlığınızı hizmet sayfanıza bir bağlantıya dönüştürmenize olanak tanır. Bu örnek için, ana sayfaya dört özellikli hizmet eklemek için Blurb modülünü kullanacağım.

divi.png servis sayfası

Sayfanıza dört Bulanıklaştırıcı eklemek için, görsel oluşturucuyu kullanarak dört sütunlu bir standart bölüm ekleyin. Ardından satırınızın ilk sütununa bir Blurb modülü ekleyin.

Blurb ayarlarını aşağıdaki şekilde güncelleyin:

İçerik seçenekleri

Başlık: [hizmet başlığını girin] İçerik: [hizmetin kısa açıklamasını girin] URL: [hizmet sayfasına URL ekleyin] Simge kullan: EVET
Simge: [hizmetinizi gösteren bir simge seçin]

Tasarım seçenekleri

Simge Rengi: # 42bb99 (sitenin tasarımını tamamlayan rengi yapın)
Yazı Tipi Boyutu simgesini kullanın: EVET
Simge Yazı Tipi Boyutu: 68px (simge boyutunu ayarlar)
Metin Yönü: Merkez -
Başlık Yazı Tipi Boyutu: 24px
Yazı tipi boyutu: 18px
Gövde Çizgisi Yüksekliği: 1.5em

tasarım hizmetleri divi.png

Şimdi ilk tanıtım metniniz bitti.

hizmetlerin listesi divi builder.jpg

Şimdi üç kez oluşturduğunuz Özet modülünü çoğaltın ve çoğaltılan özetlerin her birini diğer üç sütuna sürükleyin. Tasarım parametreleriniz yinelenen modüllerinize entegre edildiğinden, yalnızca içeriği (başlık, içerik, simge, URL vb.) Değiştirmeniz ve renkleri her bir hizmetinize uyacak şekilde değiştirmeniz gerekir.

hizmetlerin tam listesi divi.jpg

Özet İç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.

parametreler modülü özeti wordpress.png

Başlık

Metninize, metnin üzerinde kalın bir metin stilinde görünecek bir başlık verin. Başlık alanının altında bulunan URL seçeneği, başlığınızı bir köprü yapmanıza olanak tanır.

içindekiler

Bu alan, metninizin gövde içeriğini girebileceğiniz yerdir. Blurb Metin ayrıca 550px'e kadar sütununuzun tüm genişliğini kaplayacaktır.

<span style="color:white">URL</span>

Blurb başlığınızı bir bağlantıya dönüştürmek için bu alana geçerli bir web url'si yerleştirin. Bu alanı boş bırakırsanız, başlığınız statik bir öğe olarak kalır.

Açılış URL'si

Burada bağlantınızın yeni bir pencerede açılıp açılmayacağını seçebilirsiniz.

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]

Simge kullan

Bulanıklaştırmaları kullanırken, metninizle birlikte bir simge veya görüntü kullanmayı seçebilirsiniz. "Simgeyi kullan" seçeneği için "Evet" i seçerseniz, simgenizi özelleştirmeniz için aşağıdaki seçenekler sunulur. Bir simge kullanmayı seçmezseniz, bunun yerine bir resim yüklemeniz istenir.

ikon

"Simgeyi kullan" ayarı için "Evet" i seçtiyseniz, bu seçenek görünecektir. Bu seçenek, tanıtım yazısı ile kullanabileceğiniz mevcut simgelerin bir listesini sunar. Kullanmak istediğiniz simgeye tıklamanız yeterlidir ve metninizde görünecektir.

simgeler divi builder.png kullanın

Resim

Bir simge kullanmayı seçmediyseniz, bu ayar görünecektir. Buraya geçerli bir resim URL'si yerleştirin veya WordPress medya kitaplığı aracılığıyla bir resim seçin / yükleyin. Özet modülündeki görüntüler her zaman kendi sütunlarında ortalanmış olarak görünür ve sütununuzun tüm genişliğini 550 piksele kadar kapsar. Ancak, resminiz hiçbir zaman orijinal yükleme boyutundan büyük olmayacaktır. Sunum görüntüsünün yüksekliği, orijinal görüntünüzün en boy oranıyla belirlenir. Bu nedenle, yan yana yerleştirirseniz tüm sunum görüntülerinizi aynı yüksekliğe yerleştirmeniz önerilir.

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.

Arka plan resmi

Ayarlanırsa, bu görüntü bu modül için arka plan olarak kullanılacaktır. Bir arka plan resmini kaldırmak için, URL'yi Ayarlar alanından kaldırmanız yeterlidir. Arka plan resimleri, arka plan renklerinin üstünde görünecektir; bu, bir arka plan görüntüsü uygulandığında arka plan renginizin görünmeyeceği anlamına gelir.

Yönetici 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.

Özet modül 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.

seçenek tasarım modülü divi.png özgeçmiş

Simge rengi

"Simgeyi kullan" ayarı için "Evet" i seçtiyseniz, bu seçenek görünecektir. Bu seçenek, simgenizin rengini özelleştirmenize olanak tanır. Varsayılan olarak simgeler, temanızın vurgu rengine ayarlanmıştır.

Çember simgesi

"Simgeyi kullan" ayarı için "Evet" i seçtiyseniz, bu seçenek görünecektir. Bu seçenek, simgenizi renkli bir daireye yerleştirmenize olanak tanır. Bu ayar için "evet" i seçerseniz, çevrenizin rengini ve kenarlığını özelleştirmek için ek seçenekler sunulur.

Çemberin rengi

"Çember Simgesi" ayarı için "Evet" i seçtiyseniz, bu seçenek görünecektir. Burada çevreniz için kullanmak üzere bir renk seçebilirsiniz. Bu renk, önceden seçtiğiniz simgenin renginden bağımsızdır. Simgeniz, renginde, burada seçtiğiniz renkle bir daire içinde görünecektir.

Çemberin sınırını göster

"Çember Simgesi" ayarı için "Evet" i seçtiyseniz, bu seçenek görünecektir. Bu seçenek, çevreniz için bir sınır etkinleştirmenizi sağlar. Bu seçenek seçilirse, kenarlık renginizi seçmek için ek bir seçenek görünecektir.

Daire sınır rengi

"Çevre Kenarlığını Göster" ayarı için "Evet" seçeneğini seçtiyseniz, bu seçenek görünecektir. Burada dairenin kenarlığının rengini ayarlayabilirsiniz.

Resim / simge yerleşimi

Burada resminizin / simgenizin konumunu seçebilirsiniz. Metnin üzerinde veya metnin solunda görünebilir. Görüntüyü / simgeyi metninizin soluna yerleştirdiğinizde, görüntü üste yerleştirildiğinden daha küçük olacaktır.

Simge yazı tipi boyutunu kullan

Bu seçenek etkinleştirilirse, tanıtım yazınızın üzerinde veya iki solunda görüntülenen simge için özel bir boyut girebilirsiniz.

Metin rengi

Tanıtıcınız koyu bir arka plana yerleştirilmişse, metin rengi "Koyu" olarak ayarlanmalıdır. Tersine, tanıtım yazınız açık renkli bir arka plana yerleştirilmişse, metin rengi "Açık" olarak ayarlanmalıdır.

Metin oryantasyonu

Bu açılır menü, metninizin yönünü sola yaslanmış, ortalanmış veya sağa yaslanmış olarak belirlemenizi sağlar.

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]

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

modül bölüm stilini özetliyor title.png

Ü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 büyütmek veya küçültmek 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.

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çü birimlerini destekleyin, yani varsayılan birimi "px" den em, vh, vw vb.

sbourdires modülünün yapılandırması divi builder.png

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.

Maksimum görüntü genişliği

Buraya bir maksimum genişlik değeri uygulamak, sunum görüntüsünün genişliğini sınırlayacaktır. Bu yalnızca simge modunda olmayan bulanıklıkları etkiler.

Ö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 bir marjı kaldırmak için, katma değeri giriş alanından 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 alandır. Modülün dört kenarından herhangi birine özel dolgu değerleri ekleyebilirsiniz. Özel bir marjı kaldırmak için, katma değeri giriş alanından kaldırın. Varsayılan olarak, bu değerler piksel cinsinden ölçülür, ancak giriş alanlarına özel ölçü birimleri girebilirsiniz.

Gelişmiş seçenekler Özet modülü

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.

modül özeti bölümü advance.png

Ç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]

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.

Resim / simge animasyonu

Bu, geç yükleme animasyonunun yönünü kontrol eder.

Resimden ALT metni

Bir simge kullanmayı seçmediyseniz, bu ayar görünecektir. Diğer metin, resim yüklenmiyorsa, doğru görüntülenmiyorsa veya kullanıcının resmi göremediği başka herhangi bir durumda gerekli bilgileri sağlar. Ayrıca görüntünün arama motorları tarafından okunmasına ve tanınmasına da izin verir.

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. Özet modülünü Divi'de nasıl kullanacağınızı size göstermeyi umuyoruz.

Bu makalede, 1 yorumunu içeren

  1. Bonjour
    Özet modülünü bir sayfaya yaklaşık 200 küçük resim eklemek için kullanmak istiyorum.
    Her küçük resim satılık bir ürün başlığını temsil ediyor ancak woocommerce kullanmak istemiyorum, sadece bir iletişim bağlantısı ...
    Bu sayfa yeni küçük resimlerle düzenli olarak güncellenecektir.
    Bu küçük resimler (yani 200 özet modülü), sayfanın sonuna yeni modüller eklediğimde de (başlığa göre) alfabetik sırayla listelenmelidir ...
    Bunu nasıl yapabileceğimi biliyor musun?
    merci beaucoup

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üş
12 hisseleri
hisse6
cıvıltı
Enregistrer6