Chapters

Contents

the email tool that makes email marketing simple

Sign Up FreeNo credit card required.
maildroppa-promo-notebookmaildroppa-promo-spaceship

Postavke Stripo uređivača e-pošte s funkcijom povuci i ispusti

Published: · Last updated: · By

In brief

Saznajte kako u Stripo uređivaču urediti strukture i blokove te prilagoditi slike, tekst, gumbe, videozapise, HTML i prikaz na mobilnim uređajima.

Na desnoj strani Maildroppa uređivača e-pošte pronaći ćete stupac s postavkama e-pošte, koji nudi alate za strukturiranje i prilagodbu sadržaja i izgleda vaše e-pošte. Ovaj je stupac podijeljen na dvije kartice: Sadržaj i Izgled.

Stupac s postavkama e-pošte u Stripo uređivaču e-pošte

Kartica Sadržaj

Na kartici Sadržaj dizajnirate i organizirate sadržaj svoje e-pošte. Sadrži dva glavna odjeljka: Strukture i Blokovi.

Glavni odjeljci – Strukture i Blokovi

1. Strukture

Strukture uređivača e-pošte

Strukture definiraju raspored vaše e-pošte organiziranjem sadržaja u retke i stupce. Možete odabrati različite unaprijed dizajnirane rasporede, kao što su:

  • Jedan stupac
  • Dva stupca
  • Više stupaca

Niste ograničeni na ove mogućnosti – možete kombinirati više blokova i izraditi bilo kakav prilagođeni raspored, što vam pruža potpunu fleksibilnost za potrebe dizajna.

  • Povuci i ispusti: Jednostavno povucite strukturu iz ovog odjeljka i ispustite je u područje dizajna e-pošte kako biste počeli dodavati sadržaj.
  • Prilagodba: Nakon dodavanja strukture možete je ispuniti različitim blokovima sadržaja, poput slika, teksta ili gumba.

2. Blokovi

Blokovi su elementi sadržaja koje smještate unutar struktura kako biste izradili svoju e-poštu.

Blokovi uređivača e-pošte

Dostupne vrste blokova su:

  • Slika: Prenesite slike (PNG, JPG, GIF) i prilagodite njihov izgled.
  • Tekst: Dodajte i oblikujte tekst kako biste prenijeli svoju poruku.
  • Gumb: Dodajte gumbe na koje se može kliknuti, s prilagodljivim tekstom, poveznicama i stilovima.
  • Razmak: Umetnite prazan prostor kako biste prilagodili raspored između drugih blokova.
  • Videozapis: Ugradite video sadržaj s platformi poput YouTubea, Vimea i drugih.
  • HTML: Dodajte prilagođeni HTML i CSS kod za naprednu prilagodbu sadržaja e-pošte.

Svaki je blok fleksibilan i prilagodljiv, što vam omogućuje izradu e-pošte usklađene s izgledom i dojmom vašeg brenda.

Detaljno objašnjenje blokova sadržaja

Blok slike

Blok slike

Blok slike u Stripovu uređivaču e-pošte s funkcijom povuci i ispusti omogućuje vam dodavanje i prilagodbu slika u kampanji e-pošte.

Dodavanje bloka slike

Blok slike možete dodati u svoju e-poštu na dva načina:

1. mogućnost

Postavite pokazivač iznad područja "Ispustite sadržaj ovdje" u strukturi, a zatim kliknite ikonu slike. Time će se odabrana struktura odmah pretvoriti u blok slike.

Ispustite sadržaj ovdje

2. mogućnost

Otvorite odjeljak Blokovi na kartici Sadržaj. Povucite blok slike u željenu strukturu u rasporedu e-pošte. Ova vam metoda daje veću kontrolu nad točnim mjestom na koje ćete postaviti sliku.

Povuci i ispusti blok slike

Prijenos slike

Nakon dodavanja bloka slike, sliku možete prenijeti na dva načina:

Povuci i ispusti

Datoteku slike (PNG, JPG, GIF) možete izravno povući sa svog računala i ispustiti u okvir za prijenos koji se pojavljuje unutar bloka slike.

Ispustite sliku u okvir za prijenos

Prijenos s računala

Možete kliknuti i ikonu oblaka u bloku slike kako biste otvorili preglednik datoteka i odabrali sliku sa svog računala (do 2 MB). Nakon odabira slika će se prikazati i u bloku i na kartici sadržaja s desne strane.

Prijenos slike s računala

Promjena slike

Da biste zamijenili sliku, upotrijebite mogućnost Promijeni sliku koja se nalazi na kartici sadržaja. Kliknite kružnu ikonu Promijeni sliku, koja će vam omogućiti prijenos nove slike ili povezivanje slike s vanjskog URL-a.

Mogućnost promjene slike

Uređivanje slike

Nakon prijenosa slike možda ćete je željeti dodatno urediti izravno unutar platforme. Stripov ugrađeni uređivač slika omogućuje poboljšavanje i prilagodbu slika bez napuštanja uređivača e-pošte.

Mogućnost uređivanja slike

Otvaranje uređivača slika

  1. Nakon prijenosa slike kliknite gumb Uredi sliku. Time se otvara sučelje uređivača slika.
  2. Uređivač nudi širok raspon alata prikazanih na gornjoj traci izbornika.

Dostupni alati za uređivanje slika

Stripo uređivač slika

  • Filtri Primijenite različite filtre jednim klikom, kao što su:

    • Sive nijanse
    • Crno-bijelo
    • Izoštravanje
    • Inverzija
    • Sepija
    • Svjetlina
    • Boja
  • Promjena veličine Prilagodite dimenzije slike. Možete:

    • Definirati određenu širinu i visinu.
    • Zadržati omjer stranica.
  • Obrezivanje Odaberite dio slike koji želite zadržati i uklonite neželjene dijelove.

  • Transformacija Rotirajte ili zrcalite sliku:

    • Vodoravno
    • Okomito
  • Crtanje Upotrijebite alat za crtanje za dodavanje elemenata slobodnom rukom, poput linija ili prilagođenih oblika, preko slike.

  • Tekst Dodajte tekst izravno na sliku. Prilagodite:

    • Font
    • Veličinu
    • Boju
    • Poravnanje
  • Oblici i naljepnice Poboljšajte sliku dodavanjem:

    • Unaprijed izrađenih oblika
    • Zabavnih naljepnica
  • Okviri Odaberite jedan od ponuđenih okvira kako biste slici dodali elegantan obrub.

  • Kutovi Prilagodite stil kutova za dotjeran izgled.

  • Pozadina Uklonite ili zamijenite pozadinu slike radi čišćeg izgleda.

Spremanje izmjena

Nakon što napravite željene izmjene, kliknite gumb Spremi u gornjem lijevom kutu uređivača. Uređena će slika automatski zamijeniti izvornu u rasporedu e-pošte.

Postavke slike

Nakon prijenosa slike možete je prilagoditi pomoću mogućnosti postavki slike dostupnih na kartici Sadržaj s desne strane.

Poveznica

Dodajte poveznicu slici. Možete birati između različitih vrsta poveznica, kao što su:

  • Web-mjesto (HTTP, HTTPS)
  • E-pošta (mailto:)
  • Datoteka (ftp)
  • Dijeljenje na društvenim mrežama (Facebook, X (formerly Twitter), LinkedIn, Pinterest)

Te mogućnosti možete pronaći u padajućem izborniku postavki poveznice. Različite vrste poveznica slike

Alternativni tekst

Dodajte alternativni tekst koji će se prikazati ako se slika ne učita. Ovaj je tekst koristan i za pristupačnost jer čitačima zaslona omogućuje opisivanje slike primateljima oštećena vida. Dodavanje alternativnog teksta slike

Poravnanje

Odaberite kako će slika biti poravnata unutar spremnika. Možete je poravnati lijevo, po sredini ili desno. Poravnanje slike

Veličina

Ručno prilagodite širinu i visinu slike pomoću gumba plus/minus ili unosom željenih dimenzija. Prilagodba veličine slike

Možete uključiti i mogućnost "Prilagodi širini" kako bi se slika automatski prilagodila punoj širini spremnika.

Responzivna slika

Uključite mogućnost "Responzivna slika" kako biste osigurali da se slika prilagođava različitim veličinama zaslona, osobito na mobilnim uređajima. Responzivna slika

Unutarnji razmak

Prilagodite unutarnji razmak oko slike kako biste odredili koliko će prostora biti između slike i okolnog sadržaja. Unutarnji razmak možete primijeniti jednako sa svih strana ili ga prilagoditi za svaku stranu (Gore, Dolje, Lijevo, Desno). Mogućnost unutarnjeg razmaka

Sidrene poveznice

Slici možete dodijeliti sidrenu poveznicu koja će primateljima omogućiti prelazak na određeni odjeljak unutar iste e-pošte kada kliknu sliku. Ipak, imajte na umu da sidrene poveznice možda neće raditi u određenim klijentima e-pošte, poput Gmaila i Apple Maila. Sidrena poveznica

Blok teksta

Blok teksta

Poboljšajte blokove teksta prilagođavanjem njihova izgleda i funkcionalnosti pomoću sljedećih postavki. Svaka vam mogućnost omogućuje precizno podešavanje prikaza teksta kako bi se savršeno uskladio s vašim dizajnerskim preferencijama.

Alatna traka teksta

Alatna traka teksta

Kada kliknete unutar bloka teksta, iznad područja sadržaja pojavljuje se alatna traka teksta koja omogućuje brz pristup mnogim uobičajenim mogućnostima oblikovanja teksta. Dostupne su sljedeće značajke:

1. Oblik odlomka

Postavite stil odlomka odabirom mogućnosti poput Normalno za običan tekst ili različitih razina naslova (Naslov 1 do Naslov 6) za stvaranje strukturirane hijerarhije u e-pošti. To pomaže da sadržaj bude čitljiviji i organiziraniji. Oblik odlomka

2. Obitelj fonta

Zadani je font Arial, ali možete birati između različitih fontova, uključujući uobičajene mogućnosti poput Georgia, Helvetica i Courier New. Dostupna je i funkcija pretraživanja za brzo pronalaženje određenog fonta. Odabir fonta

3. Veličina fonta

Prilagodite veličinu fonta od 8pt do 72pt. Zadana je veličina 14pt, koja dobro funkcionira za većinu osnovnog teksta e-pošte. Pomoću padajućeg izbornika brzo postavite željenu veličinu fonta. Odabir veličine fonta

4. Oblikovanje teksta

Oblikujte tekst pomoću sljedećih mogućnosti:

  • Podebljano (B): Ističe tekst podebljavanjem.
  • Kurziv (I): Tekst se prikazuje u kurzivu radi stiliziranijeg izgleda.
  • Podcrtano (U): Podcrtava tekst, što se često upotrebljava za hiperveze.
  • Precrtano (S): Povlači crtu kroz tekst, korisno za izmjene ili uklonjeni sadržaj. Odabir oblikovanja

5. Napredno oblikovanje teksta (izbornik s tri točke)

Klikom na tri točke na alatnoj traci proširuju se dodatne mogućnosti:

  • Indeks: Spušta tekst ispod osnovne linije (korisno za fusnote ili kemijske formule).
  • Eksponent: Podiže tekst iznad osnovne linije (često se upotrebljava za eksponente ili redne brojeve).
  • Ukloni oblikovanje: Uklanja sva primijenjena oblikovanja i vraća tekst u zadani stil. Odabir naprednog oblikovanja

6. Boja teksta i pozadine

  • Boja teksta: Kliknite gumb Boja teksta kako biste odabrali boju iz palete ili unijeli heksadecimalni kod za preciznu kontrolu boje teksta.
  • Boja pozadine: Odaberite boju pozadine (isticanja) za svoj tekst. Odabir boje

7. Poravnanje teksta

Poravnajte tekst unutar bloka:

  • Poravnaj lijevo: Poravnava tekst ulijevo.
  • Sredina: Centrirа tekst.
  • Poravnaj desno: Poravnava tekst udesno.
  • Obostrano: Ravnomjerno raspoređuje tekst po širini bloka. Odabir poravnanja teksta

8. Popisi

Izradite numerirane i nenumerirane popise:

  • Umetni/ukloni popis s grafičkim oznakama: Dodaje ili uklanja grafičke oznake.
  • Umetni/ukloni numerirani popis: Dodaje ili uklanja numerirani popis. Umetanje popisa

9. Prelamanje redaka

Uključite ili isključite prelamanje redaka unutar bloka teksta. Kada je uključeno, dugi se retci teksta automatski premještaju u sljedeći redak. Uključivanje ili isključivanje prelamanja redaka

10. Uvlačenje

Prilagodite uvlačenje teksta:
- **Povećaj uvlačenje**: Pomakne tekst dalje od margine, što je korisno za podstavke ili citate.
- **Smanji uvlačenje**: Smanjuje uvlačenje i približava tekst lijevoj margini.
![Uvlačenje teksta](https://cms.maildroppa.com/assets/0146b155-9fe5-4495-be1c-19dcf1427639)

11. Umetanje hiperveze

Saznajte kako dodati, urediti i upravljati hipervezama u sadržaju e-pošte.

Koraci za dodavanje ili uređivanje poveznice
a) Označite tekst

Odaberite tekst koji želite pretvoriti u hipervezu. Označite tekst koji želite pretvoriti u poveznicu

b) Kliknite ikonu poveznice

Na alatnoj traci teksta kliknite ikonu poveznice. Ikona poveznice

c) Uredite poveznicu na ploči s postavkama

Pojavit će se desna ploča s postavkama s mogućnostima poveznice:

  • Polje poveznice: Unesite URL ili odaberite neku od unaprijed definiranih mogućnosti.
  • Oznaka: Dodajte oznake za označavanje pretplatnika ili pokretanje automatizacija. Dodavanje poveznice i oznake
Ispravljanje poveznica nakon slanja

Nema ništa gore nego poslati novu kampanju svojim 2.365 pretplatnika, a zatim otkriti da je jedna od poveznica neispravna zbog obične tipografske pogreške. Zbogom, rasprodajo za Crni petak!

Srećom, omogućili smo ispravljanje neispravnih poveznica – čak i nakon što je e-pošta već poslana vašim pretplatnicima.

a) Pregled kampanje

Pronađite poslanu kampanju u pregledu, kliknite tri točke i odaberite Pregledaj kampanju. Kliknite Pregledaj kampanju

b) Izmjena poveznica ili oznaka

Pomaknite se do popisa poveznica u pojedinostima kampanje kako biste:

  • Ažurirali odredišta poveznica: Ispravili netočne URL-ove.
  • Upravljali oznakama: Dodali ili uklonili oznake za automatizacije. Ažuriranje poveznice kampanje

Napomena: Provjerite je li u postavkama kampanje uključeno praćenje klikova kako biste upotrebljavali značajku ponovnog usmjeravanja poveznica.

Prilagodba izgleda poveznice

Na desnoj ploči s postavkama možete prilagoditi izgled poveznice:

  • Boja poveznice: Odaberite boju ili unesite heksadecimalni kod. Postavke boje poveznice

  • Podcrtavanje poveznica: Uključite ili isključite podcrtavanje za čišći izgled. Postavke podcrtavanja poveznica

12. Oznake personalizacije

Upotrijebite oznake personalizacije za dodavanje dinamičnog sadržaja, poput imena primatelja ili drugih prilagođenih polja.

  • Otvorite padajući izbornik Oznake personalizacije na alatnoj traci kako biste odabrali uobičajena polja poput Imena, E-pošte ili Države, ili definirajte prilagođena polja za prilagodbu e-pošte svakom primatelju. Dodavanje oznake personalizacije

13. Emojiji

Dodajte vizualnu privlačnost tekstu uključivanjem emojija.

  • Kliknite ikonu emojija na alatnoj traci kako biste otvorili kategorizirani popis emojija za jednostavno pregledavanje.
  • Napomena o kompatibilnosti: Testirajte e-poštu u određenim klijentima, poput Outlooka, jer se emojiji možda neće ispravno prikazati. Odabir emojija

14. Tablica i posebni znakovi

Na kraju alatne trake kliknite tri točke kako biste otkrili naprednije mogućnosti. Dodatne mogućnosti – umetanje tablice ili posebnih znakova

Umetanje tablice

Izradite i prilagodite tablice kako biste poboljšali raspored e-pošte.

  • Po potrebi definirajte retke, stupce, razmak između ćelija, unutarnji razmak i veličinu obruba. Dodavanje tablice i definiranje njezinih svojstava
Umetanje posebnih znakova

Obogatite tekst simbolima, znakovima s dijakritičkim oznakama i drugim nestandardnim znakovima.

  • Otvorite mogućnost Posebni znakovi kako biste pregledali širok raspon znakova. Umetanje posebnih znakova

Dodatne postavke bloka teksta (desna ploča)

Desna ploča nudi opsežnu kontrolu nad izgledom i funkcionalnošću blokova teksta. Dostupne su sljedeće postavke:

1. Boja teksta

Definirajte boju teksta pomoću birača boja ili unosom heksadecimalnog koda. Odabir boje teksta

2. Boja pozadine

Postavite prilagođenu boju pozadine za blok teksta. Pozadina je prema zadanim postavkama prozirna. Odabir boje pozadine

3. Postavke poveznica

Kada blok teksta sadrži poveznice, u postavkama se pojavljuju dodatne mogućnosti:

  • Boja poveznice: Prilagodite boju poveznica pomoću birača boja ili heksadecimalnog koda. Odabir boje poveznice

  • Podcrtavanje poveznica: Uključite ili isključite podcrtavanje poveznica unutar bloka teksta. Podcrtavanje poveznica

  • Uređivanje poveznice: Odaberite poveznicu u području sadržaja kako biste uredili njezin URL na ploči s postavkama. Poveznici možete dodijeliti ili ažurirati i oznake pomoću padajućeg izbornika s nazivom "Oznake." Uređivanje poveznice i dodavanje oznake

4. Poravnanje

Poravnajte blok teksta unutar spremnika: Lijevo, Sredina ili Desno. Definiranje poravnanja

5. Fiksna visina

Postavite fiksnu visinu bloka teksta uključivanjem ove mogućnosti. Možete kontrolirati i okomito poravnanje teksta: Gore, Sredina ili Dolje. Postavljanje fiksne visine

6. Razmak između redaka

Kontrolirajte prostor između redaka teksta. Odaberite Usko, Normalno ili Široko. Odabir razmaka između redaka

7. Unutarnji razmak

Prilagodite prostor oko bloka teksta. Primijenite jednak unutarnji razmak sa svih strana ili prilagodite svaku stranu zasebno: Gore, Dolje, Lijevo i Desno. Prilagodba unutarnjeg razmaka

8. Sidrene poveznice

Izradite sidrene poveznice kako biste čitateljima omogućili prelazak na određene odjeljke e-pošte. Imajte na umu da neki klijenti e-pošte ne podržavaju sidrene poveznice. Dodavanje sidrene poveznice

Blok gumba

Blok gumba

Blok gumba omogućuje dodavanje gumba na koji se može kliknuti u e-poštu, uz prilagodljive postavke funkcionalnosti i stila.

Postavke poveznice

Mogućnost Poveznica određuje radnju koja se pokreće kada primatelj klikne gumb. Poveznica gumba

Dostupne vrste poveznica
  • Uobičajena poveznica na web-mjesto (HTTP ili HTTPS): Usmjerava korisnika na web-stranicu.
  • Poveznica e-pošte: Otvara korisnikov klijent e-pošte za sastavljanje nove poruke.
  • Poveznica na datoteku (FTP, FTPS): Povezuje s datotekom na FTP poslužitelju.
  • Skype: Pokreće Skype poziv ili razgovor.
  • Telefon (tel): Pokreće telefonski poziv na kompatibilnim uređajima.
  • SMS: Otvara aplikaciju za razmjenu poruka s unaprijed ispunjenim brojem primatelja.
  • Viber: Otvara aplikaciju Viber za poruke ili pozive.
  • Druga vrsta protokola: Navedite prilagođeni protokol koji nije na gornjem popisu.
Mogućnosti dijeljenja na društvenim mrežama

Gumb možete postaviti i za dijeljenje na društvenim mrežama ili putem e-pošte:

  • Facebook
  • X (formerly Twitter)
  • LinkedIn
  • Pinterest
  • Dijeljenje putem e-pošte
Polje URL-a

Pokraj vrste poveznice nalazi se polje URL-a (obično počinje s https://) u koje možete unijeti konkretnu adresu koja odgovara vrsti poveznice.

Oznaka gumba

Prilagodite oznaku gumba kako bi odražavala vaš poziv na akciju. Zadana je oznaka "Gumb", ali je možete promijeniti u mogućnosti poput "Saznajte više", "Pretplatite se sada" ili "Kupite sada". Oznaka gumba

Stil teksta

Postavke Stila teksta omogućuju prilagodbu izgleda teksta gumba. Stil teksta gumba

Odabir fonta

Birajte između različitih standardnih fontova, uključujući:

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

Za nestandardne fontove dostupne su i sljedeće mogućnosti:

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

Na vrhu popisa fontova nalazi se polje za pretraživanje koje vam pomaže brzo pronaći određeni font.

Veličina fonta i oblikovanje
  • Veličina fonta: Odaberite vrijednost od 8 do 72, ovisno o tome koliko istaknuto želite da tekst gumba bude.
  • Oblikovanje teksta: Primijenite podebljano ili kurziv pomoću ikona "B" ili "I" kako biste istaknuli tekst gumba.

Postavke boje

Prilagodite izgled gumba podešavanjem njegovih postavki boje.

  1. Boja gumba: Promijenite boju pozadine gumba. Zadana je zelena (#31cb4b). Upotrijebite polje s heksadecimalnim kodom ili birač boja za odabir nove boje. Boja gumba

  2. Boja teksta: Definirajte boju teksta gumba. Zadana je bijela (#ffffff). Odaberite boju koja pruža dobar kontrast s pozadinom gumba radi čitljivosti. Boja teksta gumba

  3. Boja pozadine: Prilagodite pozadinu spremnika gumba. Prema zadanim je postavkama prozirna, ali je možete promijeniti kako bi se gumb istaknuo u odnosu na pozadinu e-pošte. Boja pozadine gumba

Polumjer obruba

Kontrolirajte zaobljenost kutova gumba pomoću postavke Polumjer obruba.

  • Zadana vrijednost: 30 (umjereno zaobljeni kutovi).
  • Raspon: 0 (kvadratni kutovi) do 100 (gumb u obliku kapsule). Polumjer obruba gumba

Napomena: Kako bi se zaobljeni kutovi ispravno prikazivali u Microsoft Outlooku, uključite mogućnost "Podrška za Outlook" na kartici Izgled.

Poravnanje

Postavite gumb unutar područja sadržaja pomoću postavke Poravnanje.

  • Mogućnosti: Lijevo, Sredina, Desno.
  • Uobičajena upotreba: Poravnanje po sredini za isticanje, a lijevo ili desno poravnanje radi dosljednosti dizajna. Poravnanje gumba

Fiksna visina

Uključite mogućnost Fiksna visina kako biste održali jednake dimenzije gumba.

  1. Zadano: Deaktivirano.
  2. Minimalna visina: 44 piksela.
  3. Okomito poravnanje sadržaja: Kada je uključena fiksna visina, sadržaj gumba poravnajte Gore, Sredina ili Dolje radi preciznog pozicioniranja. Fiksna visina gumba

Gumb s ikonom

Mogućnost Gumb s ikonom omogućuje dodavanje ikone uz tekst gumba, čime se poboljšava vizualna privlačnost i dodatno naglašava poziv na akciju. Ova je značajka prema zadanim postavkama deaktivirana. Gumb s ikonom

  • Podržani formati: Prenesite ikone u formatu PNG, JPG ili GIF, maksimalne veličine datoteke 2 MB.
  • Položaj ikone: Odaberite prikaz ikone na lijevoj ili desnoj strani teksta gumba.

Napomena: Ikone se ne prikazuju u određenim verzijama Microsoft Outlooka za Windows, uključujući:

  • Outlook 2002, 2007, 2010, 2013, 2016 i 2019. To je ograničenje posljedica načina na koji ti klijenti e-pošte prikazuju HTML poruke. Uzmite ga u obzir ako velik dio vaše publike upotrebljava te klijente.

Postavke obruba

Prilagodite obrube gumba za dodatni stil i isticanje. Prilagodba obruba gumba

  • Širina obruba: Postavite širinu svake strane (lijeve, desne, gornje i donje) zasebno, do 40 piksela.
  • Stil obruba: Odaberite stil Puni, Isprekidani ili Točkasti.
  • Boja obruba: Upotrijebite birač boja ili unesite heksadecimalni kod kako biste boju obruba uskladili s brendom ili dizajnom.

Unutarnji razmak

Prilagodite prostor unutar gumba, između sadržaja (teksta i ikone) i obruba gumba. Unutarnji razmak gumba

  • Mogućnosti prilagodbe: Definirajte vrijednosti unutarnjeg razmaka za strane Lijevo, Desno, Gore i Dolje, do najviše 99 piksela.
  • Učinak: Unutarnji razmak utječe na ukupnu veličinu gumba i položaj sadržaja unutar njega.

Vanjski razmak

Kontrolirajte prostor izvan gumba kako biste prilagodili njegov položaj u odnosu na druge elemente u rasporedu e-pošte. Vanjski razmak gumba

  • Mogućnosti prilagodbe: Postavite vrijednosti vanjskog razmaka za strane Lijevo, Desno, Gore i Dolje, do najviše 40 piksela.
  • Primjena: Osigurava da gumb ne bude preblizu drugom sadržaju ili rubovima e-pošte.

Dodavanje sidrene poveznice

Upotrijebite sidrene poveznice za usmjeravanje čitatelja na određene odjeljke unutar iste e-pošte, čime se omogućuje brza navigacija u duljim biltenima. Sidrena poveznica gumba

  • Naziv sidra: Definirajte cilj unutar e-pošte i povežite gumb s tim sidrom. Kada se klikne, e-pošta će se pomaknuti na navedeni odjeljak, čime se poboljšava navigacija korisnika.

Važno: Sidrene poveznice nisu podržane u određenim klijentima e-pošte, uključujući:

  • Aplikaciju Gmail za iOS
  • Apple Mail za iOS
  • Aplikaciju Outlook za Android
  • Aplikaciju Outlook za macOS
  • AMP e-poštu

Temeljito testirajte e-poštu kako biste osigurali funkcionalnost u različitim klijentima e-pošte i utvrdili odgovara li ova značajka vašoj publici.

Blok razmaka

Blok razmaka

Blok razmaka omogućuje dodavanje prilagodljivog prostora u sadržaj e-pošte, uz kontrolu njegove veličine, poravnanja, izgleda i unutarnjeg razmaka. U nastavku su pojedinosti o dvjema vrstama razmaka: Uobičajeni razmak i Dinamički razmak. Mogućnosti razmaka

1. Uobičajeni razmak

Uobičajeni razmak element je u obliku linije koji vizualno odvaja odjeljke u e-pošti. Zadani element razmaka

Ključne postavke
  1. Debljina i stil linije Prilagodite debljinu, stil i boju linije:

    • Debljina: Prilagodite pomoću gumba + i - (počevši od 1).
    • Stil: Odaberite između punog, isprekidanog ili točkastog.
    • Boja: Postavite prilagođenu boju pomoću heksadecimalnog koda ili birača boja (zadano: #cccccc). Stil linije razmaka
  2. Širina Definirajte koliko će se linija razmaka protezati preko sadržaja. Prilagodite širinu u pikselima pomoću gumba + i -.

  3. Poravnanje Poravnajte liniju lijevo, po sredini ili desno kako bi odgovarala rasporedu.

  4. Unutarnji razmak Kontrolirajte unutarnji prostor oko razmaka:

    • Zadano: Unutarnji je razmak postavljen na 20 sa svih strana.
    • Upotrijebite prekidač Više kako biste odredili razmak za pojedinačne strane:
      • Gore
      • Desno
      • Dolje
      • Lijevo Unutarnji razmak elementa razmaka

Primjena

Uobičajeni razmak idealan je za stvaranje čistih, vizualnih odvajanja između odjeljaka e-pošte, čime se osigurava dobro organiziran i profesionalan raspored.

2. Dinamički razmak

Dinamički razmak nevidljiv je blok praznog prostora namijenjen stvaranju prostora za lakše čitanje unutar rasporeda e-pošte. Dinamički razmak

Ključne značajke
  1. Prilagodba visine Prilagodite visinu izravno u području sadržaja ili putem upravljačke ploče pomoću gumba + i -. Visina određuje količinu okomitog prostora dodanog između odjeljaka.

  2. Boja pozadine Prema zadanim postavkama razmak ima prozirnu pozadinu, ali možete primijeniti prilagođenu boju pozadine pomoću heksadecimalnog koda ili birača boja. Time razmak po potrebi može funkcionirati kao vidljivi blok.

  3. Responzivno ponašanje Mogućnost Responzivni razmak osigurava da se razmak dinamički prilagođava različitim veličinama zaslona radi optimalnog rasporeda na svim uređajima. Ova je značajka prema zadanim postavkama uključena. Mogućnosti dinamičkog razmaka

Ključne razlike između uobičajenog i dinamičkog razmaka
  • Dinamički razmak: Dodaje prazan prostor bez vidljive linije.
  • Uobičajeni razmak: Sadrži postavke specifične za liniju, kao što su:
    • Širina linije
    • Poravnanje
    • Stilovi linije
    • Unutarnji razmak

Dinamički razmak ne podržava ove značajke i namijenjen je isključivo odvajanju bez vizualnih elemenata.

3. Dodavanje sidrene poveznice

Sidrene poveznice mogu se primijeniti na obje vrste razmaka, što korisnicima omogućuje izravan prelazak na mjesto razmaka iz drugog dijela e-pošte. To je osobito korisno za stvaranje navigacije unutar e-pošte u duljim biltenima.

Napomena: Određeni klijenti e-pošte ne podržavaju sidrene poveznice, uključujući:

  • Microsoft Outlook
  • Gmail (na mobilnim uređajima)

Blok videozapisa

Birač blokova s istaknutim blokom Videozapis između blokova Razmak i HTML

Blok videozapisa omogućuje ugrađivanje videozapisa u e-poštu te prilagodbu njegova izgleda i ponašanja. Podržava poveznice videozapisa s platformi poput YouTubea i Vimea, pružajući fleksibilnost i kontrolu nad načinom prikaza videozapisa. Postavke bloka videozapisa s poljima za poveznicu videozapisa, alternativni tekst, prilagođenu minijaturu i stil gumba za reprodukciju uz pretpregled e-pošte

1. Poveznica na videozapis

Dodajte URL videozapisa u polje Poveznica na videozapis. Podržane platforme uključuju YouTube, Vimeo i druge usluge koje podržavaju ugradnju. Poveznica videozapisa

  • Automatsko ponašanje: Kada se doda valjani URL:

    • Automatski se generira slika pretpregleda pomoću minijature videozapisa s platforme.
    • Polje Alternativni tekst automatski se ispunjava naslovom ili opisom videozapisa (ako je dostupan).
  • Polja koja se mogu uređivati: Po potrebi možete ručno urediti ili zamijeniti generiranu sliku i tekst pretpregleda.

2. Alternativni tekst

Polje Alternativni tekst osigurava pristupačnost prikazivanjem opisa videozapisa ako se on ne učita. Dodavanje alternativnog teksta videozapisa

  • Automatski se ispunjava kada se doda podržani URL videozapisa.
  • Može se prilagoditi vašim potrebama sadržaja.

3. Prilagođena minijatura

Prenesite prilagođenu sliku kako biste zamijenili zadani pretpregled videozapisa. Dodavanje prilagođene minijature videozapisa

  • Kako uključiti: Uključite mogućnost Prilagođena minijatura.
  • Podržani formati: PNG, JPG ili GIF.
  • Kada upotrijebiti: Zamijenite generiranu minijaturu kada nije usklađena s dizajnom vaše e-pošte.

4. Gumb za reprodukciju

Prilagodite preklopni gumb za reprodukciju na minijaturi videozapisa. Odabir prilagođenog gumba za reprodukciju videozapisa

  • Dostupne mogućnosti:
    • Odaberite između stilova gumba za reprodukciju YouTubea, Vimea ili drugih stilova.
    • Odaberite „Nijedan” kako biste u potpunosti sakrili gumb za reprodukciju.

5. Veličina

Prilagodite dimenzije videozapisa kako bi odgovarao dizajnu vaše e-pošte. Prilagodba veličine videozapisa

  • Širina i visina: Upotrijebite gumbe + i - ili ručno unesite vrijednosti za kontrolu veličine.
  • Responzivni dizajn: Osigurajte da se videozapis skladno prikazuje na različitim uređajima.

6. Prilagodi širini

Uključite prekidač Prilagodi širini kako bi se videozapis automatski prilagodio širini svojeg spremnika. Time se osigurava responzivni dizajn videozapisa na različitim uređajima. Prilagodba videozapisa širini

7. Responzivna slika

Prekidač Responzivna slika osigurava da se minijatura videozapisa prilagodi širini zaslona na mobilnim uređajima.

  • Napomena: Responzivnost ovisi o podršci uređaja i klijenta e-pošte. Responzivna slika videozapisa

8. Poravnanje

Upotrijebite postavku Poravnanje za kontrolu vodoravnog položaja videozapisa u bloku:

  • Lijevo: Poravnava videozapis ulijevo.
  • Sredina: Centrirа videozapis.
  • Desno: Poravnava videozapis udesno. Prilagodba poravnanja videozapisa

9. Mogućnosti specifične za mobilne uređaje

Prilagodite ponašanje i izgled videozapisa na mobilnim uređajima:

  1. Sakrij element na mobilnim uređajima Po potrebi sakrijte blok videozapisa na mobilnim uređajima.

    • Napomena: Ova se značajka oslanja na podršku za medijske upite i možda neće raditi u svim klijentima e-pošte.
  2. Unutarnji razmak na mobilnim uređajima Prilagodite unutarnji razmak oko videozapisa za mobilne prikaze.

    • Upotrijebite prekidač Više za postavljanje pojedinačnih vrijednosti unutarnjeg razmaka za:
      • Gore
      • Desno
      • Dolje
      • Lijevo Skrivanje videozapisa na mobilnim uređajima

10. Uključi u AMPHTML ili HTML

Odaberite hoće li se blok videozapisa pojaviti u određenim verzijama e-pošte:

  • AMPHTML i HTML
  • Samo AMPHTML
  • Samo HTML

Ova mogućnost osigurava odgovarajuće uključivanje videozapisa ovisno o verziji e-pošte koja se isporučuje. Skrivanje videozapisa u AMPHTML-u ili HTML-u

HTML blok

Birač blokova s istaknutim blokom Videozapis između blokova Razmak i HTML

HTML blok omogućuje umetanje prilagođenog HTML i CSS koda u e-poštu, pružajući fleksibilnost za napredne prilagodbe uz poštivanje kompatibilnosti s klijentima e-pošte. Bez obzira na to dodajete li jedan HTML element ili dizajnirate cijelu e-poštu, ovaj je blok vaš alat za prilagođene dizajne.

1. Sučelje uređivača koda

Kada odaberete HTML blok, u oknu sadržaja pojavljuje se crni prozor uređivača koda. U njemu možete pisati, lijepiti ili mijenjati prilagođeni kod. Uređivač sadrži dva odjeljka:

  • HTML odjeljak: Dodajte ili uredite HTML strukturu svoje e-pošte.
  • CSS odjeljak: Otvorite zaseban CSS uređivač za oblikovanje sadržaja. HTML uređivač e-pošte

2. Prilagodba veličine fonta

Prilagodite veličinu fonta koda u uređivaču radi bolje čitljivosti:

  • Upotrijebite gumb A+ za povećanje veličine fonta.
  • Upotrijebite gumb A- za smanjenje veličine fonta. Prilagodba veličine fonta uređivača

3. Prilagodba veličine prozora uređivača

Promijenite veličinu prozora uređivača koda prema svojim radnim preferencijama:

  • Kako prilagoditi:
    • Postavite pokazivač iznad tri točke u gornjem središnjem dijelu prozora uređivača.
    • Povucite klizač prema gore ili dolje kako biste povećali ili smanjili veličinu uređivača.

Ova je značajka posebno korisna za upravljanje većim ili detaljnijim blokovima koda. Prilagodba veličine prozora HTML uređivača

4. CSS uređivač

CSS uređivač omogućuje upravljanje stilovima HTML sadržaja, a dostupan je putem gumba u gornjem desnom kutu uređivača koda.

Važna razmatranja:

  • Ograničena podrška: Mnogi klijenti e-pošte ne podržavaju napredne CSS značajke poput Flexboxa, Grida ili medijskih upita.
  • Držite se osnova: Upotrebljavajte osnovni ugrađeni CSS radi maksimalne kompatibilnosti.
  • Unaprijed konfigurirani stilovi: Izbjegavajte brisanje unaprijed konfiguriranih stilova jer osiguravaju ispravno prikazivanje u glavnim klijentima e-pošte. Primjer CSS uređivača

5. Kompatibilnost s klijentima e-pošte

HTML e-pošte zahtijeva posebnu pažnju zbog zastarjelih mehanizama za prikazivanje u mnogim klijentima e-pošte.

Ključne smjernice:

  • Upotrebljavajte rasporede temeljene na tablicama umjesto rasporeda temeljenih na elementima <div> radi bolje podrške.
  • Izbjegavajte napredne CSS značajke poput animacija, Flexboxa ili Grida.
  • Očekujte neujednačeno ponašanje medijskih upita i manjih CSS svojstava.
  • Testiranje: Uvijek testirajte e-poštu u više klijenata (npr. Gmail, Outlook, Apple Mail) kako biste osigurali ispravno prikazivanje.

6. Unutarnji razmak

Postavka Unutarnji razmak prilagođava prostor oko vašeg HTML sadržaja:

  • Zadani unutarnji razmak: Prema zadanim je postavkama postavljen na 0.
  • Prilagođeni unutarnji razmak: Uključite prekidač Više kako biste prilagodili unutarnji razmak pojedinačno za:
    • Gore
    • Desno
    • Dolje
    • Lijevo

Ova je značajka idealna za poravnavanje HTML sadržaja unutar rasporeda e-pošte. Primjer unutarnjeg razmaka HTML-a

7. Dodavanje sidrene poveznice

Značajka Dodaj sidrenu poveznicu omogućuje stvaranje poveznice na drugom mjestu u e-pošti koja vodi do HTML bloka.

Kako upotrijebiti:

  • Uključite mogućnost i unesite naziv sidra u polje.

Ograničenja:

  • Neki klijenti e-pošte ne podržavaju sidrene poveznice, primjerice:
    • Aplikacija Gmail za iOS
    • Apple Mail za iOS
    • Aplikacija Outlook (Android i macOS)
    • AMP e-pošta

Primjer sidra HTML-a

8. Pisanje prilagođenog HTML-a

HTML uređivač namijenjen je pisanju ili lijepljenju prilagođene HTML strukture vaše e-pošte.

Najbolje prakse:

  • Upotrebljavajte jednostavan HTML koji je široko podržan.
  • Izbjegavajte složene rasporede ili značajke poput elemenata <div>.
  • Držite se dizajna temeljenih na tablicama radi bolje kompatibilnosti.

9. Savjeti za uspjeh

  1. Počnite s malim: Ako ste novi u razvoju e-pošte, upotrijebite HTML blok za određene odjeljke.
  2. Provjerite kod: Provjerite je li vaš HTML usklađen sa zahtjevima klijenata e-pošte.
  3. Temeljito testirajte: Upotrijebite alate za pretpregled i testiranje e-pošte u više klijenata i na različitim uređajima.

Ready to Send Better Emails?

Stop juggling bloated tools or overpriced plans. Maildroppa offers personal support, GDPR-level privacy, and powerful email marketing - starting free forever.

Sign Up For Free

No credit card required. No time limit.