Nastavenia editora e-mailov Stripo s funkciou drag-and-drop

Published: 22. októbra 2024 · Last updated: 21. júla 2026 · By Marcus Biel

Na pravej strane editora e-mailov Maildroppa nájdete stĺpec nastavení e-mailu, ktorý poskytuje nástroje na štruktúrovanie a prispôsobenie obsahu a vzhľadu e-mailu. Tento stĺpec je rozdelený na dve karty: Obsah a Vzhľad.

Karta Obsah

Na karte Obsah navrhujete a organizujete obsah e-mailu. Obsahuje dve hlavné sekcie: Štruktúry a Bloky.

1. Štruktúry

Štruktúry určujú rozloženie e-mailu usporiadaním obsahu do riadkov a stĺpcov. Môžete si vybrať z rôznych vopred navrhnutých rozložení, napríklad:

• Jeden stĺpec
• Dva stĺpce
• Viac stĺpcov

Nie ste obmedzení len na tieto možnosti – môžete kombinovať viacero blokov a vytvoriť ľubovoľné vlastné rozloženie, čo vám poskytuje úplnú flexibilitu pri prispôsobení návrhu vašim potrebám.

• Presúvanie myšou: Jednoducho presuňte štruktúru z tejto sekcie do pracovnej plochy návrhu e-mailu a začnite pridávať obsah.
• Prispôsobenie: Po pridaní štruktúry ju môžete vyplniť rôznymi blokmi obsahu, napríklad obrázkami, textom alebo tlačidlami.

2. Bloky

Bloky sú prvky obsahu, ktoré umiestňujete do štruktúr a pomocou ktorých vytvárate e-mail.

Dostupné typy blokov:

• Obrázok: Nahrajte obrázky (PNG, JPG, GIF) a prispôsobte ich vzhľad.
• Text: Pridajte a formátujte text, aby ste odovzdali svoje posolstvo.
• Tlačidlo: Pridajte klikateľné tlačidlá s prispôsobiteľným textom, odkazmi a štýlmi.
• Medzera: Vložte prázdny priestor na úpravu rozloženia medzi ostatnými blokmi.
• Video: Vložte video z platforiem, ako sú YouTube, Vimeo a ďalšie.
• HTML: Pridajte vlastný kód HTML a CSS na pokročilé prispôsobenie obsahu e-mailu.

Každý blok je navrhnutý tak, aby bol flexibilný a prispôsobiteľný, vďaka čomu môžete vytvoriť e-mail, ktorý zodpovedá vzhľadu a štýlu vašej značky.

Podrobné vysvetlenie blokov obsahu

Blok obrázka

Blok obrázka v editore e-mailov Stripo s funkciou drag-and-drop umožňuje pridávať a prispôsobovať obrázky v e-mailovej kampani.

Pridanie bloku obrázka

Blok obrázka môžete do e-mailu pridať dvoma spôsobmi:

Možnosť 1

Prejdite kurzorom nad oblasť „Sem presuňte obsah“ v štruktúre a potom kliknite na ikonu obrázka. Vybraná štruktúra sa okamžite zmení na blok obrázka.

Možnosť 2

Prejdite do sekcie Bloky na karte Obsah. Presuňte blok obrázka do požadovanej štruktúry v rozložení e-mailu. Tento spôsob vám poskytuje väčšiu kontrolu nad presným umiestnením obrázka.

Nahranie obrázka

Po pridaní bloku obrázka môžete obrázok nahrať dvoma spôsobmi:

Presunutie myšou

Súbor obrázka (PNG, JPG, GIF) môžete priamo presunúť z počítača do poľa na nahrávanie, ktoré sa zobrazí v bloku obrázka.

Nahranie z počítača

Prípadne môžete kliknúť na ikonu cloudu v bloku obrázka a otvoriť prehliadač súborov, ktorý vám umožní vybrať obrázok z počítača (do 2 MB). Po výbere sa obrázok zobrazí v bloku aj na karte Obsah vpravo.

Zmena obrázka

Ak chcete obrázok nahradiť, použite možnosť Zmeniť obrázok na karte Obsah. Kliknite na kruhovú ikonu Zmeniť obrázok, ktorá vám umožní nahrať nový obrázok alebo pridať odkaz na obrázok z externého URL.

Úprava obrázka

Po nahraní obrázka ho možno budete chcieť ďalej upraviť priamo v platforme. Integrovaný Editor obrázkov Stripo vám umožňuje vylepšovať a upravovať obrázky bez opustenia editora e-mailov.

Otvorenie editora obrázkov

1. Po nahraní obrázka kliknite na tlačidlo Upraviť obrázok. Otvorí sa rozhranie editora obrázkov.
2. Editor ponúka širokú škálu nástrojov zobrazených v hornom paneli s ponukami.

Dostupné nástroje na úpravu obrázkov

• Filtre Jedným kliknutím použite rôzne filtre, napríklad:

  • Odtiene sivej
  • Čiernobiele
  • Zaostrenie
  • Invertovať
  • Sépiový filter
  • Jas
  • Farba

• Zmena veľkosti Upravte rozmery obrázka. Môžete:

  • Definovať konkrétnu šírku a výšku.
  • Zachovať pomer strán.

• Orezať Vyberte časť obrázka, ktorú chcete ponechať, a odstráňte nepotrebné časti.

• Transformácia Otočte alebo prevráťte obrázok:

  • Horizontálne
  • Vertikálne

• Kreslenie Pomocou nástroja na kreslenie pridajte na obrázok prvky od ruky, napríklad čiary alebo vlastné tvary.

• Text Pridajte text priamo do obrázka. Prispôsobte:

  • Písmo
  • Veľkosť
  • Farbu
  • Zarovnanie

• Tvary a nálepky Vylepšite obrázok prekrytím:

  • Vopred vytvorených tvarov
  • Zábavných nálepiek

• Rámy Vyberte si z ponuky rámov a dodajte obrázku štýlový okraj.

• Rohy Upravte štýl rohov pre uhladenejší vzhľad.

• Pozadie Odstráňte alebo nahraďte pozadie obrázka a dosiahnite čistejší vzhľad.

Uloženie úprav

Po vykonaní požadovaných zmien kliknite na tlačidlo Uložiť vľavo hore v editore. Upravený obrázok automaticky nahradí pôvodný obrázok v rozložení e-mailu.

Nastavenia obrázka

Po nahraní obrázka ho môžete prispôsobiť pomocou možností nastavení obrázka dostupných na karte Obsah na pravej strane.

Odkaz

Pridajte k obrázku odkaz. Vybrať si môžete z rôznych typov odkazov, napríklad:

• Webová stránka (HTTP, HTTPS)
• E-mail (mailto:)
• Súbor (ftp)
• Zdieľanie na sociálnych sieťach (Facebook, X (predtým Twitter), LinkedIn, Pinterest)

Tieto možnosti nájdete v rozbaľovacej ponuke nastavení odkazu.

Alternatívny text

Pridajte alternatívny text, ktorý sa zobrazí, ak sa obrázok nenačíta. Tento text je užitočný aj z hľadiska prístupnosti, pretože umožňuje čítačkám obrazovky opísať obrázok príjemcom so zrakovým postihnutím.

Zarovnanie

Vyberte, ako má byť obrázok zarovnaný v rámci svojho kontajnera. Zarovnať ho môžete Vľavo, Na stred alebo Vpravo.

Veľkosť

Šírku a výšku obrázka upravte manuálne pomocou tlačidiel plus/mínus alebo zadaním požadovaných rozmerov.

Môžete tiež aktivovať možnosť „Prispôsobiť šírke“, aby sa obrázok automaticky prispôsobil celej šírke kontajnera.

Responzívny obrázok

Aktivujte možnosť „Responzívny obrázok“, aby sa obrázok prispôsobil rôznym veľkostiam obrazovky, najmä mobilným zariadeniam.

Vnútorné odsadenie

Prispôsobte odsadenie okolo obrázka a určite tak, koľko priestoru sa zobrazí medzi obrázkom a okolitým obsahom. Odsadenie môžete použiť rovnomerne alebo ho prispôsobiť pre každú stranu (Hore, Dole, Vľavo, Vpravo).

Kotviace odkazy

Obrázku môžete priradiť kotviaci odkaz, ktorý príjemcom umožní po kliknutí na obrázok prejsť na konkrétnu sekciu v tom istom e-maile. Upozorňujeme však, že kotviace odkazy nemusia fungovať v niektorých e-mailových klientoch, napríklad Gmail a Apple Mail.

Textový blok

Vylepšite textové bloky prispôsobením ich vzhľadu a funkčnosti pomocou nasledujúcich nastavení. Každá možnosť vám umožňuje detailne nastaviť zobrazenie textu tak, aby dokonale zodpovedalo vašim dizajnovým preferenciám.

Panel nástrojov textu

Keď kliknete do textového bloku, nad oblasťou obsahu sa zobrazí panel nástrojov textu, ktorý poskytuje rýchly prístup k mnohým bežným možnostiam formátovania textu. Panel obsahuje tieto funkcie:

1. Formát odseku

Nastavte štýl odseku výberom možností, ako je Normálny pre bežný text alebo rôznych úrovní nadpisov (Nadpis 1 až Nadpis 6) na vytvorenie štruktúrovanej hierarchie v e-maile. Vďaka tomu bude obsah čitateľnejší a lepšie usporiadaný.

2. Rodina písiem

Predvolené písmo je Arial, ale môžete si vybrať z rôznych písiem vrátane bežných možností, ako sú Georgia, Helvetica a Courier New. K dispozícii je aj vyhľadávanie na rýchle nájdenie konkrétneho písma.

3. Veľkosť písma

Veľkosť písma môžete upraviť od 8 pt do 72 pt. Predvolená hodnota je 14 pt, čo je vhodné pre väčšinu textu e-mailu. Pomocou rozbaľovacej ponuky rýchlo nastavíte požadovanú veľkosť písma.

4. Štýlovanie textu

Text môžete upraviť pomocou týchto možností:

• Tučné (B): Zvýrazní text použitím tučného písma.
• Kurzíva (I): Nastaví text kurzívou pre štylizovanejší vzhľad.
• Podčiarknutie (U): Podčiarkne text, čo sa bežne používa pri hypertextových odkazoch.
• Prečiarknutie (S): Prekreslí cez text čiaru, čo je užitočné pri úpravách alebo odstránenom obsahu.

5. Pokročilé štýlovanie textu (ponuka s tromi bodkami)

Kliknutím na tri bodky na paneli nástrojov rozbalíte ďalšie možnosti:

• Dolný index: Posunie text pod základnú líniu (užitočné pre poznámky pod čiarou alebo chemické vzorce).
• Horný index: Posunie text nad základnú líniu (bežne sa používa pri exponentoch alebo radových číslach).
• Odstrániť formátovanie: Odstráni všetko použité formátovanie a vráti text do predvoleného štýlu.

6. Farba textu a pozadia

• Farba textu: Kliknite na tlačidlo Farba textu a vyberte farbu z palety alebo zadajte hexadecimálny kód na presné nastavenie farby textu.
• Farba pozadia: Vyberte farbu pozadia (zvýraznenia) textu.

7. Zarovnanie textu

Zarovnajte text v bloku:

• Zarovnať vľavo: Zarovná text doľava.
• Na stred: Zarovná text na stred.
• Zarovnať vpravo: Zarovná text doprava.
• Do bloku: Rovnomerne rozloží text po celej šírke bloku.

8. Zoznamy

Vytvorte číslované a nečíslované zoznamy:

• Vložiť/odstrániť zoznam s odrážkami: Pridá alebo odstráni odrážky.
• Vložiť/odstrániť číslovaný zoznam: Pridá alebo odstráni číslovaný zoznam.

9. Zalamovanie riadkov

Aktivujte alebo deaktivujte zalamovanie riadkov v textovom bloku. Po aktivácii sa dlhé riadky textu automaticky presunú na ďalší riadok.

10. Odsadenie

Upravte odsadenie textu:
- **Zväčšiť odsadenie**: Posunie text ďalej od okraja, čo je užitočné pri podbodoch alebo citátoch.
- **Zmenšiť odsadenie**: Zmenší odsadenie a priblíži text k ľavému okraju.
![Odsadenie textu](https://cms.maildroppa.com/assets/0146b155-9fe5-4495-be1c-19dcf1427639)

11. Vloženie hypertextového odkazu

Zistite, ako pridávať, upravovať a spravovať hypertextové odkazy v obsahu e-mailu.

Postup pridania alebo úpravy odkazu

a) Zvýraznite text

Vyberte text, z ktorého chcete vytvoriť hypertextový odkaz.

b) Kliknite na ikonu odkazu

Na paneli nástrojov textu kliknite na ikonu odkazu.

c) Upravte odkaz na paneli nastavení

Zobrazí sa panel nastavení na pravej strane s možnosťami odkazu:

• Pole odkazu: Zadajte URL alebo vyberte jednu z preddefinovaných možností.
• Značka: Pridajte značky na označenie odberateľov alebo spustenie automatizácií.

Oprava odkazov po odoslaní

Nie je nič horšie, ako odoslať novú kampaň svojim 2 365 odberateľom a následne zistiť, že jeden z odkazov je nefunkčný kvôli jednoduchému preklepu. Zbohom, výpredaje na Black Friday!

Našťastie sme umožnili opraviť nefunkčné odkazy – dokonca aj po odoslaní e-mailu odberateľom.

a) Zobrazenie kampane

Nájdite odoslanú kampaň v prehľade, kliknite na tri bodky a vyberte možnosť Zobraziť kampaň.

b) Úprava odkazov alebo značiek

V podrobnostiach kampane prejdite na zoznam odkazov a:

• Aktualizujte ciele odkazov: Opravte nesprávne URL.
• Spravujte značky: Pridajte alebo odstráňte značky pre automatizácie.

Poznámka: Ak chcete používať funkciu opätovného zacielenia odkazov, v nastaveniach kampane musí byť aktivované sledovanie kliknutí.

Prispôsobenie vzhľadu odkazov

Na paneli nastavení na pravej strane môžete upraviť vzhľad odkazu:

• Farba odkazu: Vyberte farbu alebo zadajte hexadecimálny kód.

• Podčiarknutie odkazov: Aktivujte alebo deaktivujte podčiarknutie pre čistejší vzhľad.

12. Personalizačné značky

Pomocou personalizačných značiek môžete pridať dynamický obsah, napríklad meno príjemcu alebo iné vlastné polia.

• Otvorte rozbaľovaciu ponuku Personalizačné značky na paneli nástrojov a vyberte bežné polia, ako Meno, E-mail alebo Krajina, prípadne definujte vlastné polia na prispôsobenie e-mailov každému príjemcovi.

13. Emotikony

Dodajte textu vizuálnu príťažlivosť pridaním emotikonov.

• Kliknutím na ikonu emotikonu na paneli nástrojov otvoríte kategorizovaný zoznam emotikonov na jednoduché prehľadávanie.
• Poznámka ku kompatibilite: E-maily otestujte v niektorých klientoch, napríklad Outlook, pretože niektoré nemusia emotikony zobrazovať správne.

14. Tabuľka a špeciálne znaky

Na konci panela nástrojov kliknite na tri bodky a zobrazte ďalšie pokročilé možnosti.

Vloženie tabuľky

Vytvárajte a prispôsobujte tabuľky na vylepšenie rozloženia e-mailu.

• Podľa potreby definujte riadky, stĺpce, medzery medzi bunkami, odsadenie a veľkosť okrajov.

Vloženie špeciálnych znakov

Vylepšite text symbolmi, diakritickými znakmi a ďalšími neštandardnými znakmi.

• Otvorte možnosť Špeciálne znaky a prehľadajte široký výber znakov.

Ďalšie nastavenia textového bloku (pravý panel)

Pravý panel poskytuje rozsiahle možnosti ovládania vzhľadu a funkčnosti textových blokov. Dostupné nastavenia sú uvedené nižšie:

1. Farba textu

Definujte farbu textu pomocou výberu farby alebo zadaním hexadecimálneho kódu.

2. Farba pozadia

Nastavte vlastnú farbu pozadia textového bloku. Predvolene je pozadie priehľadné.

3. Nastavenia špecifické pre odkazy

Keď textový blok obsahuje odkazy, v nastaveniach sa zobrazia ďalšie možnosti:

• Farba odkazu: Upravte farbu odkazov pomocou výberu farby alebo hexadecimálneho kódu.

• Podčiarknutie odkazov: Zapnite alebo vypnite podčiarknutie odkazov v textovom bloku.

• Úprava odkazu: Vyberte odkaz v oblasti obsahu a upravte jeho URL na paneli nastavení. Pomocou rozbaľovacej ponuky s označením „Značky“ môžete k odkazu tiež priradiť alebo aktualizovať značky.

4. Zarovnanie

Zarovnajte textový blok v rámci kontajnera: Vľavo, Na stred alebo Vpravo.

5. Pevná výška

Aktiváciou tejto možnosti nastavíte pevnú výšku textového bloku. Môžete tiež ovládať vertikálne zarovnanie textu: Hore, Na stred alebo Dole.

6. Riadkovanie

Ovládajte priestor medzi riadkami textu. Vyberte si z možností Tesné, Normálne alebo Široké.

7. Odsadenie

Upravte priestor okolo textového bloku. Použite rovnomerné odsadenie alebo prispôsobte každú stranu: Hore, Dole, Vľavo a Vpravo.

8. Kotviace odkazy

Vytvorte kotviace odkazy, ktoré čitateľom umožnia prejsť na konkrétne sekcie e-mailu. Upozorňujeme, že niektoré e-mailové klienty kotviace odkazy nepodporujú.

Blok tlačidla

Blok tlačidla umožňuje pridať do e-mailu klikateľné tlačidlo s prispôsobiteľnými nastaveniami funkčnosti a štýlu.

Nastavenia odkazu

Možnosť Odkaz určuje akciu, ktorá sa spustí po kliknutí príjemcu na tlačidlo.

Dostupné typy odkazov

• Bežný odkaz na stránku (HTTP alebo HTTPS): Presmeruje používateľa na webovú stránku.
• E-mailový odkaz: Otvorí e-mailového klienta používateľa a vytvorí nový e-mail.
• Odkaz na súbor (FTP, FTPS): Odkazuje na súbor na FTP serveri.
• Skype: Spustí hovor alebo chat v Skype.
• Telefón (tel): Spustí telefonický hovor na kompatibilných zariadeniach.
• SMS: Otvorí aplikáciu na odosielanie správ s vopred vyplneným číslom príjemcu.
• Viber: Otvorí aplikáciu Viber na odosielanie správ alebo telefonovanie.
• Iný typ protokolu: Zadajte vlastný protokol, ktorý nie je uvedený vyššie.

Možnosti zdieľania na sociálnych sieťach

Tlačidlo môžete nastaviť aj na zdieľanie na sociálnych sieťach alebo e-mailom:

• Facebook
• X (predtým Twitter)
• LinkedIn
• Pinterest
• Zdieľanie e-mailom

Pole URL

Vedľa typu odkazu sa nachádza pole URL (zvyčajne začínajúce na https://), do ktorého môžete zadať konkrétnu adresu zodpovedajúcu typu odkazu.

Označenie tlačidla

Prispôsobte označenie tlačidla tak, aby vyjadrovalo vašu výzvu k akcii. Predvolené označenie je „Button“, ale môžete ho zmeniť napríklad na „Zistiť viac“, „Predplatiť teraz“ alebo „Nakúpiť teraz“.

Štýl textu

Nastavenia Štýl textu umožňujú upraviť vzhľad textu tlačidla.

Výber písma

Vyberte si z rôznych štandardných písiem vrátane:

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

Pri neštandardných písmach sú k dispozícii aj tieto možnosti:

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

V hornej časti zoznamu písiem vám vyhľadávacie pole pomôže rýchlo nájsť konkrétne písmo.

Veľkosť a formátovanie písma

• Veľkosť písma: Vyberte hodnotu od 8 do 72 podľa toho, ako výrazne má text tlačidla pôsobiť.
• Formátovanie textu: Pomocou ikon „B“ alebo „I“ použite štýl Tučné alebo Kurzíva a zvýraznite text tlačidla.

Nastavenia farieb

Vzhľad tlačidla môžete prispôsobiť úpravou nastavení farieb.

1. Farba tlačidla: Zmeňte farbu pozadia tlačidla. Predvolená farba je zelená (#31cb4b). Novú farbu vyberte pomocou poľa s hexadecimálnym kódom alebo výberu farby.

2. Farba textu: Definujte farbu textu tlačidla. Predvolená farba je biela (#ffffff). Pre lepšiu čitateľnosť vyberte farbu, ktorá dobre kontrastuje s pozadím tlačidla.

3. Farba pozadia: Upravte pozadie kontajnera tlačidla. Predvolene je priehľadné, ale môžete ho zmeniť, aby tlačidlo viac vyniklo na pozadí e-mailu.

Zaoblenie okrajov

Pomocou nastavenia Zaoblenie okrajov ovládajte zaoblenie rohov tlačidla.

• Predvolená hodnota: 30 (stredne zaoblené rohy).
• Rozsah: 0 (hranaté rohy) až 100 (tlačidlo v tvare kapsuly).

Poznámka: Ak chcete zabezpečiť správne zobrazenie zaoblených rohov v Microsoft Outlook, aktivujte možnosť „Podpora Outlooku“ na karte Vzhľad.

Zarovnanie

Pomocou nastavenia Zarovnanie umiestnite tlačidlo v oblasti obsahu.

• Možnosti: Vľavo, Na stred, Vpravo.
• Bežné použitie: Zarovnanie na stred na zvýraznenie, zarovnanie doľava alebo doprava pre zachovanie konzistentného dizajnu.

Pevná výška

Aktivujte možnosť Pevná výška, aby tlačidlo zachovalo konzistentné rozmery.

1. Predvolené: Deaktivované.
2. Minimálna výška: 44 pixelov.
3. Vertikálne zarovnanie obsahu: Po aktivácii pevnej výšky zarovnajte obsah tlačidla Hore, Na stred alebo Dole a nastavte jeho presnú pozíciu.

Tlačidlo s ikonou

Možnosť Tlačidlo s ikonou umožňuje pridať ikonu vedľa textu tlačidla, čím zvyšuje vizuálnu príťažlivosť a posilňuje výzvu k akcii. Táto funkcia je predvolene deaktivovaná.

• Podporované formáty: Nahrajte ikony vo formáte PNG, JPG alebo GIF, s maximálnou veľkosťou súboru 2 MB.
• Umiestnenie ikony: Vyberte, či sa má ikona zobraziť na ľavej alebo pravej strane textu tlačidla.

Poznámka: Ikony sa nezobrazujú v niektorých verziách Microsoft Outlooku v systéme Windows vrátane:

• Outlook 2002, 2007, 2010, 2013, 2016 a 2019. Toto obmedzenie vyplýva zo spôsobu, akým tieto e-mailové klienty vykresľujú e-maily HTML. Zohľadnite ho, ak veľká časť vášho publika používa tieto klienty.

Nastavenia okrajov

Prispôsobte okraje tlačidla a dodajte mu štýl a výraznosť.

• Šírka okraja: Nastavte šírku každej strany (vľavo, vpravo, hore a dole) samostatne, až do 40 pixelov.
• Štýl okraja: Vyberte si štýl Plný, Čiarkovaný alebo Bodkovaný.
• Farba okraja: Pomocou výberu farby alebo zadaním hexadecimálneho kódu zlaďte farbu okraja so značkou alebo dizajnom.

Vnútorné odsadenie

Upravte priestor vo vnútri tlačidla medzi obsahom (textom a ikonou) a okrajom tlačidla.

• Možnosti prispôsobenia: Definujte hodnoty odsadenia pre strany Vľavo, Vpravo, Hore a Dole, maximálne do 99 pixelov.
• Vplyv: Vnútorné odsadenie ovplyvňuje celkovú veľkosť tlačidla a umiestnenie obsahu v ňom.

Vonkajšie odsadenie

Ovládajte priestor mimo tlačidla a upravte jeho pozíciu vzhľadom na ostatné prvky v rozložení e-mailu.

• Možnosti prispôsobenia: Nastavte hodnoty vonkajšieho odsadenia pre strany Vľavo, Vpravo, Hore a Dole, maximálne do 40 pixelov.
• Prípad použitia: Zabezpečí, aby tlačidlo nebolo príliš blízko iného obsahu alebo okrajov e-mailu.

Pridanie kotviaceho odkazu

Pomocou kotviacich odkazov nasmerujete čitateľov na konkrétne sekcie v tom istom e-maile, čo poskytuje rýchlu navigáciu v dlhších newsletteroch.

• Názov kotvy: Definujte cieľ v e-maile a prepojte na túto kotvu tlačidlo. Po kliknutí sa e-mail posunie na určenú sekciu, čím sa zlepší navigácia používateľa.

Dôležité: Kotviace odkazy nie sú podporované v niektorých e-mailových klientoch vrátane:

• Aplikácie Gmail pre iOS
• Apple Mail pre iOS
• Aplikácie Outlook pre Android
• Aplikácie Outlook pre macOS
• E-mailov AMP

E-mail dôkladne otestujte, aby ste zaistili funkčnosť v rôznych e-mailových klientoch a zistili, či je táto funkcia vhodná pre vaše publikum.

Blok medzery

Blok medzery umožňuje pridať do obsahu e-mailu nastaviteľný priestor a poskytuje kontrolu nad jeho veľkosťou, zarovnaním, vzhľadom a vnútorným odstupom. Nižšie nájdete podrobnosti o dvoch typoch medzier: Normálna medzera a Dynamická medzera.

1. Normálna medzera

Normálna medzera je prvok v tvare čiary, ktorý vizuálne oddeľuje sekcie v e-maile.

Hlavné nastavenia

1. Hrúbka a štýl čiary Prispôsobte hrúbku, štýl a farbu čiary:

   • Hrúbka: Upravte ju pomocou tlačidiel + a - (začína od hodnoty 1).
   • Štýl: Vyberte si medzi plným, čiarkovaným alebo bodkovaným štýlom.
   • Farba: Nastavte vlastnú farbu pomocou hexadecimálneho kódu alebo výberu farby (predvolené: #cccccc).

2. Šírka Definujte, akú časť obsahu má čiara medzery pokrývať. Šírku v pixeloch upravte pomocou tlačidiel + a -.

3. Zarovnanie Zarovnajte čiaru doľava, na stred alebo doprava podľa rozloženia.

4. Odsadenie Ovládajte vnútorný priestor okolo medzery:

   • Predvolené: Odsadenie je nastavené na hodnotu 20 zo všetkých strán.
   • Pomocou prepínača Viac určte odsadenie pre jednotlivé strany:
     • Hore
     • Vpravo
     • Dole
     • Vľavo

Prípad použitia

Normálna medzera je ideálna na vytváranie čistých vizuálnych oddelení medzi sekciami e-mailu a zabezpečuje dobre usporiadané, profesionálne rozloženie.

2. Dynamická medzera

Dynamická medzera je neviditeľný blok prázdneho priestoru navrhnutý na vytvorenie voľného priestoru v rozložení e-mailu.

Hlavné funkcie

1. Úprava výšky Výšku upravte priamo v oblasti obsahu alebo pomocou ovládacieho panela a tlačidiel + a -. Výška určuje, koľko vertikálneho priestoru sa pridá medzi sekcie.

2. Farba pozadia Predvolene má medzera priehľadné pozadie, ale môžete použiť vlastnú farbu pozadia pomocou hexadecimálneho kódu alebo výberu farby. Medzera tak môže v prípade potreby fungovať ako viditeľný blok.

3. Responzívne správanie Možnosť Responzívna medzera zabezpečuje dynamické prispôsobenie medzery rôznym veľkostiam obrazovky a optimálne rozloženie na rôznych zariadeniach. Táto funkcia je predvolene aktivovaná.

Hlavné rozdiely medzi normálnymi a dynamickými medzerami

• Dynamická medzera: Pridáva prázdny priestor bez viditeľnej čiary.
• Normálna medzera: Obsahuje nastavenia špecifické pre čiaru, napríklad:
  • Šírku čiary
  • Zarovnanie
  • Štýly čiary
  • Odsadenie

Dynamická medzera tieto funkcie nepodporuje a je určená výlučne na oddelenie bez vizuálnych prvkov.

3. Pridanie kotviaceho odkazu

Kotviace odkazy možno použiť pri oboch typoch medzier, čo používateľom umožní prejsť priamo na umiestnenie medzery z inej časti e-mailu. Je to užitočné najmä pri vytváraní navigácie v dlhších newsletteroch.

Poznámka: Kotviace odkazy niektoré e-mailové klienty nepodporujú, vrátane:

• Microsoft Outlook
• Gmail (v mobile)

Blok videa

Blok videa umožňuje vložiť video do e-mailu a prispôsobiť jeho vzhľad a správanie. Podporuje odkazy na videá z platforiem, ako sú YouTube a Vimeo, a poskytuje flexibilitu a kontrolu nad prezentáciou videa.

1. Odkaz na video

Zadajte URL videa do poľa Odkaz na video. Podporované sú platformy YouTube, Vimeo a ďalšie služby umožňujúce vloženie.

• Automatické správanie: Po pridaní platnej URL:

  • Automaticky sa vygeneruje náhľadový obrázok použitím miniatúry videa z danej platformy.
  • Pole Alternatívny text sa automaticky vyplní názvom alebo popisom videa (ak je k dispozícii).

• Upraviteľné polia: Vygenerovaný náhľadový obrázok a text môžete podľa potreby manuálne upraviť alebo nahradiť.

2. Alternatívny text

Pole Alternatívny text zabezpečuje prístupnosť tým, že zobrazí popis videa, ak sa video nepodarí načítať.

• Automaticky sa vyplní po pridaní podporovanej URL videa.
• Možno ho prispôsobiť potrebám vášho obsahu.

3. Vlastná miniatúra

Nahrajte vlastný obrázok, ktorým nahradíte predvolený náhľad videa.

• Ako ju aktivovať: Aktivujte možnosť Vlastná miniatúra.
• Podporované formáty: PNG, JPG alebo GIF.
• Kedy ju použiť: Nahraďte vygenerovanú miniatúru, ak nezodpovedá dizajnu vášho e-mailu.

4. Tlačidlo prehrávania

Prispôsobte prekryvné tlačidlo prehrávania na miniatúre videa.

• Dostupné možnosti:
  • Vyberte si zo štýlov tlačidiel prehrávania YouTube, Vimeo alebo iných štýlov.
  • Vyberte možnosť „Žiadne“ a tlačidlo prehrávania úplne skryte.

5. Veľkosť

Upravte rozmery videa tak, aby vyhovovali dizajnu e-mailu.

• Šírka a výška: Na ovládanie veľkosti použite tlačidlá + a - alebo hodnoty zadajte manuálne.
• Responzívny dizajn: Zabezpečte bezproblémové prispôsobenie videa rôznym zariadeniam.

6. Prispôsobiť šírke

Aktivujte prepínač Prispôsobiť šírke, aby sa video automaticky prispôsobilo šírke kontajnera. Video si tak zachová responzívny dizajn na rôznych zariadeniach.

7. Responzívny obrázok

Prepínač Responzívny obrázok zabezpečuje, aby sa miniatúra videa prispôsobila šírke obrazovky na mobilných zariadeniach.

• Poznámka: Responzívnosť závisí od podpory zariadenia a e-mailového klienta.

8. Zarovnanie

Pomocou nastavenia Zarovnanie ovládajte horizontálne umiestnenie videa v bloku:

• Vľavo: Zarovná video doľava.
• Na stred: Zarovná video na stred.
• Vpravo: Zarovná video doprava.

9. Možnosti špecifické pre mobilné zariadenia

Prispôsobte správanie a vzhľad videa na mobilných zariadeniach:

1. Skryť prvok v mobile V prípade potreby skryte blok videa na mobilných zariadeniach.

   • Poznámka: Táto funkcia závisí od podpory media queries a nemusí fungovať vo všetkých e-mailových klientoch.

2. Odsadenie v mobile Upravte odsadenie okolo videa pre mobilné zobrazenie.

   • Pomocou prepínača Viac nastavte jednotlivé hodnoty odsadenia pre:
     • Hore
     • Vpravo
     • Dole
     • Vľavo

10. Zahrnúť do AMPHTML alebo HTML

Vyberte, či sa má blok videa zobrazovať v konkrétnych verziách e-mailu:

• AMPHTML aj HTML
• Iba AMPHTML
• Iba HTML

Táto možnosť zabezpečuje, aby bolo video správne zahrnuté podľa doručovanej verzie e-mailu.

HTML blok

HTML blok umožňuje vložiť do e-mailu vlastný kód HTML a CSS a poskytuje flexibilitu pri pokročilých úpravách pri zachovaní kompatibility s e-mailovými klientmi. Či už pridávate jeden prvok HTML alebo navrhujete celý e-mail, tento blok je nástrojom na tvorbu prispôsobených návrhov.

1. Rozhranie editora kódu

Po výbere HTML bloku sa v paneli obsahu zobrazí čierne okno editora kódu. Tento editor umožňuje písať, vkladať alebo upravovať vlastný kód. Editor obsahuje dve sekcie:

• Sekcia HTML: Pridajte alebo upravte HTML štruktúru e-mailu.
• Sekcia CSS: Otvorte samostatný editor CSS na nastylovanie obsahu.

2. Úprava veľkosti písma

Upravte veľkosť písma kódu v editore, aby bol lepšie čitateľný:

• Pomocou tlačidla A+ zväčšíte veľkosť písma.
• Pomocou tlačidla A- zmenšíte veľkosť písma.

3. Úprava veľkosti okna editora

Zmeňte veľkosť okna editora kódu podľa svojich pracovných preferencií:

• Ako upraviť veľkosť:
  • Prejdite kurzorom nad tri bodky v hornej strednej časti okna editora.
  • Potiahnutím posúvača nahor alebo nadol zväčšite alebo zmenšite veľkosť editora.

Táto funkcia je užitočná najmä pri práci s väčšími alebo podrobnejšími blokmi kódu.

4. Editor CSS

Editor CSS umožňuje spravovať štýly obsahu HTML a je dostupný prostredníctvom tlačidla v pravom hornom rohu editora kódu.

Dôležité aspekty:

• Obmedzená podpora: Mnohé e-mailové klienty nepodporujú pokročilé funkcie CSS, ako Flexbox, Grid alebo media queries.
• Držte sa základov: Pre maximálnu kompatibilitu používajte základné vložené CSS.
• Predkonfigurované štýly: Vyhnite sa odstraňovaniu predkonfigurovaných štýlov, pretože zabezpečujú správne vykreslenie v hlavných e-mailových klientoch.

5. Kompatibilita s e-mailovými klientmi

HTML e-mailov si vyžaduje osobitnú pozornosť vzhľadom na zastarané vykresľovacie mechanizmy v mnohých e-mailových klientoch.

Hlavné pokyny:

• Namiesto rozložení založených na prvkoch <div> používajte rozloženia založené na tabuľkách, ktoré majú lepšiu podporu.
• Vyhnite sa pokročilým funkciám CSS, ako sú animácie, Flexbox alebo Grid.
• Počítajte s nekonzistentným správaním media queries a drobných vlastností CSS.
• Testovanie: E-maily vždy otestujte vo viacerých klientoch (napr. Gmail, Outlook, Apple Mail), aby ste zaistili správne vykreslenie.

6. Odsadenie

Nastavenie Odsadenie upravuje priestor okolo obsahu HTML:

• Predvolené odsadenie: Predvolene je nastavené na 0.
• Vlastné odsadenie: Aktiváciou prepínača Viac upravte jednotlivé hodnoty odsadenia pre:
  • Hore
  • Vpravo
  • Dole
  • Vľavo

Táto funkcia je ideálna na zarovnanie obsahu HTML v rozložení e-mailu.

7. Pridanie kotviaceho odkazu

Funkcia Pridať kotviaci odkaz umožňuje vytvoriť klikateľný odkaz na inom mieste e-mailu, ktorý používateľa presmeruje na HTML blok.

Ako ju používať:

• Aktivujte možnosť a do poľa zadajte názov kotvy.

Obmedzenia:

• Kotviace odkazy niektoré e-mailové klienty nepodporujú, napríklad:
  • Aplikácia Gmail pre iOS
  • Apple Mail pre iOS
  • Aplikácia Outlook (Android a macOS)
  • E-maily AMP

8. Písanie vlastného HTML

Editor HTML je určený na písanie alebo vkladanie vlastnej HTML štruktúry e-mailu.

Osvedčené postupy:

• Používajte jednoduché HTML so širokou podporou.
• Vyhnite sa zložitým rozloženiam alebo prvkom, ako sú <div>.
• Držte sa návrhov založených na tabuľkách, aby ste zaistili lepšiu kompatibilitu.

9. Tipy na úspech

1. Začnite v malom: Ak s vývojom e-mailov začínate, použite HTML blok pre konkrétne sekcie.
2. Overte kód: Uistite sa, že vaše HTML spĺňa požiadavky e-mailových klientov.
3. Dôkladne testujte: Používajte nástroje na náhľad a testovanie e-mailu vo viacerých klientoch a zariadeniach.