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
Chceli by ste graficky vyspelé a moderné web stránky, ktoré budú predávať samé? Animované bloky plné farieb a ikoniek, skvelé nadpisy a ilustrácie, tlačidlá, ktoré budú vaši návštevníci chcieť „odhryznúť“ od krásy z obrazoviek? Krásne rozdelené a členené do stĺpcov, ktoré budú navyše na mobiloch vyzerať skvele a samé sa prispôsobovať rozmerom obrazoviek? To nie je problém za predpokladu, že vaša web stránka beží na redakčnom systéme WordPress a obsah budete skladať v režime vizuálneho komponovania pomocou niektorého z blokových editorov (page builderov).
Kurz WordPress II., vizuálna kompozícia je voľné pokračovanie nášho kurzu WordPress I. Je tu pre tých, ktorí chcú vedieť tvoriť fantastické dizajnové obsahy plné moderných prvkov bez programovania. Na kurze sa budeme učiť pracovať s asi najlepším pluginom na komponovanie WordPress obsahov – WPBakery Page Builder označovaný v minulosti aj ako Visual Composer. Rozdiel medzi pluginmi WPBakery a Visual Composer si objasníme tiež.
WPBakery je dokonalý aj na výuku, pretože je jednoduchý a prácu s ním zvládne po vysvetlení aj priemerný používateľ počítača. Na kurze budeme iba klikať a trochu písať, no výsledok práce bude vynikajúci. Nikto vám neuverí, že ste web stránku tvorili sami, pretože výsledok bude vizuálne profesionálny. Príklad práce na kurze nájdete na stránke alzbeta.wpkurz.sk.
Na kurze sa zoznámite s pluginom, spoločne si ho nainštalujeme a prejdeme jeho súčasti. Praktická časť bude zameraná na cvičenia, kde spoločne vytvoríme 2 stránky a budeme ich rôzne dizajnovať. Povieme si tipy ako uvažovať pri prekresľovaní rôznych dizajnov z praktického života. Naučíte sa tvoriť, skladať, vkladať a nastavovať riadky, bloky, obrázky, slajdre, sekcie, dizajnové nadpisy, ikonky, záložky, animácie, tiež vkladať menu tam, kde v téme nie je a množstvo iného.
Dovoľte, aby vaše stránky neboli čierne texty na bielych pozadiach a sem-tam obrázok. Dovoľte, aby vaše stránky predávali samé a vyzerali po hodinke práce naozaj skvele.
Kurz je určený pre bežných používateľov WordPressu a úpravcov obsahu. Vyžadujú sa základné znalosti o WordPresse. Nemusíte ale vedieť programovať a ani programovacie jazyky HTML či CSS. Na kurz si môžete priniesť prihlasovacie údaje ku svojej web stránke alebo môžete skúšať a tvoriť na našej skúšobnej web-stránke. Súčasne na kurze získate tento užitočný "čarovný" plugin zadarmo na skúšobné a edukačné účely.
Obsah kurzu
== Úvod do tvorby 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ť == Inštalácia pluginu - page builder == * 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 == Ako sa WPBakery Page Builder (Visual Composer) používa == * 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 * Prehľad elementov a novinky * Výber elementu * Umiestnenie elementu * Odskúšanie dizajnu * Kde nastavíme šírku šablóny a obsahu == Používanie elementov a tvorba šablóny == * Vloženie * Nastavenie * Presúvanie * Duplikácia * Mazanie * Vytvorenie a ukladanie vlastnej šablóny == Základné princípy dizajnovania stránok – sekcie, bloky, stĺpce == * 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 respozní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 riadkom * Šírka riadka a jeho možnosti * Obsah v kontajneri * Obsah cez celú obrazovku * Dizajn a farebné možnosti 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 príletu bloku == Ako tvoriť dizajn == * 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 * Prehľad možností alebo čo, kedy a ako použiť na svojich stránkach == Š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 == Praktická práca s elementami == * 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 == * Aktuálne trendy v príkladoch * 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 == Praktická časť == * 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émovCieľová skupina
mierne pokročilýHodnotenie
Organizátor
Ďalšie termíny kurzu
Podobné kurzy
podľa názvu a lokality
