Chapters

Contents

the email tool that makes email marketing simple

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

Podešavanja Stripo editora e-pošte prevuci-i-otpusti

Published: · Last updated: · By

In brief

Saznajte kako u Stripo email editoru da koristite strukture i blokove za slike, tekst, dugmad, video i HTML, uz opcije izgleda i mobilnog prikaza.

Na desnoj strani Maildroppa editora e-pošte nalazi se kolona sa podešavanjima e-pošte, koja pruža alate za strukturiranje i prilagođavanje sadržaja i izgleda vaše e-pošte. Ova kolona je podeljena na dve kartice: Sadržaj i Izgled.

Kolona sa podešavanjima e-pošte u Stripo editoru e-pošte

Kartica Sadržaj

Kartica Sadržaj služi za dizajniranje i organizovanje sadržaja vaše e-pošte. Sadrži dve glavne sekcije: Strukture i Blokovi.

Glavne sekcije - Strukture i Blokovi

1. Strukture

Strukture editora e-pošte

Strukture definišu raspored vaše e-pošte organizovanjem sadržaja u redove i kolone. Možete birati između različitih unapred dizajniranih rasporeda, kao što su:

  • Jedna kolona
  • Dve kolone
  • Više kolona

Niste ograničeni na ove opcije — možete kombinovati više blokova i kreirati bilo koji prilagođeni raspored, uz potpunu fleksibilnost koja odgovara vašim dizajnerskim potrebama.

  • Prevuci i otpusti: Jednostavno prevucite strukturu iz ove sekcije i otpustite je u područje za dizajniranje e-pošte da biste počeli sa dodavanjem sadržaja.
  • Prilagođavanje: Kada dodate strukturu, možete je popuniti različitim blokovima sadržaja, kao što su slike, tekst ili dugmad.

2. Blokovi

Blokovi su elementi sadržaja koje postavljate unutar struktura da biste izgradili svoju e-poštu.

Blokovi editora e-pošte

Dostupni tipovi blokova su:

  • Slika: Otpremite slike (PNG, JPG, GIF) i prilagodite njihov izgled.
  • Tekst: Dodajte i formatirajte tekst da biste preneli svoju poruku.
  • Dugme: Dodajte dugmad na koja se može kliknuti, uz prilagodljiv tekst, linkove i stilove.
  • Razmak: Umetnite prazan prostor da biste prilagodili raspored između drugih blokova.
  • Video: Ugradite video sadržaj sa platformi kao što su YouTube, Vimeo i druge.
  • HTML: Dodajte prilagođeni HTML i CSS kôd za napredno prilagođavanje sadržaja e-pošte.

Svaki blok je osmišljen tako da bude fleksibilan i prilagodljiv, što vam omogućava da kreirate e-poštu koja odgovara izgledu i stilu vašeg brenda.

Detaljno objašnjenje blokova sadržaja

Blok Slika

Blok Slika

Blok Slika u Stripo editoru e-pošte sa funkcijom prevuci-i-otpusti omogućava vam da dodate i prilagodite slike u svojoj kampanji e-pošte.

Dodavanje bloka Slika

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

Opcija 1

Pređite kursorom preko područja „Otpustite sadržaj ovde“ u strukturi, a zatim kliknite na ikonu Slika. Izabrana struktura će se odmah pretvoriti u blok slike.

Otpustite sadržaj ovde

Opcija 2

Otvorite sekciju Blokovi u okviru kartice Sadržaj. Prevucite blok Slika u željenu strukturu u rasporedu e-pošte. Ovaj način vam pruža veću kontrolu nad tačnim mestom na koje ćete postaviti sliku.

Prevuci i otpusti blok Slika

Otpremanje slike

Kada dodate blok Slika, sliku možete otpremiti na dva načina:

Prevuci i otpusti

Možete direktno prevući i otpustiti datoteku slike (PNG, JPG, GIF) sa računara u polje za otpremanje koje se prikazuje unutar bloka Slika.

Otpustite sliku u polje za otpremanje

Otpremanje sa računara

Druga mogućnost je da kliknete na ikonu oblaka u bloku Slika da biste otvorili pregledač datoteka i izabrali sliku sa računara (do 2 MB). Nakon izbora, slika će se prikazati i u bloku i u kartici Sadržaj sa desne strane.

Otpremanje slike sa računara

Promena slike

Da biste zamenili sliku, koristite opciju Promeni sliku koja se nalazi u kartici Sadržaj. Kliknite na kružnu ikonu Promeni sliku, koja će vam omogućiti da otpremite novu sliku ili povežete sliku sa spoljnog URL-a.

Opcija Promeni sliku

Uređivanje slike

Nakon otpremanja slike možda ćete želeti da izvršite dodatne izmene direktno na platformi. Stripo ugrađeni Editor slika omogućava vam da poboljšate i prilagodite slike bez napuštanja editora e-pošte.

Opcija Uredi sliku

Otvaranje editora slika

  1. Kada otpremite sliku, kliknite na dugme Uredi sliku. Otvoriće se interfejs Editora slika.
  2. Editor nudi širok izbor alata prikazanih u gornjoj traci menija.

Dostupni alati za uređivanje slike

Stripo Editor slika

  • Filteri Primenite različite filtere jednim klikom, kao što su:

    • Sive nijanse
    • Crno-belo
    • Izoštravanje
    • Inverzija
    • Sepija
    • Osvetljenost
    • Boja
  • Promena veličine Prilagodite dimenzije slike. Možete:

    • Definisati određenu širinu i visinu.
    • Očuvati odnos stranica.
  • Isecanje Izaberite deo slike koji želite da zadržite i uklonite neželjene delove.

  • Transformacija Rotirajte ili preokrenite sliku:

    • Horizontalno
    • Vertikalno
  • Crtanje Koristite alat za crtanje da biste preko slike dodali elemente nacrtane slobodnom rukom, kao što su linije ili prilagođeni oblici.

  • Tekst Dodajte tekst direktno na sliku. Prilagodite:

    • Font
    • Veličinu
    • Boju
    • Poravnanje
  • Oblici i nalepnice Ulepšajte sliku dodavanjem:

    • Unapred napravljenih oblika
    • Zabavnih nalepnica
  • Okviri Izaberite jedan od ponuđenih okvira da biste slici dodali stilizovanu ivicu.

  • Uglovi Prilagodite stil uglova za doteran izgled.

  • Pozadina Uklonite ili zamenite pozadinu slike radi čistijeg izgleda.

Čuvanje izmena

Kada izvršite željene izmene, kliknite na dugme Sačuvaj u gornjem levom uglu editora. Uređena slika će automatski zameniti originalnu u rasporedu vaše e-pošte.

Podešavanja slike

Nakon otpremanja slike možete je prilagoditi pomoću opcija Podešavanja slike koje su dostupne u kartici Sadržaj sa desne strane.

Link

Dodajte link slici. Možete birati između različitih tipova linkova, kao što su:

  • Veb-sajt (HTTP, HTTPS)
  • Pošta (mailto:)
  • Datoteka (ftp)
  • Deljenje na društvenim mrežama (Facebook, X (formerly Twitter), LinkedIn, Pinterest)

Ove opcije možete pronaći u padajućem meniju podešavanja linka. Različiti tipovi linkova slike

Alternativni tekst

Dodajte alternativni tekst koji će biti prikazan ako se slika ne učita. Ovaj tekst je koristan i za pristupačnost, jer čitačima ekrana omogućava da opišu sliku primaocima sa oštećenim vidom. Dodavanje alternativnog teksta slike

Poravnanje

Izaberite kako slika treba da bude poravnata unutar svog kontejnera. Možete je poravnati Levo, Centrirano ili Desno. Poravnanje slike

Veličina

Ručno prilagodite širinu i visinu slike pomoću dugmadi plus/minus ili unosom željenih dimenzija. Prilagođavanje veličine slike

Možete uključiti i opciju „Prilagodi širini“ da bi se slika automatski uklopila u punu širinu kontejnera.

Responzivna slika

Uključite opciju „Responzivna slika“ kako biste osigurali da se slika prilagođava različitim veličinama ekrana, naročito na mobilnim uređajima. Responzivna slika

Unutrašnja margina

Prilagodite unutrašnju marginu oko slike da biste kontrolisali količinu prostora između slike i okolnog sadržaja. Možete primeniti jednaku unutrašnju marginu sa svih strana ili je prilagoditi za svaku stranu (Gore, Dole, Levo, Desno). Opcija Unutrašnja margina

Sidreni linkovi

Slici možete dodeliti sidreni link koji će primaocima omogućiti da pređu na određenu sekciju u istoj e-pošti kada kliknu na sliku. Ipak, imajte na umu da sidreni linkovi možda neće raditi u nekim klijentima e-pošte, kao što su Gmail i Apple Mail. Sidreni link

Blok Tekst

Blok Tekst

Poboljšajte tekstualne blokove prilagođavanjem njihovog izgleda i funkcionalnosti pomoću sledećih podešavanja. Svaka opcija omogućava precizno podešavanje prikaza teksta, kako bi se savršeno uklopio u vaše dizajnerske preference.

Traka sa alatkama za tekst

Traka sa alatkama za tekst

Kada kliknete unutar tekstualnog bloka, iznad područja sa sadržajem pojavljuje se traka sa alatkama za tekst, koja omogućava brz pristup mnogim uobičajenim opcijama za formatiranje teksta. Evo funkcija dostupnih na traci sa alatkama:

1. Format pasusa

Podesite stil pasusa biranjem opcija kao što je Normalno za običan tekst ili različitih nivoa naslova (Naslov 1 do Naslov 6) za kreiranje strukturirane hijerarhije u e-pošti. Ovo doprinosi čitljivosti i organizovanosti sadržaja. Format pasusa

2. Familija fonta

Podrazumevani font je Arial, ali možete izabrati neki od brojnih fontova, uključujući uobičajene opcije kao što su Georgia, Helvetica i Courier New. Dostupna je i funkcija pretrage za brzo pronalaženje određenog fonta. Izbor fonta

3. Veličina fonta

Prilagodite veličinu fonta od 8pt do 72pt. Podrazumevana veličina je 14pt, što dobro funkcioniše za većinu tekstova u telu e-pošte. Koristite padajući meni da biste brzo postavili željenu veličinu fonta. Izbor veličine fonta

4. Stil teksta

Stilizujte tekst pomoću sledećih opcija:

  • Podebljano (B): Ističe tekst podebljavanjem.
  • Kurziv (I): Prikazuje tekst kurzivom radi stilizovanijeg izgleda.
  • Podvlačenje (U): Podvlači tekst, što se često koristi za hiperveze.
  • Precrtano (S): Povlači liniju kroz tekst, korisno za izmene ili uklonjeni sadržaj. Izbor stila

5. Napredno stilizovanje teksta (meni sa tri tačke)

Klikom na tri tačke na traci sa alatkama otvaraju se dodatne opcije:

  • Indeks: Spušta tekst ispod osnovne linije (korisno za fusnote ili hemijske formule).
  • Eksponent: Podiže tekst iznad osnovne linije (često se koristi za eksponente ili redne brojeve).
  • Ukloni formatiranje: Uklanja primenjeno formatiranje i vraća tekst u podrazumevani stil. Izbor naprednog stilizovanja

6. Boja teksta i pozadine

  • Boja teksta: Kliknite na dugme Boja teksta da biste izabrali boju iz palete ili uneli heksadecimalni kôd za preciznu kontrolu boje teksta.
  • Boja pozadine: Izaberite boju pozadine (isticanja) za tekst. Izbor boje

7. Poravnanje teksta

Poravnajte tekst unutar bloka:

  • Poravnaj levo: Poravnava tekst ulevo.
  • Centrirano: Centrira tekst.
  • Poravnaj desno: Poravnava tekst udesno.
  • Obostrano poravnanje: Ravnomerno raspoređuje tekst po širini bloka. Izbor poravnanja teksta

8. Liste

Kreirajte numerisane i nenumerisane liste:

  • Umetni/Ukloni listu sa oznakama: Dodaje ili uklanja oznake za nabrajanje.
  • Umetni/Ukloni numerisanu listu: Dodaje ili uklanja numerisanu listu. Umetanje liste

9. Prelamanje redova

Uključite ili isključite prelamanje redova unutar tekstualnog bloka. Kada je uključeno, dugi redovi teksta automatski prelaze u sledeći red. Uključivanje ili isključivanje prelamanja redova

10. Uvlačenje

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

11. Umetanje hiperveze

Saznajte kako da dodajete, uređujete i upravljate hipervezama u sadržaju e-pošte.

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

Izaberite tekst koji želite da pretvorite u hipervezu. Označite tekst koji želite da pretvorite u link

b) Kliknite na ikonu linka

Na traci sa alatkama za tekst kliknite na ikonu linka. Ikona linka

c) Uredite link u panelu sa podešavanjima

Pojaviće se panel sa podešavanjima sa desne strane sa opcijama za link:

  • Polje za link: Unesite URL ili izaberite neku od unapred definisanih opcija.
  • Oznaka: Dodajte oznake za označavanje pretplatnika ili pokretanje automatizacija. Dodavanje linka i oznake
Ispravljanje linkova nakon slanja

Nema ničeg goreg od slanja nove kampanje vašim 2.365 pretplatnika, a zatim otkrivanja da je jedan od linkova neispravan zbog obične greške u kucanju. Zbogom, prodajo za Crni petak!

Srećom, omogućili smo vam da popravite neispravne linkove — čak i nakon što je e-pošta već poslata pretplatnicima.

a) Pregled kampanje

Pronađite poslatu kampanju u pregledu, kliknite na tri tačke i izaberite Pregled kampanje. Kliknite na Pregled kampanje

b) Izmenite linkove ili oznake

Pomerite se do liste linkova u detaljima kampanje da biste:

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

Napomena: Da biste koristili funkciju preusmeravanja linkova, uverite se da je u podešavanjima kampanje omogućeno Praćenje klikova.

Prilagođavanje izgleda linka

U panelu sa podešavanjima sa desne strane možete prilagoditi izgled linka:

  • Boja linka: Izaberite boju ili unesite heksadecimalni kôd. Podešavanja boje linka

  • Podvlačenje linkova: Uključite ili isključite podvlačenje za čistiji izgled. Podešavanja podvlačenja linkova

12. Oznake za personalizaciju

Koristite oznake za personalizaciju da biste dodali dinamički sadržaj, kao što su ime primaoca ili druga prilagođena polja.

  • Otvorite padajući meni Oznake za personalizaciju na traci sa alatkama da biste izabrali uobičajena polja kao što su Ime, E-pošta ili Zemlja, ili definišite prilagođena polja kako biste prilagodili e-poštu svakom primaocu. Dodavanje oznake za personalizaciju

13. Emodžiji

Dodajte vizuelnu privlačnost tekstu uključivanjem emodžija.

  • Kliknite na ikonu emodžija na traci sa alatkama da biste otvorili kategorizovanu listu emodžija za lakše pregledanje.
  • Napomena o kompatibilnosti: Testirajte e-poštu u određenim klijentima, kao što je Outlook, jer neki možda neće pravilno prikazivati emodžije. Izbor emodžija

14. Tabela i posebni znakovi

Na kraju trake sa alatkama kliknite na tri tačke da biste otkrili naprednije opcije. Dodatne opcije - umetanje tabele ili posebnih znakova

Umetanje tabele

Kreirajte i prilagodite tabele da biste poboljšali raspored e-pošte.

  • Po potrebi definišite redove, kolone, razmak između ćelija, unutrašnju marginu i veličinu ivice. Dodavanje tabele i definisanje njenih svojstava
Umetanje posebnih znakova

Obogatite tekst simbolima, slovima sa dijakriticima i drugim nestandardnim znakovima.

  • Otvorite opciju Posebni znakovi da biste pregledali veliki izbor znakova. Umetanje posebnih znakova

Dodatna podešavanja bloka Tekst (desni panel)

Desni panel pruža opsežnu kontrolu nad izgledom i funkcionalnošću tekstualnih blokova. Dostupna su sledeća podešavanja:

1. Boja teksta

Definišite boju teksta pomoću birača boja ili unosom heksadecimalnog kôda. Izbor boje teksta

2. Boja pozadine

Postavite prilagođenu boju pozadine tekstualnog bloka. Podrazumevano je pozadina transparentna. Izbor boje pozadine

3. Podešavanja specifična za linkove

Kada tekstualni blok sadrži linkove, u podešavanjima se pojavljuju dodatne opcije:

  • Boja linka: Prilagodite boju linkova pomoću birača boja ili heksadecimalnog kôda. Izbor boje linka

  • Podvlačenje linkova: Uključite ili isključite opciju podvlačenja za linkove unutar tekstualnog bloka. Podvlačenje linkova

  • Uređivanje linka: Izaberite link u području sa sadržajem da biste uredili njegov URL u panelu sa podešavanjima. Takođe možete dodeliti ili ažurirati oznake za link pomoću padajućeg menija pod nazivom „Oznake“. Uređivanje linka i dodavanje oznake

4. Poravnanje

Poravnajte tekstualni blok unutar njegovog kontejnera: Levo, Centrirano ili Desno. Definisanje poravnanja

5. Fiksna visina

Postavite fiksnu visinu tekstualnog bloka uključivanjem ove opcije. Takođe možete kontrolisati vertikalno poravnanje teksta: Gore, Sredina ili Dole. Postavljanje fiksne visine

6. Razmak između redova

Kontrolišite prostor između redova teksta. Izaberite Tesan, Normalan ili Širok. Izbor razmaka između redova

7. Unutrašnja margina

Prilagodite prostor oko tekstualnog bloka. Primeni­te jednaku unutrašnju marginu ili prilagodite svaku stranu: Gore, Dole, Levo i Desno. Prilagođavanje unutrašnje margine

8. Sidreni linkovi

Kreirajte sidrene linkove koji čitaocima omogućavaju da pređu na određene sekcije vaše e-pošte. Imajte na umu da neki klijenti e-pošte ne podržavaju sidrene linkove. Dodavanje sidrenog linka

Blok Dugme

Blok Dugme

Blok Dugme omogućava vam da dodate dugme na koje se može kliknuti, uz prilagodljiva podešavanja funkcionalnosti i stila.

Podešavanja linka

Opcija Link određuje radnju koja se pokreće kada primalac klikne na dugme. Link dugmeta

Dostupni tipovi linkova
  • Uobičajeni link ka sajtu (HTTP ili HTTPS): Usmerava korisnika na veb-stranicu.
  • Link ka pošti: Otvara klijent e-pošte korisnika za pisanje nove poruke.
  • Link ka datoteci (FTP, FTPS): Vodi do datoteke na FTP serveru.
  • Skype: Pokreće Skype poziv ili razgovor.
  • Telefon (tel): Pokreće telefonski poziv na kompatibilnim uređajima.
  • SMS: Otvara aplikaciju za razmenu poruka sa unapred popunjenim brojem primaoca.
  • Viber: Otvara aplikaciju Viber za poruke ili pozive.
  • Drugi tip protokola: Navedite prilagođeni protokol koji nije naveden iznad.
Opcije deljenja na društvenim mrežama

Dugme možete podesiti i za deljenje na društvenim mrežama ili putem e-pošte:

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

Pored tipa linka, polje URL (koje obično počinje sa https://) omogućava vam da unesete konkretnu adresu koja odgovara tipu linka.

Oznaka dugmeta

Prilagodite oznaku dugmeta tako da odražava vaš poziv na akciju. Podrazumevana oznaka je „Dugme“, ali je možete promeniti u opcije kao što su „Saznajte više“, „Pretplatite se sada“ ili „Kupite sada“. Oznaka dugmeta

Stil teksta

Podešavanja Stil teksta omogućavaju vam da prilagodite izgled teksta dugmeta. Stil teksta dugmeta

Izbor 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 dodatne opcije:

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

Na vrhu liste fontova nalazi se polje za pretragu koje pomaže da brzo pronađete određeni font.

Veličina fonta i formatiranje
  • Veličina fonta: Izaberite vrednost od 8 do 72, u zavisnosti od toga koliko želite da tekst dugmeta bude istaknut.
  • Formatiranje teksta: Primeni­te stil Podebljano ili Kurziv pomoću ikona „B“ ili „I“ da biste istakli tekst dugmeta.

Podešavanja boje

Prilagodite izgled dugmeta podešavanjem njegovih boja.

  1. Boja dugmeta: Promenite boju pozadine dugmeta. Podrazumevana je zelena (#31cb4b). Koristite polje za heksadecimalni kôd ili birač boja da biste izabrali novu boju. Boja dugmeta

  2. Boja teksta: Definišite boju teksta dugmeta. Podrazumevana je bela (#ffffff). Izaberite boju koja je u dobrom kontrastu sa pozadinom dugmeta radi čitljivosti. Boja teksta dugmeta

  3. Boja pozadine: Prilagodite pozadinu kontejnera dugmeta. Podrazumevano je transparentna, ali je možete promeniti kako bi se dugme istaklo u odnosu na pozadinu e-pošte. Boja pozadine dugmeta

Poluprečnik ivice

Kontrolišite zaobljenost uglova dugmeta pomoću podešavanja Poluprečnik ivice.

  • Podrazumevana vrednost: 30 (umereno zaobljeni uglovi).
  • Opseg: 0 (četvrtasti uglovi) do 100 (dugme u obliku kapsule). Poluprečnik ivice dugmeta

Napomena: Da biste osigurali pravilan prikaz zaobljenih uglova u Microsoft Outlooku, aktivirajte opciju „Podrška za Outlook“ na kartici Izgled.

Poravnanje

Postavite dugme unutar područja sa sadržajem pomoću podešavanja Poravnanje.

  • Opcije: Levo, Centrirano, Desno.
  • Uobičajena upotreba: Centrirano poravnanje za isticanje, a levo ili desno poravnanje radi doslednosti dizajna. Poravnanje dugmeta

Fiksna visina

Uključite opciju Fiksna visina da biste održali dosledne dimenzije dugmeta.

  1. Podrazumevano: Deaktivirano.
  2. Minimalna visina: 44 piksela.
  3. Vertikalno poravnanje sadržaja: Kada je fiksna visina uključena, poravnajte sadržaj dugmeta Gore, U sredini ili Dole radi preciznog pozicioniranja. Fiksna visina dugmeta

Dugme sa ikonom

Opcija Dugme sa ikonom omogućava vam da uz tekst dugmeta uključite ikonu, čime se poboljšava vizuelni izgled i dodatno naglašava poziv na akciju. Ova funkcija je podrazumevano deaktivirana. Dugme sa ikonom

  • Podržani formati: Otpremite ikone u formatu PNG, JPG ili GIF, maksimalne veličine datoteke 2 MB.
  • Pozicioniranje ikone: Izaberite da li će se ikona prikazivati sa Leve ili Desne strane teksta dugmeta.

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

  • Outlook 2002, 2007, 2010, 2013, 2016. i 2019. Ovo ograničenje je posledica načina na koji ovi klijenti e-pošte prikazuju HTML e-poruke. Imajte to u vidu ako veliki deo vaše publike koristi ove klijente.

Podešavanja ivice

Prilagodite ivice dugmeta radi dodatnog stila i naglašavanja. Prilagođavanje ivice dugmeta

  • Širina ivice: Podesite širinu svake strane (levo, desno, gore i dole) pojedinačno, do 40 piksela.
  • Stil ivice: Birajte između stilova Puna, Isprekidana ili Tačkasta.
  • Boja ivice: Koristite birač boja ili unesite heksadecimalni kôd da biste uskladili boju ivice sa brendom ili dizajnom.

Unutrašnja margina dugmeta

Prilagodite prostor unutar dugmeta, između sadržaja (teksta i ikone) i ivice dugmeta. Unutrašnja margina dugmeta

  • Opcije prilagođavanja: Definišite vrednosti unutrašnje margine za strane Levo, Desno, Gore i Dole, do maksimalno 99 piksela.
  • Uticaj: Unutrašnja margina utiče na ukupnu veličinu dugmeta i položaj sadržaja unutar dugmeta.

Spoljašnja margina

Kontrolišite prostor izvan dugmeta da biste prilagodili njegov položaj u odnosu na druge elemente u rasporedu e-pošte. Spoljašnja margina dugmeta

  • Opcije prilagođavanja: Postavite vrednosti spoljašnje margine za strane Levo, Desno, Gore i Dole, do maksimalno 40 piksela.
  • Slučaj upotrebe: Osigurava da dugme ne bude previše blizu drugom sadržaju ili ivicama e-pošte.

Dodavanje sidrenog linka

Koristite sidrene linkove da biste čitaoce usmerili na određene sekcije u istoj e-pošti, što omogućava brzu navigaciju u dužim biltenima. Sidreni link dugmeta

  • Naziv sidra: Definišite odredište u e-pošti i povežite dugme sa tim sidrom. Kada se klikne na dugme, e-pošta će se pomeriti do navedene sekcije, čime se poboljšava navigacija korisnika.

Važno: Sidreni linkovi nisu podržani u određenim klijentima e-pošte, uključujući:

  • iOS Gmail aplikaciju
  • iOS Apple Mail
  • Outlook aplikaciju za Android
  • Outlook aplikaciju za macOS
  • AMP e-poruke

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

Blok Razmak

Blok Razmak

Blok Razmak omogućava vam da dodate prilagodljiv prostor u sadržaj e-pošte i kontrolišete njegovu veličinu, poravnanje, izgled i unutrašnji razmak. U nastavku su detalji o dve vrste razmaka: Normalni razmak i Dinamički razmak. Opcije razmaka

1. Normalni razmak

Normalni razmak je element u obliku linije koji vizuelno razdvaja sekcije u vašoj e-pošti. Podrazumevani element razmaka

Ključna podešavanja
  1. Debljina i stil linije Prilagodite debljinu, stil i boju linije:

    • Debljina: Prilagodite pomoću dugmadi + i - (počevši od 1).
    • Stil: Izaberite između stilova puna, isprekidana ili tačkasta.
    • Boja: Postavite prilagođenu boju pomoću heksadecimalnog kôda ili birača boja (podrazumevano: #cccccc). Stil linije razmaka
  2. Širina Definišite koliko će se linija razmaka prostirati preko sadržaja. Prilagodite širinu u pikselima pomoću dugmadi + i -.

  3. Poravnanje Poravnajte liniju levo, centrirano ili desno kako bi odgovarala rasporedu.

  4. Unutrašnja margina Kontrolišite unutrašnji razmak oko elementa razmaka:

    • Podrazumevano: Unutrašnja margina je podešena na 20 sa svih strana.
    • Koristite prekidač Više da biste naveli unutrašnju marginu za pojedinačne strane:
      • Gore
      • Desno
      • Dole
      • Levo Unutrašnja margina razmaka

Slučaj upotrebe

Normalni razmak je idealan za stvaranje čistih, vizuelnih razdvajanja između sekcija u e-pošti i obezbeđuje dobro organizovan i profesionalan raspored.

2. Dinamički razmak

Dinamički razmak je nevidljivi blok praznog prostora osmišljen za stvaranje prostora za „disanje“ u rasporedu e-pošte. Dinamički razmak

Ključne funkcije
  1. Prilagođavanje visine Prilagodite visinu direktno u području sa sadržajem ili putem kontrolnog panela pomoću dugmadi + i -. Visina određuje količinu vertikalnog prostora koji se dodaje između sekcija.

  2. Boja pozadine Podrazumevano razmak ima transparentnu pozadinu, ali možete primeniti prilagođenu boju pozadine pomoću heksadecimalnog kôda ili birača boja. Tako razmak po potrebi može funkcionisati kao vidljivi blok.

  3. Responzivno ponašanje Opcija Responzivni razmak osigurava da se razmak dinamički prilagođava različitim veličinama ekrana radi optimalnog rasporeda na različitim uređajima. Ova funkcija je podrazumevano uključena. Opcije dinamičkog razmaka

Ključne razlike između normalnog i dinamičkog razmaka
  • Dinamički razmak: Dodaje prazan prostor bez vidljive linije.
  • Normalni razmak: Sadrži podešavanja specifična za liniju, kao što su:
    • Širina linije
    • Poravnanje
    • Stilovi linije
    • Unutrašnja margina

Dinamički razmak ne podržava ove funkcije i namenjen je isključivo razdvajanju bez vizuelnih elemenata.

3. Dodavanje sidrenog linka

Sidreni linkovi mogu se primeniti na obe vrste razmaka, omogućavajući korisnicima da iz drugog dela e-pošte direktno pređu na mesto razmaka. Ovo je naročito korisno za kreiranje navigacije unutar e-pošte u dužim biltenima.

Napomena: Sidreni linkovi nisu podržani u nekim klijentima e-pošte, uključujući:

  • Microsoft Outlook
  • Gmail (na mobilnom uređaju)

Blok Video

Birač blokova sa istaknutim blokom Video između blokova Razmak i HTML

Blok Video omogućava vam da ugradite videozapise u e-poštu i prilagodite njihov izgled i ponašanje. Podržava video linkove sa platformi kao što su YouTube i Vimeo, pružajući fleksibilnost i kontrolu nad načinom prikazivanja videa. Podešavanja bloka Video sa poljima za video link, alternativni tekst, prilagođenu sličicu i stil dugmeta za reprodukciju pored pregleda e-pošte

1. Link ka videu

Dodajte URL videa u polje Link ka videu. Podržane platforme uključuju YouTube, Vimeo i druge servise koji podržavaju ugrađivanje. Link ka videu

  • Automatsko ponašanje: Kada dodate važeći URL:

    • Automatski se generiše slika pregleda pomoću sličice videa sa platforme.
    • Polje Alternativni tekst automatski se popunjava naslovom ili opisom videa (ako je dostupan).
  • Polja koja se mogu uređivati: Po potrebi možete ručno urediti ili zameniti generisanu sliku pregleda i tekst.

2. Alternativni tekst

Polje Alternativni tekst obezbeđuje pristupačnost prikazivanjem opisa videa ako se video ne učita. Dodavanje alternativnog teksta videa

  • Automatski se popunjava kada dodate podržani URL videa.
  • Može se prilagoditi vašim potrebama u vezi sa sadržajem.

3. Prilagođena sličica

Otpremite prilagođenu sliku da biste zamenili podrazumevani pregled videa. Dodavanje prilagođene sličice videa

  • Kako uključiti: Uključite opciju Prilagođena sličica.
  • Podržani formati: PNG, JPG ili GIF.
  • Kada koristiti: Zamenite generisanu sličicu kada se ne uklapa u dizajn vaše e-pošte.

4. Dugme za reprodukciju

Prilagodite preklopljeno dugme za reprodukciju na sličici videa. Izbor prilagođenog dugmeta za reprodukciju videa

  • Dostupne opcije:
    • Izaberite između stilova dugmeta za reprodukciju sa YouTube-a, Vimea ili drugih platformi.
    • Izaberite „Nijedno“ da biste u potpunosti sakrili dugme za reprodukciju.

5. Veličina

Prilagodite dimenzije videa tako da odgovaraju dizajnu vaše e-pošte. Prilagođavanje veličine videa

  • Širina i visina: Koristite dugmad + i - ili ručno unesite vrednosti da biste kontrolisali veličinu.
  • Responzivni dizajn: Osigurajte da se video neometano uklapa na različite uređaje.

6. Prilagodi širini

Uključite prekidač Prilagodi širini da bi se video automatski uklopio u širinu svog kontejnera. Tako video zadržava responzivni dizajn na različitim uređajima. Prilagođavanje videa širini

7. Responzivna slika

Prekidač Responzivna slika osigurava da se sličica videa prilagodi širini ekrana na mobilnim uređajima.

  • Napomena: Responzivnost zavisi od podrške uređaja i klijenta e-pošte. Responzivna slika videa

8. Poravnanje

Koristite podešavanje Poravnanje da biste kontrolisali horizontalni položaj videa u bloku:

  • Levo: Poravnava video ulevo.
  • Centrirano: Centrira video.
  • Desno: Poravnava video udesno. Prilagođavanje poravnanja videa

9. Opcije specifične za mobilne uređaje

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

  1. Sakrij element na mobilnom uređaju Po potrebi sakrijte blok Video na mobilnim uređajima.

    • Napomena: Ova funkcija zavisi od podrške za medijske upite i možda neće raditi u svim klijentima e-pošte.
  2. Unutrašnja margina na mobilnom uređaju Prilagodite unutrašnju marginu oko videa za prikaz na mobilnim uređajima.

    • Koristite prekidač Više da biste postavili pojedinačne vrednosti unutrašnje margine za:
      • Gore
      • Desno
      • Dole
      • Levo Sakrivanje videa na mobilnom uređaju

10. Uključi u AMPHTML ili HTML

Izaberite da li će se blok Video prikazivati u određenim verzijama e-pošte:

  • I AMPHTML i HTML
  • Samo AMPHTML
  • Samo HTML

Ova opcija osigurava da se video pravilno uključi na osnovu verzije e-pošte koja se isporučuje. Sakrivanje videa u AMPHTML-u ili HTML-u

Blok HTML

Birač blokova sa istaknutim blokom Video između blokova Razmak i HTML

Blok HTML omogućava vam da umetnete prilagođeni HTML i CSS kôd u e-poštu, pružajući fleksibilnost za napredna prilagođavanja uz poštovanje kompatibilnosti sa klijentima e-pošte. Bilo da dodajete jedan HTML element ili dizajnirate celu e-poštu, ovaj blok je alat za prilagođene dizajne.

1. Interfejs editora kôda

Kada izaberete blok HTML, u panelu sa sadržajem pojavljuje se crni prozor editora kôda. Ovaj editor omogućava pisanje, lepljenje ili menjanje prilagođenog kôda. Editor sadrži dve sekcije:

  • HTML sekcija: Dodajte ili uredite HTML strukturu svoje e-pošte.
  • CSS sekcija: Otvorite zaseban CSS editor za stilizovanje sadržaja. HTML editor e-pošte

2. Prilagođavanje veličine fonta

Prilagodite veličinu fonta kôda u editoru radi bolje čitljivosti:

  • Koristite dugme A+ da biste povećali veličinu fonta.
  • Koristite dugme A- da biste smanjili veličinu fonta. Prilagođavanje veličine fonta editora

3. Prilagođavanje veličine prozora editora

Promenite veličinu prozora editora kôda prema svojim radnim preferencama:

  • Kako prilagoditi:
    • Pređite kursorom preko tri tačke na gornjoj sredini prozora editora.
    • Prevucite klizač nagore ili nadole da biste povećali ili smanjili veličinu editora.

Ova funkcija je naročito korisna za upravljanje većim ili detaljnijim blokovima kôda. Prilagođavanje veličine prozora HTML editora

4. CSS editor

CSS editor omogućava upravljanje stilovima HTML sadržaja i dostupan je putem dugmeta u gornjem desnom uglu editora kôda.

Važna razmatranja:

  • Ograničena podrška: Mnogi klijenti e-pošte ne podržavaju napredne CSS funkcije kao što su Flexbox, Grid ili medijski upiti.
  • Držite se osnova: Koristite osnovni umetnuti CSS radi maksimalne kompatibilnosti.
  • Unapred konfigurisani stilovi: Izbegavajte brisanje unapred konfigurisanih stilova, jer oni obezbeđuju pravilno prikazivanje u glavnim klijentima e-pošte. Primer CSS editora

5. Kompatibilnost sa klijentima e-pošte

HTML za e-poštu zahteva posebnu pažnju zbog zastarelih mehanizama za prikazivanje u mnogim klijentima e-pošte.

Ključne smernice:

  • Koristite rasporede zasnovane na tabelama, umesto rasporeda zasnovanih na elementima <div>, radi bolje podrške.
  • Izbegavajte napredne CSS funkcije kao što su animacije, Flexbox ili Grid.
  • Očekujte neujednačeno ponašanje medijskih upita i manjih CSS svojstava.
  • Testiranje: Uvek testirajte e-poštu u više klijenata (npr. Gmail, Outlook, Apple Mail) kako biste osigurali pravilno prikazivanje.

6. Unutrašnja margina

Podešavanje Unutrašnja margina prilagođava prostor oko HTML sadržaja:

  • Podrazumevana unutrašnja margina: Podrazumevano je postavljena na 0.
  • Prilagođena unutrašnja margina: Uključite prekidač Više da biste prilagodili unutrašnju marginu za pojedinačne strane:
    • Gore
    • Desno
    • Dole
    • Levo

Ova funkcija je idealna za poravnanje HTML sadržaja unutar rasporeda e-pošte. Primer HTML unutrašnje margine

7. Dodavanje sidrenog linka

Funkcija Dodaj sidreni link omogućava vam da kreirate link na drugom mestu u e-pošti koji vodi do HTML bloka.

Kako koristiti:

  • Uključite opciju i unesite naziv sidra u polje.

Ograničenja:

  • Sidrene linkove ne podržavaju neki klijenti e-pošte, kao što su:
    • iOS Gmail aplikacija
    • iOS Apple Mail
    • Outlook aplikacija (Android i macOS)
    • AMP e-poruke

Primer HTML sidra

8. Pisanje prilagođenog HTML-a

HTML editor je namenjen pisanju ili lepljenju prilagođene HTML strukture vaše e-pošte.

Najbolje prakse:

  • Koristite jednostavan HTML sa širokom podrškom.
  • Izbegavajte složene rasporede ili funkcije kao što su elementi <div>.
  • Držite se dizajna zasnovanih na tabelama da biste osigurali bolju kompatibilnost.

9. Saveti za uspeh

  1. Počnite od malog: Ako ste novi u razvoju e-pošte, koristite blok HTML za određene sekcije.
  2. Proverite kôd: Uverite se da je HTML usklađen sa zahtevima klijenata e-pošte.
  3. Temeljno testirajte: Koristite alate za pregled 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.