HTML v bannerech

Jak upravit textový obsah banneru v HTML editoru

Bannery jsou výrazným prvkem vašeho e-shopu – slouží k upoutání pozornosti a rychlému sdělení klíčových informací, jako jsou akce, novinky nebo výhody nákupu.

• 1. Úprava hlavního nadpisu

  V HTML editoru najděte část s nadpisem označenou h2 (můžete vyměnit za h3) a změňte tex dle vlastní potřeby.

• 2. Změna podtextu (popisu)

  Pokud banner obsahuje doplňující text (např. krátké info o akci nebo benefitu), upravte jej stejně jako nadpis – přímo v HTML. Ujistěte se, že text je krátký, výstižný a snadno srozumitelný.

• 3. Úprava tlačítka (pokud je součástí)

  Text na tlačítku (např. „Zjistit víc“ nebo „Vstoupit“) můžete změnit podle potřeby. Nezapomeňte případně upravit i odkaz (href), kam tlačítko směřuje.

Text vlevo

Text vpravo

Text Uprostřed

Třídy pro nastavení

Vnější odsazení

mx-auto - Nastaví automatické vnější odsazení v ose X (Uprostřed vertikálně).

my-auto - Nastaví automatické vnější odsazení v ose Y (Uprostřed horizontálně).

m-1 až m-5 - Nastaví vnější odsazení ve všech směrech o rozměru 1 až 5 rem.

mt-1 až mt-5 - Nastaví vnější odsazení od horního okraje o rozměru 1 až 5 rem.

mb-1 až mb-5 - Nastaví vnější odsazení od spodního okraje o rozměru 1 až 5 rem.

ml-1 až ml-5 - Nastaví vnější odsazení od levého okraje o rozměru 1 až 5 rem.

mr-1 až mr-5 - Nastaví vnější odsazení od pravého okraje o rozměru 1 až 5 rem.

Vnitřní odsazení

p-1 až p-5 - Nastaví vnitřní odsazení ve všech směrech o rozměru 1 až 5 rem.

pt-1 až pt-5 - Nastaví vnitřní odsazení od horního okraje o rozměru 1 až 5 rem.

pb-1 až pb-5 - Nastaví vnitřní odsazení od spodního okraje o rozměru 1 až 5 rem.

pl-1 až pl-5 - Nastaví vnitřní odsazení od levého okraje o rozměru 1 až 5 rem.

pr-1 až pr-5 - Nastaví vnitřní odsazení od pravého okraje o rozměru 1 až 5 rem.

Text

text-l - Nastaví zarovnání textu k levému okraji (Výchozí).

text-c - Nastaví zarovnání textu na střed.

text-r - Nastaví zarovnání textu k pravému okraji

Šířka bloku

w-10 - Nastaví šířku bloku v procentech od 10% do 100% (po 5).

w-15 - 15%

w-20 - 20%

w-25 - 25%

w-30 - 30%

w-35 - 35%

w-40 - 40%

w-45 - 45%

w-50 - 50%

w-55 - 55%

w-60 - 60%

w-65 - 65%

w-70 - 70%

w-75 - 75%

w-80 - 80%

w-85 - 85%

w-90 - 90%

w-95 - 95%

w-100 - 100%

Výška bloku

h-100 - Nastaví výšku bloku v procentech na 100%.

h-auto - Nastaví výšku bloku, která se automaticky přizpůsobí.

Displey Flex

d-flex - Nastaví zobrazení na hodnotu "display: flex;" (Výchozí je vedle sebe).

fd-col - Nastaví hodnotu pro zarovnání "flex-direction: column;" (Nad sebou) společně s d-flex.

fd-col-re - Nastaví hodnotu pro zarovnání "flex-direction: column-reverse;" (Nadsebou v obráceném pořadí) společně s d-flex.

fd-row - Nastaví hodnotu pro zarovnání "flex-direction: row;" (Vedle sebe - řádek) společně s d-flex.

fd-row-re - Nastaví hodnotu pro zarovnání "flex-direction: row-reverse;" (Vedle sebe - v obráceném pořadí) společně s d-flex.

jc-start - Nastaví hodnotu pro zarovnání "justify-content: flex-start;" (Na začátku) *Při použití "fd-col" (od horního okraje) *Při použití "fd-col-re" (od spodního okraje) společně s d-flex.

jc-center - Nastaví hodnotu pro zarovnání "justify-content: center;" (Uprostřed) společně s d-flex.

jc-end - Nastaví hodnotu pro zarovnání "justify-content: flex-end;" (Na konci) *Při použití "fd-col" (od spodního okraje) *Při použití "fd-col-re" (od horního okraje) společně s d-flex.

ai-top - Nastaví hodnotu pro zarovnání "align-items: flex-start;" (Od horního okraje) *Při použití "fd-col" (od levé strany) *Při použití "fd-col-re" (od pravé strany) společně s d-flex.

ai-center - Nastaví hodnotu pro zarovnání "align-items: center;" (Uprostřed) společně s d-flex.

ai-bottom - Nastaví hodnotu pro zarovnání "align-items: flex-end;" (Od spodního okraje) *Při použití "fd-col" (od levé strany) *Při použití "fd-col-re" (od pravé strany) společně s d-flex.

Ostratní hodnotý "display"

d-block - Nastaví zobrazení na hodnotu displej "display: block;".

d-inline - Nastaví zobrazení na hodnotu displej "display: inline-block;".

d-grid - Nastaví zobrazení na hodnotu displej "display: grid;".

Obtékání

fl-left - Nastaví hodnotu pro obtékání z levé strany.

fl-right - Nastaví hodnotu pro obtékání z pravé strany.

Tlačítka

btn btn-primary - Nastaví hodnotu vzhledu tlačítka podle aktuálního nastavení tlačítka "Do košíku".

Poznámka:

Tyto třídy jdou mezi sebou různě kombinovat v závislosti na vašich potřebách.