14

Jak vytvořit plovoucí obrázek a video

Plovoucí obrázky a videa na webu jsou žádaným prvkem každého uživatele, který chce svým návštěvníkům sdělit novinku, kterou by mohli za běžných okolností přehlédnout.  My si představíme, jak takový prvek nastavit přímo ve WordPressu.

Nejčastěji se jedná o upozornění na slevu, výprodej, nadcházející akci či odstávku. V případě videí jde následně například o představení portálu. Účelem plovoucího obrázku je, aby se po načtení webu zobrazil a uživatel ho následně zavřel. Pro nastavení takového prvku je potřeba nainstalovat plugin WP Splash Image. Nyní si ukážeme, jak ho správně nastavit a použít.

Krok 1: Jdeme do sekce Pluginy-Instalace pluginů a do vyhledávacího okénka vepíšeme „WP Splash Image“. Hledání potvrdíme a nalezený plugin nainstalujeme.

1

Krok 2: Plugin aktivujeme.

2

Krok 3: Plugin nám přibyl v seznamu pluginů a nyní ho nalezneme i v menu v sekci Nastavení-WP Splash Image. Rovnou do této sekce půjdeme.

3

Krok 4: Samotný plugin je podle karet rozdělený do několika sekcí. Pro nás jsou důležité první 3, tedy možnost vložení plovoucího obrázku, vložení videa nebo vložení HTML kódu, tedy například kódu reklamy. V případě obrázku se vkládá URL adresa směřující na obrázek, které chceme vložit.

4

 

U videí se vybere služba, například Youtube.com a odkaz na video. Uživatel si pouze nastaví, jestli bude chtít například automatické spuštění přehrávání aj.

4B

Krok 5: My si chceme vložení ukázat na obrázku, proto se vrátíme k první kartě. Důležité je vytvořit obrázek, který budeme chtít zobrazovat, a ten nahrát na web, abychom na něj mohli odkazovat přes URL. Jdeme tedy nejprve do sekce Média-Nahrát soubor a tam náš obrázek nahrajeme.

5

Krok 6: Obrázek jsme nahráli přes „Vybrat soubor“. Následně se nám zobrazil v seznamu médií. Klikneme u něj na „Upravit“.

6

Krok 7: Následně se nám zobrazí obrázek i s nastavením. Klikneme na něj pravým tlačítkem myši a zvolíme „Kopírovat adresu URL obrázku“.

7

Krok 8: Následně se vrátíme zpět do nastavení WP Splash Image a v první kartě vložíme URL obrázku. Pokud chcete, aby se uživatel po kliknutí na obrázek odkázal na určitou adresu, tak vyplňte i řádek „Picture link URL“. V opačném případě na tento řádek jen zkopírujte adresu obrázku nebo ho nechte zcela prázdný.

8

Krok 9: Po vyplnění adres nás čekají poslední 3 nastavení. Prvním je nastavení data zobrazování. Jednoduše si zde vyberete datum, kdy se obrázek začne zobrazovat a datum, kdy se přestane zobrazovat. Můžete si takto nastavovat například limitované akce, dobu nepřítomnosti aj. Toto nastavení je třeba nevynechat. Pokud chcete, aby se obrázek zobrazoval neustále, necháte hodnoty prázdné nebo můžete si nastavit zobrazování  např. do roku 2100.

9

Krok 10: Datum se nastavuje jednoduše tak, že na něj kliknete a následně si datum přehledně vyberete ze zobrazeného kalendáře.

10

Krok 11: Po nastavení data přejdeme k možnostem zavírání. Zde si lze vybrat zavírání obrázku přes klávesu „Esc“, kliknutím na obrázek nebo lze nastavit schování křížku pro zavření.

11

Krok 12: Následuje poslední nastavení, nastavení stylu, zde stačí postupovat řádek po řádku. Jako první se nastaví rozměry zobrazovaného obrázku, ideálně shodné se skutečnou velikost obrázku. Následně lze nastavit barvu či průhlednost pozadí.

Důležitým nastavením je doba zobrazení obrázku. pokud zde nastavíme například 10 sekund, tak se bude obrázek zobrazovat jen po dobu 10 sekund. Další nastavení nechte ideálně prázdná, slouží k nastavení stínu nebo k nastavení zobrazování u každé strany a kategorie. Takové zobrazování však dokáže návštěvníky spíše odradit, jelikož budu muset obrázek stále zavírat.

12

Krok 13: Pokud je vše nastaveno, sjedeme kurzorem nahoru a aktivujeme zobrazování „Splash Image activated“. Následně je nutné kliknout na zatrhávací kolečko u URL adres a kliknout na „Aktualizovat“.

13

Krok 14: Nyní je již vše plně nastavené a obrázek by se mel v pořádku zobrazit. Klikneme na „Aktuální náhled“ a vidíme, jak se obrázek bude zobrazovat.

x

Krok 15: Pokud máte obrázek nastavený, aby se zobrazoval již nyní, tak se stačí přepnout na web a obrázek se nám již bude zobrazovat při každém vstupu na něj.

14

Podobným způsobem bychom postupovali i v případě videa nebo HTML kódu. Vložení není těžké a pokud máte obrázek vytvořený, jedná se jen o záležitost několika minut. Pokud budete zobrazení plánovat, můžete si v jeden den nastavit například zobrazování akcí na celý rok.