Ana İçeriğe Geç

Divi öğretici: Slayt modülünü nasıl kullanırı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]

Divi, kaydırıcıları tam genişlikte bölümlere yerleştirmenize izin vererek kaydırıcılarınızın tarayıcının tüm genişliğine yayılmasını sağlar. Divi kaydırıcıları (Kaydırıcılar), paralaks arka planlarının yanı sıra video arka planlarını da destekler!

divi.png üzerinde bir kaydırıcı kullanın

Divi'den tam genişlikte bir Diapo modülü nasıl eklenir

Sayfanıza tam genişlikte bir kaydırıcı modülü eklemeden önce Divi Builder'a geçmelisiniz. Divi teması web sitenize yüklendikten sonra bir düğme göreceksiniz. Divi Builder'ı Kullanyeni 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 WordPress panonuza bağlıysanız, web sitenizi ön planda tuttuğunuzda.

görsel oluşturucu divi.png kullanın

Görsel Oluşturucu'ya 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.

slayt divi eğitimi wordpress.png oluşturun

Modüller listesinde tam genişlikli kaydırıcı modülünü bulun ve sayfanıza eklemek için üzerine tıklayın. Modüllerin listesi aranabilir, yani "Slide" kelimesini yazıp ardından tam genişlikteki kaydırıcı modülünü otomatik olarak bulmak ve 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ılır: içindekiler , Gebe kalma et gelişmiş .

Kullanım Örneği Örneği: Ana Sayfanıza Tam Genişlikte Kaydırıcı Kahraman Bölümü Ekleme

Tam genişlikli bir kaydırıcı, ana sayfanızın eşiğinin üzerinde birden çok CTA'yı göstermenin harika bir yoludur. Görüntülerin ve içeriğin kombinasyonu, bölümünüze gerçekten öne çıkan profesyonel bir his verebilir.

Bu örnek için, bir ana sayfada ana bölüm olarak hizmet verecek tam genişlikte bir slayt ekleyeceğim.

tam genişlikte bir slayt oluşturma example.jpg

Visual Builder'ı kullanarak, web sayfanızın üst kısmına bir Tam Genişlik bölümü ekleyin. Ardından Fullwidth Slider modülünü yeni bölümünüze yerleştirin. Tam genişlikte slayt ayarlarının İçerik sekmesinde + Yeni bir öğe ekle İlk slaydınızı oluşturmak için

Bir slayt yaratın divi.png

İlk slaydınızın slayt ayarlarında aşağıdaki seçenekleri güncelleyin:

İçerik seçenekleri

En-baş : [slaytın başlığını girin] Düğme metni : [düğme metnini girin] içindekiler : [slaydın metin içeriğini girin] Düğme URL'si : [Slayt düğmesinin hedef URL'sini girin] Arka plan görüntüsü : [slayt için arka plan görevi görecek resmi girin]

Tasarım seçenekleri

Arka plan kaplamasını kullanın : EVET
Arka plan kaplama rengi : rgba (0,0,0,0.2) bu kaplama, metni daha okunaklı hale getirmek için arka plan resmini biraz koyulaştırır.

slayt divi blogpascher.png

Slayt ayarlarını kaydet

Şimdi yeni oluşturduğunuz slaydı çoğaltın ve yeni slaydı gerektiği gibi yeni içerikle güncelleyin. Eklemek istediğiniz tüm slaytlar için bunu tekrarlayın.

divi.png slaydını çoğaltma

Bu kadar. Bu örnek için, yalnızca iki slayt ekliyorum, ancak sonuç, kullanıcıyı daha fazla bilgi için düğmeyi tıklamaya yönlendiren birden çok harekete geçirici mesaj içeren verimli bir tam genişlikte ana kaydırıcıdır. Bu, web siteniz için ana eylem çağrınız olduğundan, Divi Leads kullanarak tam genişlikte slaytınızda bölünmüş test gerçekleştirmenizi ve hangisinin en iyi dönüştürdüğünü görmenizi öneririm.

Örnek slayt divi dem.gif

Tam İçerik Seçeneklerini Kaydırma

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

slide divi bölümü

oklar

Sol ve sağ gezinme oklarını görüntülemek isteyip istemediğinizi seçin.

Controles

İmlecin altındaki daire düğmeleri / slayt göstergelerinin görüntülenip görüntülenmeyeceğini seçin.

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.

Slayt Modülü 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.

slayt bölümü tasarımı divi.png

İç gölgeyi kaldır

Varsayılan olarak, imleçte dahili bir gölge görüntülenir. Bu gölgeyi kapatmak istiyorsanız, bu ayarı kullanarak bunu yapabilirsiniz.

paralaks etkisi

Bu seçeneğin etkinleştirilmesi, siz kaydırdıkça arka plan resimlerinize sabit bir konum verecektir. Bu ayar etkinleştirildiğinde, resimlerinizin resimlerinizi tarayıcı yüksekliğine göre ölçeklendireceğini unutmayın.

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

lentete.png slayt bölüm font tasarımı

Ü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 kaydırıcının sağındaki giriş alanına istediğiniz metin boyutu değerini doğrudan girebilirsiniz. Giriş alanları farklı ölçü birimlerini destekler; bu, birim türünü değiştirmek için boyut 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, boşluğu 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 boşluk boyutunu girin. Giriş alanları farklı ölçü birimlerini destekler; bu, birim türünü değiştirmek için boyut 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, boşluğu ayarlamak için aralık kaydırıcısını kullanın veya imlecin sağındaki giriş alanına istediğiniz boşluk boyutunu girin. Giriş alanları farklı ölçü birimlerini destekler; bu, birim türünü değiştirmek için boyut değerinize bağlı olarak "px" veya "em" girebileceğiniz anlamına gelir.

Vücut Polisi

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 metin 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 istediğiniz metin boyutu değerini doğrudan girebilirsiniz. Giriş alanları farklı ölçü birimlerini destekler; bu, birim türünü değiştirmek için boyut değerinize bağlı olarak "px" veya "em" girebileceğiniz anlamına gelir.

bölüm tasarımı slayt modülü divi.png

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, boşluğu 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 boşluk boyutunu girin. Giriş alanları farklı ölçü birimlerini destekler; bu, birim türünü değiştirmek için boyut 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, boşluğu ayarlamak için aralık kaydırıcısını kullanın veya imlecin sağındaki giriş alanına istediğiniz boşluk boyutunu girin. Giriş alanları farklı ölçü birimlerini destekler; bu, birim türünü değiştirmek için boyut değerinize bağlı olarak "px" veya "em" girebileceğiniz anlamına gelir.

Üst dolgu

Bu parametre, modülün üstü ile modüldeki metin içeriği arasındaki dahili boşluğu kontrol eder. Bu boşluğu artırmak veya azaltmak istiyorsanız, istediğiniz değeri buraya girin. Örneğin, imlecin alanını ve genel boyutunu azaltmak için 100 piksellik bir değer girebilirsiniz. Yüksekliği daha dinamik hale getirmek için, örneğin% 10 gibi bir yüzde değeri de girebilirsiniz.

Alt dolgu

Bu parametre, modülün altı ile modüldeki metin içeriği arasındaki dahili boşluğu kontrol eder. Bu boşluğu artırmak veya azaltmak istiyorsanız, istediğiniz değeri buraya girin. Örneğin, imlecin alanını ve genel boyutunu azaltmak için 100 piksellik bir değer girebilirsiniz. Yüksekliği daha dinamik hale getirmek için, örneğin% 10 gibi bir yüzde değeri de girebilirsiniz.

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]

Düğme için özel stiller kullan

Bu seçeneğin etkinleştirilmesi, modülünüzün düğmesinin görünümünü değiştirmek için kullanabileceğiniz çeşitli düğme özelleştirme ayarlarını ortaya çıkarır.

Düğme metni boyutu

Bu ayar, düğmedeki metnin boyutunu artırmak veya azaltmak için kullanılabilir. Düğme, metin boyutu büyüdükçe ve küçüldükçe uyum sağlar.

Düğme metni rengi

Varsayılan olarak düğmeler, Tema Özelleştiricide tanımlanan temanızın vurgu rengini kullanır. Bu seçenek, bu modülün düğmesine özel bir metin rengi atamanıza olanak tanır. Düğme rengini değiştirmek için renk seçiciyi kullanarak özel renginizi seçin.

divi.png düğme rengi

Düğme arka plan rengi

Varsayılan olarak, düğmelerin şeffaf bir arka plan rengi vardır. Bu, renk seçiciden istenen arka plan rengi seçilerek değiştirilebilir.

Düğme sınırının genişliği

Tüm Divi düğmelerinin varsayılan olarak 2px sınırı vardır. Bu sınır, bu ayar kullanılarak artırılabilir veya azaltılabilir. Sınırlar 0 değeri girilerek kaldırılabilir.

Düğme kenarlığı rengi

Varsayılan olarak düğme kenarlıkları, Tema Özelleştiricide tanımlandığı gibi temanızın vurgu rengini kullanır. Bu seçenek, bu modülün düğmesine özel bir kenar rengi atamanıza olanak tanır. Düğme kenarlığının rengini değiştirmek için renk seçiciyi kullanarak özel renginizi seçin.

Düğme sınır yarıçapı

Kenarlığın yarıçapı, düğmelerinizin köşelerinin yuvarlaklığını etkiler. Varsayılan olarak, Divi'deki düğmelerin köşeleri 3 piksel yuvarlayan küçük bir kenarlık yarıçapı vardır. Kare düğme oluşturmak için bu değeri 0'a düşürebilir veya yuvarlak kenarlı düğmeler oluşturmak için önemli ölçüde artırabilirsiniz.

Düğme harflerinin aralığı

Harf aralığı, her harf arasındaki boşluğu etkiler. Düğme metninizdeki her harf arasındaki boşluğu artırmak istiyorsanız, boşluğu 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 boşluk boyutunu girin. Giriş alanları farklı ölçü birimlerini destekler; bu, birim türünü değiştirmek için boyut değerinize bağlı olarak "px" veya "em" girebileceğiniz anlamına gelir.

Düğme Yazı Tipi

Açılır menüden istediğiniz yazı tipini seçerek düğme 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.

Düğme simgesi ekle

Devre dışı bırakıldığında, bu ayar düğmenizden simgeleri kaldırır. Varsayılan olarak, tüm Divi düğmeleri, fareyle üzerine gelindiğinde bir ok simgesi görüntüler.

Düğme simgesi

Simgeler etkinleştirilirse, düğmenizde hangi simgenin kullanılacağını seçmek için bu ayarı kullanabilirsiniz. Divi, aralarından seçim yapabileceğiniz farklı simgelere sahiptir.

Renk simgesi düğmesi

Bu ayarı yapmak, düğmenizde görünen simgenin rengini değiştirecektir. Varsayılan olarak, simge rengi düğme metin renginizle aynıdır, ancak bu ayar rengi bağımsız olarak ayarlamanıza izin verir.

Simge yerleştirme düğmesi

Düğmenizin simgesini düğmenin solunda veya sağında görüntülemeyi seçebilirsiniz.

Simgeyi yalnızca düğmenin üzerine geldiğinizde göster

Varsayılan olarak, düğme simgeleri yalnızca gezinirken görüntülenir. Simgenin her zaman görünmesini istiyorsanız, bu ayarı kapatın.

Düğmenin metin renginin üzerine gelin

Bir ziyaretçinin faresi düğme üzerine geldiğinde, bu renk kullanılacaktır. Renk, önceki ayarlarda tanımlanan temel renkten değişecektir.

Vurgulu düğme arka plan rengi

Bir ziyaretçinin faresi düğme üzerine geldiğinde, bu renk kullanılacaktır. Renk, önceki ayarlarda tanımlanan temel renkten değişecektir.

Renk Vurgulu Kenarlık Düğmesi

Bir ziyaretçinin faresi düğme üzerine geldiğinde, bu renk kullanılacaktır. Renk, önceki ayarlarda tanımlanan temel renkten değişecektir.

Hover Sınır Yarıçapı Düğmesi

Bir ziyaretçinin faresi düğme üzerine geldiğinde bu değer kullanılacaktır. Değer, önceki ayarlarda tanımlanan temel değerden değişecektir.

İşaretli not aralığı düğmesi

Bir ziyaretçinin faresi düğme üzerine geldiğinde bu değer kullanılacaktır. Değer, önceki ayarlarda tanımlanan temel değerden değişecektir.

Gelişmiş seçenekler tam genişlikte slayt 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.

ileri bölüm slayt modülü divi.png

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.

Otomatik animasyon

İmlecin otomatik olarak kaymasını istiyorsanız, ziyaretçinin bir sonraki tuşa basması gerekmeden, bu seçeneği etkinleştirin, ardından isterseniz dönüş hızını ayarlayın.

Otomatik animasyon hızı (ms cinsinden)

Yukarıda 'Otomatik canlandır' seçeneği etkinleştirilmişse, burada imlecin her slayt arasında ne kadar hızlı kaybolacağını belirtebilirsiniz. Sayı ne kadar yüksekse, her dönüş arasındaki duraklama o kadar uzun olur.

Vurguluyla Otomatik kaydırmaya devam et

Bunun açılması, otomatik slaytın fareyle üzerine gelmesini sağlar.

İçeriği mobilde gizle

Mobil cihazlarda ekran boyutu küçüldükçe ekran alanı daha değerli hale geliyor. Bazen imleç boyutunu küçültmek ve daha okunaklı hale getirmek için daha az önemli bazı imleç öğelerini kapatmak iyi bir fikirdir. Bu ayarın etkinleştirilmesi, mobil cihazdaki imleç metin içeriğini gizler.

Cep telefonunda CTA'yı gizle

Mobil cihazlarda ekran boyutu küçüldükçe ekran alanı daha değerli hale geliyor. Bazen imleç boyutunu küçültmek ve daha okunaklı hale getirmek için daha az önemli bazı imleç öğelerini kapatmak iyi bir fikirdir. Bu ayarın etkinleştirilmesi, mobil cihazda imleç harekete geçirme düğmelerini gizleyecektir.

Resmi / videoyu mobil cihazda görüntüleyin

Mobil cihazlarda ekran boyutu küçüldükçe ekran alanı daha değerli hale geliyor. Bazen imleç boyutunu küçültmek ve daha okunaklı hale getirmek için daha az önemli bazı imleç öğelerini kapatmak iyi bir fikirdir. Bu ayarın etkinleştirilmesi, mobil cihazda slayt resimlerini ve videoları görüntüler (bunlar varsayılan olarak devre dışıdır).

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.

Tam genişlikte slayt modülü öğeleri için içerik seçenekleri

bireysel eleman modülü divi diapo.png

Başlık

İmleç başlığınızın metnini buraya ayarlayın.

Düğme metni

Slayt içeriğinizin altında bir düğme görüntülemek istiyorsanız, düğme metnini buraya girin. Bir düğme görüntülemek istemiyorsanız bu alanı boş bırakın.

içindekiler

İmlecinizin gövde içeriğini buraya girin. Buraya girdiğiniz metin miktarının slaytlarınızın yüksekliğini belirleyeceğini unutmayın.

Düğme URL'si

Bir düğme görüntülerseniz, hedef bağlantıyı ayarlamak için bu alana geçerli bir web URL'si ekleyin.

Resmi sürükleyin

Bir slayt görüntüsü eklerseniz, slayt arka planınızın üzerinde slayt metninizin solunda görünecektir. Bir slayt resmi belirtmezseniz, solda ortalanmış, salt metin bir slayt olacaksınız. Her slaydın yüksekliği metin tarafından belirlendiğinden, slayt görüntünüz yeterince uzunsa, slaytın altına düşecek ve altta hizalı bir görüntü oluşturacaktır.

bir resim sürükleyin divi.png

Slayt görüntüsü olan bir slaydın yüksekliğinin, kaydırıcıdaki daha uzun bir slaytla belirlenebileceğini unutmayın. Alta hizalanmış bir görüntünün olmasını istiyorsanız, slayt görüntünüzün sığacak kadar büyük olduğundan emin olun. Okunabilirlik nedeniyle, slayt resimleri yalnızca sütun, sütun veya 1 sütun genişliği kaydırıcılarında görünür. Benzer şekilde, slayt resimleri 768 pikselden küçük tarayıcı genişliklerinde görüntülenmez. Slayt resmi genişlikleri aşağıda tanımlanmıştır. Slayt resimlerinizin en az o kadar geniş olmasını öneririz.

Video slayt

Bir slayt videosu eklerseniz, slayt arka planınızın üzerinde slayt metninizin solunda görünecektir. Bir slayt videosu belirtmezseniz, solda ortalanmış, salt metin bir slaytla karşılaşırsınız. Her slaydın yüksekliği metin tarafından belirlendiğinden, slayt görüntünüz yeterince uzunsa, slaytın altına düşecek ve altta hizalı bir görüntü oluşturacaktır.

Videoyu Duraklat

Oynatmaya başladıklarında diğer oyuncular tarafından videonun duraklatılmasına izin ver

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.

Bir slaydın yüksekliği, eklediğiniz metin miktarına göre belirlenir. Birden fazla slaydınız varsa, kaydırıcı en uzun slaydın yüksekliğini alacaktır.

İmlecinizin genişliği, tarayıcının genişliğine göre belirlenir. Standart ekran boyutlarına göre, resimlerinizin en az 1280 piksele 768 piksel olmasını öneririz.

Arka plan resminin konumu

Varsayılan olarak, arka plan resimleri slaydın ortasında görüntülenir. Bu ayarı, slaydın üst, alt, sol, sağ veya dört köşesinden herhangi birindeki yerleşimi değiştirmek için kullanabilirsiniz.

Arka plan resmi boyutu

Varsayılan olarak, arka plan resimleri, tüm slaydı doldurmalarını sağlamak için orantılı olarak büyütülür. Ancak, varsayılan davranışı değiştirmek için bu seçeneği kullanabilirsiniz. "Kapsam", görüntüyü tüm slayt alanını kapsayacak şekilde ölçekleyen varsayılan davranıştır. "Sığdır" ayrıca görüntüyü tüm alanı kaplamaya zorlar, ancak görüntünün yükseklik ve genişliğini imlecin yüksekliği ve genişliğiyle eşleşmeye zorlar. Bu, görüntünün bozulmasına neden olabilir, ancak görüntünün kırpılmasını önleyecektir. "Gerçek Boyut", görüntüyü ölçeklendirmez ve yerel boyutunda görüntüler.

Arka plan rengi

Slaydınız için tek renkli bir arka plan kullanmak istiyorsanız, bir arka plan rengi ayarlamak için renk seçiciyi kullanın.

MP4 arka plan videosu

Tüm tarayıcılarda maksimum uyumluluk sağlamak için tüm videolar hem .MP4 .WEBM formatında indirilmelidir. .MP4 sürümünü buradan indirin. Önemli Not: Video arka planları mobil cihazlarda devre dışı bırakılmıştır. Bunun yerine, bkacground görüntünüz kullanılacaktır. Bu nedenle, daha iyi sonuçlar elde etmek için hem bir arka plan resmi hem de bir arka plan videosu ayarlamalısınız.

WEBM arka plan videosu

Tüm tarayıcılarda maksimum uyumluluk sağlamak için tüm videolar hem .MP4 .WEBM formatında indirilmelidir. .WEBM sürümlerini buradan indirin. Önemli Not: Video arka planları mobil cihazlarda devre dışı bırakılmıştır. Bunun yerine, bkacground görüntünüz kullanılacaktır. Bu nedenle, daha iyi sonuçlar elde etmek için hem bir arka plan resmi hem de bir arka plan videosu ayarlamalısınız.

Arka plan video genişliği

Videoların düzgün bir şekilde boyutlandırılması için, videonuzun tam genişliğini (piksel olarak) buraya girmeniz gerekir.

Video yüksekliği arka planı

Videoların düzgün bir şekilde boyutlandırılması için, videonuzun tam yüksekliğini (piksel olarak) buraya girmeniz gerekir.

Slide element elemanları tasarım seçenekleri

bölüm stil modülü divi.png

Arka plan kaplamasını kullanın

Etkinleştirildiğinde, arka plan resminizin üzerine ve kaydırıcı içeriğinizin arkasına özel bir kaplama rengi eklenecektir.

Arka plan kaplama rengi

Arka plan için bir renk seçmek için renk seçiciyi kullanın.

Metin yerleşimini kullan

Bu seçenek etkinleştirildiğinde, arka plan görüntülerinde daha okunabilir hale getirmek için imleç metninin arkasına bir arka plan rengi eklenir.

Metin yer paylaşımı rengi

Metin yerleşimi için bir renk seçmek için renk seçiciyi kullanın.

Metin Yerleşimi Sınır Yarıçapı

Kenarlığın yarıçapı, metin kaplama alanının köşelerinin yuvarlaklığını etkiler. Varsayılan olarak, köşelerin 3 piksellik hafif yuvarlatılmış kenarları vardır. Dikdörtgen bir kutu oluşturmak için bu değeri 0'a indirebilir veya köşeleri daha da yuvarlatmak için değeri artırabilirsiniz.

Özel Renkli Oklar

Bir kaydırıcı modülün üzerine geldiğinizde, ziyaretçinin her slaytta gezinmesine olanak tanıyan oklar görünür. Varsayılan olarak, bu oklar slaydın ana metninin rengini devralır. Ancak, bu ayarı kullanarak bu oklar için özel bir renk tanımlayabilirsiniz.

Dot Nav Özel Renk

Her imleçte, imleç içeriğinin altında nokta gezinme öğeleri görünür. Bu öğeler, kullanıcının imleci hareket ettirmesine izin verir. Bu ayardaki renk seçiciyi kullanarak bu öğeler için kullanmak üzere özel bir renk tanımlayabilirsiniz.

Slayt görüntüsünün dikey hizalaması

Bu ayar, slayt görüntünüzün dikey hizalamasını belirler. Resminiz dikey olarak ortalanabilir veya slaydınızın altına hizalanabilir.

Metin rengi

Slaytınızın arka planı koyu ise, metin rengi “Açık” olarak ayarlanmalıdır. Tam tersi, slayt arka planı açıksa, metin rengi “Koyu” olarak ayarlanmalı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 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 istediğiniz metin boyutu değerini doğrudan girebilirsiniz. Giriş alanları farklı ölçü birimlerini destekler; bu, birim türünü değiştirmek için boyut 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 bölümü tasarım modülü dispo rengi divi.png

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, boşluğu 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 boşluk boyutunu girin. Giriş alanları farklı ölçü birimlerini destekler; bu, birim türünü değiştirmek için boyut 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, boşluğu ayarlamak için aralık kaydırıcısını kullanın veya imlecin sağındaki giriş alanına istediğiniz boşluk boyutunu girin. Giriş alanları farklı ölçü birimlerini destekler; bu, birim türünü değiştirmek için boyut 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 metin 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 istediğiniz metin boyutu değerini doğrudan girebilirsiniz. Giriş alanları farklı ölçü birimlerini destekler; bu, birim türünü değiştirmek için boyut 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, boşluğu 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 boşluk boyutunu girin. Giriş alanları farklı ölçü birimlerini destekler; bu, birim türünü değiştirmek için boyut değerinize bağlı olarak "px" veya "em" girebileceğiniz anlamına gelir.

vücut hattı divi modülü diapo.png

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, boşluğu ayarlamak için aralık kaydırıcısını kullanın veya imlecin sağındaki giriş alanına istediğiniz boşluk boyutunu girin. Giriş alanları farklı ölçü birimlerini destekler; bu, birim türünü değiştirmek için boyut değerinize bağlı olarak "px" veya "em" girebileceğiniz anlamına gelir.

Düğme için özel stiller kullan

Bu seçeneğin etkinleştirilmesi, modülünüzün düğmesinin görünümünü değiştirmek için kullanabileceğiniz çeşitli düğme özelleştirme ayarlarını ortaya çıkarır.

Düğme metni boyutu

Bu ayar, düğmedeki metnin boyutunu artırmak veya azaltmak için kullanılabilir. Düğme, metin boyutu büyüdükçe ve küçüldükçe uyum sağlar.

Düğme metni rengi

Varsayılan olarak düğmeler, Tema Özelleştiricide tanımlanan temanızın vurgu rengini kullanır. Bu seçenek, bu modülün düğmesine özel bir metin rengi atamanıza olanak tanır. Düğme rengini değiştirmek için renk seçiciyi kullanarak özel renginizi seçin.

Düğme arka plan rengi

Varsayılan olarak, düğmelerin şeffaf bir arka plan rengi vardır. Bu, renk seçiciden istenen arka plan rengi seçilerek değiştirilebilir.

Kenarlık Genişliği düğmesi

Tüm Divi düğmelerinin varsayılan olarak 2px sınırı vardır. Bu sınır, bu ayar kullanılarak artırılabilir veya azaltılabilir. Sınırlar 0 değeri girilerek kaldırılabilir.

Düğme kenarlığı rengi

Varsayılan olarak düğme kenarlıkları, Tema Özelleştiricide tanımlandığı gibi temanızın vurgu rengini kullanır. Bu seçenek, bu modülün düğmesine özel bir kenar rengi atamanıza olanak tanır. Düğme kenarlığının rengini değiştirmek için renk seçiciyi kullanarak özel renginizi seçin.

Düğme sınır yarıçapı

Kenarlığın yarıçapı, düğmelerinizin köşelerinin yuvarlaklığını etkiler. Varsayılan olarak, Divi'deki düğmelerin köşeleri 3 piksel yuvarlayan küçük bir kenarlık yarıçapı vardır. Kare düğme oluşturmak için bu değeri 0'a düşürebilir veya yuvarlak kenarlı düğmeler oluşturmak için önemli ölçüde artırabilirsiniz.

yapılandırma düğmesi modülü divi.png

Düğme harflerinin aralığı

Harf aralığı, her harf arasındaki boşluğu etkiler. Düğme metninizdeki her harf arasındaki boşluğu artırmak istiyorsanız, boşluğu 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 boşluk boyutunu girin. Giriş alanları farklı ölçü birimlerini destekler; bu, birim türünü değiştirmek için boyut değerinize bağlı olarak "px" veya "em" girebileceğiniz anlamına gelir.

Düğme Yazı Tipi

Açılır menüden istediğiniz yazı tipini seçerek düğme 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.

Düğme simgesi ekle

Devre dışı bırakıldığında, bu ayar düğmenizden simgeleri kaldırır. Varsayılan olarak, tüm Divi düğmeleri, fareyle üzerine gelindiğinde bir ok simgesi görüntüler.

Düğme simgesi

Simgeler etkinleştirilirse, düğmenizde hangi simgenin kullanılacağını seçmek için bu ayarı kullanabilirsiniz. Divi, aralarından seçim yapabileceğiniz farklı simgelere sahiptir.

Renk simgesi düğmesi

Bu ayarı yapmak, düğmenizde görünen simgenin rengini değiştirecektir. Varsayılan olarak, simge rengi düğme metin renginizle aynıdır, ancak bu ayar rengi bağımsız olarak ayarlamanıza izin verir.

Simge yerleştirme düğmesi

Düğmenizin simgesini düğmenin solunda veya sağında görüntülemeyi seçebilirsiniz.

Simgeyi yalnızca düğmenin üzerine geldiğinizde göster

Varsayılan olarak, düğme simgeleri yalnızca gezinirken görüntülenir. Simgenin her zaman görünmesini istiyorsanız, bu ayarı kapatın.

Düğmenin metin renginin üzerine gelin

Bir ziyaretçinin faresi düğme üzerine geldiğinde, bu renk kullanılacaktır. Renk, önceki ayarlarda tanımlanan temel renkten değişecektir.

Vurgulu düğme arka plan rengi

Bir ziyaretçinin faresi düğme üzerine geldiğinde, bu renk kullanılacaktır. Renk, önceki ayarlarda tanımlanan temel renkten değişecektir.

Renk Vurgulu Kenarlık Düğmesi

Bir ziyaretçinin faresi düğme üzerine geldiğinde, bu renk kullanılacaktır. Renk, önceki ayarlarda tanımlanan temel renkten değişecektir.

Hover Sınır Yarıçapı Düğmesi

Bir ziyaretçinin faresi düğme üzerine geldiğinde bu değer kullanılacaktır. Değer, önceki ayarlarda tanımlanan temel değerden değişecektir.

İşaretli not aralığı düğmesi

Bir ziyaretçinin faresi düğme üzerine geldiğinde bu değer kullanılacaktır. Değer, önceki ayarlarda tanımlanan temel değerden değişecektir.

Gelişmiş imleç seçenekleri Tam Genişlik

ileri bölüm slayt modülü bireysel eleman divi.png

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

Alternatif Resim Metni

Alternatif 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 tüm bilgileri sağlar. Ayrıca görüntünün arama motorları tarafından okunmasına ve tanınmasına da izin verir.

Diğer Divi öğreticiler

Bu makale yorumları 5 içeriyor

  1. Merhaba

    Bu eğitim için teşekkür ederim, gerçekten tamamlandı!
    Metindeki animasyonu değiştirmenin veya hatta kaldırmanın mümkün olup olmadığını biliyor musunuz? çünkü varsayılan değil arka plan görüntülerinde aşağıdan yukarıya gidiyor ve bence çok güzel değil.

    sağol

  2. Bonjour
    Bir slayt düğmesini tıkladığınızda URL bağlantısını yeni bir sekmeye yönlendirmesi mümkün müdür?
    Işıklarınız için şimdiden teşekkür ederiz!

  3. Merhaba ! makaleniz için teşekkür ederim. benim sorunum arka plan videosunun mobilde görünmemesi, müvekkilim kesinlikle istedi. Cevabımı bulduğumu düşündüm çünkü makalenize göre “Gelişmiş” de varsayılan olarak devre dışı bırakılan videoları mobilde etkinleştirme imkanı var. ama bu olasılığı divimde bulamadım. Cevabınız için teşekkür ederim…

    Yanis

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üş
6 hisseleri
hisse4
cıvıltı
Enregistrer2