4 způsoby obtékání textu kolem obrázku ve WordPressu

Potřebujete elegantně umístit text kolem obrázku? Naučte se, jak to snadno udělat bez zkušeností s kódováním a designem. Editor Gutenberg přináší ve WordPressu více možností obtékání textu kolem obrázku.

Můžete tak dosáhnout dobře vypadajícího webu a zároveň snadné editace obsahu. Výběrem editoru Gutenberg pro svůj web WordPress získáte z dlouhodobého hlediska nejlepší nástroj. Budete mít více možností, jak různě obtékat text kolem obrázků. Gutenberg přináší mnoho výhod, jako je přehlednější zdrojový kód webu, rychlost, bezpečnost a použitelnost.

Jak obtékat text kolem obrázku ve WordPressu?

Díky editoru Gutenberg a blokům je obsah webu lehčí, modernější a snadno čitelný. Ukážeme vám také další způsoby, jak obtékat text kolem obrázku v typech WordPress Pages, Post a Custom Post. Existují různé bloky a můžete je použít i v kombinaci, jako sadu částí a funkcí, které vám poskytnou další možnosti obtékání.

Blok pro obalený text kolem obrázku můžete vybrat podle podstránky a typu jejího obsahu. Jeden styl můžete zvolit pro prezentační stránku a jiný pro příspěvek na blogu. Zvažte také druh obsahu, který obrázek představuje. Jedná se o popisný obrázek, nebo spíše o reprezentativní či prodejní médium?

Obtékání textu kolem obrázku - blokování výběru

K obtékání bloku textu kolem obrázku můžete použít 4 bloky. Všechny si je popíšeme:

• Blok obrázků a blok odstavců najdete níže
• Blok Média a text najdete níže
• Blok sloupců v jednotlivých příspěvcích
• Clusterový blok v jednotlivých příspěvcích (funkce je k dispozici pouze s Zásuvný modul Citadela Pro)

Obalení textu a obrázku pro lepší zážitek ze čtení

Existuje několik důvodů, proč byste měli tento blok používat. Nejvíce ho oceníte, pokud píšete příspěvky na blog. Obrázky jsou nedílnou součástí příběhu. Nezáleží na tom, jestli píšete cestovatelský blog nebo magazín o novinkách v IT. Proto při přidávání fotografií uvnitř obsahu myslete na zarovnání obrázků. Čtenáři budou moci lépe pochopit, o čem píšete.

V mnoha případech je nutné vložit obrázek a text vedle sebe. Co je důležité?

• Musí to dávat smysl. Obrázek musí být vedle správného textu.
• Musí být pěkně zarovnaná.
• Musí se hodit k celému rozvržení webu.

Bloky obrázků a odstavců

Zatímco v Klasický editor můžete také umístit text vedle obrázku, o pěkném zarovnání se nedá mluvit. Zvláště pokud byl obrázek malý a vedle něj jste umístili více textu. Text obrázek překrýval a nevypadalo to hezky.

Editor Gutenberg a jeho blok Image přináší skvělou funkci - změnu velikosti obrázku. Přetažením bodů kolem obrázku automaticky změníte jeho velikost a zarovnání textu.

Blok Média a text - zarovnání textu ve WordPressu vedle obrázku

• Obtékání textu a obrázků pomocí bloku Média a text
• Jak přidat blok Média a text v editoru
• Jak tento blok funguje
• Nastavení bloku Média a text
• Co znamená "Stack v mobilu" průměr
• Bonus: Jak ospravedlnit text ve WordPressu

Jak zarovnat text vedle obrázku?

Blok Média a text je fantastická funkce. Blok Media & Text tento problém řeší a zajišťuje dokonalé zarovnání textu k obrázku bez narušení kompozice a rozvržení. To je důvod, proč byste měli tento blok používat.

Zlepšuje také design webových stránek na mobilních zařízeních. Tento obalový blok pomáhá tématu WordPress pokrýt různá mobilní rozložení. Na chytrém telefonu musí být každá část webu dobře viditelná a čitelná. Jak bude blok Média a text vypadat na mobilních telefonech a tabulka zvládá funkci "Stack on mobile", na kterou se podíváme níže.

V krátké době budete moci používat blok Média a text v našem novém tématu WordPressu s názvem Citadela. Více informací o tématu Citadela se dozvíte v samostatném článku.

Jak přidat blok Média a text v editoru bloků?

Přidání bloku Média a text je stejně snadné jako přidání jakéhokoli jiného bloku. Jedná se o základní blok, což znamená, že nemusíte nic stahovat ani instalovat.

Pomocí ikony "+" na horním panelu nebo kdekoli v editoru a výběrem bloku Média a text.

Poslední možností je zadat "/" a poté napsat "media". WordPress vám automaticky zobrazí vybrané bloky odpovídající tomu, co jste hledali.

Jak funguje blok Média a text?

Blok Média a text v podstatě seskupuje 2 různé typy obsahu do jednoho. První z nich je médium, např. obrázek nebo video, které můžete přidat prostřednictvím:

• Nahrát
• Knihovna médií
• Přetažení a upuštění

Druhým je prostor pro textový obsah. Můžete sem psát odstavce textu, seznamy odrážek nebo nadpisy. Můžete tam také přidat Blok tlačítek o kterém jsme mluvili dříve.

Blok Média a text vždy zarovná obrázek a text vedle sebe bez ohledu na to, kolik textu napíšete. Jak to funguje? Obrázek se automaticky přizpůsobí na základě výšky obsahu ve sloupci s textem.

Nastavení médií a textových bloků

Obecná nastavení bloku

1. Horní panel nástrojů

Panel nástrojů nad blokem nabízí několik možností. Pokud to vaše aktivní téma podporuje, můžete blok Média a text nastavit na šířku nebo na celou šířku. Kliknutím můžete také zvolit, kam chcete umístit obrázek nebo video:

• Zobrazit média vlevo
• Zobrazit média vpravo

Na horním panelu nástrojů je také ikona pro úpravu média, kde můžete nastavit Alt Text, Nadpis, Titulek nebo Popis. Více informací o úpravách obrázků najdete v našem článku Práce s blokem obrázků WordPress.

2. Pravý postranní panel

Pravý postranní panel nabízí další nastavení pro blok Média a text. Je zde možné přidat alternativní text, nastavit barvu pozadí nebo přidat další třídu CSS. Můžete zde také povolit funkci "Stack on mobile".

Co je Stack v mobilu?

Díky této funkci se obrázek a text pěkně zobrazí na mobilních zařízeních. Pokud funkci "Stack on mobile" zakážete, obrázek a text zůstanou vedle sebe a v responzivní verzi budou špatně čitelné.

Pokud tuto funkci povolíte, bude se v mobilním telefonu obsah na levé straně zobrazovat nad obsahem na pravé straně.

Zarovnání textu

Součástí bloku Média a text je spolu s obrázkem nebo videem také textový obsah. Může se jednat o jeden z následujících typů obsahu:

1. Odstavec

Na horním panelu nástrojů můžete nastavit zarovnání textu, zarovnat text tučně, kurzívou nebo přidat odkaz na URL.

V postranním panelu na pravé straně můžete zvolit velikost písma, barvu písma nebo barvu odstavce. Zajímavou funkcí je "Drop Cap", která zvýrazní první znak textu. Je to pěkná funkce v blokových příspěvcích, která zpestří text.

2. Záhlaví

Nadpis je velmi podobný odstavci. Můžete také nastavit jeho vzhled, nastavit tučné písmo nebo kurzívu a vložit odkaz URL. Rozdíl je v tom, že si můžete vybrat typ nadpisu - H2, H3, H4.

Další velikosti nadpisů a nastavení zarovnání jsou k dispozici v postranním panelu na pravé straně.

3. Seznam

Pokud do obsahu přidáte blok Seznam, mohou to být body s odrážkami, číslovaný seznam nebo víceúrovňový seznam. Text můžete také ztučnit, napsat kurzívou a přidat odkaz URL.

4. Blok tlačítek

Tento blok, který přidává tlačítko k obsahu, lze přizpůsobit designu webových stránek. Barvu a styl tlačítka nebo barvu pozadí lze nastavit v postranním panelu na pravé straně.

Nezapomeňte si přečíst článek o Blok tlačítek. 

Přepínání mezi typy bloků

V bloku Média a text je možné převést jeden typ bloku obsahu na jiný. Blok Media & Text můžete také změnit na blok Obrázek a textová část bude odstraněna.

V textovém obsahu je možné změnit blok Odstavec na blok Nadpis nebo Seznam.

Bonus: Jak ospravedlnit text ve WordPressu

Používání odůvodněného textu má svá pozitiva i negativa. S odůvodněným textem se obvykle setkáte v knihách nebo novinách, ale na webových stránkách se již nepoužívá. Proč?

Před několika lety byla funkce Justify integrována přímo do editoru WordPress Classic. Odůvodněný text způsoboval problémy s viditelností v různých prohlížečích nebo mobilních zařízeních. S tím souvisela i obtížná čitelnost ospravedlněného textu. Tato funkce byla proto zastaralá a odstraněná.

Tato konkrétní funkce neexistuje ani v novém blokovém editoru (Gutenberg).

Jak tedy zdůvodníte text, pokud opravdu chcete?

Řešením je přidání jednoduchého kódu CSS v několika krocích:

1. V postranním panelu na pravé straně je nastavení pro Další třídu CSS bloku Odstavec.
2. Napište tam název třídy "ospravedlnit"
3. Zveřejnit stránku nebo článek
4. Pokud ji zobrazíte, klikněte na Přizpůsobit na hlavním horním panelu.
5. Na levé straně je nový postranní panel s nastavením.
6. Klikněte na Další CSS
7. Vložte následující kód CCS:

p.justify {
    text-align: justify;
}

Hotovo. Od této chvíle je text v bloku Média a text ospravedlněný.

Díky editoru Gutenberg se WordPress stal použitelnějším i bez editorů stránek třetích stran. Z dlouhodobého hlediska a při vytváření nebo redesignu webu má pro váš web vynikající hodnotu. Bloky Gutenberg poskytují velkou škálu stylů, jakkoli by vám mohly přijít vhod Kód WordPress pro obtékání textu kolem obrázků.

Jaký je váš názor na blok Media & Text? Používáte ho? Jak se vám s ním pracuje? Dejte nám vědět v komentářích níže.