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

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.

Citadela WordPress Tema ve Eklentilerini İndirin

Şimdi risksiz bir deneme sürümüyle başlayın. Kredi kartına gerek yok.

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ı

Klasik WordPress düzenleyicide bir görüntünün etrafına sarılmış metin
Görüntüyü saran pek hoş görünmeyen metin örneği

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.

Gutenberg Görüntüsü ve Paragraf Bloklarını kullanarak Metni Görüntünün etrafına sarın
Resmi yeniden boyutlandırın ve hizalamayı seçin

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

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

Şimdi başla

Şimdi risksiz bir deneme sürümüyle başlayın. Kredi kartına gerek yok.

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.

“+”ya tıklayarak Medya ve Metin bloğu ekleyin
“+” üzerine tıklayarak Medya ve Metin bloğu ekleme

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.

Eğik çizgi kullanarak Medya ve Metin bloğu ekleyin
Eğik çizgi “/” kullanarak ortam ve metin bloğu ekleme

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
Medya ve Metin bloğu yükleme seçenekleri
Sürükle ve bırak özelliğini kullanarak bir görseli ne kadar kolay yükleyebileceğinize bakın

İ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ğunun metin alanı
Metin alanında farklı içerik türleri ekleyebilirsiniz.

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ğunda görüntü hizalama
Resim ve metin hizalama örneği

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
Görüntü ve metin hizalamasının değiştirilmesi
Araç çubuğu simgelerine tıklayarak görüntü ve metin hizalamasını ve bunların konumunu değiştirebilirsiniz.

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

Arka plan rengi ayarları
Pürüzsüz arka plan rengi değişimi

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.

Görüntünün etrafına metin kaydırma WordPress için mobil işlevinde yığın
"Mobil cihazda yığınla" özelliğinin etkinleştirildiği mobil cihazda web sitesi önizlemesi

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.

Medya ve Metin bloğunda paragraf biçimlendirme
Metin için biçimlendirme seçenekleri

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.

“Büyük Harf” özelliği
"Gömme" işleviyle metni vurgulama

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.

Medya ve Metin bloğu için başlık seçenekleri
Başlık seçenekleri

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.

Medya ve Metin bloğundaki liste seçenekleri
Metin alanınızın seçeneklerini listeleyin

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.

Medya ve Metin bloğundaki düğme seçenekleri
Düğme stili için seçenekler

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.

Blok türleri arasında geçiş yapma
Medya ve Metin bloğunu başka bir bloğa dönüştürme

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

Paragraf bloğunu dönüştürme
Paragraf bloğunu diğerine dönüştürme

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; }
Metni özel CSS ile yasla
Özel kod kullanarak bloktaki metni iki yana yaslamanın yolu

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.

Citadela WordPress Tema ve Eklentilerini İndirin

Şimdi risksiz bir deneme sürümüyle başlayın. Kredi kartına gerek yok.

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.

19'nin “4 Ways to Wrap Text Around Image in WordPress” üzerine düşünceleri

  1. Genel olarak blok sistemini severim ama bir şeyi kaçırmadığım sürece bu geriye doğru bir adımdır. Şu anda sadece bir görüntüyü sola veya sağa kaydırmayı ve gerçekten yapılması çok kolay olması gerektiği gibi kaydırılacak metni almayı arıyorum, ancak WordPress bunun olmasını istemiyor gibi görünüyor. Neden? Medya ve görüntü bloğunu kullanmak, yalnızca metin doğru uzunluktaysa işe yarar. Örneğin, bunun gibi bir sayfa, metin görüntünün boyutu için tam olarak doğru uzunlukta değilse, paragraflar arasında tuhaf bir boşluk bırakılarak yeniden yapılmak istemez.

    http://www.thorntonincraven.co.uk/our-village/welcome-to-the-village/

    1. Selamlar,

      Geri bildiriminiz için çok teşekkürler. Kulağa çok iyi bir fikir gibi geliyor, bu nedenle sizden 4 basit soruyu yanıtlamamız için bize bir dakikanızı ayırmanızı istiyorum: https://aitthemes.typeform.com/to/vc7arn benzersiz özellikler daha hızlı.

      Zaman ayırdığınız ve anlayışınız için çok teşekkürler.

      Saygılarla!
      Zlatko
      AİT ekibi

    2. Evet, kaydırılacak metin bulamıyorum. Bu metin bloğu kombinasyonları işe yaramaz gibi görünüyor.

  2. Bu fikir, bir bloga resim eklemenin tek yolu olarak berbat - Metnin güzelce sarılmasını sağlayamıyorum ve ne yaparsam yapayım aynı boyutta değil. BELİRLİ durumlar için iyi bir fikir ama her şey için değil. Bazen, resim hakkında bir şey söylemek yerine, sadece etrafını saran paragraflarla bir resim istersiniz.

  3. Sarmalayıcı nasıl eklenir ve içerik tam genişlikte yar nasıl kullanılır cidden nasıl tam kapatılır ve sonra içine kap alınır .. oluşturucu çok kafa karıştırıcı, kapsayıcı sarma nasıl eklenir çok kötü editör yar

  4. Selamlar,

    iltifatların için teşekkürler Çekici ve faydalı gönderiler yazmak için birçok yararlı ipucu bulacağınız https://www.ait-themes.club/blog/ blog sayfamıza göz atmaktan çekinmeyin.

    Saygılarla!
    Zlatko
    AİT ekibi

  5. Merhaba Abdur,

    Geri bildiriminiz için çok teşekkür ederiz, ekibimiz tarafından çok takdir edilmektedir!

    Saygılarımla.
    Zlatko
    AİT ekibi

  6. Bu konudaki diğer birkaç kişiyle aynı zorluğu yaşıyorum. Geçmişte, resimlerin ve biyografilerin olduğu "hakkımızda" sayfamızdaki gibi bir resmin etrafına metni kolayca sarabiliyordum. belki de eski editörü kullanıyordum. hatırlamıyorum ancak şimdi sitemizi yeni resimler ve biyografilerle güncellemeye çalışıyorum ve önceki biyografi/resim kombinasyonlarımızda olduğu gibi metni kolayca kaydırmanın bir yolunu bulamadım. Klasik düzenleyiciye geçmeye çalıştım, ancak site beni "yeni blok düzenleyici" bölümlerim olduğu konusunda uyardı ve daha yeni düzenleme modunda kalmam gerekiyordu. yeni biyografilerimizin ve resimlerimizin önceki gönderilerimiz gibi görünmesini nasıl sağlayacağımızı söyleyebilir misiniz? Teşekkürler.

    1. Selam,

      Gutenberg'i devre dışı bırakmak ve klasik WordPress editörüyle devam etmek istiyorsanız, lütfen WordPress çekirdek ekibi tarafından "Klasik Editör Eklentisi" ile yapmanıza izin veren bir eklenti düşünün.

      Saygılarımla!
      Zlatko
      AİT ekibi

  7. Resmin etrafını saran basit bir metin isteyenler için, bunu Klasik Metin Bloğu'nu ekleyerek yapabilirsiniz (Gözat'a tıkladığınızda Blokların ilk bölümüne dayalıdır. Klasik düzenleyiciyi tek bir blokta kullanırsınız ve evet , bu, bir resim eklemenize ve ardından kaydırma seçeneğini belirlemenize olanak tanır. Sorun çözüldü 🙂

    1. TEŞEKKÜRLER Londra SEO Guy!!! Basit bir çözüm ama gözden kaçırmıştım!

    2. Ve sonra… sadece Bloklara Dönüştür seçeneğini kullanın.
      Bu işe yaradığından, Blok Düzenleyici bu yeteneğe sahiptir ancak nasıl düzgün şekilde kurulacağını bulamıyor. Bu arada bu şekerleme işe yarıyor.

  8. Burada da aynı sorun var. Bu yeni sürüm korkunç; yalnızca kırpmak istemediğiniz sürece, metni düzgün bir şekilde sarmanın ve hatta fotoğrafı küçültmenin hiçbir yolu yok.

  9. Metnimi WordPress blok düzenleyicide bir resmin etrafına sarabiliyorum. Tam da "Önizleme"de görünmesini istediğim gibi görünüyor. Ancak, blogumu yayınladığımda ve WordPress bunu takipçilerime e-postayla gönderdiğinde, bunu üstte resim ve resmin altında metin olacak şekilde alıyorlar. Bu sadece küçük cep telefonlarında değil, masaüstü bilgisayarlarda da oluyor. Sarılmasını istiyorum, istiflenmesini değil.

    1. Selamlar,

      Yazdığınız için teşekkürler. Blok, beklediğiniz gibi metni WordPress'te görüntünün etrafına sarmaz. Lütfen yararlı bulabileceğiniz için aşağıdaki talimatlara bir göz atın: https://motopress.com/blog/how-to-wrap-text-around-images-in-gutenberg/

      Saygılarımla!
      Zlatko
      AİT ekibi

      1. Bunların hepsini yapıyorum ve blogum Önizleme'de mükemmel bir şekilde tamamlanıyor. Yayınladığımda, blog sayfamda harika görünüyor. Ancak WordPress bunu takipçilerime e-postayla gönderdiğinde ve onlar bu e-postayı açtıklarında, paketlendiğini görmezler. Fotoğraflar metnin üstündedir. Çok profesyonelce görünmüyor. Eski Klasik Editör'de bu sorunu hiç yaşamadım. Artık Blok Düzenleyiciyi kullanıyorum, tıklanacak bir Klasik seçeneği olmasına rağmen Klasik Düzenleyiciye geri dönmeme izin vermiyor.

        1. Selamlar,

          Yazdığınız için teşekkürler.
          Bilgi bankamızı ve/veya belgelerimizi video eğitimlerle kontrol etmenizi rica ediyoruz:
          https://www.ait-themes.club/ait-themes-documentation/
          Ya da teknik sorularınızı doğrudan özel destek bileti sistemimize göndermekten çekinmeyin. Lütfen https://system.ait-themes.club/support/add-question adresinden hesabınıza giriş yapın.
          Müşteri Desteği, çalışma günlerinde Orta Avrupa Saati ile sabah 8'den akşam 5'e kadar sağlanır.

          Ek olarak, önceki editörü kullanmanıza izin veren bir eklenti var. “Klasik editör”ü kurmalı ve etkinleştirmelisiniz.

          Samimi olarak!
          Zlatko
          AİT ekibi

  10. Bunlara katılmıyorum, bu klasik düzenlemeden daha üstün çünkü seçenekler daha sınırlı. Farklı yazı tipleri kullandığı ve bir metin bloğundan daha geniş olduğu için bu bloğun görsel olarak sarsıcı olduğunu düşünüyorum. Aynı yazı tipini, boyutunu ve kenar boşluğu ayarlarını korurken metni bir görüntünün etrafına düzgün bir şekilde sarabilmek, bir dergi sayfasının profesyonelliğini getirir. Bu, wordpress'in bu versiyonuyla neden derinden hayal kırıklığına uğradığımın sadece bir örneği.

    1. Merhaba Terence

      Fikrin için teşekkür ederim. Citadela deneme sürümümüzü denediniz mi? Metin ve resimleri ayarlamanıza yardımcı olabilecek bazı benzersiz bloklarımız var. Her neyse, tam sürümü test edebilirsiniz - tüm özellikler, ücretsiz.

      İyi günler.

Yoruma kapalı.