Detail kurzu
WordPress II. vizuálna kompozícia - dizajnovanie a tvorba obsahu, špičkové grafické podstránky pre neprogramátorov
IT LEARNING SLOVAKIA, s.r.o.
Popis kurzu
Možno poznáte situáciu, keď máte WordPress stránku funkčnú, no keď ju porovnáte s webmi konkurencie, vyzerá... no, povedzme – nudne. Čierny text na bielom pozadí, sem-tam obrázok, žiadny pohyb, animácie, žiadne farebné sekcie. Všetko technicky v poriadku, ale vizuálne to vyzerá, že ste do toho neinvestovali viac než hodinu-dve práce. A presne to vidí aj návštevník. Blokové editory (page buildery) prichádzajú presne pre tento moment – umožňujú vám tvoriť profesionálne vyzerajúce stránky. A bez programovania. Na kurze sa naučíte pracovať s pluginom WPBakery Page Builder, ktorý patrí medzi najpoužívanejšie nástroje tohto typu. Za hodinu-dve práce vytvoríte dizajn, ktorý vyzerá, akoby ho robil grafik.
Na školení prechádza inštaláciou, nastavením a praktickou prácou s WPBakery Page Builder (predtým známy ako Visual Composer). Začnete od úplných základov – ako vložiť prvý element, ako nastaviť riadky a stĺpce, ako rozmýšľať v mriežke. Postupne sa dostanete k pokročilejším témam: animované bloky, parallax efekty, responzívne prispôsobovanie, dizajnové nadpisy, slajdre, ikonky, galérie. Celé školenie je postavené na praktickom komponovaní – spoločne vytvoríte minimálne dve kompletné podstránky. Nie je to teoretická prednáška o funkciách pluginu, ale dizajnérska dielňa, kde si vyskúšate, ako prekresliť a zostaviť stránku podľa predlohy. Získané vedomosti vám o.i. umožnia robiť v budúcnosti pekné stránky aj pomocou jeho konkurentov, pretože filozofia WPBakery patrí medzi najrozšírenejšie medzi page buildermi.
Ako redaktor obsahu získate schopnosť tvoriť profesionálne grafické podstránky bez toho, aby ste museli zavolať programátora alebo grafika. Naučíte sa skladať sekcie, bloky a stĺpce tak, aby obsah vynikal aj na mobile, a zároveň pochopiť, prečo sa niektoré veci na menších displejoch zobrazujú inak. Vďaka tomu budete vedieť reagovať na aktuálne trendy (minimalizmus, mobile-first prístup, dark mode) a prispôsobiť dizajn potrebám vašej stránky. Ako podnikateľ alebo majiteľ webu získate nezávislosť – nebudete potrebovať zmeny na stránke konzultovať s externistom. Predstavte si to ako rozdiel medzi schopnosťou upratať vo vlastnom byte, alebo volať upratovačku vždy, keď potrebujete utrieť prach na nábytku. Kurz nepokrýva pokročilé CSS úpravy ani custom kódovanie – ak chcete robiť naozaj neštandardné veci mimo možností builderu, budete potrebovať programátorské znalosti z niektorého iného kurzu.
Školenie je určené pre redaktorov a správcov WordPress stránok, ktorí ovládajú základnú prácu so systémom – vedia vytvoriť stránku, pridať článok, nahrať obrázok. Ak ste WordPress ešte nikdy nepoužívali, pozrite si osnovu kurzu na nižšej úrovni. Nemusíte vedieť programovať, nemusíte poznať HTML ani CSS. Stačí, ak máte chuť naučiť sa tvoriť vizuálne zaujímavý obsah a nie je vám cudzie experimentovať s dizajnom. Na kurz si môžete priniesť prihlasovacie údaje k vlastnej stránke, alebo budete pracovať na pripravenom testovacom „pieskovisku“. Plugin WPBakery Page Builder dostanete zadarmo na edukačné účely, čo vám umožní pokračovať v experimentovaní aj po skončení školenia.
Obsah kurzu
Tvorba obsahu vo WordPresse- Opakovanie základov WordPress
- Tvorba podstránok
- Prehľad vizuálnych kompozérov/page builderov, porovnanie
- Čo znamená tvorba obsahu
- Rozdiel medzi page builderom a klasickým editorom
- Kde sa dá komponovanie využiť – stránky, články,...
- Ukážka práce, alebo čo budeme robiť
- Kde page builder stiahnuť
- Ceny a licencie
- Na čo dať pozor pri sťahovaní
- Inštalujeme WPBakery Page Builder (Visual Composer)
- Úvodné nastavenie a konfigurácia
- Vloženie licenčného kľúča a aktualizácie
- V akej téme ho môžeme použiť
- Kedy zvoliť frontend a kedy backend
- Prázdna biela téma vs. grafická hotová téma
- Čo máme k dispozícii
- Prehľad elementov a novinky
- Výber elementu
- Umiestnenie elementu
- Odskúšanie dizajnu
- Kde nastavíme šírku šablóny a obsahu
- Prvky v rôznych témach a pridané pluginmi
- Čo musíme vedieť o elementoch
- Vloženie
- Nastavenie
- Presúvanie
- Duplikácia
- Kopírovanie do schránky
- Vkladanie za aktuálny blok
- Mazanie
- Vytvorenie a ukladanie vlastnej šablóny
- Tvorba obsahu
- Ako sa tvorí obsah a jeho rozdelenie
- Práca a premýšľanie v mriežke
- 12 stĺpcov na obrazovke
- Čo je to responzívny obsah
- Ako sa bude obsah prispôsobovať
- Vypínanie mobilných častí alebo čo keď niečo na mobile nechcem
- Zarovnávanie obsahu
- Tvorba riadkov a práca s riadkami
- Riadok v riadku / kontajner v kontajneri / blok v bloku
- Rozdiel medzi textom a blokom (riadkom)
- Šírka riadka a jeho možnosti
- Obsah v kontajneri
- Obsah cez celú obrazovku
- Dizajn a farebné možnosti bloku - kontajnera
- Farba pozadia pre riadok
- Spôsoby zarovnávania obrázkov
- Veľkosti obrázkov
- Obrázok na pozadí bloku
- Video v bloku
- Paralax efekty a ich využitie
- Animácia zobrazenia bloku
- Responzivita v nastaveniach stĺpcov
- Nadpisy sekcií
- Pozadia blokov
- Plná šírka obrazovky
- Vzdušnosť a prehľad
- Tlačidlá a odkazy
- Striedanie obsahu
- Ikony a grafika
- Teória podobných farieb
- Plán sekcie
- Štruktúra stránky
- Práca s textom
- Nadpisy
- Obrázky, galérie obrázkov, slajdre
- Ikony
- Správy a zvýraznené bloky
- Čiary a oddeľovače obsahu
- Animovaný blok s obrázkom
- Sociálne tlačidlá a copyright
- Rozbaľovacie ponuky a FAQ
- Záložky a panely
- Tlačidlá, CTA plochy, cenovky
- Grafy a ilustrácie
- Služby tretích strán – ako vložiť video, mapy, Flickr
- Post grid alebo výpis článkov - články, novinky a aktuality
- Grid builder
- Gutenberg editor?
- Čo nám ostalo - slajder príspevkov a článkov, prepínač
- ...a niečo technickejšie – vkladanie HTML kódu a JavaScriptu
- Ostatné elementy – widgety
- Kde nájsť dokumentáciu k prvkom
- Vkladanie elementu
- Nastavenie jeho vzhľadu a dizajn
- Zarovnávanie
- Farebný štýl
- Grafický štýl
- Veľkosť a zarovnanie
- Animovanie prvku
- Pridanie ikonky
- ID a trieda elementu
- Vlastné CSS
- Akcia po kliknutí
- Špeciálne dizajnové vlastnosti – pozadie, odsadenie, orámovanie
- Uloženie elementu
- Praktické ukážky
- Minimalizmus, zjednodušené rozhrania
- Personalizovaná typografia
- Mobile-first vs. responzivita
- Dynamické prvky
- Modulárny dizajn
- AI a generovaný obsah
- Dark mode a neónové farby
- Brutalizmus a neštandardné rozvrhnutie (pre odvážnych)
- Ekologický webdizajn
- Vytvorenie peknej stránky podľa zvolenej predlohy
- Prekresľovanie a tvorba podľa predlohy
- Každý účastník vytvorí na kurze min. 2 dizajny podľa výberu
- Diskusia a odpovede na otázky účastníkov
- Riešenie individuálnych otázok a problémov
Cieľová skupina
mierne pokročilýHodnotenie
Organizátor
Ďalšie termíny kurzu
Podobné kurzy
podľa názvu a lokality
