Dostupnosť jednotlivých modulov a funkcií eshopu/webu závisí od verzie, v ktorej máte svoj eshop/web zakúpený.

Zdrojový kód (HTML)

Modul zdrojový kód je určený pre plnenie obsahu štruktúrovaným HTML kódom. Spôsob zápisu kódu môžete využiť aj pri administrácii iných modulov na webe, napríklad textový editor, články, krátky a dlhý popis produktov a mnoho ďalších. Pri textovom module a článkoch je potrebné mať modul prepnutý do režimu “Zdroj“. Na formátovanie textu sa používajú tagy, ktoré môžu mať rôzné atribúty, ktoré určujú vzhľad a správanie daného elementu-tagu na webe. Nižšie vám vysvetlíme najpoužívanejšie tagy, ktoré budete najviac používať, ale okrem spomenutých tagov, je možné používať aj všetky ostatné, ktoré sme neuviedli v tomto zozname.

Postup nastavenia

Tagy (html elementy) sú značky, ktoré zapisujeme v špicatých zátvorkách, ktorými sa zaznačuje obsah v kóde. Tagy rozdeľujeme na nepárové a párové tagy. Nepárové tagy sa skladajú iba z jednej značky, ktorá sa umiestni v kóde na miesto, kde ju chceme mať na webe v texte. Nemajú ukončovaciu značku, ukončená je samotná počiatočná značka. Párové tagy sa skladajú z dvoch značiek. Prvá značka sa nachádza pred vkladaným/zvýrazňovaným obsahom a druhá značka sa nachádza za zvýrazňovaným obsahom/textom.

Párové tagy

Tučné písmo: <strong> ... </strong>

príklad zápisu v kóde:

Nulla lacus enim, <strong>imperdiet sit amet</strong> bibendum quis, vehicula sit amet sem. Nulla lacus enim, imperdiet sit amet bibendum quis, vehicula sit amet sem.

príklad zobrazenia výstupu na webe:

Nulla lacus enim, imperdiet sit amet bibendum quis, vehicula sit amet sem. Nulla lacus enim, imperdiet sit amet bibendum quis, vehicula sit amet sem.

Kurzíva: <em> ... </em>

príklad zápisu v kóde:

Nulla lacus enim, <em>imperdiet sit amet bibendum quis</em>, vehicula sit amet sem. Nulla lacus enim, imperdiet sit amet bibendum quis, lacus enim, vehicula sit amet sem imperdiet sit amet bibendum quis, vehicula sit amet sem.

príklad zobrazenia výstupu na webe:

Nulla lacus enim, imperdiet sit amet bibendum quis, vehicula sit amet sem. Nulla lacus enim, imperdiet sit amet bibendum quis, lacus enim, vehicula sit amet sem imperdiet sit amet bibendum quis, vehicula sit amet sem.

Veľkosť písma: <span style="font-size:14px;"> ... </span>

príklad zápisu v kóde:

<span style="font-size:18px;">Nulla lacus enim, imperdiet sit amet bibendum quis, vehicula sit amet sem.</span>

príklad zobrazenia výstupu na webe:

Nulla lacus enim, imperdiet sit amet bibendum quis, vehicula sit amet sem.

Podčiarknuté písmo: <u> ... </u>

príklad zápisu v kóde:

Nulla lacus enim, imperdiet sit amet bibendum quis, vehicula sit amet sem. Nulla lacus enim, imperdiet sit amet bibendum quis, lacus enim, sit amet bibendum quis.<u>Nulla lacus enim, imperdiet sit amet bibendum quis, vehicula sit amet sem.</u> Vehicula sit amet sem.

príklad zobrazenia výstupu na webe:

Hypertextový odkaz na stránku súbor alebo obrázok: <a href="..."> ... </a>

Do atribútu href vložíte adresu webovej stránky, kde bude návštevník presmerovaný.

Postup pre zistenie adresy obrázka:

krok 1. Kliknite na "Vybrať obrázok alebo súbor"
krok 2. Vyberte požadovaný obrázok.
krok 3. Kliknite na "Skopírovať". Následne danú adresu skopírujte na vyznačené miesto medzi úvodzovkami.

príklad zápisu v kóde:

<a href="https://www.webygroup.sk/tvorba-eshopu.xhtml">Nulla lacus enim</a>

príklad zobrazenia výstupu na webe:

Nulla lacus enim

Nadpis: <h1> ... </h1>

príklad zápisu v kóde:

<h1>Nadpis prvej úrovne</h1>
<h2>Nadpis druhej úrovne</h2>
<h3>Nadpis tretej úrovne</h3>
<h4>Nadpis štvrtej úrovne</h4>
<h5>Nadpis piatej úrovne</h5>
<h6>Nadpis šiestej úrovne</h6>

príklad zobrazenia výstupu na webe:

Nadpis prvej úrovne

Nadpis druhej úrovne

Nadpis tretej úrovne

Nadpis štvrtej úrovne

Nadpis piatej úrovne

Nadpis šiestej úrovne

Textový blok: <p> ... </p>

príklad zápisu v kóde:

<p>Nulla lacus enim, imperdiet sit amet bibendum quis, vehicula sit amet sem. Nulla lacus enim, imperdiet sit amet bibendum quis, lacus enim, sit amet bibendum quis. Nulla lacus enim, imperdiet sit amet bibendum quis, vehicula sit amet sem.</p><p>Nulla lacus enim, imperdiet sit amet bibendum quis, vehicula sit amet sem. Nulla lacus enim, imperdiet sit amet bibendum quis, lacus enim, sit amet bibendum quis. Nulla lacus enim, imperdiet sit amet bibendum quis, vehicula sit amet sem.</p>

príklad zobrazenia výstupu na webe:

Zoznam cez odrážky: <ul> ... </ul>

príklad zápisu v kóde:

<ul>
     <li>consectetur</li>
     <li>adipiscing</li>
     <li>vulputate</li>
     <li>bibendum</li>
</ul>

príklad zobrazenia výstupu na webe:

consectetur
adipiscing
vulputate
bibendum

príklad zápisu vnoreného zoznamu v kóde:

<ul>
    <li>consectetur
        <ul>
             <li>adipiscing</li>
             <li>vulputate</li>
        </ul>
    </li>
    <li>bibendum</li>
</ul>

príklad zobrazenia výstupu na webe:

consectetur
- adipiscing
- vulputate
bibendum

Zoznam číslovaný: <ol> ... </ol>

príklad zápisu v kóde:

<ol>
     <li>consectetur</li>
     <li>adipiscing</li>
     <li>vulputate</li>
     <li>bibendum</li>
</ol>

príklad zobrazenia výstupu na webe:

consectetur
adipiscing
vulputate
bibendum

príklad zápisu vnoreného zoznamu v kóde:

<ol>
     <li>consectetur
        <ol>
             <li>adipiscing</li>
             <li>vulputate</li>
        </ol>
    </li>
    <li>bibendum</li>
</ol>

príklad zobrazenia výstupu na webe:

consectetur
1. adipiscing
2. vulputate
bibendum

Youtube video

Kód na získanie videa nájdete na webovej stránke www.youtube.sk. Jedonoducho ho skopírujete a vložíte do editora.

krok 1.: Kliknite na "Zdieľať".
krok 2.: Kliknite na "Vložiť".
krok 3.: Skopírujte celú zvýraznenú časť a vložte do editora.

príklad zápisu v kóde:

príklad zápisu v kóde s responzivitou:

príklad zobrazenia výstupu na webe:

Zvýraznenie textu podfarbeným blokom

Funguje iba v našom redakčnom systéme. Tieto zápisy sú preddefinované a je možnosť si vybrať zo 6 pastelových farieb red (červená), green (zelená), blue (modrá), yellow (žltá), pink (ružová) a grey (sivá).

príklad zápisu v kóde:

<div class="special-container-red">Nulla lacus enim, imperdiet sit amet bibendum quis, vehicula sit amet sem. Nulla lacus enim, imperdiet sit amet bibendum quis, lacus enim, sit amet bibendum quis. Nulla lacus enim, imperdiet sit amet bibendum quis, vehicula sit amet sem.</div>

<div class="special-container-green">Nulla lacus enim, imperdiet sit amet bibendum quis, vehicula sit amet sem. Nulla lacus enim, imperdiet sit amet bibendum quis, lacus enim, sit amet bibendum quis. Nulla lacus enim, imperdiet sit amet bibendum quis, vehicula sit amet sem.</div>

<div class="special-container-blue">Nulla lacus enim, imperdiet sit amet bibendum quis, vehicula sit amet sem. Nulla lacus enim, imperdiet sit amet bibendum quis, lacus enim, sit amet bibendum quis. Nulla lacus enim, imperdiet sit amet bibendum quis, vehicula sit amet sem.</div>

<div class="special-container-yellow">Nulla lacus enim, imperdiet sit amet bibendum quis, vehicula sit amet sem. Nulla lacus enim, imperdiet sit amet bibendum quis, lacus enim, sit amet bibendum quis. Nulla lacus enim, imperdiet sit amet bibendum quis, vehicula sit amet sem.</div>

<div class="special-container-pink">Nulla lacus enim, imperdiet sit amet bibendum quis, vehicula sit amet sem. Nulla lacus enim, imperdiet sit amet bibendum quis, lacus enim, sit amet bibendum quis. Nulla lacus enim, imperdiet sit amet bibendum quis, vehicula sit amet sem.</div>

<div class="special-container-grey">Nulla lacus enim, imperdiet sit amet bibendum quis, vehicula sit amet sem. Nulla lacus enim, imperdiet sit amet bibendum quis, lacus enim, sit amet bibendum quis. Nulla lacus enim, imperdiet sit amet bibendum quis, vehicula sit amet sem.</div>

príklad zobrazenia výstupu na webe:

Farebné tlačítka <a href="..." class="..."> ... </a>

Pre Uniobchod a Unisite od verzie 6.12.0 pridávame farebné tlačítka rôznych farebných variacií, veľkostí a štýlov.
Do atribútu class vložte vhodné triedy definujúce farbu veľkosť alebo štýl ktoré možu byť aj kombinované.

zoznam tried:
uni-btn: Definuje predštylované tlačítko (túto triedu musia obsahovať všetky tlačítka)
uni-medium: Tlačítko strednej veľkosti
uni-big: Najväčšie tlačítko
uni-rounded: Zaoblené tlačítko
uni-bordered: Priehľadné tlčítko s rámikom
uni-orange: Tlačítko oranžovej farby
uni-green: Tlačítko zelenej farby
uni-red: Tlačítko červenej farby
uni-yellow: Tlačítko žltej farby
uni-black: Tlačítko čiernej farby
uni-brown: Tlačítko hnedej farby

príklad zápisu v kóde:

<a href="https://www.webygroup.sk/tvorba-eshopu.xhtml" class="uni-btn">Tlačítko1</a>

<a href="https://www.webygroup.sk/tvorba-eshopu.xhtml" class="uni-btn uni-orange">Tlačítko2</a>

<a href="https://www.webygroup.sk/tvorba-eshopu.xhtml" class="uni-btn uni-green uni-medium">Tlačítko3</a>

<a href="https://www.webygroup.sk/tvorba-eshopu.xhtml" class="uni-btn uni-red uni-medium uni-rounded">Tlačítko4</a>

<a href="https://www.webygroup.sk/tvorba-eshopu.xhtml" class="uni-btn uni-red uni-medium uni-bordered">Tlačítko5</a>

<a href="https://www.webygroup.sk/tvorba-eshopu.xhtml" class="uni-btn uni-yellow uni-big uni-bordered uni-rounded">Tlačítko6</a>

príklad zobrazenia výstupu na webe:

Tlačítko1

Tlačítko2

Tlačítko3

Tlačítko4

Tlačítko5

Tlačítko6

Všetky možné varianty tlačítiek:

Pre uľahčenie môžte kliknúť na tlačítko ktoré vám skopíruje jeho stávajúce triedy a následne ich ľahko vložiť (ctrl + v) do atribútu class.

Obsah v stĺpcoch: <div class="uni-columns"> ... </div>

Pre vytvorenie stĺpcov vytvorte kontajner s triedou "uni-columns-container" a následne doň vložíte počet kontajnerov s triedou "uni-columns" ktoré sa budú zobrazovať vo forme stĺpcov. Počet kontajnerou s triedou "uni-columns-container" zodpovedá počtu stĺpcov do ktorých následne môžete vkladať obsah.

príklad zápisu v kóde:

<div class="uni-columns-container">
<div class="uni-columns">Obsah rozdelený do stĺpcov</div>
<div class="uni-columns">Obsah rozdelený do stĺpcov</div>
</div>

príklad zobrazenia výstupu na webe:

Obsah rozdelený do stĺpcov

Obrázkový slider: <div class="uni-slider"> ... </div>

Pre vytvorenie Obrázkového slidera vytvorte kontajner s triedou "uni-slider" a následne doň vložíte počet kontajnerov s jedným príslušným obrázkom "<div><img src="cesta-k-vasmu-obrazku" /></div>", ktoré sa budú zobrazovať a následne časovo meniť.

nastavenia:

data-auto-start="1" - automaticke menenie, akceptuje hodntu 1 (áno) alebo 0 (nie)
data-auto-start-speed="3000" - čas medzi prechodom na ďalšiu položku pri aut. prehrávaní v milisek. (3000 = 3 sekundy)
data-scroll-items="3" - počet položiek ktoré sa zmenia pri prechode
data-visible-items="3" - počet viditeľných položiek v riadku
data-speed="300" - rýchlosť zmeny položky v milisekundách (300 = 0,3 sekundy)

príklad zápisu v kóde:

príklad zobrazenia výstupu na webe:

Nepárové tagy

Vloženie obrázka: <img src=" ... " />

Do atribútu src vložte adresu požadovaného obrázka a za " alt=“ napíšte text pre obrázok.
Postup pre zistenie adresy obrázka:

príklad zápisu v kóde:

<img src="images/uniobchod-system.png" alt=“sem vpíšete zástupný text obrázka“/>

príklad zobrazenia výstupu na webe:

Prechod textu na nový riadok: <br />

príklad zápisu v kóde:

Nullalacus enim, imperdiet sit amet bibendum quis, vehicula sit amet sem. Nulla lacus enim, imperdiet sit amet bibendum quis, lacus enim, sit amet bibendum quis. <br/>Nulla lacus enim, imperdiet sit amet bibendum quis, vehicula sit amet sem. Nulla lacus enim, imperdiet sit amet bibendum quis, vehicula sit amet sem. Nulla lacus enim, imperdiet sit amet bibendum quis, lacus enim, sit amet bibendum quis. Nulla lacus enim, imperdiet sit amet bibendum quis, vehicula sit amet sem. Nulla lacus enim, imperdiet sit amet bibendum quis, vehicula sit amet sem. <br/><br/>Nulla lacus enim, imperdiet sit amet bibendum quis, lacus enim, sit amet bibendum quis. Nulla lacus enim, imperdiet sit amet bibendum quis, vehicula sit amet sem. Nulla lacus enim, imperdiet sit amet bibendum quis, vehicula sit amet sem

príklad zobrazenia výstupu na webe:

Nulla lacus enim, imperdiet sit amet bibendum quis, vehicula sit amet sem. Nulla lacus enim, imperdiet sit amet bibendum quis, lacus enim, sit amet bibendum quis.
Nulla lacus enim, imperdiet sit amet bibendum quis, vehicula sit amet sem. Nulla lacus enim, imperdiet sit amet bibendum quis, vehicula sit amet sem. Nulla lacus enim, imperdiet sit amet bibendum quis, lacus enim, sit amet bibendum quis. Nulla lacus enim, imperdiet sit amet bibendum quis, vehicula sit amet sem. Nulla lacus enim, imperdiet sit amet bibendum quis, vehicula sit amet sem.

Nulla lacus enim, imperdiet sit amet bibendum quis, lacus enim, sit amet bibendum quis. Nulla lacus enim, imperdiet sit amet bibendum quis, vehicula sit amet sem. Nulla lacus enim, imperdiet sit amet bibendum quis, vehicula sit amet sem.

Horizontálna čiara: <hr />

príklad zápisu v kóde:

<hr />