Nastavení e-mailového editoru Stripo s funkcí přetahování

Published: 22. října 2024 · Last updated: 21. července 2026 · By Marcus Biel

Na pravé straně e-mailového editoru Maildroppa najdete sloupec nastavení e-mailu, který nabízí nástroje pro strukturování a přizpůsobení obsahu a vzhledu e-mailu. Tento sloupec je rozdělen do dvou karet: Obsah a Vzhled.

Karta Obsah

Na kartě Obsah navrhujete a organizujete obsah e-mailu. Obsahuje dvě hlavní části: Struktury a Bloky.

1. Struktury

Struktury určují rozvržení e-mailu uspořádáním obsahu do řádků a sloupců. Můžete vybírat z různých předem navržených rozvržení, například:

• Jeden sloupec
• Dva sloupce
• Více sloupců

Nejste omezeni pouze na tyto možnosti – můžete kombinovat více bloků a vytvořit libovolné vlastní rozvržení, což vám poskytuje úplnou flexibilitu podle vašich designových potřeb.

• Přetažení: Jednoduše přetáhněte strukturu z této části do oblasti návrhu e-mailu a začněte přidávat obsah.
• Přizpůsobení: Po přidání struktury ji můžete naplnit různými bloky obsahu, například obrázky, textem nebo tlačítky.

2. Bloky

Bloky jsou prvky obsahu, které umisťujete do struktur a pomocí nichž vytváříte e-mail.

Dostupné typy bloků jsou:

• Obrázek: Nahrajte obrázky (PNG, JPG, GIF) a přizpůsobte jejich vzhled.
• Text: Přidejte a naformátujte text, kterým sdělíte své poselství.
• Tlačítko: Přidejte klikací tlačítka s přizpůsobitelným textem, odkazy a styly.
• Mezera: Vložte prázdný prostor a upravte rozvržení mezi ostatními bloky.
• Video: Vložte video z platforem jako YouTube, Vimeo a dalších.
• HTML: Přidejte vlastní kód HTML a CSS pro pokročilé přizpůsobení obsahu e-mailu.

Každý blok je navržen jako flexibilní a přizpůsobitelný, takže můžete vytvořit e-mail odpovídající vzhledu a stylu vaší značky.

Podrobný popis bloků obsahu

Blok obrázku

Blok obrázku v editoru e-mailů Stripo s funkcí přetahování umožňuje přidávat a upravovat obrázky v e-mailové kampani.

Přidání bloku obrázku

Blok obrázku můžete do e-mailu přidat dvěma způsoby:

Možnost 1

Umístěte kurzor na oblast „Sem přetáhněte obsah“ ve struktuře a klikněte na ikonu obrázku. Vybraná struktura se okamžitě změní na blok obrázku.

Možnost 2

Přejděte do části Bloky na kartě Obsah. Přetáhněte blok obrázku do požadované struktury v rozvržení e-mailu. Tato metoda vám poskytuje větší kontrolu nad přesným umístěním obrázku.

Nahrání obrázku

Po přidání bloku obrázku máte dvě možnosti, jak obrázek nahrát:

Přetažení

Soubor obrázku (PNG, JPG, GIF) můžete přímo přetáhnout z počítače do pole pro nahrání, které se zobrazí uvnitř bloku obrázku.

Nahrání z počítače

Případně můžete kliknout na ikonu cloudu v bloku obrázku a otevřít prohlížeč souborů, kde vyberete obrázek z počítače (do 2 MB). Po výběru se obrázek zobrazí v bloku i na kartě Obsah vpravo.

Změna obrázku

Chcete-li obrázek nahradit, použijte možnost Změnit obrázek na kartě Obsah. Klikněte na kruhovou ikonu Změnit obrázek, která vám umožní nahrát nový obrázek nebo přidat odkaz na obrázek z externí URL adresy.

Úprava obrázku

Po nahrání obrázku jej možná budete chtít dále upravit přímo v platformě. Vestavěný editor obrázků Stripo umožňuje obrázky vylepšovat a upravovat, aniž byste opouštěli e-mailový editor.

Otevření editoru obrázků

1. Po nahrání obrázku klikněte na tlačítko Upravit obrázek. Otevře se rozhraní editoru obrázků.
2. Editor nabízí širokou škálu nástrojů zobrazených v horní liště nabídky.

Dostupné nástroje pro úpravu obrázků

• Filtry Jedním kliknutím použijte různé filtry, například:

  • Stupně šedi
  • Černobílý
  • Doostřit
  • Invertovat
  • Sépie
  • Jas
  • Barva

• Změna velikosti Upravte rozměry obrázku. Můžete:

  • Nastavit konkrétní šířku a výšku.
  • Zachovat poměr stran.

• Oříznutí Vyberte část obrázku, kterou chcete zachovat, a odstraňte nežádoucí části.

• Transformace Otočte nebo převraťte obrázek:

  • Vodorovně
  • Svisle

• Kreslení Pomocí nástroje pro kreslení přidejte na obrázek od ruky prvky, například čáry nebo vlastní tvary.

• Text Přidejte text přímo do obrázku. Přizpůsobte:

  • Písmo
  • Velikost
  • Barvu
  • Zarovnání

• Tvary a nálepky Vylepšete obrázek překrytím:

  • Předpřipravených tvarů
  • Zábavných nálepek

• Rámečky Vyberte si z nabídky rámečků a dodejte obrázku stylový okraj.

• Rohy Upravte styl rohů pro uhlazený vzhled.

• Pozadí Odstraňte nebo nahraďte pozadí obrázku a dosáhněte čistšího vzhledu.

Uložení úprav

Po provedení požadovaných změn klikněte vlevo nahoře v editoru na tlačítko Uložit. Upravený obrázek automaticky nahradí původní obrázek v rozvržení e-mailu.

Nastavení obrázku

Po nahrání obrázku jej můžete přizpůsobit pomocí možností Nastavení obrázku dostupných na kartě Obsah na pravé straně.

Odkaz

Přidejte obrázku odkaz. Můžete vybírat z různých typů odkazů, například:

• Webová stránka (HTTP, HTTPS)
• E-mail (mailto:)
• Soubor (ftp)
• Sdílení na sociálních sítích (Facebook, X (dříve Twitter), LinkedIn, Pinterest)

Tyto možnosti najdete v rozbalovací nabídce nastavení odkazu.

Alternativní text

Přidejte alternativní text, který se zobrazí, pokud se obrázek nenačte. Tento text je užitečný také pro přístupnost, protože čtečkám obrazovky umožňuje popsat obrázek příjemcům se zrakovým postižením.

Zarovnání

Zvolte, jak má být obrázek zarovnán v kontejneru. Můžete jej zarovnat Vlevo, Na střed nebo Vpravo.

Velikost

Upravte šířku a výšku obrázku ručně pomocí tlačítek plus/mínus nebo zadáním požadovaných rozměrů.

Můžete také aktivovat možnost „Přizpůsobit šířce“, aby se obrázek automaticky přizpůsobil celé šířce kontejneru.

Responzivní obrázek

Aktivujte možnost „Responzivní obrázek“, aby se obrázek přizpůsobil různým velikostem obrazovky, zejména na mobilních zařízeních.

Vnitřní okraj

Přizpůsobte vnitřní okraj kolem obrázku a určete, kolik prostoru bude mezi obrázkem a okolním obsahem. Vnitřní okraj můžete nastavit jednotně nebo samostatně pro každou stranu (Nahoře, Dole, Vlevo, Vpravo).

Kotvicí odkazy

Obrázku můžete přiřadit kotvicí odkaz, který příjemcům po kliknutí umožní přejít na konkrétní část téhož e-mailu. Upozorňujeme však, že kotvicí odkazy nemusí fungovat v některých e-mailových klientech, například Gmailu a Apple Mailu.

Textový blok

Vylepšete své textové bloky přizpůsobením jejich vzhledu a funkcí pomocí následujících nastavení. Každá možnost vám umožní přesně nastavit zobrazení textu tak, aby dokonale odpovídalo vašim designovým preferencím.

Panel nástrojů textu

Po kliknutí do textového bloku se nad oblastí obsahu zobrazí panel nástrojů textu, který poskytuje rychlý přístup k mnoha běžným možnostem formátování textu. Panel nabízí tyto funkce:

1. Formát odstavce

Nastavte styl odstavce výběrem možnosti Normální pro běžný text nebo některé z úrovní nadpisů (Nadpis 1 až Nadpis 6) pro vytvoření strukturované hierarchie v e-mailu. Díky tomu bude obsah čitelnější a přehlednější.

2. Rodina písem

Výchozím písmem je Arial, ale můžete vybírat z různých písem včetně běžných možností, jako jsou Georgia, Helvetica a Courier New. K dispozici je také vyhledávání pro rychlé nalezení konkrétního písma.

3. Velikost písma

Upravte velikost písma od 8pt do 72pt. Výchozí velikost je 14pt, která se hodí pro většinu textu těla e-mailu. Pomocí rozbalovací nabídky rychle nastavte požadovanou velikost písma.

4. Styl textu

Upravte styl textu pomocí těchto možností:

• Tučné (B): Zvýrazní text tučným písmem.
• Kurzíva (I): Zobrazí text kurzívou pro stylizovanější vzhled.
• Podtržení (U): Podtrhne text, což se běžně používá u hypertextových odkazů.
• Přeškrtnutí (S): Přidá přes text čáru, což se hodí pro úpravy nebo odstraněný obsah.

5. Pokročilé formátování textu (nabídka se třemi tečkami)

Kliknutím na tři tečky na panelu nástrojů zobrazíte další možnosti:

• Dolní index: Posune text pod základní linii (užitečné pro poznámky pod čarou nebo chemické vzorce).
• Horní index: Posune text nad základní linii (běžně se používá u exponentů nebo řadových čísel).
• Odstranit formátování: Odstraní použité formátování a vrátí text do výchozího stylu.

6. Barva textu a pozadí

• Barva textu: Kliknutím na tlačítko Barva textu vyberte barvu z palety nebo zadejte hexadecimální kód pro přesné nastavení.
• Barva pozadí: Vyberte barvu pozadí (zvýraznění) textu.

7. Zarovnání textu

Zarovnejte text v bloku:

• Zarovnat vlevo: Zarovná text vlevo.
• Na střed: Zarovná text na střed.
• Zarovnat vpravo: Zarovná text vpravo.
• Do bloku: Rovnoměrně rozloží text po celé šířce bloku.

8. Seznamy

Vytvářejte číslované a odrážkové seznamy:

• Vložit/Odebrat odrážkový seznam: Přidá nebo odebere odrážky.
• Vložit/Odebrat číslovaný seznam: Přidá nebo odebere číslovaný seznam.

9. Zalamování řádků

Povolte nebo zakažte zalamování řádků v textovém bloku. Pokud je povoleno, dlouhé řádky textu se automaticky přesunou na další řádek.

10. Odsazení

Upravte odsazení textu:
- **Zvětšit odsazení**: Posune text dále od okraje, což se hodí pro podbody nebo citace.
- **Zmenšit odsazení**: Zmenší odsazení a přiblíží text k levému okraji.
![Odsazení textu](https://cms.maildroppa.com/assets/0146b155-9fe5-4495-be1c-19dcf1427639)

11. Vložit hypertextový odkaz

Zjistěte, jak přidávat, upravovat a spravovat hypertextové odkazy v obsahu e-mailu.

Postup přidání nebo úpravy odkazu

a) Označení textu

Vyberte text, ze kterého chcete vytvořit hypertextový odkaz.

b) Kliknutí na ikonu odkazu

Na panelu nástrojů textu klikněte na ikonu odkazu.

c) Úprava odkazu v panelu nastavení

Zobrazí se panel nastavení na pravé straně s možnostmi odkazu:

• Pole odkazu: Zadejte URL adresu nebo vyberte z předdefinovaných možností.
• Štítek: Přidejte štítky pro označení odběratelů nebo spuštění automatizací.

Oprava odkazů po odeslání

Není nic horšího než odeslat novou kampaň svým 2 365 odběratelům a teprve potom zjistit, že jeden z odkazů nefunguje kvůli prostému překlepu. Sbohem, výprodeje na Black Friday!

Naštěstí jsme umožnili opravit nefunkční odkazy – i poté, co už byl e-mail odeslán odběratelům.

a) Zobrazení kampaně

Najděte odeslanou kampaň v přehledu, klikněte na tři tečky a zvolte Zobrazit kampaň.

b) Úprava odkazů nebo štítků

V podrobnostech kampaně přejděte na seznam odkazů a:

• Aktualizujte cíle odkazů: Opravte nesprávné URL adresy.
• Spravujte štítky: Přidejte nebo odeberte štítky pro automatizace.

Poznámka: Chcete-li používat funkci změny cíle odkazu, ujistěte se, že je v nastavení kampaně povoleno sledování kliknutí.

Přizpůsobení vzhledu odkazu

V panelu nastavení na pravé straně můžete upravit vzhled odkazu:

• Barva odkazu: Vyberte barvu nebo zadejte hexadecimální kód.

• Podtržení odkazů: Povolte nebo zakažte podtržení pro čistší vzhled.

12. Personalizační štítky

Pomocí personalizačních štítků přidejte dynamický obsah, například křestní jméno příjemce nebo jiná vlastní pole.

• V rozbalovací nabídce Personalizační štítky na panelu nástrojů vyberte běžná pole, jako Křestní jméno, E-mail nebo Země, případně definujte vlastní pole pro přizpůsobení e-mailů jednotlivým příjemcům.

13. Emodži

Dodejte textu vizuální přitažlivost pomocí emodži.

• Kliknutím na ikonu emodži na panelu nástrojů otevřete kategorizovaný seznam emodži pro snadné procházení.
• Poznámka ke kompatibilitě: Otestujte e-maily v některých klientech, například Outlooku, protože některé nemusí emodži zobrazovat správně.

14. Tabulka a speciální znaky

Na konci panelu nástrojů klikněte na tři tečky a zobrazte další pokročilé možnosti.

Vložení tabulky

Vytvářejte a upravujte tabulky pro vylepšení rozvržení e-mailu.

• Podle potřeby definujte řádky, sloupce, mezery mezi buňkami, vnitřní okraje a velikost ohraničení.

Vložení speciálních znaků

Vylepšete text pomocí symbolů, znaků s diakritikou a dalších nestandardních znaků.

• Otevřete možnost Speciální znaky a procházejte širokou nabídku znaků.

Další nastavení textového bloku (pravý panel)

Pravý panel nabízí rozsáhlé možnosti ovládání vzhledu a funkcí textových bloků. K dispozici jsou následující nastavení:

1. Barva textu

Definujte barvu textu pomocí výběru barvy nebo zadáním hexadecimálního kódu.

2. Barva pozadí

Nastavte vlastní barvu pozadí textového bloku. Ve výchozím nastavení je pozadí průhledné.

3. Nastavení odkazů

Pokud textový blok obsahuje odkazy, v nastavení se zobrazí další možnosti:

• Barva odkazu: Upravte barvu odkazů pomocí výběru barvy nebo hexadecimálního kódu.

• Podtržení odkazů: Přepínačem povolte nebo zakažte podtržení odkazů v textovém bloku.

• Úprava odkazu: Vyberte odkaz v oblasti obsahu a upravte jeho URL adresu v panelu nastavení. Pomocí rozbalovací nabídky označené „Štítky“ můžete také odkazu přiřadit nebo aktualizovat štítky.

4. Zarovnání

Zarovnejte textový blok v kontejneru: Vlevo, Na střed nebo Vpravo.

5. Pevná výška

Povolením této možnosti nastavíte textovému bloku pevnou výšku. Můžete také určit svislé zarovnání textu: Nahoru, Na střed nebo Dolů.

6. Řádkování

Ovládejte mezery mezi řádky textu. Vyberte Těsné, Normální nebo Široké.

7. Vnitřní okraj

Upravte prostor kolem textového bloku. Použijte jednotný vnitřní okraj nebo přizpůsobte každou stranu: Nahoře, Dole, Vlevo a Vpravo.

8. Kotvicí odkazy

Vytvořte kotvicí odkazy, které čtenářům umožní přejít na konkrétní části e-mailu. Upozorňujeme, že některé e-mailové klienty kotvicí odkazy nepodporují.

Blok tlačítka

Blok tlačítka umožňuje přidat do e-mailu klikací tlačítko s přizpůsobitelným nastavením funkcí a vzhledu.

Nastavení odkazu

Možnost Odkaz určuje akci, která se spustí po kliknutí příjemce na tlačítko.

Dostupné typy odkazů

• Běžný odkaz na web (HTTP nebo HTTPS): Přesměruje uživatele na webovou stránku.
• E-mailový odkaz: Otevře e-mailového klienta uživatele pro napsání nového e-mailu.
• Odkaz na soubor (FTP, FTPS): Odkazuje na soubor na FTP serveru.
• Skype: Zahájí hovor nebo chat ve Skypu.
• Telefon (tel): Zahájí telefonní hovor na kompatibilních zařízeních.
• SMS: Otevře aplikaci pro zasílání zpráv s předvyplněným číslem příjemce.
• Viber: Otevře aplikaci Viber pro zprávy nebo hovory.
• Jiný typ protokolu: Zadejte vlastní protokol, který není uveden výše.

Možnosti sdílení na sociálních sítích

Tlačítko můžete nastavit také pro sdílení na sociálních sítích nebo e-mailem:

• Facebook
• X (dříve Twitter)
• LinkedIn
• Pinterest
• Sdílení e-mailem

Pole URL

Vedle typu odkazu umožňuje pole URL (obvykle začínající na https://) zadat konkrétní adresu odpovídající typu odkazu.

Popisek tlačítka

Přizpůsobte popisek tlačítka tak, aby odpovídal vaší výzvě k akci. Výchozí popisek je „Tlačítko“, ale můžete jej změnit například na „Zjistit více“, „Přihlásit se nyní“ nebo „Nakoupit nyní“.

Styl textu

Nastavení Styl textu umožňuje upravit vzhled textu tlačítka.

Výběr písma

Vybírat můžete z různých standardních písem, například:

• Arial
• Comic Sans MS
• Courier New
• Georgia
• Helvetica
• Lucida Sans Unicode
• Tahoma
• Times New Roman
• Trebuchet MS
• Verdana

U nestandardních písem jsou k dispozici také:

• Arvo
• Lato
• Lora
• Merriweather
• Merriweather Sans
• Noticia Text
• Open Sans
• Playfair Display
• Roboto
• Source Sans Pro

Vyhledávací pole v horní části seznamu písem vám pomůže rychle najít konkrétní písmo.

Velikost a formátování písma

• Velikost písma: Vyberte hodnotu od 8 do 72 podle toho, jak výrazně má text tlačítka působit.
• Formátování textu: Pomocí ikon „B“ nebo „I“ použijte styl Tučné nebo Kurzíva a zvýrazněte text tlačítka.

Nastavení barev

Přizpůsobte vzhled tlačítka úpravou nastavení barev.

1. Barva tlačítka: Změňte barvu pozadí tlačítka. Výchozí barva je zelená (#31cb4b). Novou barvu vyberte pomocí pole s hexadecimálním kódem nebo výběru barvy.

2. Barva textu: Nastavte barvu textu tlačítka. Výchozí barva je bílá (#ffffff). Pro dobrou čitelnost zvolte barvu s dostatečným kontrastem vůči pozadí tlačítka.

3. Barva pozadí: Upravte pozadí kontejneru tlačítka. Ve výchozím nastavení je průhledné, ale můžete je změnit, aby tlačítko na pozadí e-mailu více vyniklo.

Poloměr ohraničení

Pomocí nastavení Poloměr ohraničení ovládejte zaoblení rohů tlačítka.

• Výchozí hodnota: 30 (středně zaoblené rohy).
• Rozsah: 0 (hranaté rohy) až 100 (tlačítko ve tvaru kapsle).

Poznámka: Aby se zaoblené rohy správně zobrazovaly v Microsoft Outlooku, aktivujte na kartě Vzhled možnost „Podpora Outlooku“.

Zarovnání

Pomocí nastavení Zarovnání umístěte tlačítko v oblasti obsahu.

• Možnosti: Vlevo, Na střed, Vpravo.
• Běžné použití: Zarovnání na střed pro zdůraznění, zarovnání vlevo nebo vpravo pro zachování konzistentního designu.

Pevná výška

Povolte možnost Pevná výška, aby byly rozměry tlačítka konzistentní.

1. Výchozí nastavení: Deaktivováno.
2. Minimální výška: 44 pixelů.
3. Svislé zarovnání obsahu: Pokud je pevná výška aktivní, zarovnejte obsah tlačítka Nahoru, Na střed nebo Dolů pro přesné umístění.

Tlačítko s ikonou

Možnost Tlačítko s ikonou umožňuje přidat vedle textu tlačítka ikonu, která zvyšuje vizuální přitažlivost a posiluje výzvu k akci. Tato funkce je ve výchozím nastavení deaktivována.

• Podporované formáty: Nahrajte ikony ve formátu PNG, JPG nebo GIF, s maximální velikostí souboru 2 MB.
• Umístění ikony: Zvolte zobrazení ikony Vlevo nebo Vpravo od textu tlačítka.

Poznámka: Ikony se nezobrazují v některých verzích Microsoft Outlooku pro Windows, včetně:

• Outlook 2002, 2007, 2010, 2013, 2016 a 2019. Toto omezení souvisí se způsobem, jakým tyto e-mailové klienty vykreslují HTML e-maily. Zvažte jej, pokud významná část vašeho publika používá tyto klienty.

Nastavení ohraničení

Přizpůsobte ohraničení tlačítka a dodejte mu styl i důraz.

• Šířka ohraničení: Nastavte šířku každé strany (levé, pravé, horní a dolní) samostatně, až do 40 pixelů.
• Styl ohraničení: Vyberte Plné, Čárkované nebo Tečkované.
• Barva ohraničení: Pomocí výběru barvy nebo zadáním hexadecimálního kódu slaďte barvu ohraničení se svou značkou nebo designem.

Vnitřní okraj

Upravte prostor uvnitř tlačítka mezi obsahem (textem a ikonou) a ohraničením tlačítka.

• Možnosti přizpůsobení: Definujte hodnoty vnitřního okraje pro strany Vlevo, Vpravo, Nahoře a Dole, až do maximální hodnoty 99 pixelů.
• Dopad: Vnitřní okraj ovlivňuje celkovou velikost tlačítka a umístění obsahu uvnitř tlačítka.

Vnější okraj

Ovládejte prostor kolem tlačítka a upravte jeho pozici vůči ostatním prvkům v rozvržení e-mailu.

• Možnosti přizpůsobení: Nastavte hodnoty vnějšího okraje pro strany Vlevo, Vpravo, Nahoře a Dole, až do maximální hodnoty 40 pixelů.
• Použití: Zajistí, aby tlačítko nebylo příliš blízko ostatního obsahu nebo okrajů e-mailu.

Přidání kotvicího odkazu

Pomocí kotvicích odkazů můžete čtenáře nasměrovat na konkrétní části téhož e-mailu, což poskytuje rychlou navigaci v delších newsletterech.

• Název kotvy: Definujte cíl v e-mailu a propojte s touto kotvou tlačítko. Po kliknutí se e-mail posune na určenou část, což usnadňuje navigaci uživatele.

Důležité: Kotvicí odkazy nejsou podporovány některými e-mailovými klienty, včetně:

• aplikace Gmail pro iOS
• Apple Mailu pro iOS
• aplikace Outlook pro Android
• aplikace Outlook pro macOS
• AMP e-mailů

E-mail důkladně otestujte, abyste ověřili funkčnost v různých e-mailových klientech a zjistili, zda je tato funkce vhodná pro vaše publikum.

Blok mezery

Blok mezery umožňuje přidat do obsahu e-mailu nastavitelný prostor a ovládat jeho velikost, zarovnání, vzhled a vnitřní rozestupy. Níže najdete podrobnosti o dvou typech mezer: Normální mezera a Dynamická mezera.

1. Normální mezera

Normální mezera je čárový prvek, který vizuálně odděluje části e-mailu.

Hlavní nastavení

1. Tloušťka a styl čáry Přizpůsobte tloušťku, styl a barvu čáry:

   • Tloušťka: Upravte pomocí tlačítek + a - (počínaje hodnotou 1).
   • Styl: Vyberte plný, čárkovaný nebo tečkovaný.
   • Barva: Nastavte vlastní barvu pomocí hexadecimálního kódu nebo výběru barvy (výchozí: #cccccc).

2. Šířka Určete, jakou část obsahu má čára mezery pokrývat. Upravte šířku v pixelech pomocí tlačítek + a -.

3. Zarovnání Zarovnejte čáru vlevo, na střed nebo vpravo podle svého rozvržení.

4. Vnitřní okraj Ovládejte vnitřní rozestupy kolem mezery:

   • Výchozí nastavení: Vnitřní okraj je na všech stranách nastaven na 20.
   • Pomocí přepínače Více můžete nastavit vnitřní okraj pro jednotlivé strany:
     • Nahoře
     • Vpravo
     • Dole
     • Vlevo

Použití

Normální mezera je ideální pro vytváření čistých vizuálních oddělení mezi částmi e-mailu a zajišťuje přehledné a profesionální rozvržení.

2. Dynamická mezera

Dynamická mezera je neviditelný blok prázdného prostoru určený k vytvoření vzdušnosti v rozvržení e-mailu.

Hlavní funkce

1. Nastavení výšky Výšku upravte přímo v oblasti obsahu nebo pomocí ovládacího panelu s tlačítky + a -. Výška určuje, kolik svislého prostoru se mezi částmi přidá.

2. Barva pozadí Ve výchozím nastavení má mezera průhledné pozadí, ale můžete použít vlastní barvu pozadí pomocí hexadecimálního kódu nebo výběru barvy. Mezera tak může v případě potřeby fungovat jako viditelný blok.

3. Responzivní chování Možnost Responzivní mezera zajišťuje, že se mezera dynamicky přizpůsobí různým velikostem obrazovky pro optimální rozvržení na různých zařízeních. Tato funkce je ve výchozím nastavení povolena.

Hlavní rozdíly mezi normální a dynamickou mezerou

• Dynamická mezera: Přidává prázdný prostor bez viditelné čáry.
• Normální mezera: Obsahuje nastavení specifická pro čáru, například:
  • šířku čáry
  • zarovnání
  • styly čáry
  • vnitřní okraj

Dynamická mezera tyto funkce nepodporuje a je určena pouze k oddělení bez vizuálních prvků.

3. Přidání kotvicího odkazu

Kotvicí odkazy lze použít u obou typů mezer a umožnit uživatelům přejít přímo na místo mezery z jiné části e-mailu. To je užitečné zejména pro navigaci uvnitř delších newsletterů.

Poznámka: Kotvicí odkazy nejsou podporovány některými e-mailovými klienty, včetně:

• Microsoft Outlook
• Gmailu (v mobilu)

Blok videa

Blok videa umožňuje vložit do e-mailu videa a přizpůsobit jejich vzhled i chování. Podporuje odkazy na videa z platforem jako YouTube a Vimeo, takže nabízí flexibilitu a kontrolu nad způsobem prezentace videa.

1. Odkaz na video

Přidejte URL adresu videa do pole Odkaz na video. Podporované platformy zahrnují YouTube, Vimeo a další služby umožňující vložení obsahu.

• Automatické chování: Po přidání platné URL adresy:

  • se automaticky vygeneruje náhledový obrázek pomocí miniatury videa z dané platformy;
  • pole Alternativní text se automaticky vyplní názvem nebo popisem videa (pokud je k dispozici).

• Upravovatelná pole: Vygenerovaný náhledový obrázek i text můžete podle potřeby ručně upravit nebo nahradit.

2. Alternativní text

Pole Alternativní text zajišťuje přístupnost tím, že zobrazí popis videa, pokud se video nenačte.

• Automaticky se vyplní po přidání podporované URL adresy videa.
• Lze jej přizpůsobit vašim potřebám.

3. Vlastní miniatura

Nahrajte vlastní obrázek a nahraďte jím výchozí náhled videa.

• Jak povolit: Aktivujte možnost Vlastní miniatura.
• Podporované formáty: PNG, JPG nebo GIF.
• Kdy použít: Nahraďte vygenerovanou miniaturu, pokud neodpovídá designu vašeho e-mailu.

4. Tlačítko přehrávání

Přizpůsobte překryvné tlačítko přehrávání na miniatuře videa.

• Dostupné možnosti:
  • Vyberte si ze stylů tlačítka přehrávání YouTube, Vimeo nebo jiných.
  • Zvolte možnost „Žádné“ a tlačítko přehrávání zcela skryjte.

5. Velikost

Upravte rozměry videa tak, aby odpovídaly designu vašeho e-mailu.

• Šířka a výška: K ovládání velikosti použijte tlačítka + a - nebo hodnoty zadejte ručně.
• Responzivní design: Zajistěte, aby video bez problémů fungovalo na různých zařízeních.

6. Přizpůsobit šířce

Aktivujte přepínač Přizpůsobit šířce, aby se video automaticky přizpůsobilo šířce kontejneru. Video si tak zachová responzivní design na různých zařízeních.

7. Responzivní obrázek

Přepínač Responzivní obrázek zajistí, že se miniatura videa na mobilních zařízeních přizpůsobí šířce obrazovky.

• Poznámka: Responzivita závisí na podpoře zařízení a e-mailového klienta.

8. Zarovnání

Pomocí nastavení Zarovnání ovládejte vodorovné umístění videa v bloku:

• Vlevo: Zarovná video vlevo.
• Na střed: Zarovná video na střed.
• Vpravo: Zarovná video vpravo.

9. Možnosti pro mobilní zařízení

Přizpůsobte chování a vzhled videa na mobilních zařízeních:

1. Skrýt prvek na mobilu V případě potřeby skryjte blok videa na mobilních zařízeních.

   • Poznámka: Tato funkce závisí na podpoře media query a nemusí fungovat ve všech e-mailových klientech.

2. Vnitřní okraj pro mobilní zařízení Upravte okraje kolem videa pro mobilní zobrazení.

   • Pomocí přepínače Více nastavte jednotlivé hodnoty okrajů pro:
     • Nahoře
     • Vpravo
     • Dole
     • Vlevo

10. Zahrnout do AMPHTML nebo HTML

Zvolte, ve kterých verzích e-mailu se má blok videa zobrazit:

• AMPHTML i HTML
• Pouze AMPHTML
• Pouze HTML

Tato možnost zajišťuje správné vložení videa podle doručované verze e-mailu.

Blok HTML

Blok HTML umožňuje vložit do e-mailu vlastní kód HTML a CSS a nabízí flexibilitu pro pokročilé úpravy při zachování kompatibility s e-mailovými klienty. Ať už přidáváte jeden prvek HTML, nebo navrhujete celý e-mail, tento blok je nástrojem pro tvorbu vlastního designu.

1. Rozhraní editoru kódu

Po výběru bloku HTML se v panelu obsahu zobrazí černé okno editoru kódu. V tomto editoru můžete psát, vkládat nebo upravovat vlastní kód. Editor obsahuje dvě části:

• Část HTML: Přidejte nebo upravte strukturu HTML svého e-mailu.
• Část CSS: Otevřete samostatný editor CSS a nastylujte svůj obsah.

2. Úprava velikosti písma

Upravte velikost písma kódu v editoru pro lepší čitelnost:

• Pomocí tlačítka A+ velikost písma zvětšete.
• Pomocí tlačítka A- velikost písma zmenšete.

3. Úprava velikosti okna editoru

Změňte velikost okna editoru kódu podle svých pracovních preferencí:

• Jak upravit velikost:
  • Umístěte kurzor na tři tečky v horní střední části okna editoru.
  • Přetažením ovladače posuvníku nahoru nebo dolů velikost editoru zvětšete nebo zmenšete.

Tato funkce je obzvlášť užitečná při práci s většími nebo podrobnějšími bloky kódu.

4. Editor CSS

Editor CSS umožňuje spravovat styly obsahu HTML a je dostupný prostřednictvím tlačítka v pravém horním rohu editoru kódu.

Důležitá upozornění:

• Omezená podpora: Mnoho e-mailových klientů nepodporuje pokročilé funkce CSS, jako jsou Flexbox, Grid nebo media query.
• Držte se základů: Pro maximální kompatibilitu používejte základní vložené CSS.
• Předkonfigurované styly: Vyhněte se mazání předkonfigurovaných stylů, protože zajišťují správné vykreslení v hlavních e-mailových klientech.

5. Kompatibilita s e-mailovými klienty

HTML pro e-maily vyžaduje zvláštní pozornost kvůli zastaralým vykreslovacím jádrům v mnoha e-mailových klientech.

Hlavní pokyny:

• Pro lepší podporu používejte rozvržení založená na tabulkách namísto rozvržení založených na prvcích <div>.
• Vyhněte se pokročilým funkcím CSS, jako jsou animace, Flexbox nebo Grid.
• Počítejte s nekonzistentním chováním media query a méně významných vlastností CSS.
• Testování: E-maily vždy testujte ve více klientech (například Gmail, Outlook a Apple Mail), abyste zajistili správné vykreslení.

6. Vnitřní okraj

Nastavení Vnitřní okraj upravuje prostor kolem obsahu HTML:

• Výchozí vnitřní okraj: Ve výchozím nastavení je nastaven na 0.
• Vlastní vnitřní okraj: Aktivací přepínače Více můžete upravit jednotlivé okraje pro:
  • Nahoře
  • Vpravo
  • Dole
  • Vlevo

Tato funkce je ideální pro zarovnání obsahu HTML v rozvržení e-mailu.

7. Přidání kotvicího odkazu

Funkce Přidat kotvicí odkaz umožňuje vytvořit klikací odkaz na jiném místě e-mailu, který přejde na blok HTML.

Jak použít:

• Aktivujte možnost a do pole zadejte název kotvy.

Omezení:

• Kotvicí odkazy nejsou podporovány některými e-mailovými klienty, například:
  • aplikací Gmail pro iOS
  • Apple Mailem pro iOS
  • aplikací Outlook (Android a macOS)
  • AMP e-maily

8. Psaní vlastního HTML

Editor HTML je určen k psaní nebo vkládání vlastní HTML struktury e-mailu.

Doporučené postupy:

• Používejte jednoduché HTML s širokou podporou.
• Vyhněte se složitým rozvržením nebo funkcím, jako jsou prvky <div>.
• Držte se návrhů založených na tabulkách, abyste zajistili lepší kompatibilitu.

9. Tipy pro úspěch

1. Začněte v malém: Pokud s vývojem e-mailů začínáte, použijte blok HTML pro konkrétní části.
2. Ověřte kód: Ujistěte se, že HTML splňuje požadavky e-mailových klientů.
3. Důkladně testujte: Používejte nástroje pro náhled a testování e-mailu ve více klientech a na různých zařízeních.