11. diel - Editor Gutenberg

V predchádzajúcej lekcii, Päta stránky , sme si ukázali čo sú zástupné značky, upravili sme si pätičku stránky a copyright, pozreli sme sa tiež na widgety a ako ich používať a pridali sme si aj ikonky pre sociálne siete.

V dnešnej lekcii základov WordPress sa naučíme pracovať s editorom Gutenberg, ukážeme si ako v ňom pridať a upraviť nový prvok, pozrieme sa aj na to ako pracovať s osnovou stránku a nahliadneme do nastavenia editora.

Editor Gutenberg

Gutenberg je vizuálny blokový editor, ktorý je od verzie WordPress 5.0 východiskovým nástrojom na tvorbu a úpravu obsahu. Je navrhnutý tak, aby bol intuitívny a používatelia si mohli zostaviť vlastnú stránku alebo príspevok ako stavebnicu z jednotlivých blokov – podobne ako skladanie lega.

Každý prvok stránky (nadpis, odsek, obrázok, tlačidlo, galéria, video, citácie, atď.) predstavuje samostatný blok, ktorý môžeme preťahovať, upravovať, mazať alebo pridávať, kamkoľvek potrebujeme.

Výhody Gutenberg editora:

• Vizuálny náhľad – pri úpravách hneď vidíme, ako bude stránka vyzerať.
• Žiadne znalosti kódu – celý obsah skladáme pomocou klikania a nastavenia blokov.
• Flexibilita – bloky môžeme kombinovať, upravovať ich farby, zarovnanie, medzery a mnoho ďalšieho.
• Znovupoužiteľné bloky – môžeme si uložiť blok (napr. výzvu na akciu) a používať ho opakovane na rôznych stránkach.
• Stále sa rozširuje – vďaka pluginom (napr. Spectra, Kadence Blocks) pribúdajú nové typy blokov, ktoré rozširujú možnosti práce s obsahom.

Gutenberg je výborný pre začiatočníkov, pretože nevyžaduje žiadne technické znalosti. Zároveň je ale dostatočne výkonný aj pre pokročilých užívateľov a dizajnérov, ktorí s ním zvládnu vytvárať moderné a responzívne weby bez nutnosti inštalácie externých editorov.

Kontaktná stránka

Pomocou editora Gutenberg si skúsime upraviť kontaktnú stránku. V menu WordPressu klikneme na Stránky:

Pri kontaktnej stránke klikneme na Upraviť:

Skrytie názvu stránky

Týmto sme sa dostali do editora Gutenberg. Zatiaľ tu vidíme len názov stránky "Kontakt", ktorý si teraz skryjeme. Stačí jednoducho kliknúť na ikonu oka vľavo vedľa názvu:

Pridanie prvku

Prvok na stránku môžeme pridať pomocou tlačidla +, ktoré sa nachádza v hornej lište stránky a na okraji stránky, alebo kontajnera:

Prípadne ak by sme chceli pridať niečo medzi dva existujúce prvky, zobrazí sa toto tlačidlo medzi týmito prvkami:

Pokiaľ použijeme modré tlačidlo + v hornej lište, otvorí sa nám ponuka elementov v ľavej časti stránky:

Ak použijeme tlačidlo + kdekoľvek vo vnútri editora, zobrazí sa nám kompaktnejšie zobrazenie ponuky prvkov, rovnako, ako keď sme vkladali widget do pätičky. A rovnako tak tu môžeme vyhľadávať prvky, alebo si pomocou tlačidla Prehľadávať všetko zobraziť celú ponuku prvkov. Navyše sa nám nový prvok umiestni presne tam, kam chceme a nemusíme ho dodatočne presúvať:

Úprava prvkov

Jednotlivé prvky môžeme upravovať v pravom stĺpci. Vedľa tlačidla Uložiť v pravom rohu je tlačidlo Settings (Nastavenia). Každý prvok má odlišné možnosti nastavenia:

Najčastejšie tu nájdeme možnosti úpravy farieb, či už textu, alebo pozadia, veľkosť a rámček. Ďalšie možnosti nastavenia sú priamo nad daným prvkom:

Ide predovšetkým o nastavenie pozície, zarovnanie a rôzne možnosti formátovania textu, tvorba odkazov atď.

Vedľa tlačidla nastavenia nájdeme ešte tlačidlo Astra nastavenia (ak používame šablónu Astra). Ide hlavne o nastavenie samotnej kontaktnej stránky, jej rozvrhnutie, štýl kontajnera, nastavenie bočného panelu a ďalšie:

Ikonka počítača slúži na prepínanie zobrazenia medzi počítačom, tabletom a telefónom. Jednoducho sa tak môžeme pozrieť, ako by stránka vyzerala a či je responzívna pre všetky zariadenia:

Osnova stránky

V pravej časti horného panelu sa nachádza ikona pre zobrazenie zoznamu a osnovy stránky:

V ľavom stĺpci potom prehľadne vidíme radenie jednotlivých prvkov na stránke a ako sú do seba jednotlivé prvky zanorené:

Môžeme ich presúvať jednoduchým pretiahnutím myšou a po kliknutí na tri bodky môžeme s prvkami ďalej pracovať. Prvky môžeme:

• kopírovať
• duplikovať
• pridať nový prvok pred alebo za označený prvok
• kopírovať, alebo vložiť štýly
• zoskupiť prvky, alebo ich naopak rozdeliť
• vytvoriť vzor
• zmazať prvok

Pokiaľ prepneme na Osnovu môžeme tu vidieť počet znakov, slov a odhad potrebného času na prečítanie obsahu. Môžeme tu ale tiež vidieť osnovu nadpisov na stránke a odporúčania, pokiaľ máme pri nadpise zlú úroveň:

Nastavenie editora

Kliknutím na tri bodky v pravom hornom rohu otvoríme nastavenie editora:

Ak je niektoré nastavenie aktivované, zobrazí sa vedľa neho fajka. Niektoré nastavenia si teraz prejdeme.

Horný panel nástrojov

Ak povolíme horný panel nástrojov, zobrazia sa nám nástroje na zarovnanie a formátovanie textu v hornej lište:

Režim bez rozptýlenia

Ak zapneme režim bez rozptýlenia zmiznú nám všetky bočné panely a horná lišta:

Režim nevyrušovaného písania

Režim nevyrušovaného písania nám spriehľadní všetky prvky na stránke, na ktorých práve nepracujeme:

Režim celej obrazovky

Režim celej obrazovky je štandardne zapnutý, pokiaľ ho vypneme zobrazí sa nám v editore menu a horná lišta WordPressu:

Vizuálny/HTML editor

Vizuálny editor je prehľadný a vhodný pre začiatočníkov aj pokročilých WordPress vývojárov. Niekedy je ale z nejakého dôvodu potrebné prepnúť na HTML editor, kde uvidíme všetky prvky na stránke ako HTML kód:

Klávesové skratky

Po kliknutí na Klávesové skratky nám vyskočí okno so všetkými klávesovými skratkami, ktoré môžeme v editore použiť:

Všetky dôležité prvky a nastavenia editora Gutenberg sme si prešli a teraz sa môžeme vrhnúť na vytvorenie obsahu prvej stránky.

V nasledujúcom cvičení, Riešené úlohy k 6.-7. lekciu základov WordPress, si precvičíme nadobudnuté skúsenosti z predchádzajúcich lekcií.