Divi Eğitimi: Divi Builder'da Görüntü Modülü nasıl kullanılır?

yılından beri Blair Jersyer | Divi

Divi, herhangi bir yere resim eklemeyi kolaylaştırır blogunuzun. Tüm resimler aşamalı yüklemeyi destekler ve sitenizde gezinmeyi eğlenceli ve ilgi çekici hale getiren 4 farklı animasyon stiliyle birlikte gelir. Görüntü modülleri oluşturduğunuz herhangi bir sütuna yerleştirilebilir ve boyutları sığacak şekilde ayarlanır.

görüntü modülü divi.png

Divi'den bir görüntü modülü nasıl eklenir

Sayfanıza bir görüntü modülü ekleyebilmeniz için önce Divi Builder'a atlamanız gerekir. Bir kere Divi teması web sitenize yüklediğinizde 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 WordPress panonuza bağlıysanız, web sitenizi ön planda tuttuğunuzda.

divi oluşturucu

Görsel Oluşturucuyu etkinleştirdikten 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.

divi modülü image.png

Modül listesinde resim modülünü bulun ve sayfanıza eklemek için üzerine tıklayın. Modların listesi aranabilir, yani "resim" kelimesini de yazabilir ve ardından resim modunu 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 hizmetler sayfasındaki hizmetleri göstermek için çakışan resimler ekleme

Görüntü modülünü kullanmanın sayısız yolu vardır. Bu örnek için size küçük bir işletme web sitesi için hizmetler sayfasına nasıl resim ekleyeceğinizi göstereceğim. Resimleri ekleyeceğim yer burası. Her kırmızı daire bir görüntüyü temsil eder.

Bir modül resmi ekle divi builder.jpg

Bir sayfaya resim eklemek oldukça basit ve anlaşılır bir işlem olduğundan, resimlerimi üst üste gelecek şekilde konumlandırmak için bazı özel stiller ekleyeceğim ve yığılmış bir efekt yaratacağım.

Başlayalım.

1/4 1/4 1/2 düzende standart bir bölüm eklemek için görsel oluşturucuyu kullanın. Ardından satırınızın sağ sütununa 1/2 bir metin modülü ekleyin. Hizmet için bir başlık ve açıklama girin.

Ardından en soldaki 1/4 sütuna bir görüntü modülü ekleyin.

Resim ekle divi builder.png

Image modülünün ayarlarını şu şekilde güncelleyin:

İçerik seçenekleri

Resim URL'si: [URL'yi girin veya 500 × 625 boyutlarında resmi indirin]

Tasarım seçenekleri

Özel Marj: sol -60px

Seçenekler AVANCEES

Animasyon: Soldan sağa

animasyon divi image.png

Ayarları kaydet

İkinci 1/4 sütuna (veya orta sütuna) başka bir görüntü modülü ekleyin ve görüntü ayarlarını aşağıdaki gibi güncelleyin:

İçerik seçenekleri

Resim URL'si: [URL'yi girin veya 500 × 625 boyutlarında resmi indirin]

Tasarım seçenekleri

Özel Kenar Boşluğu: Üst 100px, -60px Sol

Seçenekler AVANCEES

Animasyon: Sağdan sola

üst üste binen görüntü divi.png

Ayarları kaydet

Bu ilk bölümle ilgilenir. Şimdi bir sonraki hizmet bölümü için, ilk hizmet bölümü için yeni oluşturduğumuz bölümü çoğaltabiliriz. Bölüm çoğaltıldığında, sütun yapısını 1/2 1/4 1/4 sütun düzenine (öncekinin tersi) değiştirin.

Bir bölüm seçin divi.jpg

Ardından, metin modülünü hizmetin başlığı ve açıklamasıyla birlikte en soldaki 1/2 sütununa sürükleyin. Her 1/4 sütunu doldurmak için iki Görüntü Modülünü kaydırdığınızdan emin olun (şimdi sağda).

Görüntü modülleri kopya olduğundan, bu belirli hizmet bölümü için yeni görüntüleri yüklememiz gerekir. Ayrıca modüller, oluşturulan ilk iki görüntü modülü gibi her zaman özel kenar boşluğu ayarlarına sahiptir. Bunu değiştirelim.

Sağ 1 / 4 sütununda bulunan Görüntü modülünden başlayarak aşağıdaki görüntü ayarlarını güncelleyin:

İçerik seçenekleri

Resim URL'si: [URL'yi girin veya 500 × 625 boyutlarında resmi indirin]

Tasarım seçenekleri

Özel Marj: -60px Sol (yalnızca)

Gelişmiş sekmesi

Animasyon: Sağdan sola

Son olarak, 1/4 orta sütun görüntü modülü için görüntü ayarlarını aşağıdakilerle güncelleyin:

İçerik seçenekleri

Resim URL'si: [URL'yi girin veya 500 × 625 boyutlarında resmi indirin]

Tasarım seçenekleri

Özel Marj: 100px Yukarı, -60px Sağ

Gelişmiş sekmesi

Animasyon: Soldan sağa

Ayarları kaydet

Şimdi sayfayı kontrol et!

hizmet sayfası örneği divi.jpg

Görüntü modülü 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.

bölüm resmi divi alan contents.png

Resim URL'si

Buraya geçerli bir resim URL'si yerleştirin veya WordPress medya kitaplığı aracılığıyla bir resim seçin / yükleyin. Resimler her zaman sütunlarında sola yaslanmış olarak görünür ve sütununuzun tüm genişliğini kaplar. Ancak, görüntünüz asla orijinal boyutundan daha büyük olmayacaktır. Görüntünün yüksekliği, orijinal görüntünüzün en boy oranıyla belirlenir.

Görüntüleyicide aç

Burada, üzerine tıkladığınızda görüntünüzün bir görüntüleyicide açılıp açılmayacağını seçebilirsiniz. Bu seçenek etkinleştirilirse, kalıcı bir pencereye tıkladığınızda görüntünüz maksimum boyutuna "yakınlaştırılır". Cüzdanlar için harika bir özellik.

Bağlantı URL'si

Resminizi bir bağlantıya dönüştürmek için bu alana geçerli bir web url'si yerleştirin. Bu alanı boş bırakmak, resminizi statik bir öğe olarak bırakacaktır.

URL açılıyor

Bağlantınızın yeni bir pencerede açılıp açılmayacağını buradan 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.

Görüntü 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.

seçenek tasarım modülü resmi divi.png

Görüntü bindirme

Bu seçenek etkinleştirilirse, ziyaretçi görüntünün üzerine geldiğinde bir renk ve bir kaplama simgesi görüntülenir.

Renk simgesi yerleşimi

Burada bindirme simgesi için özel bir renk ayarlayabilirsiniz

Kaplama bindirme rengi

Burada bindirme için özel bir renk tanımlayabilirsiniz.

Overflight Simgesi

Burada bindirme için özel bir simge tanımlayabilirsiniz.

Resmin altındaki boşluğu kaldırın

Bu seçenek, görüntüleri yalnızca bir sütundaki son modül olduklarında etkiler. Bu seçenek etkinleştirildiğinde, görüntünün alt kısmı ile sonraki bölüm arasındaki mesafe kaldırılarak görüntünün sayfanın sonraki bölümünün üstünü çerçevelemesine izin verilir.

Görüntü hizalama

Burada, görüntünüzün sütunda yüzdüğü yönü seçersiniz. Görüntüyü sola, sağa kaydırabilir veya ortalanmış halde tutabilirsiniz.

Görüntüyü her zaman mobil cihazda ortalayın

Genellikle, mobil cihazlarda ortalandıklarında küçük resimler göze daha hoş gelir. Sütunlar başarısız olduğundan, daha küçük sütunlarda sola veya sağa hizalanan görüntüler, sütunlar başarısız olduğunda ve% 100 genişliğe ulaştığında artık kalır. Bu sütunun, masaüstü bilgisayarlarda görüntü hizalamasını etkilemeden mobil cihazlarda sütunun ortasına hizalanması için zorunlu görüntülerle etkinleştirilmesi.

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

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

Varsayılan olarak, maksimum görüntü genişliği% 100 olarak ayarlanmıştır. Bu, görüntünün genişliği ana sütunun genişliğini aşmadığı sürece görüntünün doğal genişliğinde görüntüleneceği anlamına gelir; bu durumda görüntü, sütun genişliğinin% 100'ü ile sınırlandırılır. Görüntünün maksimum genişliğini daha fazla sınırlamak istiyorsanız, bunu istediğiniz maksimum genişlik değerini buraya girerek yapabilirsiniz. Örneğin,% 50 değeri, görüntünün genişliğini ana sütunun genişliğinin% 50'si ile sınırlar.

Tam genişliğe zorla

Varsayılan olarak, resimler yerel genişliklerinde görüntülenir. Ancak, bu seçeneği etkinleştirerek görüntüyü üst sütunun tüm genişliğine yaymaya zorlayabilirsiniz.

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

Gelişmiş görüntü modülü 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.

bölüm gelişmiş modül image.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.

Animasyon

Görüntünüz için geç yükleme animasyonunu belirtmek için bu açılır menüyü kullanın. Resminizin sağdan, soldan, alttan veya üstten görünmesini seçebilirsiniz.

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.

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.

[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

Yorum Gönder

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