V dnešním návodě si dopodrobna projdeme možnosti jednoho z nejvíce používaného WordPress builderu – DIVI od Elegant Themes. V tutoriálu budeme pracovat s šablonou DIVI a vestavěným builderem.
Po registraci na oficiální stránkách Elegant Themes stáhneme a nainstalujeme DIVI.
Po vytvoření nové stránky ve WordPressu na nás vyskočí nová možnost „Použijte nástroj Divi Builder“, tu zvolíme a to nás dostane přímo do frontend builderu.
MOŽNOSTI
Hned po spuštění máme na výběr jednu ze tří možností. Při koupi šablony s builderem máme možnost použít nějaké FREE layouty(rozvržení) webu podle kategorií(restaurace, kavárna, elektrikářské práce…).
Tuto volbu bych doporučoval volit úplným začátečníkům, jelikož grafický obsah layoutů není správně optimalizovaný a některé nejsou ani responzivní pro ostatní zařízení. V tomto tutorialu budeme pracovat s čistým builderem, čili začneme s editem stránky od začátku
SEKCE A ŘÁDKY
Máme možnost přidávat sekce na kliknutí a do nich dále vkládat řádky, které se chovají responzivně a na menších zařízeních se automaticky zalamují.
Zkusíme rozdělit řádek na dva sloupce. Do prvního můžeme zkusit nahrát fotku a vedle toho bude nějaký nadpis s textem. Jakmile jsme řádek rozdělili, vyskočila na nás možnost vkládat moduly do sloupců. Seznam všech momentálně dostupných modulů si nyní projdeme:
SOUHRN VŠECH DOSTUPNÝCH MODULŮ
1) AUDIO
V DIVI je obsažen vlastní přehrávač. Do modulu stačí vložit zvukový soubor.
NÁZEV SKLADBY
2) BLOG
Automaticky vloží seznam příspěvků, které jsme napsali. Můžeme zde nastavit počet zobrazovaných příspěvků, vynechání některých, filtrování a mnoho dalšího…
3) ODDĚLOVAČ
Nabízí několik možností zobrazení, používá se pokud chceme udělat mezeru mezi textovými řetězci, nebo chceme mít nějaký text částečně podtržený. Má několik podob a dá se změnit jeho výška, a pokud chceme, můžeme ho skrýt.
4) ODPOČÍTÁVADLO
Jednoduše nastavíme určité datum, a odpočítávadlo se automaticky spustí.
ODPOČET
Dny
:
Hodiny
:
Minuty
:
Vteřiny
5) E-MAIL OPTION
Vytvoří jednoduchý formulář za marketingovým účelem získávání emailových adres od nových uživatelů.
6) FILTROVATELNÉ PORTFOLIO
Dá se využít například jako reference. Slouží k vložení vlastního typu příspěvků Projekty do stránky s možností vyfiltrování zobrazeného výpisu pomocí tlačítek nacházejících se v horní části modulu.
7) OSOBA
Využitá u manuálních recenzí. nastavíme fotku, jméno, pozici a popis osoby.
Jméno jde sem tady
Pozice
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
8) PANELOVÉ ČÍTAČE
Žádné dynamické prvky zde nečekejte. Panelové čítače pouze ukazují procentuální postup. Využít se dá např. u průběhu registrace na webu.
- PANELOVÝ ČÍTAČ 50%
9) GALERIE
Nahrajeme několik fotek, a máme hned několik možností. Podpora hover efektu, vlastní filtrování fotografií, nastavení zobrazení fotek na jeden řádek, zobrazení popisků obrázků a stránkování. Galerie se chová responzivně.
10) HLEDÁNÍ
Podle zadaných slov projíždí obsahem celého webu. Můžeme vyloučit některé stránky, které nechceme mít součástí vyhledávání.
11) PORTFOLIO
Nastavíme obrázky s textem, kde budeme zobrazovat jednotlivá portfolia, nebo nabídky práce.
12) POSTRANNÍ PANEL
Na jakékoliv stránce, nebo příspěvku můžeme zobrazit postranní panel, který si předem editujeme. Můžeme mít tedy několik míst na webu s panelem, a přitom ho editovat z jednoho místa. Dokáže ušetřit dost času.
13) ICON
DIVI má přímo v sobě na výběr několik stovek možností ikonek. Můžeme editovat nejen její velikost, ale i barvu.
14) KOMENTÁŘE
Vloží se pole, které umožní uživatelům přidávat komentáře. Součástí modulu je i přehled všech komentářů na stránce.
15) POSUVNÍK – SLIDER
Pod pojmem posuvník nalezneme Slider, kde nastavíme jednotlivé slidy včetně obrázků
16) POSUVNÍK PŘÍSPĚVKŮ
Automaticky se sem vloží slider příspěvků, kde můžeme vyfiltrovat zobrazení pouze určitým příspěvkům.
17) KONTAKTNÍ FORMULÁŘ
Jeden z nejrozsáhlejších modulů. Nastavit můžeme úroveň bezpečnosti proti SPAMU. Na výběr je jednoduchý automaticky generovaný příklad před odesláním zprávy, nebo nastavení Google reCAPTCHA pomocí api(nedoporučuje se, protože je to služba třetí strany a dokáže zpomalit web).
Můžeme upravovat jednotlivé kolonky formuláře, přidávat vlastní, nastavit povinné a nepovinné pole, a především určit, komu mají emaily chodit
18) KRUHOVÉ POČÍTADLO
Nastavíme číslo, a vytvoří se hezká animace kruhového počítadla. Využívá se např. pokud chceme ukázat, kolik jsme realizovali projektů, kolik let jsme na trhu jako firmy…
%
Text
19) POSUVNÍK VIDEA
Souhrn videí, která přidáváme např. pomocí youtube odkazů, nebo souborů(doporučeně v mp4). Primárně je zde jedno hlavní video, pod kterým se zobrazí další videa, která bychom přidali. Zároveň to celé funguje jako slider.
20) PŘEPÍNAČ
Šikovný modul pro ty části webu, které jsou díky vysokému obsahu textu nepřehledné. Použití je rozsáhlé. Často se aplikuje u zobrazování nejčastějších otázek a odpovědí.
Přepínač jedna
libovolný text, který zde nastavíme
21) KÓD
Např. tento text je modifikován pomocí HTML a CSS
22) MAPA
Zadáme API klíč, a můžeme zobrazit libovolné místo na mapách. Nejedná se pouze o fotku, ale mapa obsahuje posuvník, přičemž se můžeme lehce orientovat v okolí.
23) PŘIHLÁSIT SE
Opět další generovaný formlář pro přihlášení uživatele.
24) REFERENCE
Vhodné pro přidání hodnocení uživatelů. Nepodporuje import recenzí z Googlu, vše musíme nastavit manuálně. Dá se editovat fotka, jméno, text, ale ikonu citace však upravovat nelze.
Nějaký popisek osoby
25) MENU
Lze vložit libovolné menu(s funkčními odkazy), které jsme vytvořili v administraci WordPressu. K tomu můžeme přidat logo webu, vyhledávací lupu, a v případě eshopu ikonu nákupního košíku.
26) NADPIS
Toto je nadpis
27) ROZBALOVACÍ ZÁLOŽKY
Fungují podobně jako přepínač, ale můžeme jich přidávat libovolný počet. Výhodou je, že při otevření nové záložky se předchozí uzavře, což zpřehlední web.
Váš titul jde sem
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
Váš titul jde sem
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
28) SLEDOVAT SOCIÁLNÍ SÍTĚ
Na výběr máme ohromný seznam nejvíce používaných sociálních sítí. Stačí pouze zadat odkaz.
29) NAVIGACE V PŘÍSPĚVKU
Umožňuje vložit lištu s odkazem na předchozí a následující příspěvek
30) OBRÁZEK
Modul je pouze pro přidání obrázku. Do obrázku můžeme přidat odkaz, nastavit velikost, zarovnání, stínování…
ZÁKLADNÍ SPRÁVA MODULŮ
Všechny moduly mají v zásadě tři kategorie:
1) OBSAH
2) NÁVRH
3) POKROČILÉ
Vysvětlení dolních možností:
- Červené pole s křížkem – Pokud uděláme nějaké změny,které se nám nelíbí, dáme tuto možnost a změny se neuloží
- Fialové pole se šipkou zpět – Vrátí poslední akci zpět
- Modré pole se šipkou napřed – Vrátí poslední akce znovu
- Zelené pole s fajfkou – Nejdůležitější pole!! Po editaci tímto polem uložíme změny
1) OBSAH
V každém modulu jsou jiné možnosti. Takové nejčastější si projdeme:
- Odkaz – Odkaz, který nás přivede na definovanou stránku, když je prázdný, nic se neděje
- Pozadí – Jako pozadí můžeme nastavit barvu, gradient(přechody), obrázek, vzor, video a masku
- Označení admina – Není povinné, slouží pouze pro naši orientaci
2) NÁVRH
Široká editace především vizuálních věcí. Editujeme např.
- Styly textů – Jeho font, velikost, barvu, pozadí, stínování, padding(vnitřní řádkování), margin(vnější řádkování), okraje, podtržení
- Animace – Můžeme přidat jednoduché jakémukoliv prvku. Pokud začíjnáme, doporučuji vynechat, nebo minimálně omezit
1) POKROČILÉ
Tato volba je pro pokročilejší úpravy, obsahuje např:
- ID, CLASS – Podpora přidání třídy, nebo ID
- Vlastní CSS – Pro custom úpravy můžeme přidat vlastní kód přímo do modulu
- Viditelnost – Můžeme libovolnému prvku nastavit, aby se např. zobrazoval pouze na mobilních zařízeních
- Scroll Effects – Další druh „animací“, které se aplikují současně se scrollováním na webu
