4. Vytváříme první stránku webu

Jak vytvořit stránku ve wordpresu s pomoci DIVI builderu.

Instalace WordPressu

Pokud ještě nemáte vybranou doménu, hosting a nainstalovanej WordPress, tak budete potřebovat zahajít první kroky:

• Hosting (např. Blueboard, Webkitty, apod.)
• Doménu (např. tvujweb.cz)
• WordPress (většina hostingů umožňuje automatickou instalaci)

Pokud už WordPress běží, jdeme dál. 🚀

Instalace a aktivace Divi

1. Navštivte stránky Elegant Themes, kde si musíte koupit liceni Divi. Co je Divi →
2. Po přihlášení si stáhněte Divi Theme jako ZIP soubor.
3. Ve WordPressu jděte do Vzhled > Šablony > Nahrát šablonu a nahrajte stažený ZIP.
4. Aktivujte Divi.
5. Přidejte Divi Builder (automaticky součástí šablony).

Vytvoření první stránky

1. Ve WordPressu jděte na Stránky > Vytvořit novou stránku.
2. Pojmenujte stránku (např. „Domů“).
3. Začnete názvem stránky a klikněte na Použijte nástroj Divi Builder

Využití Divi Builderu

Teď máte tři možnosti, jak stránku vytvořit:

• Stavět od začátku – vytvoříte stránku od základu.
• Zvolte rozložení – Divi nabízí hotové šablony, nebo můžete v tomto kroku zvolit předpřipravené rozložení nebo klonovat již hotové stránky.
• Využití AI – O využití AI při tvorbě webu se budeme bavit později.

Můžete vyzkoušet hotový layout, ať vidíte, jak Divi funguje. 💡

1. Klikněte na zvolte rozložení.
2. Vyberte si design, který se vám líbí.
3. Klikni na Použít tento layout.
4. Hotovo! Můžete si upravit texty, obrázky a další prvky.

My začneme pracovat s prázdnou stránkou, pro lepší pochopení jak builder funguje.

Přidání a úprava prvků

Divi pracuje se sekcemi, řádky a moduly:

• Sekce – hlavní bloky stránky (modré rámečky).
• Řádky – rozdělení sekce na sloupce (zelené rámečky).
• Moduly – obsah (text, obrázek, tlačítko…).

👉 Jak přidat prvek?

1. Klikněte na + uvnitř sekce nebo řádku.
2. Vyberte modul (např. Text, Obrázek, Tlačítko…).
3. Upravte obsah a styl.

Jak fungují sekce, řádky a moduly v Divi?

Pokud si představíme web jako stavebnici, pak sekce, řádky a moduly jsou tři hlavní prvky, ze kterých ho sestavujeme. Každý z nich má svou jasnou roli:

Sekce: Základní stavební bloky webu

Sekce jsou největší prvky, které rozdělují stránku na jednotlivé části. Když si nakreslíte wireframe (návrh struktury webu), sekce vám pomohou rozdělit obsah do přehledných bloků.

Příklady sekcí na webu:

• Hero sekce (hlavní úvodní blok s velkým obrázkem a nadpisem)
• Rozcestník (např. tlačítka na různé podstránky)
• Služby nebo produkty
• O nás (informace o firmě nebo osobě)
• Portfolio nebo reference
• Blog – výpis článků
• Footer (patička webu s kontakty, odkazy atd.)

Každá sekce zabírá celou šířku webu a obsahuje další prvky – řádky a moduly.

Řádky: Rozdělení obsahu do sloupců

Uvnitř sekcí používáme řádky, které umožňují rozdělit obsah na 1 až 6 sloupců. Do těchto sloupců pak vkládáme konkrétní obsah.

Příklad použití řádků:

• 1 sloupec → velký nadpis nebo obrázek přes celou šířku stránky
• 2 sloupce → text vlevo, obrázek vpravo
• 3 sloupce → tři ikony se službami vedle sebe
• 4 sloupce → čtyři reference zákazníků
• 6 sloupců → mřížka log partnerů

Díky řádkům můžeme organizovat obsah tak, aby byl přehledný a snadno čitelný.

Moduly: Konkrétní obsah stránky

Moduly jsou jednotlivé prvky, které dávají stránce skutečný obsah. Může to být text, obrázek, tlačítko, formulář, video, galerie nebo jakýkoliv jiný prvek.

Příklady modulů:

• Text (nadpisy, odstavce)
• Obrázky (jednotlivé fotky, galerie)
• Tlačítka (výzvy k akci, např. „Kontaktujte nás“)
• Formuláře (kontaktní formulář, přihlášení k newsletteru)
• Video (vložení videa z YouTube nebo vlastní soubor)
• Mapa (Google Maps pro zobrazení adresy)

Moduly vkládáme do jednotlivých sloupců v řádcích, čímž vytváříme rozložení obsahu přesně podle návrhu wireframu.

Jak to celé funguje dohromady?

1. Sekce = velké části webu (např. Hero, Služby, Kontakt).
2. Řádky = rozdělení sekce na sloupce (např. text vlevo, obrázek vpravo).
3. Moduly = konkrétní obsah (např. nadpis, tlačítko, formulář).

Tímto způsobem skládáme celý web krok za krokem podle předem připraveného wireframu. Výhodou je, že můžeme jednotlivé prvky snadno měnit, přesouvat a přizpůsobovat podle potřeby.

Ukázka sekce s vloženým řádkem, který má 2 sloupce.
– levý sloupec – modul obrázek
– pravý sloupec – modul text a tlačítko

Ukázka sekce s vloženým řádkem, který má 3 sloupce.
– levý sloupec – modul obrázek
– prostřední sloupec – modul obrázek
– pravý sloupec – modul obrázek

Ukázka sekce s vloženým řádkem, který má 6 sloupců.
– 1 sloupec – modul ikona
– 2 sloupec – modul text
– 3 sloupec – modul ikona
– 4 sloupec – modul text
– 5 sloupec – modul ikona
– 6 sloupec – modul text