3. diel - Základné stavebné prvky vizuálneho editora Oxygen

V minulej lekcii, Nastavujeme globálne CSS štýly vo vizuálnom editore Oxygen , sme si ukázali, ako nastavíme globálne CSS štýly, layout webu a fonty.

Iste chceme vytvoriť dynamické, moderné webové stránky. Na to budeme potrebovať ďalšie prvky.

V Oxygen buildere delíme stavebné prvky na:

• základné (kontajnery, text, odkazy, vizuálne, blok kódu)
• header builder (nástroj na tvorbu hlavičky)
• easy posts (nástroj na tvorbu blogov)
• menu
• slider
• modálne okno
• repeater (pomocou otázok vytvorí slučky)
• kompozitné prvky (flip box, icon list, akordeón)

Základné stavebné prvky

Základné stavebné prvky v Oxygen buildere môžeme rozdeliť na:

• kontajnery
• textové bloky
• odkazy
• vizuálne prvky
• bloky kódov

Kontajnery

Už sme si predstavili a ukázali v praxi stavebné prvky - kontajnery, ako sú sekcie, stĺpce a div y a už vieme, ako ich použiť.

Pokiaľ si nie sme istí ich použitím, ešte raz si v pokoji prečítajme a precvičme minulé lekcie.

Elementy na úpravu textu

V Oxygen buildere máme k dispozícii štyri druhy elementov na úpravu textu. Postupne si ich predstavíme:

Nadpis

Element heading sa bežne používa pre nadpisy a podnadpisy. Používa HTML značky pre nadpisy (h1 až h6).

Text

Element text je v Oxygen builderu vlastne div, ktorý obsahuje iba text. Pokiaľ potrebujeme text formátovať, stačí dvakrát kliknúť na pole s textom, a hore sa zobrazí ponuka s možnosťami formátovania. Skúsme si vytvoriť obsah, ktorý je nižšie na obrázku:

Podarilo sa? Asi sa zhodneme, že na tom nebolo nič zložité. Na obrázku vidíme, že máme použitý nadpis (h1) a text, kde je formátovanie. Teraz si vytvoríme section, ktorá bude obsahovať elementy heading a text, do ktorých text vyššie vložíme. Môžeme tak urobiť zmenou štruktúry vpravo:

Rich text

Ďalším elementom je Rich Text, ktorý umožňuje použitie rozšíreného formátovania pre text pomocou editora WordPress TinyMCE. Dvakrát klikneme na text a otvorí sa známe okno, kde sa editácii textu medze nekladú 🙂

Použitie poľa span

Niekedy potrebujeme časť textu obaliť poľom span. Poďme si skúsiť naše dve tučne písané slová zafarbiť. Klikneme dvakrát na text, označíme reťazec, ktorý chceme formátovať, hore v ponuke klikneme na span (v on-line editore na <s>):

A v ľavej ponuke vyberieme požadovanú farbu:

Odkazy

V Oxygen buildere máme k dispozícii tri druhy elementov pre prácu s odkazmi. Poďme si ich predstaviť:

Textový odkaz

Prvok Text Link sa používa ako text s hypertextovým odkazom na inú adresu URL. Postupujeme tak, že označíme reťazec, v ktorom chceme odkaz mať a kliknutím hore na symbol spony požadovanú URL nastavíme (V on-line editore sa spona volá Link Settings, potom prejdeme na URL > set):

Predvolené farby odkazov je možné zmeniť v ponuke Správa > Nastavenia > Globálne štýly > Odkazy (v on-line editore Settings > Global Style > Links).

Link Wrapper

Prvok Link Wrapper umožňuje vytvoriť jeden odkaz pre skupinu prvkov. Na všetky prvky umiestnené vo Wrapperi potom bude možné kliknúť ako odkaz.

Element tlačidlo

Element Button je podobný elementu Text Link, s tým rozdielom, že sa zobrazuje ako tlačidlo a nie ako obyčajný text.

Jednoduché možnosti štýlov tlačidla sú k dispozícii na karte Základné štýly. Poďme si vložiť do našej stránky element Button. Nášmu tlačidlu zadáme radius: 10px, margin-top: 30px, vložíme mu URL adresu a farby pre hover (nabehnutie myši na element):

Vizuálne stavebné prvky

V Oxygen buildere máme k dispozícii tri druhy elementov pre prácu s grafickými prvkami, ktoré si teraz opäť predstavíme:

Obrázok

Element image môžeme pridať buď formou zadania jeho URL, alebo priamo z knižnice médií vo WordPresse. Tu na obrázku vidíme, ako vložiť element image:

Skúsme si znalosti precvičiť a vytvoriť toto zadanie:

V zadaní máme dva stĺpce, poloha horizontálna, v ľavom stĺpci je nadpis, text, tlačidlo av pravom stĺpci je obrázok, na naše účely som zvolila tematický obrázok, môžeme však pochopiteľne vložiť akýkoľvek.

Už vieme, ako sa pracuje s kontajnermi. Poďme svoje znalosti teraz použiť. Vpravo v štruktúre klikneme na symbol ceruzky a použijeme funkciu Wrap with div. Do elementu div si zabalíme všetky elementy, ktoré chceme mať na ľavej strane (tj heading, button a text) a pomenujeme si ich "Texty" (ceruzka > rename). Ďalej si zabalíme do elementu div prvok image. Tento div si pomenujeme "Obrázok":

Kontajnery si starostlivo pomenovávame. Pri obsiahlejšej štruktúre webu prestáva "div1, div2, div3" stačiť.

Teraz div pomenovaný ako "Texty" nastavíme na šírku 60 %, a div pomenovaný ako "Obrázok" nastavíme na šírku 40 %:

V tejto chvíli sa nám jednotlivé div y radia vertikálne. My však chceme mať prvky vedľa seba, teda radené horizontálne. V nastavení elementu section zvolíme v primary > Child Element Layout hodnotu horizontal:

V tejto chvíli už naša sekcia vyzerá veľmi pekne.

/-comment TODO Stále tu chýba popis vloženia toho obrázku z náhľadu:-) Pokiaľ nie je dostupný v on-line verzii, prilož ho prosím na stiahnutie \--

Video

Element video nám umožní vložiť videá do našich stránok a zaistiť, aby boli responzívne a zachovali si pomer strán – ako sa bude zmenšovať okno prehliadača, zmenší sa aj video, pričom si zachová svoje proporcie.

Ak chceme vložiť video z YouTube alebo Vimeo, vložíme adresu URL videa do poľa URL YouTube / Vimeo na karte Základné štýly (pre zopakovanie, Základné štýly nájdeme pod "plus" v ľavom hornom rohu). Toto však nemôžeme používať pre videá s vlastnou URL.

Ak chceme pridať video s vlastnou URL, zaškrtnime políčko „Ručne vložiť kód iframe“. Potom môžete vložiť nižšie uvedený kód a nahradiť {url-naseho-videa} adresou URL nášho videa vložením kódu do poľa nižšie:

<iframe src="<url našeho videa>" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

Môžeme tiež ovládať pomer strán videa (Video Aspect Ratio).

Ikony

Prvok Icon zobrazuje ikonu SVG a poskytuje rôzne možnosti štýlu.

Ak chcete vybrať ikonu, zadajte text do poľa Icon na karte Základné štýly a vyhľadajte dostupné ikony. Oxygen builder umožňuje tiež nahrávanie vlastných ikon.

Iné stavebné prvky

Poslednou časťou na karte Základných štýlov je Iné (Other), kde nájdeme element Code Block. Ten nám umožňuje vložiť vlastný kód HTML, PHP, CSS a JavaScript na našu stránku.

V nasledujúcej lekcii, Tvorba šablóny hlavičky a päty vo vizuálnom editore Oxygen , si ukážeme, ako vytvoriť šablónu pre responzívne hlavičky a päty.