Metin sarma görüntüleri, genellikle dergiler ve gazeteler gibi basılı medyada kullanılan yaygın bir tasarım tekniğidir. Ancak bunun, özellikle blog gönderileri için web'de kullanıldığını da bulabilirsiniz. Metni bir görüntünün etrafına sarmak aslında WordPress'in oldukça standart bir parçasıdır ve WYSIWYG düzenleyicide basit bir hizalama ayarı içerir. Tek sorun, varsayılan WordPress düzenleyicisini kullanarak sayfanızı biçimlendirmenin zor olmasıdır. orada Divi yardım edebilir !

Bu öğretici resimlere odaklansa da, aynı işlemi herhangi bir modülde metin sarmak için kullanabilirsiniz. Divi.

anket

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

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%

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

Özel dolgu: altta 0px

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

1. sütuna, bir metin modülü ekleyin. içindekiler kukla.

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

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.

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.

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

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ı;

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;

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

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.

Daha sonra şunu ekleyin içindekiler metin modülünü takip ederek:

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

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 bizim içeren iki metin modülü içindekiler metin sarma.

Nihai sonuç

İşte son sonuç.

Son düşünceler

Metni görsellerle etkili bir şekilde nasıl ç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örselinizi sağa veya sola kaydırmak ve ardından tamponlama için görselin etrafında özel boşluk bırakmaktır. Ve hoşuma giden şey, herhangi bir içerik türüne metin eklemek için herhangi bir modülü (yalnızca görüntüleri değil) kullanabilmenizdir. Divi. Umarım bu size bir sonraki projeniz için biraz ilham verir.

Yorumlarda sizden haber almayı umuyoruz.