Sayfanıza Özet 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ğ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 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.

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

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]
içindekiler: [hizmetin kısa bir açıklamasını girin]
URL: [hizmet sayfasına bir URL ekleyin]
Simgeyi kullanın: 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

Şimdi ilk tanıtım metniniz bitti.

Şimdi az önce oluşturduğunuz Özet modülünü üç kez kopyalayın ve kopyalanan özetlerin her birini diğer üç sütuna sürükleyin. Tasarım ayarlarınız yinelenen modüllerinize entegre edildiğinden tek yapmanız gereken, içindekiler (başlık, içerik, simge, URL vb.) ve renkleri, hizmetlerinizin her birine uyarlamak için değiştirin.

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

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.

URL

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.

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.

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.

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 üstünde veya solunda görünebilir. Resmi/simgeyi metninizin soluna yerleştirerek, resim en ü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.

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

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.

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ı Alt öğenizde veya sayfanıza veya sayfanıza eklediğiniz özel CSS'de 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 öğ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.