Výhody zobrazení bloků v textovém editoru WYSIWYG

23. 12. 2016

Používáte na svých stránkách složitější prvky, jako jsou například slider nebo dlaždice na úvodní stránce? Máme pro vás tip, jak snadno upravíte text nebo obrázky u těchto prvků, aniž byste přitom využili HTML kód. Pomůže vám zobrazení bloků v textovém editoru WYSIWYG. Ukážeme vám, jak na to.

Práce s bloky je vhodná, pokud potřebujete upravit text nebo obrázek u již zmíněných prvků (slideru nebo dlaždic aj.). Bez použití zobrazení bloků v textovém editoru WYSIWYG se totiž může stát, že při úpravách dojde ke smazání jiných prvků, které v textovém editoru nevidíte. Tyto neviditelné prvky („blokové prvky“) jsou ale důležité pro formátování stránky a v případě jejich smazání dojde k rozhození formátu. Pokud chcete takové situaci předejít, doporučujeme využívat funkci zobrazení bloků.

Ukázka použití dlaždic na hlavní straně webu.

Co jsou bloky

Bloky se používají pro vytvoření skupin HTML prvků, jejich rozmístění na stránce pod sebou nebo ve sloupcích vedle sebe. Začínají na novém řádku a zabírají obvykle celou dostupnou šířku. Tyto bloky mohou, ale nemusí být opticky zvýrazněny jinou barvou pozadí, mohou mít obrázek na pozadí, rámečky apod.

V textovém editoru WYSIWYG blokové prvky běžně nevidíte. V některých případech se tak může stát, že si omylem některý z těchto bloků smažete. Díky tomu se najednou změní formátování části stránky, kterou upravujete, a nevíte proč. Jedná se často o případy, kdy umístíte na web slider nebo dlaždice a dále upravujete stránku bez zobrazení bloků, nebo pokud jsou vaše webové stránky vytvořeny někým jiným. V našem článku vám ukážeme, jak blokové prvky zobrazíte.

Zobrazení bloků

Bloky si zobrazíte pomocí ikonky „Ukázat bloky“. Poté se každý prvek ohraničí podle toho, v jakém blokovém prvku se nachází.

Blokové prvky

Mezi nejčastěji používané „blokové prvky“ patří:

• <div></div> - obvykle obaluje jiné html prvky, pro jeho zobrazení jsou bloky obzvlášť užitečné
• <h1> </h1> až <h6></h6> - nadpisy různých úrovní
• <p></p> - odstavec
• <pre></pre> - předformátovaný text

Tagy blokových prvků vidíte vždy v levém horním rohu rámečku, který představuje daný prvek.

V kolika prvcích je daný text či obrázek obalen je uvedeno i na spodním panelu editoru. Když si kliknete například na obrázek nad nadpisem Služby, můžete vidět, že je obalen celkem třemi divy (viz obrázek níže).

S pomocí zobrazení blokových prvků upravíte stránku, na které jsou umístěny i složitější prvky, snadno a rychle. A v případě, že byste nějaký prvek přeci jen omylem smazali, vždy si můžete obnovit stránku pomocí záloh.

Kromě výše uvedených blokových prvků, existují i další. Ty se však vztahují k celkovému rozložení webové stránky jako např. <header>, <footer>, <main> apod. S těmi se ale v editoru článku nesetkáte, protože jsou díky použití redakčního systému již do stránek umístěny na správných místech. Vy tak upravujete pouze jejich vnitřní obsah.