Jak vytvořit sloupce ve WordPressu bez pluginu

Jak vytvořit sloupce ve WordPressu bez pluginu

Uspořádání obsahu do sloupců je díky bloku Sloupce ve WordPressu hračka. Tento blok patří k základním blokům, které lze použít v každém tématu WP. Blok Sloupce může mít až 6 sloupců. Můžete tedy mít vedle sebe 6 různých obsahů.

Dnes si ukážeme, jak vytvořit sloupce ve WordPressu bez pluginu - pomocí bloku Sloupce. Přinášíme vám také shrnutí nejnovější funkce z verze WP 5.3 aktualizace.

V tomto kurzu najdete informace o:

Jaký je účel sloupců

Sloupce na webových stránkách mohou mít více aplikací. Především mohou zajistit přehlednost, čitelnost a snadnější prohlížení obsahu. Uspořádáním obsahu do sloupců můžete zvýraznit důležité informace nebo parametry.

K prezentaci svých služeb můžete například použít vícesloupcové rozvržení. Přidejte tam ilustrační obrázek, popis nebo tlačítko. Obrázek můžete samozřejmě udělat klikací.

Vícesloupcové rozvržení se službami
Vícesloupcové rozvržení se službami

Podobně jako u služeb můžete ve WordPressu používat sloupce pro zobrazení produktů nebo kategorií produktů. Je to ideální, pokud máte jednoduchý firemní web.

Vícesloupcové rozvržení s produkty a kategoriemi
Sloupce pro zobrazení produktů a kategorií

V příspěvcích na blogu můžete použít sloupce k oddělení obsahu. Text, odrážky nebo obrázky můžete umístit vedle sebe.

Oddělený obsah pomocí sloupců
Použití sloupců k oddělení obsahu

Jak sloupce fungovaly ve starém editoru

Pokud jste před WordPressem 5+ chtěli vytvořit vícesloupcový obsah, museli jste použít tabulky. Bylo to mnohem obtížnější než v nejnovějším editoru. Navíc byl obvykle problém se styly a zobrazením tabulek na mobilních zařízeních. Jak to fungovalo dříve?

Měli jste více možností, jak vytvořit sloupce na webových stránkách WordPress:

1. Ruční vložení kódu HTML do textového editoru

<table>
  <tr>
    <td></td>
    <td></td>
  </tr>
</table>

Tento přístup používali především vývojáři, kteří mohli rychle vytvořit tabulku nebo sloupec na základě svých požadavků. Nevýhodou bylo, že ne všechna témata WordPressu uměla dobře pracovat se sloupci. Tabulky obvykle nebyly dokonalé a běžný uživatel nemohl snadno vyřešit všechny možné problémy.

2. Povolení tabulek v editoru WordPress

Protože WordPress používal editor TinyMCE, bylo možné povolit funkce pro úpravu tabulek. Pokud máte zájem dozvědět se více, můžete najít všechny podrobnosti v tomto fóru. Pokud totéž uděláte pro naše témata AIT, budou tabulky fungovat správně.

3. Použití prvku Columns v tématech AIT

Pokud používáte některý z našich starších motivů WordPressu, určitě znáte náš prvek Sloupce. Tento prvek lze použít k přidání sloupců uvnitř stránek. Jedná se o objednatelný prvek, to znamená, že jej můžete umístit kamkoli potřebujete. Výhodou je jeho variabilita uvnitř stránek.

Prvek Sloupce
Objednatelný prvek Sloupce - můžete jej použít v libovolném tématu AIT

4. Stáhněte si plugin třetí strany pro správu tabulek

Dalším řešením, jak vytvořit sloupce v příspěvcích a stránkách WordPressu, bylo stažení jednoho z dostupných pluginů pro vytváření tabulek. Tyto pluginy umožňují přidávat sloupce/tabulky pomocí několika kliknutí bez jakéhokoli kódování. Toho mohli využít i méně zkušení uživatelé.

Jak vytvořit sloupce ve WordPressu bez pluginu (v editoru bloků)

Díky novému editoru bloků je vytváření sloupců velmi snadné. Pokud stále používáte starý WordPress, je nyní ten správný čas na aktualizaci na nejnovější verzi. Pomocí bloku Sloupce budete moci jednoduše přidávat a spravovat sloupce na několik kliknutí.

Tento blok je vítanou změnou pro všechny, kteří chtějí pracovat s vícesloupcovým obsahem, prezentovat produkty nebo psát blog a nemají zkušenosti s programováním.

Podívejme se, jak přidat blok Sloupce a jak vytvořit sloupce ve WordPressu bez pluginu:

  • První možností je kliknout na "+" v horní liště a vybrat blok Sloupce z dostupných bloků.
  • Druhou možností je kliknout na "+" kdekoli v editoru.
Přidání sloupců ve WordPressu kliknutím na "+"
Přidání sloupců ve WordPressu kliknutím na "+"
Přidání bloku Sloupce s lomítkem "/"
Přidávání sloupců ve WordPressu pomocí lomítka "/"

Předdefinované rozvržení bloku Sloupce WordPress (NOVINKA z WP 5.3)

Nejnovější verze přinesla obrovská vylepšení v nastavení sloupců. Především jsou k dispozici výchozí styly rozvržení. Co to znamená?

Uživatelé si mohou při přidávání nového bloku do oblasti obsahu zvolit rozvržení a styl zarovnání. Předdefinovaná rozložení mohou být velmi užitečná - zejména pro uživatele, kteří nemají pokročilé znalosti WordPressu. Tato funkce představuje způsob, jakým si představujeme vytváření sloupců ve WordPressu (bez zásuvného modulu nebo jiného doplňku).

Předdefinovaná rozložení v bloku Sloupce
Předdefinované možnosti rozvržení

 

Pokud nechcete zvolit předdefinované rozvržení v bloku Sloupce WordPressu, jednoduše jej přeskočte. Po přeskočení tohoto kroku bude obsah rozdělen do dvou stejných částí/dvou samostatných sloupců, které lze upravovat.

Vytvořený blok Sloupce
Blok Sloupce se 2 výchozími oblastmi (sloupci), které můžete upravovat.

Základní nastavení bloku sloupců

Samotný blok Sloupce WordPressu nemá mnoho možností. Proč tomu tak je, si vysvětlíme později. V horní liště můžete změnit zarovnání na šířku nebo na celou šířku. Toto zarovnání můžete změnit, pokud to podporuje vaše aktivní téma.

Horní panel nástrojů bloku Sloupce
Horní panel nástrojů s možnostmi zarovnání

Nejdůležitějším nastavením bloku Sloupce je počet sloupců v postranním panelu inspektoru na pravé straně. Ve výchozím nastavení jsou zde 2 sloupce, ale tento počet můžete zvýšit až na 6. Můžete jej změnit pomocí myši nebo zadáním čísla. Jak to bude vypadat, uvidíte ihned po zvýšení nebo snížení počtu sloupců. Blok se sám dynamicky mění v závislosti na posuvníku.

Změna počtu sloupců
Posouváním posuvníku můžete měnit počet sloupců podle potřeby.

Je to velmi praktické, protože počet sloupců změníte doslova během několika sekund, aniž byste museli složitě měnit nastavení nebo kódování.

Podobně jako do jiných bloků v editoru WordPressu můžete i do bloku Sloupce vložit vlastní třídu CSS.

Aplikace Block appender pro plynulejší práci s bloky

Blok Sloupce je zvláštní tím, že s ním můžete vytvořit více bloků. Do vydání nové verze bylo poměrně obtížné pracovat s jednotlivými bloky. Když jste chtěli přidat nějaký blok, nevěděli jste, kam přesně kliknout. Díky aplikaci Block appender (a jejímu rozlišení podle barvy pozadí) je vložení obsahu do správného sloupce jednodušší.

Blokový aplikátor v bloku Sloupce WordPress
Blokový aplikátor s barvou pozadí

Jak pracovat s blokem sloupců WordPress

Krása bloku Sloupce spočívá v tom, že každý sloupec může vnořovat další bloky. Může to být blok odstavců, blok obrázků nebo blok tlačítek. Maximální počet sloupců je 6, můžete tedy vytvářet vícesloupcový obsah podle potřeby. Jak již bylo zmíněno, pro prezentaci produktů můžete vedle sebe přidat obrázek produktu, název, cenu a tlačítko.

Různé typy obsahu ve vícesloupcovém rozvržení
Pomocí bloku Sloupce můžete prezentovat různé typy obsahu vedle sebe.

Můžete také použít několik bloků sloupců pod sebou a vytvořit tak mřížku. Můžete ji použít k prezentaci svých služeb nebo propagaci důležitých funkcí.

Efekt mřížky bloku sloupců
Efekt mřížky bloků sloupců umístěných pod sebou

Úprava vnořených bloků

Jak jsme se již zmínili, uvnitř sloupců můžete vnořit další bloky. Každý vnořený blok má k dispozici všechna svá nastavení. To znamená, že pokud přidáte blok Obrázek do sloupce, můžete jej upravovat úplně stejně jako v samostatném bloku. Blok obrázků.

Úprava bloku obrázku jako vnořeného bloku
Dostupná nastavení pro blok Obrázek vnořený do bloku Sloupce

Závěr: Výhody bloku sloupců

Uvolnění blokového editoru WordPressu a dostupnost používání sloupců na stránkách a v příspěvcích výrazně zjednodušilo způsob, jakým mohou uživatelé pracovat s obsahem. Díky bloku Sloupce ve WordPressu již není důležité používat řešení třetích stran nebo psát kód HTML. Přidání nebo odstranění sloupců je možné pomocí několika kliknutí. Vše je velmi intuitivní a rychlé i pro méně technicky zdatné uživatele.

Váš obsah ve vícesloupcovém rozvržení bude pěkně zarovnán do mřížky. Bude také hned vypadat dobře v responzivní verzi.

Usilovně jsme pracovali na novém tématu Citadela WordPress, které je speciálně vyvinuto pro blokový editor WordPress. Přečtěte si více o tématu Citadela a dostupných balíčcích rozvržení.

2 komentáře k: “How to make columns in WordPress without plugin

    1. Dobrý den, Davide,

      děkujeme za napsání. Měli byste aktivovat editor Gutenberg, který nabízí možnost výběru jednotlivých sloupců, v postranním panelu Nastavení (pravá strana) můžete upravit jejich šířku.

      S pozdravem!
      Zlatko
      Tým AIT

Komentáře nejsou povoleny.