Lekce 1 - Seznámení s vizuálním editorem Oxygen
Vítejte v on-line kurzu, kde si ukážeme, jak pracovat s vizuálním editorem Oxygen na redakčním systému WordPress. V tutoriálech se dozvíte, jak ve WordPressu pomocí Oxygen builderu vytvořit:
- responzivní webové stránky
- plně funkční e-shop za použití Woocommerce
- vlastní šablonu pro WordPress
Možná již nějaké zkušenosti s redakčním systémem WordPress máte, pokud ne, zde je skvělý on-line kurz WordPress - Základy - Online kurz.
Vývoj webových stránek v Oxygen builderu vás naučí o webu přemýšlet jinak, o jeho struktuře, o souvislostech na webu. S Oxygen builderem se stanete skutečnými vývojáři, nejen editory stažené šablony.
K čemu vizuální editor Oxygen slouží a jak funguje
Vizuální editor Oxygen slouží k tvorbě webových stránek, včetně kompletních e-shopů na Woocommerci a k tvorbě vlastní šablony na redakčním systému WordPress. Pokud jsme začátečníky, pak pravděpodobně využijeme přednastavené prvky v knihovně. Vizuální editor Oxygen je však primárně vytvořen pro vývojáře, kteří se chtějí posunout dál a nabídnout svým klientům větší kvalitu a více možností při tvorbě webových stránek nebo e-shopů na redakčním systému WordPress a proto je doporučena znalost HTML a CSS.
K tomu nám může pomoci kurz Základy HTML a CSS, též je dobré mít povědomí o JavaScriptu (Základy programování v JavaScriptu) a pokud budeme mít i základy programování v PHP (Základní konstrukce jazyka PHP) tak máme otevřenou cestu ke kariéře front-endového vývojáře 🙂
Princip práce v Oxygen builderu
Pokud vyvíjíme webovou stránku v Oxygen builderu, pak zapomeňme na
všechny přednastavené a stažené (nebo zakoupené) WordPress šablony. Po
instalaci Oxygen builderu na redakční systém WordPress nás čeká prázdný
prostor bez jakékoliv šablony, připravený pro naší neomezenou tvorbu. V
Oxygen builderu šablonu vytváříme my, a tak je každý web
jedinečný. V tomto kurzu si ukážeme, jak vytvořit header a
footer, který můžeme dědit napříč stránkami, a vytvoříme
šablony pro sekce, které se na webu opakují. To velmi usnadní naší
vývojářskou práci. Naučíme se použít opakující se dynamická
data, např. pro výpisy článků, nebo pro archivní stránku
e-shopu.
Pokud si osvojíme znalosti práce v Oxygen builderu, budeme se moci ucházet i o práci kodéra webových stránek. Od klientů dostaneme přesná grafická zadání (např. ve Figmě) a toto zadání poté v Oxygen builderu převedeme 1:1 na webovou stránku.
Proč vybrat právě Oxygen builder
Zde si uveďme alespoň některé z mnoha výhod vizuálního editoru Oxygen:
- rychlost a výkon webu
- až 5 nastavitelných breakpoints, možnost nastavení dokonalé responzivity
- ovládací prvky flexboxu, CSS mřížka, horizontální a vertikální layout
- velikost Oxygen builderu (tzv. asset size) je pouze 295.5 kb (pro srovnání Elementor builder má 1.5 Mb, Divi 1.7 Mb)
- možnost vkládat vlastní třídy a pracovat s nimi, upravovat selektory, vkládat vlastní JavaScript
Při vývoji klientských webů s Oxygen dosáhneme běžně hodnot v PageSpeed Insights na mobilní verzi kolem 90 %, a na desktopové verzi i 100 %. Těchto hodnot editací přednastavených WordPress šablon nebo použitím jiných builderů nedosáhneme, a na rychlosti prostě záleží.
Více výhod a konkrétní srovnání Oxygen builderu s ostatními buildery si můžeme přečíst v oficiální dokumentaci.
Instalace a spuštění vizuálního editoru Oxygen
Zde jsou dvě možnosti jak instalaci Oxygen builderu získat:
- využít tzv. sandbox na demo verzi
- zakoupit licenci
Instalace demo verze Oxygen builderu
První možností je aktivace tzv. sandboxu, kterou získáme demo verzi k vyzkoušení. Navštivme oficiální webovou stránku Oxygen builderu.
Zde klikneme na tlačítko Blank Install:
Poté následuje ověření, zda nejsme robot a na další straně klikneme opět na tlačítko Blank Install:
Nyní jsme na známé nástěnce redakčního systému WordPress a v levém menu vidíme položku Oxygen:
Zakoupení licence
Druhou možností je zakoupení oficiální licence. Navštivme oficiální webovou stránku Oxygen builderu-ceník. Licence je doživotní, použít ji můžeme na neomezené množství webových stránek (vztahuje se i na komerční použití) a máme garanci vrácení peněz do 60 dní. Doporučuji licenci "Ultimate", ve které je rozšíření i pro Woocommerci a další kompozitní prvky.
Pokud jsme si licenci zakoupili, tak na WordPress nainstalujeme Oxygen builder jako jakýkoliv plugin na redakčním systému WordPress. Pokud nemáme ještě nainstalovaný WordPress, zde je skvělý on-line kurz základů Wordpressu, kde se dozvíme, jak redakční systém WordPress získat a jak nainstalovat plugin.
V tuto chvíli tedy máme nainstalovaný i aktivovaný Oxygen builder, a položku Oxygen vidíme v levém menu naší WordPress instalace:
Bližší seznámení Oxygen builderem
Nyní se seznámíme se základním nastavením a rozvržením Oxygen builderu.
Home
Z nabídky v Oxygen si nyní vybereme položku Home - zde najdeme v sekci Oxygen Design Library knihovnu přednastavených stránek, stačí kliknout na Install a Different Website a vybrat si přednastavený vzhled:
Pouze zmiňuji, že tuto možnost zde máme. V tomto kurzu se však naučíme, jak tvořit vlastní design a vlastní šablonu.
Tuto možnost využijte spíše pro testování, nebo na skutečně low cost projekty, kdy má klient nízký rozpočet. Pokud chceme jako kodéři profesně růst, budeme tvořit vlastní strukturu.
Templates
Z nabídky v Oxygen si nyní vybereme položku Templates ( tlačítko Go To Oxygen Templates). Položka Templates je prozatím prázdná, ale budou zde v budoucnu naše šablony, až je spolu vytvoříme. Je dobré vědět, kde je později hledat 😉
Settings
Z nabídky v Oxygen se podíváme do Settings - tam nás v tuto chvíli bude zajímat položka CSS cache:
Tuto možnost budeme používat k regeneraci CSS cache, např. po změně CSS v globálních stylech. Stačí kliknout na tlačítko Regenerate CSS cache.
Až bude v lekcích uvedeno: "zregenerujeme si CSS
cache", uděláme to právě zde. 
A to je pro dnešek vše. Máme nainstalovaný Oxygen builder a teoreticky jsme se s ním seznámili.
V příští lekci, Nastavujeme globální CSS styly ve vizuálním editoru Oxygen, si ukážeme, jak nastavíme globální CSS styly, layout webu a fonty.
