Kurz WordPress a WooCommerce špecialista
inštalácia a administrácia, správa, design, obsah, eshop a marketingová grafika

Úvod do grafiky

• Čo je to počítačová grafika?
• Čo všetko môžeme kresliť, ako vzniká grafika
• Kto je to grafik a kreatívny grafik
• Ako byť grafikom, keď neviem/nechcem byť kreatívny
• Práca grafika, ukážka
  • aké funkcie grafik využíva v Illustrator-e
  • kedy grafik otvára InDesgin
  • úloha Photoshop-u v živote grafika
  • Corel Draw a iné grafické programy
• Čo by mal vedieť grafik
  • problematika nastavenia farieb CMYK vs. RGB
  • problematika tlačového dokumentu, PPI a DPI
  • rastrová a vektorová grafika
  • kedy použiť ktorý formát grafických súborov
    • aký je rozdiel medzi PNG, JPEG a PDF
    • uloženie grafiky vo formáte PNG, JPEG
    • export do PDF a PDF pre tlač
  • autorské práva a grafika
  • grafika, design a marketing

Predstavujeme Canvu, prihlásenie

• čo budem potrebovať
• registrácia a prihlásenie
• mobilná aplikácia a tablet
• čo môžem kresliť a navrhovať
• platená a neplatená verzia
• Čo sa naučíme, čo budeme tvoriť a kresliť, prehľad šablón a tém
  • letáky a plagáty
  • vizitky
  • skladacie letáky
  • viacstranové dokumenty
  • prezentácie
  • kreatívny životopis
  • certifikáty a ocenenia
  • darčekové poukazy
  • jedálny lístok
  • grafika pre sociálne siete
  • vytváranie reklamného banneru
  • hlavička pre e-mail marketing

Copywriting v marketingovej grafike

• pravidlá pre obsah
• typy obsahov
• rozmiestnenie elementov (prvkov)
• grafické a textové elementy
• pravidlo 5 informácií
• Ukážky grafických prác

Základné nastavenie plátna

• Výber veľkosti plátna alebo jeho priame zameranie
• Nájsť a vložiť vhodnú šablónu
• Upraviť a prispôsobiť text a obrázky

Tvoríme prvú grafiku

• Základné princípy tvorby grafiky
• Stanovenie si cieľov grafiky
• Čerpanie inšpirácie z externých zdrojov
• Samotná tvorba grsfického dokumentu
• Problematika interpunkčných znamienok v grafike
• Proces tvorby grafického návrhu
• Nástroje k dispozícii
  • Fotografie
  • Prvky Canva
    • Mriežky - tvorba vlastného zaujímavého pozadia
    • Tvary a rámy (framy)
    • Čiary
    • Ilustrácie, ikony, nálepky
    • Prechody
    • Grafy atď.
  • nástroj na tvorbu a editáciu textov
  • pozadie pre rôzne typy dokumentov

Vkladanie obrázkov do Canva

• 2 prístupy k fotkám
• Formáty .jpeg, .png alebo .svg
• Súbor musí mať menej ako 25MB
• Použitie RGB farieb, konverzia z CMYKu
• Vodotlač v neplatenej verzii

Foto a obrázky pre grafiku

• Platené a neplatené knižnice obrázkov
• Práca s fotografiami
  • Vkladanie obrázkov na plátno
  • Nahrávanie obrázkov z počítača
  • Ako prispôsobiť veľkosť obrázka pozadiu
  • Ako nastaviť obrázok ako pozadie
  • Otáčanie obrázkov
• Práca s fotografiami - filtre
  • Práca s preddefinovanými filtrami
  • Tvorba vlastného filtra
• Práca s tvarom a rámom
  • Praktické využitie
  • Výber z množstva tvarov, výber vhodného tvaru alebo rámu
  • Rozdiel medzi tvarom a rámom
  • Ako využiť tvar na orezanie obrázku
  • Práca s tvarmi, čiary
  • Zmena farebnosti tvaru
  • Kedy využiť priehľadnosť tvaru a ako sa to robí
  • Čiara ako separátor
• Práca s ilustráciami
  • Vytvorenie pozadia pomocou ilustrácií
  • Rotácia ilustrácií
  • Zmena farieb ilustrovaných obrázkov
• Efektívna práca s ikonami
  • Kedy ikony využívať a načo nám slúžia
  • Využitie ikon v grafike
  • Ako meniť ich veľkosť a farby
• Práca s infografmi
  • Využitie percent
  • Časová os
  • Iné grafiky s číslami

Tvorba nadpisov v štýle loga

• výber a úprava textu
• úprava farebnosti
• Tvorba loga z ponuky Canva
• Ako vytvoriť jednoduché vlastné logo

Ako graficky zvýrazniť dôležitý text

Ako ďalej po kurze

• Ako funguje web a čo znamená webstránka
• Čo sú to redakčné systémy
• Čo je to Wordpress a prečo je najlepší
• Protokoly HTTP, HTTPS, FTP a iné
• Dostupné technológie pri tvorbe webstránok
  •  HTML jazyk a jeho ďalšie verzie
  •  CSS, PHP, JavaScript a iné
  •  ako sa web programuje
  •  ako sa web dostane z počítača na web
  •  aké potrebujem programy pre programovanie webu
  •  koľko stojí dobrý web a podľa čoho sa určuje cena webstránky
• Ukážky webstránok
  •  ako rozoznám CMSko od písaného kódu
  •  čo je to zdrojový kód
  •  aké termíny musím poznať
• Čo musí obsahovať webstránka
  •  príprava obsahu
  •  menu na správnom mieste
  •  stĺpce
  •  možnosti obsahu
  •  hlavička
  •  päta stránky
• Logické rozdelenie webstránok – čo je čo a ako to funguje
  •  jednoduchá webstránka
  •  blog
  •  e-shop
  •  portál
  •  intranetový systém
  •  iné web stránky
• Dosť bolo teórie, poďme skúsiť prakticky
  •  ukážky dnes dostupných redakčných systémov
  •  platené redakčné systémy v SR
  •  bezplatné nástroje
  •  máme víťaza – WordPress
• WordPress a jeho možnosti
  •  témy
  •  moduly
  •  tvorba obsahu
  •  nastavenia
  •  ďalšie funkcie, ktoré sa nám budú hodiť
• Kopírovanie a inštalácie Wodpressu na server
  • čo budeme potrebovať
  • čo je to FTP
  • stiahnutie poslednej verzie
  • kopírovanie súborov na server
  • PHPMyAdmin alebo kde sú uložené dáta
  • SQL databáza a jej nastavenie
• Stiahnutie a inštalácia redakčného systému
  •  aktuálna verzia
  •  prvé nastavenie
  •  nastavenie administrátora
  •  nastavenie databázy
  •  plnenie úvodných informácií
• Dashboard a pracovné prostredie
  •  kde mením moju stránku a čo je to dashboard
  •  ako sa stránka vyvíja
  •  kde vidím web stránku a kde ju mením
  •  redakčný systém Wordpress
    • stránky
    • články
    • multimédiá
    • vzhľad
    • moduly
    • používatelia
    • nástroje
    • nastavenia
• Tvoríme webstránku a jej obsah
  •  10 bodov základných bodov a nastavení pre funkčnú webstránku
  • základom je obsah
    • obsahové stránky
    • články
    • rozdiel medzi blogom a obsahom
  •  komentáre a ich možnosti
  •  autor obsahu a práva
  •  nastavujeme menu
  •  tvoríme odkazy
  •  nahrávame obrázky
  •  nastavujeme stĺpce
  •  vyhľadávanie v obsahu
  •  kategórie a tagy webstránky
• vizuálna kompozícia obsahu alebo najlepší modul Visual Composer v praxi
  • čo je to kompozícia web stránky
  • inštalácia modulu
  • základné používanie
  • práca so stĺpcami alebo čo keď chcete robiť "veci vedľa seba"
  • komponenty Visual Composera ktoré budete určite používať
  • obrázky a galérie
  • ikony
  • nadpisy
  • riadky a stĺpce
  • infoboxy
  • režim editácie stránky v stránke alebo riadková editácia
  • iné možnosti
• Téma stránky alebo – Grafika predáva
  •  možnosti tém
  •  platené a bezplatné témy
  •  ako funguje téma a kde sa dá meniť
  •  základné úpravy
  •  prepínanie medzi témami „za jazdy“
• Moduly a widgety
  • rozdiely
  •  čo je to modul a kde sa dá stiahnuť
  •  dostupné widgety
  •  doporučené widgety
  •  komentáre, hodnotenia, sociálne tlačidlá, SEO, reklamné odkazy ...
  • kontaktný formulár
  • vkladanie mapy
• Blog alebo články
  •  čo sú to články
  •  tvoríme obsah
  •  nastavujeme vzhľad
  •  nezabúdame tagovať a priraďovať kategórie
  •  používame fórum a komentáre
• bezpečnosť Wordpress stránok
  • je Wordpress bezpečný redakčný systém ?
  • Čo sa môže stať, ak nám niekto HACKNE našu web stránku
  • citlivé údaje
  • základné pravidlá pre bezpečnosť
  • čo a ako sa dá jednoducho zistiť o hotovej Wordpress stránke alebo úvodný Hacking v praxi
  • bezpečnosť prihlasovania a prihlasovacie heslá
  • bezpečnosť používateľov a sila hesla
  • bezpečnostné pluginy
  • aktualizácie a ich dôležitosť
  • prenos súborov cez FTP
  • prefix tabuliek
  • kde má Wordpress uložené hlavné heslá a bezpečnosť súborov
  • zálohy mojich údajov
• Záloha a migrácia mojej stránky
  • ako môžem zálohovať web stránku
  • ako môžem web stránu presunúť na inú doménu
• Ako môžem webstránku podporiť
  •  Facebook a sociálne siete
  •  internet marketing a jeho základné pojmy
  •  reklama na internete v rôznych podobách
  •  štatistiky alebo ako merať úspech webstránky
  •  kam pridávame do stránky merací kód
• Tvoríme obsah
  • práca s obrázkami a grafikou
• Trénujeme a cvičíme
  •  tvoríme web na ďalší námet na základe zadania
  •  otázky a odpovede
  •  diskusia
  •  záver

Ú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émov

Úvodné minimum pre e-shop

• Ako funguje webstránka a v čom sa líši od e-shopu
• Čo na elektronickom obchode nesmie chýbať
• Ako je to s legislatívou, musím mať na vedenie obchodu firmu
• Konkurencia na Slovensku

Krátke opakovanie

• Opakovanie z oblasti webstránok
  • HTML, CSS, PHP a iné
  • Odkazy
  • Obrázky
• Opakovanie z oblasti WordPress
  • Redakčný systém
  • Články
  • Stránky
  • Menu
  • Rozvrhnutie
  • Widgety
  • Témy
  • Nastavenia

Vytvárame stránku ako priestor pre nový obchod

• Registrácia webhostingu
• Inštalácia WordPressu
• Nastavenie
• Úvodné stránky
• Obsah, články, widgety

Ako spraviť a nastaviť e-shop

• Náš nový obchod: modul WooCommerce
• Inštalácia WooCommerce
• Ako nastaviť e-shop
  • Výber témy
    • akú tému použiť na obchod
    • problémy tém
    • košík v téme
    • navigácia a obchodné widgety
  • Nastavenie obchodu po grafickej stránke
    • Názov a logo
    • Hlavička stránky, inak povedané slider, či marketingová oblasť
    • Mobilná verzia
    • Nastavenie správania sa obchodu v téme
    • Základné štýlovanie, farby, veľkosti, fonty ...
    • Rozvrhnutie webstránky
    • Ikonka obchodu
    • Ostatné
  • Nastavenie obchodu po funkčnej stránke
    • Krajina predaja a mena, DPH ...
    • Nastavenie produktov a obrázkov
    • Kupóny a košík
    • Doprava a platby
    • Platobné systémy
    • Používateľské účty a práva nákupu
    • Nastavenie e-mailov
    • SMTP server a nastavenie WordPressu z pohľadu posielania e-mailov, modul SMTP

Slovenčina v e-shope

• Prečo na mňa hovorí modul po anglicky
• Ako preložiť WooCommerce a jeho stránky
• Slovenčina na stránke pri zobrazovaní
• Prekladací modul
• Prekladanie na stánke

Z čoho sa skladá nový e-shop

• Objednávky
• Kupóny
• Zostavy
• Nastavenia
• Stav systému
• Add-ons
• Produkty
• Kategórie
• Značky
• Prepravné triedy
• Vlastnosti

Pridávame obsah webstránky

• Hlavná stránka
• Podmienky
• Ako nakupovať
• Kontakt
• Skúšobné Kategórie a skúšobné produkty

Vzhľad hlavnej stránky (z pohľadu už nastavených modulov)

• Hlavné menu
• Nové, automatické podstránky
• Vedľajšie menu
• Košík
• Kategórie
• Obsah stĺpcov na webe a iné widgety ...

Produkty

• Všetky produkty
• Nový produkt a vloženie do kategórie
• Popis a možnosti popisovania produktov
• Obrázky a galéria
• Doprava
• Iné možnosti
• Recenzie
• Kategórie
  •  Text kategórií
  •  Obrázok kategórií
  •  Zaradenie produktov do kategórií
  • Kategórie v menu
• Doprava a dodanie
  • Nastavenie dopravy
  • Nastavenie spôsobu dodania
  • Platby, texty a možnosti
  • Ceny
• Nastavenie platieb
  • spôsoby platby
  • nastavenie čísel účtov
  • poradie platieb

Skúšobná objednávka a e-maily

• Nastavenie e-mailových správ a statusov k objednávkam
  • E-mailové správy od registrácie až po vybavenie objednávky
  • Zmena obsahu e-mailových správ
  • Definícia platobných podmienok do e-mailov
  • Variabilný symbol pre platbu
• Faktúry a dodacie listy
• Vlastné číslovanie objednávok
• Stránka moje objednávky pre nakupujúcich
• Stránka košík
• Zabudnuté heslo

Práca s objednávkami

• Nové doručené objednávky
• Filtrovanie objednávok
• Práca so statusom objednávky
• Zmena informácií v objednávke
• Potvrdzovanie objednávky

Údržba obchodu

• Záloha dát a PHPMyAdmin
• Záverečné rady a nastavenia
• Odporučené moduly
• Platobné moduly alebo spôsoby platby cez kreditné karty
• Ako pokračovať ďalej s ďalšími možnosťami a variáciami obchodu

WordPress a WooCommerce

• redakčný systém WordPress
• nastavenia RS
• akú tému vybrať pre obchod
• Inštalácia a nastavenie WooCommerce
• spolupráca téma a plugin
• navigácia a obchodné widgety
• čo máme v základe vo WooCommerce
• ako má dnes fungovať e-shop
• potreba automatizácie

Pokročilé nastavenie e-shopu

• prispôsobiť stĺpce na administračných obrazovkách
• pokročilý vyhľadávací panel AJAX
• filtrovanie produktov
• rezervácia produktu (produktov)
• ikona košíka s počtom položiek a celkovými nákladmi do menu
• pridávanie textu alebo HTML kód na stránku produktu
• spravovanie zásob a cien produktu
• skvelý dojem zo stránky na mobiloch i na desktopoch - AMP
• rozšírené prepojenia WP na predaj cez FB, IG

Online platby

• nastavenie platieb na bankový účet
• dobierka a jej špecifiká, prečo chceme spoplatniť dobierku
• moderné platobné metódy
• delenie kariet z pohľadu platobných možností
• nastavenie platby cez kreditnú kartu a PayPal
• poplatky za zriadenie a správu platobnej brány
• možnosti platobných brán Stripe, Trustpay
• vytvorenie účtu - registrácia a verifikácia
• vhodné pluginy do WooCommerce
• prepojenie pluginu a účtu - verejný a súkromný kľúč
• nové nastavenia WooCommerce, výber aktivácie

Pokročilá logistika objednávky

• čo je to logistika objednávky
• ako to má WooCommerce v základe nastavené
• prečo to nie je vhodné a správne
• zóny dopravy vo WooCommerce
• nastavenie multi dopravy
• doprava do iných štátov
• pokročilé nastavenia dopravy vo WooCommerce
• vaše procesy
• tabuľka procesov a spôsobov vybavenia objednávky – logistické cesty
• vlastné stavy objednávky
• ako informovať zákazníka o stavoch objednávky
• vlastné e-mailové hlásenia
• inventúra a multispráva produktov
• automatizácia odosielania zásielok
  • etikety, štítky v doprave
  • zmluvy s dopravcami, vlastný odvoz
  • outsourcing distribúcie

Externá administratíva

• povinnosti prevádzkovateľa e-shopu
• IČO a DIČ na dokumentoch
• vlastné faktúry a dodacie listy v .pdf
• skladové hospodárstvo
• účtovníctvo
• fakturácia

Marketing a bezpečnosť pre e-shop

• SEO modul alebo ako Google nájde naše produkty vo vyhľadávači
• prihlásenie pomocou Facebooku, Googlu
• feedy dát FB a Google
• Heureka a porovnávače cien
• prihlásenie pomocou Facebooku
• bezpečnosť