Ana İçeriğe Geç

Divi'de metinlerle çevrili bir resim nasıl oluşturulur?

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]

Görüntüleri metin sarma, genellikle dergi ve gazete gibi basılı medyada kullanılan yaygın bir tasarım tekniğidir. Ancak bunu, özellikle blog gönderileri için web'de de bulabilirsiniz. Bir görüntünün etrafına metin sarmak aslında WordPress'in WYSIWYG düzenleyicide basit bir hizalama ayarlaması içeren oldukça standart bir parçasıdır. Tek sorun, varsayılan WordPress düzenleyicisini kullanarak sayfanızın stilini özelleştirmenin zor olmasıdır. Divi'nin yardımcı olabileceği yer burasıdır!

Her ne kadar bu eğitim resimlere odaklansa da, bu işlemi herhangi bir Divi modülüne sarmak için kullanabilirsiniz.

anket

Bugün inşa edeceğimiz ana tasarıma bir göz atalım.

Divi tasarım önizlemesi

Bu örnekte, ortalanmış bir görüntü modülünün etrafına iki sütun metni nasıl kaydıracağınızı göstereceğim. Bu, benzersiz bir dergi veya gazete tarzı düzen oluşturmanıza olanak tanır. Ancak, "float: center" css özelliği olmadığından, bu tasarımın çalışması için düzen ile biraz yaratıcılığa ihtiyacımız olacak.

İşte nasıl yapılacağı.

Ortalanmış bir görüntüyle üst satırda içerik oluşturma

Başlamak için tek sütunlu yeni bir normal bölüm oluşturun. Ardından satırınıza bir görüntü modülü ekleyin. 400 x 250 piksel boyutunda bir resim yükleyin. Bu tasarım için boyutlandırma kesin olmalıdır.

Ardından tasarım parametrelerini aşağıdaki gibi güncelleyin:

Maksimum genişlik: 400px (masaüstü),% 100 (tablet)
Modülün hizalanması: orta
Özel dolgu: Üstte 2%, altta 2%, solda 2%, sağda 2%

Divi modül stilini değiştir

Ardından ayarlarınızı kaydedin ve hat ayarlarını açın. Satırın altından dolguyu çıkarın.

Özel dolgu: altta 0px

Divi hat ayarları

İki sütunlu metin satırını oluşturun

Görüntüyü içeren satırın altında, iki sütun düzenine sahip yeni bir satır oluşturun.

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]

İki sütunlu Divi bölümü

1 sütununda yapay içeriği olan bir metin modülü ekleyin.

Divi 1 metin kutusu ekleArdından, metin modülünü kopyalayın ve ikinci bir metin sütunu için 2 sütununa yapıştırın.

Divi metin modülünü yapıştır

Yüzen bölücülerle boş alan oluşturma

Görüntü için ihtiyacımız olan alanı yaratmak için bölme modüllerini kullanabiliriz. Sol sütunda, görüntünün yarısı büyüklüğünde bir bölücü modül oluşturacağız ve bunu sağa kaydıracağız, böylece metin modülümüz bölücünün etrafına sarılacak. Sonra sağ sütunda görüntünün yarısı kadar başka bir ayırıcı oluşturup sola doğru yüzdüreceğiz.

Bunu yapmak için, bir ayırma modülü oluşturun ve 1 sütununda doğrudan metin modülünün üzerine yerleştirin.

Ardından bölünmüş modül ayarlarını aşağıdaki gibi güncelleyin:

Bölücüyü Göster: NO
Genişlik: 200px
Yükseklik: 250px

Yüksekliğin önceden oluşturulanla aynı olduğundan ve genişliğin tam olarak görüntünün genişliğinin yarısı kadar olduğundan emin olun.

Divi genişlik bölümü ayarı

Mobil cihazlar için tablet ve telefonda ayırıcıları devre dışı bırakmak istiyoruz. Bunu yapmak için, tabletin ve telefonun ekranını kapatmak için görünürlük ayarlarını güncelleyin.

Tarihinde devre dışı bırak

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]

Şimdi ilk ayırıcımız oluşturulduğundan, ayırma modülünü kopyalayın ve 2 sütunundaki metin modülünün üzerine yapıştırın.

Divi ayırıcı modülü

Sonra, bölücülerimizi yüzdürmemiz gerekiyor. Bunu yapmak için 1. sütundaki ayırıcı ayarlarını açın ve aşağıdaki özel CSS kodunu ana öğeye ekleyin:

yüzer: hakkı;

Divi float özelliği ekle

Ardından, bölme modülünün ayarlarını 2. sütunda açın ve aşağıdaki özel CSS kodunu ana öğeye ekleyin:

float: left;

Sol kayan ayırıcı 1

Resmi özel bir kenar boşluğuyla yerine taşıyın

Şimdi, bölücülerimizle yarattığımız alana sığması için ilk sıradaki imajımızı küçültmemiz gerekiyor.

Görüntü Modülü ayarlarını açın ve aşağıdaki özel kenar boşluklarını ekleyin:

Özel Marj: Düşük-250px (Masaüstü), 20px (Tablet)

İşte şimdiye kadarki sonuç.

Güncel tasarım divi

Bölüme bir başlık ekle

Bu son adım isteğe bağlıdır, ancak bölüme bir başlık eklemek istiyorsanız, bir metin modülü oluşturun ve görüntünün üzerine konumlandırın.

Ardından, aşağıdaki içeriği metin modülüne ekleyin:

Nasıl verileceği hakkında daha fazla bilgi edinin

Ardından, metin ayarlarını aşağıdaki şekilde güncelleyin:

Arka plan rengi: #000000
Başlık 2 Yazı Tipi: Playfair Ekranı
Başlık 2 Metin Hizalama: Orta Başlık
2 Metin Rengi: #ffffff
Başlık 2 Satır Yüksekliği: 2em

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

Metin modülü nasıl bağışlanır

Daha temiz bir metin sarma tasarımı için metni yaslama

Metni resimlerle çevrelediğinizde, özellikle metin bu şekilde ortalanmışsa, etrafındaki metni yaslamak her zaman iyi bir fikirdir. Bu durumda, metnin yönünü şu şekilde değiştirin: haklı çıkarmak Dış görünüm metin içeriğimizi içeren iki metin modülü.

Divi hizalı metin

Nihai sonuç

İşte son sonuç.

Merkezi görüntü ve yaslanmış metin

Son düşünceler

Görüntülerdeki metni nasıl etkili bir şekilde çevreleyeceğinizi bilmek, içeriğinizin gerçekten profesyonel görünmesini ve okunması kolay olmasını sağlayabilir. Konsept oldukça basit. Tek yapmanız gereken, görüntünüzü sağa veya sola kaydırmak ve ardından arabellek için görüntünün etrafında özel boşluk kullanmaktır. Ve sevdiğim şey, Divi'deki herhangi bir içerik türüne metin eklemek için herhangi bir modülü (yalnızca görüntüleri değil) kullanabilmeniz. Umarım bu size bir sonraki projeniz için biraz ilham verir.

Yorumlarda sizden haber almayı umuyoruz.

Bu makalede, 1 yorumunu içeren

  1. Bonjour
    Bu öğreticiyi bir videoyu çevreleyecek şekilde uyarlamaya çalışıyorum …… ama yapamıyorum.
    Prosedür aşağı yukarı aynı mı?
    Teşekkür ederim iyi geceler. Stef

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üş
0 hisseleri
hisse
cıvıltı
Enregistrer