Divi'de Görüntülerin Etrafına Metin Nasıl Sarılır (3 yol)
Yayınlanan: 2019-05-27Metni görüntülerin etrafına sarmak, dergiler ve gazeteler gibi basılı medyada en yaygın olarak bulunan yaygın bir tasarım tekniğidir. Ancak bunun, özellikle blog gönderileri için web'de kullanıldığını da görebilirsiniz. Metni bir görüntünün etrafına sarmak, WYSIWYG düzenleyicide basit bir hizalama ayarı içeren WordPress'in 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ım edebileceği yer burası!
Bu eğitimde, görüntülerin etrafına metin sarmak için Divi'yi kullanmanın 3 yolunu göstereceğim. Bu, tasarımda size yardımcı olacak Divi'nin gücüyle klasik baskı stili mizanpajları oluşturmanıza olanak tanır. İşte ele alacağımız şey:
- WYSIWYG Düzenleyici ile Metin Modülünün İçinde Resimlerin (ve Kısa Alıntıların) Çevresine Metin Nasıl Sarılır
- Divi'deki Bir Metin Modülünün Yanında Bir Görüntü Modülünü Kaydırarak Bir Görüntünün Etrafına Metin Nasıl Sarılır
- Eşsiz İki Sütunlu Düzen için Ortalanmış Bir Resmin Çevresine Metin Nasıl Sarılır
Bu öğretici görüntülere odaklanacak olsa da, aynı işlemi Divi'deki herhangi bir modülün etrafına metin sarmak için de kullanabilirsiniz.
Gizlice Bakış
İşte bugün inşa edeceğimiz ana tasarıma bir göz atın.
Başlayalım!
Youtube Kanalımıza Abone Olun
Görüntü Düzeni Çevresine Sarma Metni'ni ÜCRETSİZ olarak indirin
Bu eğitimdeki tasarımlara el koymak için önce aşağıdaki düğmeyi kullanarak indirmeniz gerekecek. İndirmeye erişmek için aşağıdaki formu kullanarak Divi Daily e-posta listemize abone olmanız gerekir. Yeni bir abone olarak, her Pazartesi daha da fazla Divi iyiliği ve ücretsiz bir Divi Düzen paketi alacaksınız! Zaten listedeyseniz, aşağıya e-posta adresinizi girin ve indir'i tıklayın. "Yeniden abone olmayacaksınız" veya fazladan e-posta almayacaksınız.
Ücretsiz İndir
Divi Bültenine katılın ve size nihai Divi Açılış Sayfası Düzen Paketinin bir kopyasını ve ayrıca tonlarca başka şaşırtıcı ve ücretsiz Divi kaynağı, ipucu ve püf noktası e-posta ile gönderelim. Takip edin ve kısa sürede bir Divi ustası olacaksınız. Zaten aboneyseniz, e-posta adresinizi aşağıya yazın ve düzen paketine erişmek için indir'i tıklayın.
Başarıyla abone oldunuz. Aboneliğinizi onaylamak ve haftalık ücretsiz Divi düzen paketlerine erişmek için lütfen e-posta adresinizi kontrol edin!
Düzeni sayfanıza aktarmak için zip dosyasını çıkarın ve json dosyasını Divi Builder'a sürükleyin.
Hadi öğreticiye geçelim mi?
Başlamak için Gerekenler
Başlamak için ihtiyacınız olan tek şey Divi ve birkaç resim.
- Divi – Divi Temasının kurulu ve etkin olduğundan emin olun. Ön uçtaki Divi Builder'ı (görsel oluşturucu) kullanarak tasarımlarımızı sıfırdan oluşturacağız.
- Görseller – Ayrıca, öğretici için kullanmak üzere 400 piksele 250 piksel boyutunda en az bir görseliniz olduğundan emin olun.
Hazır olduğunuzda, WordPress Kontrol Panelinize gidin ve Sayfalar > Yeni Ekle'ye gidin. Yeni sayfanıza bir başlık verin ve Divi Builder'ı ön uçta dağıtın. "Sıfırdan Oluştur" seçeneğini seçin. Artık gitmeye hazırsınız!
WYSIWYG Düzenleyici ile Metin Modülü İçinde Görsellerin ve Kısa Alıntıların Çevresine Metin Nasıl Sarılır
WordPress, varsayılan WordPress (WYSIWYG) düzenleyicisini kullanarak görüntülerin etrafına metin sarmayı kolaylaştırır. Ve Divi'nin metin modülü aynı yerleşik WordPress WYSIWYG düzenleyicisine sahip olduğundan, WordPress kullanıcılarının her zaman görüntülerin etrafına metin sarmak için kullandıkları yöntemi kullanabiliriz.
İşte nasıl yapılacağı.
Tek sütunlu bir satır içeren normal bir bölüm oluşturun ve ardından satıra bir metin modülü ekleyin.
Metin modülünün içeriğini kopyanızla güncelleyin. Şimdilik birkaç paragraf lorem ipsum kullanıyorum.
Şimdi henüz yapmadıysanız, içerik düzenleyicide görsel sekmesini seçin. Ardından, resim eklemek istediğiniz içerik alanının üst kısmına tıkladığınızdan emin olun ve Medya Ekle düğmesini tıklayın.
Medya kitaplığı açılır penceresinde kullanmak istediğiniz görüntüyü seçin. Ek görüntü ayarları altında, hizalama seçeneği için sol veya sağı seçin. Bu örnek için, resmi sola konumlandırmak istiyorum.
WordPress, resminize ("alignleft" olarak adlandırılır) bir sınıf ekler ve bu, resmi sola kaydırır. Eklenen float özelliği, metnin görüntünün etrafına sarılmasına izin verecektir. WordPress ayrıca görüntü ve çevresindeki metin arasında çok az boşluk oluşturmak için kenar boşluklarını kullanarak görüntünün etrafına bir arabellek ekler.
Ve elbette, resme doğru bir hizalama verirseniz, resim sağa kayar ve metnin resmin etrafına sarılmasına izin verir.
Metni bir metin modülünde bir blok alıntı etrafına sarmak için de benzer bir teknik kullanabilirsiniz. Bunu yapmak için İçerik düzenleyiciyi kullanarak bir blok alıntı oluşturun.
Ardından, bir blok alıntı için yerleşik metin modülleri ayarlarını kullanarak blok alıntıya stil verin.
Ardından içerik düzenleyiciye geri dönün ve metin sekmesine geçin. Ardından, blok alıntı etrafında biraz boşluk oluşturmak ve onu sola kaydırmak için blok alıntı etiketine bazı satır içi stiller ekleyin. Blok alıntı html'niz şöyle görünmelidir.
<blockquote style="margin: 0 15px 15px 0; float:left;">This is a <br> blockquote</blockquote>
Şimdi metin blok alıntının etrafına sarılacaktır.
Divi'deki Bir Metin Modülünün Yanında Bir Görüntü Modülünü Kaydırarak Bir Görüntünün Çevresine Metin Nasıl Kaydırılır
Metni bir görüntü modülünün etrafına sarmak için, tüm görüntü modülünü bir metin modülünün yanına kaydırabiliriz. Bu, yukarıdaki WordPress düzenleyicisini kullanmak için tercih edilen bir yöntem olabilir, çünkü bir görüntü etiketine satır içi stil veya harici css eklemek yerine Divi oluşturucu ayarlarını kullanarak görüntünüzün stili üzerinde tam kontrol sahibi olmanızı sağlar.
İşte nasıl yapılacağı.
Tek sütunlu bir satırla yeni bir normal bölüm oluşturun. Ardından, seçtiğiniz görüntünün bulunduğu satıra bir görüntü modülü ekleyin. Kullandığım resim Charity Layout Pack'ten ve 400 piksele 250 piksel.
Ardından, görüntü modülünün altına sahte metin içeriği olan bir metin modülü ekleyin.
Şimdi her iki modül de yerindeyken, resmi metin modülünün soluna kaydırmamız gerekiyor. Bunu yapmak için görüntü modülü ayarlarını açın ve Ana Öğeye aşağıdaki özel CSS'yi ekleyin:
float:left;
Ardından, görüntünün etrafına sarılmış metin için ihtiyacımız olan arabelleği oluşturmak için görüntünün özel kenar boşluğunu güncelleyin:
Özel Kenar Boşluğu: %2 üst, %2 alt, %2 sağ
İşte sonuç.
Ve görüntüyü sağa kaydırmak istiyorsanız, görüntü modülü ayarlarını açın ve css'yi aşağıdakiyle değiştirin:
float:right;
Ve kenar boşluğu aralığını aşağıdaki şekilde güncelleyin:
Özel Marj: %2 üst, 2$ alt, %2 sol
İşte sonuç.
Bu tasarımı birden çok sütunda kullanma
Hizmetlerinizi sergilemek için bir metin sarma tasarımı oluşturmak için bu kurulumu birden çok sütunda da kullanabilirsiniz. Bunu yapmak için satırınızın sütun düzenini iki sütun olarak değiştirin.
Ardından, farklı tarayıcı genişliklerine yanıt vermesi için görüntüye bir maksimum genişlik yüzdesi değeri verin.
Maks. Genişlik: %33,33 (masaüstü), %100 (telefon)
İlk sütundaki resim ve metin modülünü kopyalayın ve 2. sütuna yapıştırın. Ardından içeriği ve resimleri gerektiği gibi güncelleyin.
Bu kadar. İşte sonuç.
Eşsiz İki Sütunlu Düzen için Ortalanmış Bir Görüntünün veya Modülün Etrafına Metin Nasıl Sarılır
Bu örnekte, ortalanmış bir görüntü modülünün etrafına iki metin sütununun nasıl sarılacağını göstereceğim. Bu, benzersiz bir dergi veya gazete stili düzeni oluşturmanıza olanak tanır. Ancak, "float: center" css özelliği olmadığından, bu tasarımın çalışması için mizanpaj konusunda biraz yaratıcı olmamız gerekecek.
İşte nasıl yapılacağı.
Ortalanmış Bir Görüntü ile Üst Satır İçeriği 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 piksele 250 piksel boyutunda bir resim yükleyin. Bu tasarım için boyutlandırma tam olmalıdır.
Ardından tasarım ayarlarını aşağıdaki gibi güncelleyin:
Maksimum Genişlik: 400 piksel (masaüstü), %100 (tablet)
Modül Hizalaması: merkez
Özel Dolgu: %2 üst, %2 alt, %2 sol, %2 sağ
Ardından ayarlarınızı kaydedin ve satır ayarlarını açın. Sıranın alt dolgusunu çıkarın.
Özel Dolgu: 0px alt
İki Sütunlu Metin Satırını Oluşturun
Resmi içeren satırın altında, iki sütunlu düzende yeni bir satır oluşturun.
1. sütuna, sahte içerikli bir metin modülü ekleyin.
Ardından metin modülünü kopyalayın ve ikinci bir metin sütunu için 2. sütuna yapıştırın.
Floated Bölücüler ile Boş Alan Yaratmak
Görüntü için ihtiyacımız olan alanı oluşturmak için bölücü modülleri 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 onu sağa kaydıracağız, böylece metin modülümüz bölücünün etrafına sarılacaktır. Ardından sağ sütunda görüntünün yarısı büyüklüğünde başka bir bölücü oluşturacağız ve onu sola kaydıracağız.
Bunu yapmak için bir ayırıcı modül oluşturun ve bunu doğrudan sütun 1'deki metin modülünün üzerine yerleştirin.
Ardından, ayırıcı modül ayarlarını aşağıdaki gibi güncelleyin:
Bölücüyü Göster: HAYIR
Genişlik: 200 piksel
Yükseklik: 250 piksel
Yüksekliğin, daha önce oluşturduğunuz görüntünün yüksekliğiyle aynı olduğundan ve genişliğin görüntünün genişliğinin tam olarak yarısı olduğundan emin olun.
Mobil için tablet ve telefondaki ayırıcıları devre dışı bırakmak istiyoruz. Bunu yapmak için tablet ve telefon ekranını devre dışı bırakmak üzere görünürlük ayarlarını güncelleyin.
Artık ilk bölücümüz oluşturuldu, bölücü modülünü kopyalayın ve 2. sütundaki metin modülünün üzerine yapıştırın.
Ardından, bölücülerimizi yüzdürmemiz gerekiyor. Bunu yapmak için, 1. sütundaki ayırıcının ayarlarını açın ve ana öğeye aşağıdaki özel CSS'yi ekleyin:
float: right;
Ardından, 2. sütundaki bölücü modülün ayarlarını açın ve ana öğeye aşağıdaki özel CSS'yi ekleyin:
float: left;
Resmi Özel Kenar Boşluğu ile Yerine Taşıma
Şimdi tek yapmamız gereken ilk satırdaki imajımızı bölücülerimizle oluşturduğumuz alana sığacak şekilde aşağı çekmek.
Görüntü modülü ayarlarını açın ve aşağıdaki özel kenar boşluklarını ekleyin:
Özel kenar boşluğu: -250 piksel alt (masaüstü), 20 piksel (tablet)
İşte şimdiye kadarki sonuç.
Bölüme Başlık Eklemek
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 resmin üzerine yerleştirin.
Ardından aşağıdaki içeriği metin modülüne ekleyin:
<h2>Learn more about how to give</h2>
Ardından metin ayarlarını aşağıdaki gibi güncelleyin:
Arka Plan Rengi: #000000
Başlık 2 Yazı Tipi: Playfair Gösterimi
Başlık 2 Metin Hizalama: orta
başlık 2 Metin Rengi: #ffffff
Başlık 2 Çizgi Yüksekliği: 2em
Daha Temiz Metin Sarma Tasarımı için Metni Yasla
Metni resimlerin etrafına sararken, özellikle metin bu şekilde ortalanmışsa, çevreleyen metni iki yana yaslamak her zaman iyi bir fikirdir. Bu durumda tek yapmamız gereken, sarma metin içeriğimizi içeren her iki metin modülünü de haklı çıkarmak için metin yönünü değiştirmek.
Son sonuç
İşte nihai sonuç.
Ve işte tablet ve telefon ekranında.
Son düşünceler
Metni görüntülerin etrafına etkili bir şekilde nasıl saracağınızı bilmek, içeriğinizin gerçekten profesyonel ve okunması kolay görünmesini sağlayabilir. Konsept oldukça yalındır. Tek yapmanız gereken, resminizi sağa veya sola kaydırmak ve ardından arabellek için resmin etrafında özel boşluk bırakmak. Ve sevdiğim şey, Divi'deki her tür içeriğin etrafına metin sarmak için herhangi bir modülü (yalnızca görüntüleri değil) kaydırabilmenizdir. Umarım bu size bir sonraki projeniz için biraz ilham verir.
Yorumlarda sizden haber bekliyorum.
Şerefe!