WordPress'te Resmin Çevresine Metni Sarmanın 4 Yolu

Resmin etrafına zarif bir şekilde metin yerleştirmeniz mi gerekiyor? Kodlama ve tasarım deneyimi olmadan bunu nasıl kolayca yapacağınızı öğrenin. Gutenberg editörü, WordPress'te metni metnin etrafına sarmak için daha fazla seçenek sunar.

Aynı anda iyi görünen bir web sitesi ve kolay bir içerik düzenleme rutini elde edebilirsiniz. WordPress web siteniz için Gutenberg editörünü seçmek, size uzun vadeli bir bakış açısıyla en iyi aracı sunar. Metni resimlerin etrafına farklı şekilde sarmak için daha fazla seçeneğiniz olacak. Gutenberg, web sitesinin daha net kaynak kodu, hız, güvenlik ve kullanılabilirlik gibi birçok avantajı beraberinde getiriyor.

WordPress'te görüntünün etrafına metin nasıl sarılır?

Gutenberg editörü ve blokları, web sitesi içeriğini daha hafif, modern ve zahmetsizce okunabilir hale getirir. WordPress Sayfaları, Gönderi ve Özel Gönderi türlerinde de görüntünün etrafına metin sarmanın daha fazla yolunu gösteriyoruz. Farklı bloklar vardır ve bunları, size kaplama için ek seçenekler sunan bir dizi parça ve özellik olarak kombinasyon halinde de kullanabilirsiniz.

Alt sayfaya ve içerik türüne göre görüntünün etrafına sarılmış metin bloğunu seçebilirsiniz. Sunum sayfası için bir stil ve blog yazısı için başka bir stil seçebilirsiniz. Ayrıca, görseli temsil eden içeriğin türünü de göz önünde bulundurun. Bir açıklama resmi mi yoksa daha temsili veya satış medyası mı?

Metni Resmin Çevresine Kaydır – Seçimi Bloklar

Bir metin bloğunu bir görüntünün etrafına sarmak için kullanabileceğiniz 4 blok vardır. Hepsini açıklıyoruz:

• Resim bloğu ve Paragraf bloğu aşağıda daha fazlasını bulabilirsiniz
• Medya ve Metin bloğu aşağıda daha fazlasını bulabilirsiniz
• Sütun bloğu bireysel gönderide
• Küme bloğu bireysel gönderide (özellik yalnızca Citadela Pro eklentisi)

Daha iyi okuma deneyimi için metni ve resmi kaydırın

Bu bloğu kullanmanızın birkaç nedeni var. Blog gönderileri yazıyorsanız, bunu en çok takdir edeceksiniz. Görüntüler hikayenin ayrılmaz bir parçasıdır. Bilişim haberleriyle ilgili seyahat blogu veya dergi yazmanız fark etmez. Bu nedenle, içeriğinize fotoğraf eklerken görüntü hizalamayı düşünün. Okuyucular, ne hakkında yazdığınızı daha iyi anlayabileceklerdir.

Çoğu durumda resim ve metni yan yana eklemek gerekir. Önemli olan ne?

• Mantıklı olmalı. Resim sağ metnin yanında olmalıdır.
• Güzelce hizalanması gerekiyor.
• Tüm web sitesi düzenine uyması gerekir.

Resim ve Paragraf blokları

içindeyken Klasik editör resmin yanına yazı da koyabilirsiniz, güzel hizalamadan söz edemezsiniz. Özellikle resim küçükse ve yanına daha fazla metin koyarsanız. Metin, görüntünün üzerini kaplamış ve hoş görünmüyordu.

Gutenberg editörü ve Görüntü bloğu harika bir özellik getiriyor - görüntü yeniden boyutlandırma. Boyutunu ve metin hizalamasını otomatik olarak değiştirmek için görüntünün etrafındaki noktaları sürükleyin.

Medya ve Metin bloğu – WordPress metni görüntünün yanına hizalar

• Medya ve Metin bloğu ile metin ve resimleri kaydırma
• Düzenleyicide Medya ve Metin bloğu nasıl eklenir
• Bu blok nasıl çalışır?
• Medya ve Metin bloğu ayarları
• Nedir "Mobil cihazda yığın” Anlam
• Bonus: WordPress'te metin nasıl yaslanır?

Resmin yanındaki metin nasıl hizalanır?

Medya ve Metin bloğu harika bir özelliktir. Medya ve Metin bloğu bu sorunu çözer ve kompozisyon ve düzen bozulmadan metnin görüntüyle mükemmel şekilde hizalanmasını sağlar. Bu bloğu kullanmanızın nedeni budur.

Mobil cihazlarda da web sitesi tasarımını geliştirir. Bu kaydırma bloğu, WordPress temasının farklı mobil düzenleri kapsamasına yardımcı olur. Akıllı telefonda, web sitesinin her bölümü net bir şekilde görünür ve okunabilir olmalıdır. Medya ve Metin bloğu cep telefonlarında nasıl görünecek ve aşağıda inceleyeceğimiz “Mobilde yığın” işlevini masa işliyor.

Kısa bir süre içinde Medya ve Metin bloğunu Citadela adlı yeni WordPress temamızda kullanabileceksiniz. Ayrı bir makalede Citadela teması hakkında daha fazla bilgi edinin.

Blok düzenleyicide Medya ve Metin bloğu nasıl eklenir?

Medya ve Metin bloğu eklemek, başka herhangi bir blok eklemek kadar kolaydır. Bu, herhangi bir şey indirmeniz veya yüklemeniz gerekmediği anlamına gelen bir çekirdek bloktur.

Üst paneldeki "+" simgesini veya düzenleyicide herhangi bir yeri kullanarak ve Medya ve Metin bloğunu seçerek.

Son seçenek ise “/” yazıp ardından “media” yazmaktır. WordPress, aradığınızla eşleşen seçili blokları otomatik olarak gösterir.

Medya ve Metin bloğu nasıl çalışır?

Medya ve Metin bloğu temel olarak 2 farklı içerik türünü bir araya toplar. İlki ortamdır, örneğin şu yollarla ekleyebileceğiniz resim veya video:

• Yüklemek
• Medya kütüphanesi
• Sürükle bırak

İkincisi, metin içeriği için alan. Oraya metin paragrafları, madde imli listeler veya başlık yazabilirsiniz. oraya da ekleyebilirsiniz düğme bloğu daha önce bahsettiğimiz.

Medya ve Metin bloğu, ne kadar metin yazarsanız yazın, görseli ve metni her zaman yan yana hizalar. O nasıl çalışır? Görüntü, metin sütunundaki içerik yüksekliğine göre kendini otomatik olarak ayarlar.

Medya ve Metin Bloğu ayarları

Genel blok ayarları

1. Üst araç çubuğu

Bloğun üzerindeki araç çubuğu çeşitli seçenekler sunar. Aktif temanız bunu destekliyorsa Media & Text bloğunu geniş veya tam genişlik olarak ayarlayabilirsiniz. Ayrıca aşağıdakilere tıklayarak resim veya videoyu nereye yerleştirmek istediğinizi de seçebilirsiniz:

• Medyayı solda göster
• Medyayı sağda göster

Üst araç çubuğunda ayrıca Alternatif Metin, Başlık, Resim Yazısı veya Açıklama ayarlayabileceğiniz ortamı düzenlemek için bir simge vardır. Makalemizde görüntüleri düzenleme hakkında daha fazla bilgi edinin. WordPress Görüntü bloğu ile çalışma.

2. Sağ kenar çubuğu

Sağ kenar çubuğu, Medya ve Metin bloğu için ek ayar sunar. Buraya Alternatif metin eklemek, arka plan rengini ayarlamak veya Ek CSS Sınıfı eklemek mümkündür. Orada "Mobilde Yığınla" işlevini de etkinleştirebilirsiniz.

Mobil cihazlarda Stack nedir?

Bu işlev sayesinde görüntü ve metin mobil cihazlarda güzel bir şekilde görüntülenir. "Mobilde yığınla" özelliğini devre dışı bırakırsanız, resim ve metin yan yana kalacak ve duyarlı sürümde zorlukla okunacaktır.

Bu işlevi etkinleştirirseniz, cep telefonunda sol taraftaki içerik, sağ taraftaki içeriğin üzerinde görüntülenecektir.

Metin hizalama

Medya ve Metin bloğunun bir kısmı resim veya video ile birlikte metin içeriğidir. Aşağıdaki içerik türlerinden biri olabilir:

1. Paragraf

Üst araç çubuğunda metin hizalamasını ayarlayabilir, metni kalın, italik yapabilir veya URL bağlantısı ekleyebilirsiniz.

Sağ taraftaki kenar çubuğunda yazı tipi boyutunu, yazı tipi rengini veya paragraf rengini seçebilirsiniz. İlginç özellik, metnin ilk karakterini vurgulayacak olan “Drop Cap”. Metni daha ilginç hale getirmek için blok gönderilerde güzel bir özellik.

2. Başlık

Başlık, Paragrafa çok benzer. Ayrıca görünümünü yapılandırabilir, kalın veya italik yapabilir ve URL bağlantısı ekleyebilirsiniz. Fark, başlık türünü seçebilmenizdir - H2, H3, H4.

Diğer başlık boyutları ve hizalama ayarları sağ taraftaki kenar çubuğunda mevcuttur.

3. Liste

İçeriğinize Liste bloğu eklerseniz, madde işaretleri, numaralı liste veya çok düzeyli liste olabilir. Ayrıca metni kalın, italik yapabilir ve URL bağlantısı ekleyebilirsiniz.

4. Düğme bloğu

İçeriğe düğme ekleyen bu blok, web sitesi tasarımına göre ayarlanabilir. Düğme rengi ve stili veya arka plan rengi, sağ taraftaki kenar çubuğunda yapılandırılabilir.

hakkında makaleyi okumayı unutmayın düğme bloğu. 

Blok türleri arasında geçiş yapma

Medya ve Metin bloğunda, bir içerik bloğu tipini diğerine dönüştürmek mümkündür. Ayrıca Medya ve Metin bloğunu Resim bloğu olarak değiştirebilirsiniz ve metin kısmı silinir.

Metin içeriğinde Paragraf bloğunu Başlık veya Liste bloğu olarak değiştirmek mümkündür.

Bonus: WordPress'te metin nasıl yaslanır?

Yaslanmış metin kullanmanın olumlu ve olumsuz yanları vardır. Yaslanmış metin genellikle kitaplarda veya gazetelerde bulunur, ancak artık web sitelerinde kullanılmamaktadır. Neden?

Birkaç yıl önce, Justify işlevi doğrudan WordPress Classic düzenleyicisinin içine entegre edildi. Çeşitli tarayıcılarda veya mobil cihazlarda görünürlük sorunlarına neden olmak için kullanılan gerekçeli metin. Yaslanmış metnin zor okunabilirliği ile de ilgilidir. Bu işlev bu nedenle kullanımdan kaldırıldı ve kaldırıldı.

Bu özel işlevsellik, yeni blok (Gutenberg) editöründe de mevcut değildir.

Öyleyse, gerçekten istiyorsanız metni nasıl haklı çıkarırsınız?

Çözüm, birkaç adımda basit CSS kodu eklemektir:

1. Sağ taraftaki kenar çubuğunda Ek CSS Paragraf Sınıfı bloğu için bir ayar var
2. Oraya sınıf adını yazın „savunmak“
3. Sayfa veya makale yayınlayın
4. Önizlerseniz, ana üst çubukta Özelleştir'i tıklayın.
5. Sol tarafta, ayarları içeren yeni bir kenar çubuğu var.
6. Ek CSS'ye tıklayın
7. Aşağıdaki CCS kodunu girin:

p.justify { text-align: justify; }

Tamamlamak. Artık Medya ve Metin Bloğunuzdaki metinler doğrulanmış durumda.

Gutenberg editörü sayesinde WordPress, üçüncü taraf sayfa oluşturucular olmadan daha kullanışlı hale geldi. Uzun vadeli bir bakış açısından ve bir web sitesi oluştururken veya yeniden tasarlarken web siteniz için mükemmel bir değere sahiptir. Gutenberg blokları, elinizin altında bulabileceğiniz geniş bir stil yelpazesi sunar. Resimlerin etrafına metin sarmak için WordPress kodu.

Medya ve Metin bloğu ile ilgili görüşünüz nedir? Zaten kullandın mı? Onunla çalışmayı nasıl seversin? Aşağıdaki yorumlarda bize bildirin.