Divi Builder'da Görüntü Modülü Nasıl Kullanılır

Image, Divi Builder tarafından sunulan modüllerden biridir. Adından da anlaşılacağı gibi, bu modülü, üzerinde çalıştığınız tasarıma bir görüntü öğesi eklemek için kullanabilirsiniz (bir sayfa veya tema oluşturucu şablonu olabilir). Divi Builder'da yeni misiniz? Endişelenme. Bu makale, Görüntü modülü hakkında bilmeniz gereken her şeyi kapsayacaktır. Nasıl ekleneceğinden, nasıl şekillendirileceğine kadar.

Görüntünün kendisi bir tasarımın önemli bir unsurudur. Web tasarımı bir istisna değildir. Görüntüsüz bir tasarım tatsız olacaktır. Divi Builder'ın Görüntü modülü, bir görüntü eklemenizi kolaylaştırır. Statik bir resim veya dinamik bir resim (öne çıkan resim, site logosu ve yazar profil resmi gibi) ekleyebilirsiniz. Görüntü modülü, tek bir görüntü eklemek için tasarlanmıştır. Resim galerisi eklemek isterseniz Galeri modülünü kullanabilirsiniz.

Divi Builder'da resim nasıl eklenir

Görüntü modülü, normal bir bölüm içindeki bir satıra eklenebilir (Divi Builder'da bölüm ve satır hakkında daha fazla bilgi edinmek için önceki makalemizi okuyabilirsiniz). Görüntü modülünü eklemek için, bir satırdaki bir sütundaki gri artı simgesini tıklamanız ve Modül öğesini seçmeniz yeterlidir.

Görünen panelde, kullanmak istediğiniz görüntüyü seçmek için İçerik sekmesinin altındaki Görüntü bloğundaki görüntü seçiciyi tıklayın.

Dinamik bir resim eklemek için farenizi resim seçicinin üzerine getirin ve çöp kutusu simgesine tıklayın. Veritabanı simgesine tıklayın ve kullanmak istediğiniz dinamik görüntü türünü seçin.

Resmin bağlantısını ekleme

Resminize bir bağlantı ekleyebilirsiniz. Resmin kendisiyle aynı şekilde, statik bir bağlantı veya dinamik bir bağlantı da ekleyebilirsiniz. Bağlantıyı eklemek için İçerik sekmesinin altındaki Bağlantı bloğunu açabilirsiniz. Dinamik bir bağlantı eklemek için veritabanı simgesine de tıklayabilirsiniz.

Görüntüyü şekillendirme

Resim eklendikten sonra, onu şekillendirmeye başlayabilirsiniz. Diğer Divi Builder modüllerinde olduğu gibi modül ayarları panelindeki Tasarım sekmesinden styling işlemini gerçekleştirebilirsiniz. Görüntüye stil vermek için açabileceğiniz 8 ayar bloğu vardır:

• hizalama

Görüntünün hizalamasını ayarlamak için bu bloğu açabilirsiniz.

• boyutlandırma

Resmin boyutunu (yükseklik ve genişlik) ayarlamak için bu bloğu açabilirsiniz. Divi Builder varsayılan olarak yükseklik ve genişlik için yüzde birimini kullanır, ancak isterseniz piksel birimini de kullanabilirsiniz. Piksel birimini kullanmak için birimi (px) ve değeri manuel olarak yazabilirsiniz.

Etkinleştirebileceğiniz bir Tam Genişliğe Zorla seçeneği de vardır. Bu seçeneğin etkinleştirilmesi, görüntünün Görüntü modülüyle ilişkili tüm sütunu doldurmasını sağlar.

• boşluk

Görüntü modülünün dolgusunu ve aralığını ayarlamak için bu bloğu açabilirsiniz. Web tasarımında dolgu ve kenar boşluğu hakkında daha fazla bilgi edinmek için bir önceki makalemizi okuyabilirsiniz.

• Sınır

Resmin kenarlığını ayarlamak için bu bloğu açabilirsiniz. Kenarlık stilinden kenarlık boyutuna, kenarlık rengine. Her kenarlık için (üst, alt, sol ve sağ) farklı bir renk ve boyut kullanabilirsiniz. Her bir kenarlığın rengini ve boyutunu ayarlamak için Kenar Stilleri seçeneğindeki sekmelere tıklamanız yeterlidir.

Ayrıca sınır yarıçapını da ayarlayabilirsiniz. Kenarlık yarıçapı, görüntünün her bir köşesinin (üst, alt, sol ve sağ) eğim düzeyini belirtir. Kenar yarıçapının değerleri ne kadar yüksek olursa, görüntünüz o kadar yuvarlak olur. Kenarlık yarıçapını Yuvarlatılmış Köşeler seçeneğinde ayarlayabilirsiniz.

• Kutu Gölge

Resminize bir kutu gölgesi uygulamak için bu bloğu açabilirsiniz. Aralarından seçim yapabileceğiniz 7 kutu gölge türü vardır. Birini seçtikten sonra yatay konumu, dikey konumu, bulanıklık gücünü, yayılma gücünü ve gölge rengini ayarlayabilirsiniz.

• filtreler

Görüntüye CSS filtreleri uygulamak için bu bloğu açabilirsiniz. Uygulayabileceğiniz 6 CSS filtre türü vardır:

• renk tonu
• Doyma
• Parlaklık
• Zıtlık
• ters çevir
• Sepya

Karışım modunun yanı sıra bu bloktan görüntünüzün opaklık seviyesini de ayarlayabilirsiniz.

• dönüştürmek

Görüntünüze CSS dönüşümünü ayarlamak için bu bloğu açabilirsiniz. Ayarlayabileceğiniz 5 CSS dönüştürme türü vardır:

• Ölçeği Dönüştür
• Dönüştür Çeviri
• Dönüştür Döndür
• Eğriliği Dönüştür
• Kökeni Dönüştür

Uygulamak istediğiniz CSS dönüşümünü sekmesine tıklayarak seçin ve dönüşüm değerlerini ayarlamak için farenizi kullanın.

• Animasyon

Görüntü modülüne bir giriş animasyonu uygulamak için bu bloğu açabilirsiniz. Aralarından seçim yapabileceğiniz 7 animasyon stili vardır. Birini seçtikten sonra animasyon yönünü, animasyon süresini, animasyon gecikmesini vb. ayarlayabilirsiniz.

Gelişmiş Ayarlar

Tasarım sekmesinde stil oluşturmayı tamamladığınızda, özel CSS ekleme, özel konum belirleme vb. gibi bazı gelişmiş ayarları yapmak için Gelişmiş sekmesine geçebilirsiniz. Burada açabileceğiniz 7 blok var:

• CSS Kimliği ve Sınıfları

CSS kimliği veya CSS sınıfı eklemek için bu bloğu açabilirsiniz. Code modülü aracılığıyla özel CSS eklemek isterseniz CSS kimliği veya CSS sınıfı ekleyebilirsiniz.

• Özel CSS

Kod modülü yerine doğrudan özel CSS eklemek için bu bloğu açabilirsiniz. Sadece mevcut alanlara CSS kodunu ekleyebilirsiniz.

• Öznitellikler

Görüntü niteliklerini (alt metin ve başlık) eklemek için bu bloğu açabilirsiniz. Statik öznitelikleri veya dinamik öznitelikleri kullanabilirsiniz. Dinamik nitelikler eklemek için, her alandaki veritabanı simgesine tıklamanız yeterlidir ( Görüntü Alternatifi ve Resim Başlığı Metni ).

• görünürlük

Belirli bir aygıt türünde Görüntü modülünü devre dışı bırakmak için bu bloğu açabilirsiniz. Modülü devre dışı bırakmak için cihaz türünü işaretlemeniz yeterlidir.

• geçişler

Görüntü modülünün geçişini ayarlamak için bu bloğu açabilirsiniz.

• Konum

Divi Builder'da yeni bir modül eklediğinizde, konum statik ( Varsayılan ) olarak ayarlanır. İsterseniz, Görüntü modülü için özel bir konum kullanabilirsiniz. Gelişmiş sekmesi altındaki Konum bloğundan özel bir konum ayarlayabilirsiniz. Ayarlayabileceğiniz konum seçenekleri şunlardır:

Göreceli: Bu seçeneği seçerseniz, Görüntü modülü sayfanın normal akışını izleyecektir. Bu seçenek, üst, alt ve sağ özellikleri sunar. Ayrıca Z indeksini de ayarlayabilirsiniz.

Mutlak: Bu seçeneği seçerseniz, Görüntü modülü için sayfada oluşturulan gerçek alan olmayacaktır. Bunu, gerçek yer kaplayan diğer öğelerin üzerinde yüzen bir modül olarak düşünebilirsiniz.

Düzeltildi: Bu seçeneği seçerseniz, Görüntü modülü sayfanın normal akışını bozar ve sayfada gerçek bir alan kalmaz.

• Kaydırma Efektleri

Görüntü modülüne kaydırma efekti uygulamak için bu bloğu açabilirsiniz. Örneğin, yapışkan efekti uygulayabilirsiniz. Ayrıca bu bloktan bir kaydırma efekti de yapabilirsiniz.

Alt çizgi

Divi Builder'ın Görüntü modülü, tasarımınıza bir görüntü eklemek için tasarlanmıştır. Statik bir görüntü veya dinamik bir görüntü eklemek için kullanabilirsiniz. Yukarıda bahsettiğimiz gibi, resminize uygulayabileceğiniz, yapışkan efekt uygulama yeteneği, hareket efekti ve CSS filtreleri de dahil olmak üzere birçok stil seçeneği vardır. Dikkat edilmesi gereken bir şey var. Görüntü modülünde (ve diğer Divi Builder modüllerinde) her yeni değişiklik yaptığınızda, ayarlar panelinin sağ alt köşesindeki yeşil kontrol listesi simgesini tıkladığınızdan emin olun.