Úkol

1. V administraci jděte na Stránky → Přidat novou a vytvořte tyto stránky (zatím mohou být prázdné nebo s krátkým textem):

• O nás
• Služby
• Kontakt
• Aktuality

2. Po vytvoření všech stránek přejděte do Vzhled → Menu.

• Založte nové menu s názvem Hlavní menu.
• Přidejte do něj všechny vytvořené stránky.
• Nastavte ho jako Primární menu.

3. Uložte změny a otevřete web ve veřejném náhledu.

• Ověřte, že se menu zobrazuje v hlavičce.
• Zkontrolujte, že odkazy fungují a vedou na správné stránky.

4. V administraci jděte na Stránky → Přehled a otevřete stránku O nás

Klikněte na tlačítko Upravit v Elementoru.

5. V Elementoru:

• Přidejte nový kontejner s jedním sloupcem.
• Do kontejneru vložte widget Nadpis (např. „Vítejte na našem webu“).
• Pod nadpis vložte widget Text s krátkým textem:

Lorem Ipsum je demonstrativní výplňový text používaný v tiskařském a knihařském průmyslu. Lorem Ipsum je považováno za standard v této oblasti už od začátku 16. století, kdy dnes neznámý tiskař vzal kusy textu a na jejich základě vytvořil speciální vzorovou knihu. Jeho odkaz nevydržel pouze pět století, on přežil i nástup elektronické sazby v podstatě beze změn

6. Přidejte Tlačítko, pojmenujte ho třeba „Kontaktujte nás“.

• Do tlačítka nastavte odkaz na stránku Kontakt.
• Klikněte na Aktualizovat/Publikovat a stránku si zobrazte na frontendu.

7. Vyzkoušejte změnit:

• Zarovnání nadpisu (doleva, na střed, doprava)
• Barvu tlačítka na #45c2c8
• Barvu textu tlačítka na #ffffff

8. Otevřete stránku Služby a klikněte na Upravit v Elementoru.

Přidejte novou sekci → vyberte 2 sloupce (50/50).

Do levého sloupce vložte:

• Nadpis „Naše služby“ (text bude černý #000000)
• Text s krátkým popisem (stačí 2–3 věty níže).
• Tučně udělejete „demonstrativní výplňový text“ + nastavte odkaz na tento text /kontakt/
• Tlačítko

Text např.: Lorem Ipsum je demonstrativní výplňový text používaný v tiskařském a knihařském průmyslu. Lorem Ipsum je považováno za standard v této oblasti už od začátku 16. století, kdy dnes neznámý tiskař vzal kusy textu a na jejich základě vytvořil speciální vzorovou knihu. Jeho odkaz nevydržel pouze pět století, on přežil i nástup elektronické sazby v podstatě beze změny.

Tlačítko

• Tlačítko text „Více“
• odkaz tlačítka bude /kontakt/
• ikona tlačítka bude nějaká ikona domku – lze najít pod „house“
• barva tlačítka bude #45c2c8
• stín tlačítka (stín boxu) barva: #808080, vodorovný: 2, svislý: 3, blur: 5, handicap: -1, pozice: outline

9. Do pravého sloupce vložte:

Obrázek

• nastavte kulaté rohy: poloměr rámečku všude 15px
• (stín boxu) barva: #808080, vodorovný: 2, svislý: 3, blur: 5, handicap: -1, pozice: outline

10. Upravte styl levého sloupce:

• Nastavte zarovnání obsahu (celého sloupečku) na střed (vertikálně uprostřed sloupce) – Rozvržení > Zarovnat položky > Na střed

11. Upravte styl textu Lorem Ipsum..

• Nastavte maximální šířku textu (např. 480 px), aby text nebyl příliš roztáhlý. Pokročilé > Šířka > Vlastní > 480px

11. Klikněte na Aktualizovat a zkontrolujte stránku.

Zkuste se přepnout na náhled mobilní verze (ikonka mobilu vlevo dole) a ověřte, jak se sekce zobrazí – případně změňte pořadí sloupců.

12. Vypněte zobrazení nadpisu „Služby“

Ozubené kolečko nahoře > Nastavení > Skrýt nadpis

13. Globální barvy, fonty

vytvořte obyčejný text a nastavte H1, H2, H3 + obyč text + vložte odkaz

Nadpis H1 – nastavení stránky písmo H1

Nadpis h2 – nastavení stránky písmo H2

Nadpis h3 –  nastavení stránky písmo H3

Obyčejný text kde bude okaz tučně – já jsem odkaz. Lorem ipsum jsem odkaz amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

+ vložte tlačítko

14. Globální barvy, fonty

V administraci otevřete libovolnou stránku v Elementoru. Můžete zůstat na stránce Služby, ale lze to udělat z jakékoli stránky.

Klikněte vlevo nahoře na ikonu hamburger menu s posuvnými tlačítky (☰) → vyberte Nastavení stránky.

V menu Nastavení upravte:

Globální barvy:

• Primární barva → #000000
• Sekundární barva → #808080
• HTML Barva textů → #000000
• Akcent → kontrastní barva pro tlačítka nebo odkazy #45C2C8

Globální fonty:

• zase lze přednastavit

Uložte změny.

Otevřete sekci, kterou jste vytvořili v minulém úkolu (text + obrázek), a zkuste:

Změnit barvu tlačítka tak, aby použilo primární barvu.

Zkontrolovat, jestli se texty a nadpisy přizpůsobily novým stylům.