HTML Editor (WYSIWYG)

WYSIWYG (What you see is what you get, tedy "co vidíš, to dostaneš") je internetový editor textu, který po vzoru Wordu nebo Writeru zjednodušuje práci a následné formátování při psaní nebo úpravě textů, popisků nebo novinek. Systém Shoptet tento editor používá například pro informační e-maily, detail produktu, detail článků a pro newslettery.

Proč se mi editor nezobrazuje?

Kvůli rychlejšímu načítání detailu produktu je pro zobrazení editoru třeba kliknout myší na tlačítko Upravit. Editor se do detailu produktu načte až po kliknutí. Toto je výhodné, pokud chcete pracovat s jinými záložkami jako Ceník nebo Kategorie. Zkrátí se tak doba čekání na načtení stránky (obrázek 01).

Obrázek 01
Obrázek 01

Vložení obrázku

V editoru zvolte ikonku Nahrát soubor (obrázek 02).

Obrázek 02
Obrázek 02

Objeví se nové okno, tzv. Filemanager, do kterého můžete nahrávat fotky ze svého PC. K nahrání nového souboru nebo fotky klikněte na ikonku šipky Nahrát soubor (obrázek 03). Na soubor, který je už nahraný v paměti manageru, stačí pouze kliknout.

Obrázek 03
Obrázek 03

Aby se obrázek správně nahrál a zobrazil, doporučujeme slova v jeho názvu oddělovat pouze spojovníkem (na numerické klávesnici klávesa „minus“), tedy například tricko-zelene-xl.jpg.

Tento zápis je také správně z hlediska SEO.

Zobrazí se nové okno Drop files. Zde buď kliknete myší do okna a nahrajete obrázek z disku nebo obrázek přetáhnete myší z umístění ve vaší složce (obrázek 04).

Obrázek 04
Obrázek 04

Obrázek je nyní v paměti Filemanageru. Klikněte na tlačítko Zpět k seznamu souborů a poté znovu klikněte na zvolený obrázek. Tak se vloží do textu.

Vytváření hypertextového odkazu

  • Označte si vybraný text, ze kterého chcete udělat hypertextový odkaz (obrázek 05).
  • Klikněte pravým tlačítkem a zvolte Vložit odkaz.
  • Zadejte adresu, na kterou chcete přejít po prokliku (obrázek 05).
  • Text k zobrazení není třeba vyplnit, pokud jste ho už v editoru označili.
  • Zadejte titulek, který bude vystihovat váš odkaz (zobrazí se po přejetí myší).
  • Zadejte, jestli se odkaz otevře v aktuálním nebo v novém okně vašeho prohlížeče.
Obrázek 05
Obrázek 05

V případě, že odkaz směřuje na stránku v rámci vašeho e-shopu, tvar URL adresy se automaticky ve zdrojovém kódu změní na relativní tvar. Adresy, směřující mimo váš e-shop, budou vždy zachovány v absolutním tvaru.

Vkládání videa do článků

V editoru klikněte na Vložit → Média (obrázek 06).

Obrázek 06
Obrázek 06

První způsob je vložit odkaz například na YouTube. Můžete ponechat stávající rozměry videa nebo vyplnit vlastní (obrázek 07). Pokud znáte pouze kód videa, můžete ho vložit přes záložku Vložit.

Obrázek 07
Obrázek 07

Jak získat kód videa z YouTube?

  • Zvolte YouTube video, které chcete vložit do článku.
  • Klikněte na tlačítko Sdílet.
  • Zkopírujte celou zobrazenou adresu.
  • Vložte adresu do příslušného pole v administraci e-shopu, viz Vkládání videa do článků.
Obrázek 08
Obrázek 08

Jak vložit video z YouTube Shorts?

Pro vložení krátkého videa z YouTube Shorts je třeba nejprve video na YouTube otevřít jako běžné video:

  • Otevřete si v prohlížeči Shorts video.
  • V adresním řádku prohlížeče budete mít URL ve tvaru https://www.youtube.com/shorts/aNZcoBrU2os.
  • Nahraďte v URL adrese část /shorts/ za /watch?v=.
  • Dostanete tak adresu ve tvaru https://www.youtube.com/watch?v=aNZcoBrU2os.
  • Přejděte na upravenou URL adresu. Tím se vám otevře Shorts video jako běžné YouTube video.
  • Dále pro získání kódu videa pro vložení postupujte podle předchozí části Jak získat kód videa z YouTube.