Správa webové prezentace

Transkript

1 Správa webové prezentace 1. Přihlášení do administrace 1. Do svého webového prohlížeče zadejte adresu 2. Zadejte uživatelské jméno a heslo 3. Zaškrtněte políčko Pamatovat si mě a následně klikněte na tlačítko Přihlásit se Po úspěšném přihlášení Vás přivítá administrace systému Wordpress. Na levé straně je hlavní nabídka, kde se můžeme přepínat do jednotlivých sekcí a na zbytku stránky se pak zobrazuje obsah. 2. Popis položek nabídky Nástěnka jedná se o jednoduchý přehled. Zobrazují se zde informace o dostupných aktualizacích nebo nově přidané komentáře. Příspěvky zde se nachází přehled námi publikovaných příspěvků do sekce Novinky na webových stránkách. Můžeme je snadno upravovat nebo přidávat další. Média slouží k nahrávání nových fotografií nebo obrázků do naší databáze. Nahrané obrázky se na stránkách nezobrazí. Zůstanou uloženy v databázi a v případě potřeby je můžeme načíst a vložit např. do příspěvku. 1

2 Stránky v této nabídce se nachází seznam všech vytvořených stránek (úvod, o nás, služby ) Kliknutím na danou stránku se přepneme do režimu editace. Můžeme také snadno vytvořit novou stránku kliknutím na Vytvořit stránku Komentáře jedná se o přehled všech komentářů, které byly návštěvníky přidány. Můžeme je zde moderovat, mazat nebo označovat jako spam. Kontakt zde se nastavují kontaktní formuláře a jejich parametry. Lze zde vytvořit několik variant kontaktních formulářů (každý může obsahovat jiná pole) ale standardně je nastaven jeden formulář. Revolution Slider zde se nastavují slidery, které se promítají na úvodní obrazovce. Standardně je vytvořena jedna kolekce (Home), ale můžeme si jich vytvořit několik. V editace stránky Domů lze pak následně vybrat, která se má používat. Vzhled tato sekce je určena spíše zkušenějším uživatelům. Můžeme zde editovat kód grafické šablony, nastavovat widgety ale také upravovat položky v menu Pluginy slouží pro instalaci nových pluginů, které rozšiřují možnosti systému Wordpress. Veškeré úpravy nechte raději na svém správci nebo zkušeném uživateli. Uživatelé seznam uživatelů, kteří mají přístup do administrace Wordpress. Každému lze nastavit práva, takže můžeme mít uživatele, který může pouze přidávat nové příspěvky, ale nic ostatního nemůže upravovat. Nástroje pouze pro administrátory. Slouží k importu nebo exportu obsahu databáze Nastavení pouze pro administrátory. Slouží k nastavení pokročilých možností stánek, komentářů nebo trvalých odkazů. Corporate nastavení grafické šablony. Můžeme zde měnit logo, fonty, barvy nebo měřící kód. 3. Úprava obsahu stránek 1. V hlavním menu zvolíme Stránky 2. Zobrazí se nám seznam všech vytvořených stránek (O nás, Kontakt, Galerie apod.) 3. Kliknutím vybereme stránku, kterou chceme editovat (na obrázku modré názvy) 2

3 4. Zobrazí se nám editace stránky, kde nás zajímají hlavně následující prvky (viz. Obrázek) Web je tvořený pomocí Visual Editoru. To znamená, že všechny prvky (blok textu, obrázek apod.) jsou přidávané pomocí tohoto editoru. 3.1 Jak přidat prvek do stránky? Prvky do stránky přidáme pomocí nabídky Visual Editoru 1. Pokud chceme např. přidat pole s textem, tak klikneme na nabídku Widgets a vybereme HTML/Text Block (hned první volba). 2. Do stránky se nám vloží zvolený prvek HTML/Text Block ¼ Znamená, jak široký prvek bude tj. zda bude do čtvrtiny, poloviny nebo přes celou stránku. Šířku si upravujeme pomocí šipek, které jsou umístěny hned vedle. Po najetí na prvek, se nám kurzor změní na kříž. Jednoduchým kliknutím a tažením ho můžeme posouvat na pozici, kterou potřebujeme. 3. Po najetí na prvek se nám vpravo zobrazí jeho další možnosti 3

4 Ikona ozubeného kola jsou vlastnosti prvku. Pokud na ni klikneme, tak se nám zobrazí okno, kde můžeme upravit text (pokud jde o prvek HTML/Text) nebo změnit obrázek (pokud jde o prvek Single Image). Ikona dokumentů slouží ke klonování prvku. Po kliknutí se hned vedle vytvoří přesná kopie prvku. Tato funkce je vhodná, pokud chceme vytvořit více naprosto stejných prvků. Ikona koše prvek jednoduše vymaže. 4. Klikneme tedy na ikonu ozubeného kola a zobrazí se nám okno s možnostmi tohoto prvku 5. Do pole Content napíšeme námi požadovaný text. Využít můžeme nástroje běžné z klasických textových editorů (tučné písmo, seznam, odkaz apod.), které se nám zobrazí v horní části. 6. Do dokončení úprav klikneme na tlačítko Done editing. Tím se změny uloží a vrátíme se zpět do editace stránky. 7. Nyní klikneme na tlačítko Save a tím se naše změny projeví na webové prezentaci. V tuto chvíli už můžeme bezpečně stránku s administrací zavřít. 4

5 3.2 Jak na stránkách upravit text nebo obrázek? 1. V hlavním okně administrace klikneme na volbu Stránky 2. Tím se nám zobrazí seznam všech vytvořených stránek 3. Klikneme na stránku, kterou chceme upravovat např. Služby. Tím se přepneme do režimu editace 4. Ve Vizuálním Editoru vyhledáme prvek, který chceme upravit např. Single Image (obrázek). 5

6 5. Najedeme myší na daný prvek a v jeho pravé části se nám zobrazí další volby (ozubené kolo, klonování a koš pro odstranění) 6. Klikneme na symbol ozubeného kola a zobrazí se nám vlastnosti tohoto prvku (v našem případě obrázku Single Image) Pro nás je nejdůležitější pole Image. Kdy můžeme nahrát nový obrázek z PC (tlačítko Upload), vybrat obrázek z knihovny již dříve nahraných obrázků (Media Library) nebo obrázek odebrat (Remove). 7. Po dokončení úprav klikneme na tlačítko Done Editing (uloží úpravy provedené na prvku) a následně tlačítko Save. Tím se změny projeví na webových stránkách (pozn. Musíme je v našem webovém prohlížeči znovu načíst klávesa F5) 6

7 3.3 Jak přidám nový příspěvek do sekce Novinky? 1. Na hlavní stránce administrace systému klikněte na volbu Příspěvky 2. Zobrazí se seznam všech dříve publikovaných příspěvků 3. Klikneme na tlačítko Vytvořit příspěvek 4. Zobrazí se nám editace nového příspěvku Do pole v horní části napíšeme nadpis příspěvku. Další pole je klasický editor, kam můžeme přidat text, obrázky (tlačítkem Mediální soubory), seznamy a další běžné prvky. Pokud nám tento druh editace nevyhovuje, tak se můžeme přepnout na Visual Editor kliknutím na tlačítko Switch to Content Composer. Při tvorbě příspěvku pak postupujeme stejně, jako při editaci běžné stránky. Po dokončení úprav v klasickém editoru klikneme na tlačítko Publikovat (popř. Aktualizovat pokud upravujeme již existující příspěvek). Pokud jsme příspěvek vytvářeli pomocí Visual Editoru, tak klikneme na Save a tlačítka Publikovat/Aktualizovat si nevšímáme! 7

8 3.4 Jak přidám do menu stránku? Jak změním pořadí položky v menu? 1. Na hlavní stránce administrace vybereme Vzhled Menu Vidíme seznam všech prvků, které do menu můžeme vložit např. vytvořené stránky, odkazy apod. (viz. Obrázek) a v pravé části je aktuálně používaná struktura menu. 1. V levé části zaškrtneme stránky, které chceme do menu přidat 2. Klikneme na tlačítko Přidat do menu 3. Tím se nám položky zobrazí ve struktuře menu. Jednoduchým kliknutím a tažením je můžeme přesunout na konkrétní pozici. 4. Po dokončení klikneme na tlačítko Aktualizovat menu 8

9 3.5 Jaké prvky umí Visual Editor vkládat? Prvků, které lze do stránek vkládat je celá řada. Rozhodně je ale nemusíte znát všechny. Ty důležité si zde popíšeme. Editor je v zásadě rozdělený na 3 hlavní skupiny a to Layouts, WIdgets a Post Lists Layouts Prvky z Layouts nebudeme vypisovat všechny, jelikož se používají skutečně minimálně. Prvky z této skupiny se starají hlavně o rozložení stránky tzn. sloupce a okraje. Zajímavým prvkem je však Blank space, který nám vytvoří prázdný řádek. Dobře použitelný je také Divider (oddělovač), který nám vytvoří tenkou linku, a tou můžeme oddělit nějaké jiné prvky Widgets Toto je nejčastěji používaná skupina prvků. Zde naleznete vše od bloku textu, obrázek nebo video HTML/Text Block Jednoduchý blok textu nebo HTML kód. Vkládání je stejné, jako v běžném textovém editoru 9

10 Button Slouží k vytvoření tlačítka. Na výběr máme řadu velikostí a barevných stylů Text block + Icon Slouží k vytváření textových bloků s ikonami List Group Slouží k vytváření seznamů. Na výběr je opět celá řada možností (styl, barvy) Typography Slouží k přidávání speciálních textů např. pokud chceme zvýraznit začáteční písmeno, vložit nějaký počítačový kód apod. 10

11 Progress Bar / Circle Progress Bar Slouží k zobrazení ukazatelů pokroku. Mohou být buď kruhové nebo lineární. Na výběr máme opět celou řadu stylů a barev Accordion Akordeon je v podstatě seznam, jehož položky lze rozkliknout a zobrazit si tak další obsah Toggles V podstatě jde o podobný prvek jako je Accordion, který je jiný pouze grafickým zpracováním Single Image Jde o běžný obrázek. Pozor neslouží k vytváření galerií, ale vkládá opravdu jen jeden samostatný obrázek. 11

12 Gallery Slouží k vytvoření galerie obrázků. V nastavení můžeme nastavit počet sloupců (obrázků vedle sebe) nebo zapnout tzv. karusel (Carousel), což je jednoduchý posuvní na pohyb v obrázkách Video Boxed Content Pokud chceme prvky na stránce vizuálně oddělit, tak můžeme použít Boxed Content. Můžeme mu nastavit vlastnosti jako např. barvu pozadí, vržený stín apod. a následně do něj v editoru jednoduše přesuneme ostatní prvky Video Slouží ke vkládání video do stránek. Podporováno je YouTube, Vimeo a také HTML5 video. 12

13 Message Box Do stránek můžeme vkládat boxy se zprávou. Nejčastěji se používají k tomu, aby návštěvníka upozornily na nějakou změnu (např. aktualizace webu) Testomonial Česky Říkají o nás. Zde si můžete přidat své zákazníky, a co o Vás říkají. Lze nastavit také profilové obrázky (nebo např. logo) a řadu dalších vizuálních možností Client list Saznam partnerů. V editaci jednoduše přidáte dalšího partnera, nastavíte jeho logo a odkaz na firemní web. 13

14 Twitter Timeline Pokud používáte firemní Twitter, tak je možné ho propojit s webovou stránkou. V konfiguraci stačí nastavit uživatelské jméno Twitter účtu Contact Form Kontaktní formulář. V editaci umožnuje pouze výběr, který kontaktní formulář se má použít. Formuláře jsou vytvořené v sekci Kontakt Kontaktní formuláře) Google Map Klasická Google mapa. Pozn.: V editace se zadává nejen adresa ale také zeměpisná šířka a délka. 14

15 Sharing Services Přidá na web možnost sdílení stránky na různých sociálních sítích Post Lists Prvky v této skupině zajišťují výhradně zobrazování příspěvků Blog Zobrazuje na stránce nové příspěvky (vytvořené v menu Příspěvky) Portfolio Zobrazuje na stránce obsah sekce Portfolio (v hlavním menu) 15

16 3.6 Jak upravím animaci na úvodní stránce? Animace na úvodní straně je tvořené pomocí nástroje Revolution Slider. 1. Na hlavní stránce administrace klikněte na volbu Revolution Slider 2. Zobrazí se nám seznam sliderů, které máme vytvořené. Můžeme jich mít několik např. pro každou stránku jeden. V prezentace je standardně připravený jeden slider pro úvodní stranu. 3. Klikneme na název slideru, který chceme upravovat např. zde modrý nápis MAIN (HOME) 4. Zobrazí se nám editace slideru, kde můžeme měnit řadu parametrů např. rozměry, zda se má zobrazovat na mobilních telefonech apod. My ale chceme upravit jeho jednotlivé snímky, takže klikneme na tlačítko Edit slides 5. Zobrazí se nám jednotlivé slidy. V tomto konkrétním máme vytvořené 3 různé, které se promítají jeden po druhém, vždy po doběhnutí časového limitu nebo pokud návštěvník klikne na navigační šipku. 16

17 6. Slidy zde můžeme tažením přesouvat a měnit tak jejich pořadí, klonovat ale také je upravovat. Vybereme si tedy libovolný z nich a klikneme na tlačítko Edit slide 7. Pokud potřebujeme, tak změníme podklad slideru v sekci Slider Main Image / Background kliknutím na tlačítko Change Image 8. Pro nás je nejdůležitější sekce Slide, kde si přidáváme/ubíráme jednotlivé vrsty do našeho slidu. Kliknutím na libovolnou vrstvu ji můžeme vybrat a následně přesunout nebo případně smazat (tlačítko Delete Layer ). 17

18 9. Novou vrstvu přidáme kliknutím na tlačítko Add Layer (psaný text) nebo Add Layer: Image (obrázek) případně Add Layer: Video (video). Tlačítko Duplicate Layer slouží ke klonování vybrané vrsty např. pokud chceme mít několik stejných objektů. 10. Klikli jsme tedy na Add Layer a tím se nám na pracovní ploše slideru zobrazilo textové pole s nápisem Caption Text 11. Toto pole můžeme tažením přesunout na libovolnou pozici popř. libovolně otáček kliknutím na symbol otočení 12. Pokud máme prvek vybraný, tak můžeme upravit jeho vlastnosti v sekci Layer General Parameters. V menu Style vybereme grafický styl písma (na výběr jsou různé velikosti a barvy) a následně upravíme text přepsáním výchozího v tomto případě Caption Text Rozklikneme sekci Layer Animation. Zde si můžeme nastavit efekt pro náš nový prvek. Klikneme na menu Start Animation a vybereme si z různým druhů přednastavených efektů např. Long from right. Nastavíme délku trvání efektu Start Duration např. 1500ms. Snímky animace se rozfázují na tuto dobu což můžeme vidět i v náhledu. 18

19 14. Přejdeme do sekce Layers Timing & Sorting Zde si můžeme jednotlivé vrstvy přesouvat ale hlavně měnit délku jejich začátku a konce. Celková délka slideru je v našem případě 9000 (9 vteřin). U každé vrstvy vidíme ve sloupci Start hodnotu 500. To znamená, že se všechny vrstvy zobrazí najednou 0,5s po spuštění animace. Pokud potřebujeme, tak tyto hodnoty upravíme. 15. Provedené změny můžeme uložit kliknutím na tlačítko Update slide, které je úplně dole nebo můžeme použít rychlou volbu, což jsou 2 tlačítka umístěná na pravé straně stránky. Posouvají se spolu se stránkou, takže jsou vždy snadno dostupná. Spodní zelené tlačítko slouží k uložení (stejně jako tlačítko Update Slide) a horní s ikonou lupy nám zobrazí náhled našeho slidu. Pokud máme změny uložené, tak již nemusíme nic zavírat. Překliknutím na jinou položku v hlavním menu přejdeme jinam nebo se z administrace odhlásíme. Vložení hotového slideru do stránky se provádí v editaci konkrétní stránky (Stránky Přehled stránek vybrat požadovanou stránku). V režimu editace stránky slider zapneme na pravé straně pomocí volby Sliders: kde z výsuvné nabídky vybereme požadovaný slider. 19

20 3.7 Jak upravím kontaktní formulář? Kontaktní formulář je vytvořený pomocí zásuvného pluginu Contact Form V hlavním menu vybereme Kontakt 2. Zobrazí se nám seznam všech vytvořených formulářů. Můžeme jich mít libovolný počet např. různé formuláře na poptávku dle druhu zboží apod. 3. Klikneme na formulář, který chceme nyní upravovat a tím přejdeme do režimu editace 3. V okně Formulář vidíme složení celého formuláře. Vždy se jedná o text, který bude na stránce zobrazený např. Vaše jméno (vyžadováno), odřádkování a následně pole pro zadání textu. V tomto případě [text* your-name] </p>, kde text* znamená, jaký typ informace má systém očekávat (prostý text, , číslo apod.) a your-name je název proměnné, který si můžeme libovolně měnit. Tyto proměnné, pak budeme následně používat. 4) Přejdeme do sekce Tělo zprávy. Zde si můžeme nastavit formát zprávy, která nám bude po vyplnění zákazníkem zaslána. V závorkách jsou zde uvedeny proměnné, které jsou použity při tvorbě formuláře (bod 3). Máme zde např. Od: [your-name] <[your- ]> Díky tomu, se nám ve zprávě zobrazí Od: jméno, které návštěvník stránek vyplnil a vedle bude uvedena ová adresa. 20

21 5. V okně nás zajímá hlavně kolonka Komu. Zde je nastavena adresa, na kterou budou y odcházet. Takto vytvořený formulář můžeme do stránek vložit kliknutím na Stránky Přehled stránek editace konkrétní stránky. Následně vložíme prvek Widgets Contact Form v jehož nastavení vybereme požadovaný formulář. 3.8 Jak upravím zápatí stránky? V zápatí stránky se zobrazují tzv. Widgety. Zobrazíme si je následujícím způsobem: 1) V hlavním menu vybereme Vzhled Widgety 2) Pokud si obrazovku pomyslně rozdělíme na polovinu, tak na levé straně nalezneme všechny dostupné widgety, které je možné do zápatí přidat. Na pravé straně pak nalezneme již přidané widgety. 21

22 3. Naše šablona má zápatí standardně dělené na třetiny tzn. zajímají nás pouze položky Footer Sidebar 1, 2 a 3. Každý Footer Sidebar tedy odpovídá jedné třetině stránky. 4. Pokud si otevřeme např. Footer Sidebar 1, tak vidíme widget, který je k němu přiřazený tzn. v tomto případě jde o Text 5. Tento widget si můžeme kliknutím na šipku otevřít a provést potřebné úpravy 6. Kliknutím na tlačítko Uložit se změny projeví na stránkách. Pokud budete editovat najednou více widgetů, tak změny provádějte postupně a každý widget vždy po úpravě uložte. Stránka neumožnuje uložení změn pro všechny najednou. 4. Aktualizace webových stránek Na stránkách se může vyskytnout požadavek na aktualizaci grafické šablony nebo některého z pluginů (zásuvné moduly). Aktualizace nikdy neprovádějte sami, ale vždy vyčkejte, až se o jejich nasazení postará správce. Stránky aktualizujeme v pravidelných intervalech a vždy testujeme funkčnost nových změn na separátní doméně. Při neuvážené aktualizaci může dojít k problému s kompatibilitou mezi systémem Wordpress, pluginem nebo grafickou šablonou což může ohrozit funkčnost nebo správné zobrazování stránek. V případě dotazů se neváhejte obrátit na náš helpdesk info@webrocket.cz 22