Setările editorului de e-mail Stripo cu funcție drag-and-drop

Publicat: 22 octombrie 2024 · Ultima actualizare: 12 septembrie 2026 · De Marcus Biel

În partea dreaptă a editorului de e-mail Maildroppa găsești panoul Email Settings, cu instrumente pentru organizarea și personalizarea conținutului și aspectului e-mailului. Panoul este împărțit în două file: Content (conținut) și Appearance (aspect).

Fila Content

În fila Content creezi și organizezi conținutul e-mailului. Aceasta conține două secțiuni principale: Structures (structuri) și Blocks (blocuri).

1. Structuri

Structurile definesc aranjarea conținutului e-mailului în rânduri și coloane. Poți alege dintre mai multe variante predefinite, precum:

• O singură coloană
• Două coloane
• Mai multe coloane

Nu ești limitat la aceste opțiuni: poți combina mai multe blocuri pentru a crea orice aranjament personalizat, cu flexibilitatea de a-l adapta cerințelor de design.

• Tragere și plasare: trage o structură din această secțiune în zona de design a e-mailului pentru a începe să adaugi conținut.
• Personalizare: după ce adaugi o structură, o poți completa cu diferite blocuri de conținut, precum imagini, text sau butoane.

2. Blocuri

Blocurile sunt elementele de conținut pe care le așezi în structuri pentru a construi e-mailul.

Sunt disponibile următoarele tipuri de blocuri:

• Image: încarcă imagini (PNG, JPG, GIF) și personalizează-le aspectul.
• Text: adaugă și formatează textul mesajului.
• Button: adaugă butoane cu text, linkuri și stiluri personalizabile, pe care destinatarii pot face clic.
• Spacer: inserează spațiu liber între celelalte blocuri pentru a ajusta aranjarea conținutului.
• Video: încorporează conținut video de pe platforme precum YouTube, Vimeo și altele.
• HTML: adaugă cod HTML și CSS propriu pentru personalizarea avansată a conținutului e-mailului.

Fiecare bloc este flexibil și personalizabil, astfel încât să poți crea un e-mail în acord cu identitatea vizuală a brandului.

Blocurile de conținut, explicate în detaliu

Blocul Image

Blocul Image din editorul de e-mail Stripo cu funcție drag-and-drop îți permite să adaugi și să personalizezi imagini în campania de e-mail.

Adăugarea unui bloc Image

Poți adăuga un bloc Image în e-mail în două moduri:

Opțiunea 1

Treci cu cursorul peste zona „Drop Content Here” dintr-o structură, apoi fă clic pe pictograma Image. Structura selectată se va transforma imediat într-un bloc de imagine.

Opțiunea 2

Accesează secțiunea Blocks din fila Content. Trage blocul Image în structura dorită din e-mail. Această metodă îți oferă mai mult control asupra poziției exacte a imaginii.

Încărcarea unei imagini

După ce adaugi blocul Image, ai la dispoziție două metode de încărcare a imaginii:

Tragere și plasare

Trage un fișier imagine (PNG, JPG, GIF) de pe computer direct în caseta de încărcare din blocul Image.

Încărcare de pe computer

Poți și să faci clic pe pictograma în formă de nor din blocul Image pentru a deschide fereastra de selectare a fișierelor. Alege o imagine de pe computer, de maximum 2 MB. Imaginea selectată va apărea atât în bloc, cât și în fila Content din dreapta.

Înlocuirea imaginii

Pentru a înlocui imaginea, folosește opțiunea Change Image din fila Content. Fă clic pe pictograma circulară Change Image pentru a încărca o imagine nouă sau pentru a folosi o imagine de la un URL extern.

Editarea imaginii

După încărcare, poți face și alte modificări direct în platformă. Editorul de imagini integrat în Stripo îți permite să îmbunătățești și să ajustezi imaginile fără să părăsești editorul de e-mail.

Accesarea editorului de imagini

1. După ce încarci imaginea, fă clic pe butonul Edit Image. Se va deschide interfața editorului de imagini.
2. Editorul oferă o gamă largă de instrumente, afișate în bara de meniu de sus.

Instrumente disponibile pentru editarea imaginilor

• Filters — filtre Aplică diverse filtre cu un singur clic, precum:

  • Grayscale — tonuri de gri
  • Black & White — alb-negru
  • Sharpen — accentuarea clarității
  • Invert — inversarea culorilor
  • Sepia — sepia
  • Brightness — luminozitate
  • Color — culoare

• Resize — redimensionare Ajustează dimensiunile imaginii. Poți:

  • Să stabilești o anumită lățime și înălțime.
  • Să păstrezi raportul de aspect.

• Crop — decupare Selectează porțiunea de imagine pe care vrei să o păstrezi și elimină părțile nedorite.

• Transform — transformare Rotește sau întoarce imaginea:

  • Pe orizontală
  • Pe verticală

• Draw — desenare Folosește instrumentul de desen pentru a adăuga peste imagine elemente desenate liber, precum linii sau forme personalizate.

• Text — text Adaugă text direct pe imagine. Personalizează:

  • Fontul
  • Dimensiunea
  • Culoarea
  • Alinierea

• Shapes and Stickers — forme și autocolante Completează imaginea suprapunând:

  • Forme predefinite
  • Autocolante amuzante

• Frames — rame Alege dintre ramele disponibile pentru a adăuga un chenar elegant imaginii.

• Corners — colțuri Ajustează stilul colțurilor pentru un aspect îngrijit.

• Background — fundal Elimină sau înlocuiește fundalul imaginii pentru un aspect mai curat.

Salvarea modificărilor

După ce faci modificările dorite, apasă butonul Save din stânga sus a editorului. Imaginea editată o va înlocui automat pe cea originală din e-mail.

Setările imaginii

După încărcare, poți personaliza imaginea folosind setările disponibile în fila Content din dreapta.

Link

Adaugă un link imaginii. Poți alege dintre mai multe tipuri de linkuri, precum:

• Website — site web (HTTP, HTTPS)
• Mail — e-mail (mailto:)
• File — fișier (ftp)
• Social Sharing — partajare pe rețele sociale (Facebook, X, fostul Twitter, LinkedIn, Pinterest)

Găsești aceste opțiuni în meniul derulant al setărilor pentru link.

Text alternativ

În Alternate Text, adaugă textul care va fi afișat dacă imaginea nu se încarcă. Acesta contribuie și la accesibilitate, permițând cititoarelor de ecran să descrie imaginea destinatarilor cu deficiențe de vedere.

Aliniere

Alege cum se aliniază imaginea în container: Left (la stânga), Center (la centru) sau Right (la dreapta).

Dimensiune

Ajustează manual lățimea și înălțimea imaginii cu butoanele plus/minus sau introdu dimensiunile dorite.

Poți activa și opțiunea Adjust to Width pentru ca imaginea să ocupe automat întreaga lățime a containerului.

Imagine adaptabilă la ecran

Activează opțiunea Responsive Image pentru ca imaginea să se adapteze la diferite dimensiuni ale ecranului, în special pe dispozitivele mobile.

Spațiere interioară

Cu setarea Padding, ajustează spațiul dintre imagine și conținutul din jur. Poți aplica aceeași spațiere pe toate laturile sau o poți personaliza pentru fiecare latură: Top (sus), Bottom (jos), Left (stânga), Right (dreapta).

Linkuri-ancoră

Poți asocia imaginii un link-ancoră, astfel încât destinatarii să ajungă la o anumită secțiune din același e-mail când fac clic pe imagine. Reține însă că linkurile-ancoră pot să nu funcționeze în unele aplicații de e-mail, precum Gmail și Apple Mail.

Blocul Text

Personalizează aspectul și funcționalitatea blocurilor de text cu ajutorul setărilor de mai jos. Fiecare opțiune îți permite să ajustezi în detaliu afișarea textului, în acord cu designul dorit.

Bara de instrumente pentru text

Când faci clic într-un bloc de text, bara de instrumente pentru text apare deasupra zonei de conținut. Aceasta oferă acces rapid la opțiunile uzuale de formatare. Iată funcțiile disponibile:

1. Formatul paragrafului

Alege stilul paragrafului din Paragraph Format: Normal pentru text obișnuit sau un nivel de titlu, de la Heading 1 la Heading 6, pentru a crea o ierarhie clară în e-mail. Astfel, conținutul este mai ușor de citit și mai bine organizat.

2. Familia de fonturi

Fontul implicit este Arial, dar în Font Family poți alege dintre mai multe fonturi, inclusiv variante uzuale precum Georgia, Helvetica și Courier New. Funcția de căutare te ajută să găsești rapid un anumit font.

3. Dimensiunea fontului

Din Font Size, ajustează dimensiunea fontului între 8 pt și 72 pt. Valoarea implicită este 14 pt, potrivită pentru majoritatea textelor din corpul unui e-mail. Folosește meniul derulant pentru a seta rapid dimensiunea dorită.

4. Stilul textului

Formatează textul folosind următoarele opțiuni:

• Bold (B): evidențiază textul prin caractere aldine.
• Italic (I): aplică un stil cursiv textului.
• Underline (U): subliniază textul, o formatare folosită frecvent pentru linkuri.
• Strikethrough (S): taie textul cu o linie, utilă pentru a marca modificări sau conținut eliminat.

5. Formatarea avansată a textului (meniul cu trei puncte)

Fă clic pe cele trei puncte din bară pentru a afișa opțiunile suplimentare:

• Subscript: coboară textul sub linia de bază, util pentru note de subsol sau formule chimice.
• Superscript: ridică textul deasupra liniei de bază, folosit frecvent pentru exponenți sau numere ordinale.
• Remove Formatting: elimină formatarea aplicată și readuce textul la stilul implicit.

6. Culoarea textului și a fundalului

• Text Color: fă clic pe acest buton pentru a alege o culoare din paletă sau introdu un cod hexazecimal pentru a defini precis culoarea textului.
• Background Color: alege culoarea de fundal cu care evidențiezi textul.

7. Alinierea textului

Aliniază textul în bloc:

• Align Left: aliniază textul la stânga.
• Center: centrează textul.
• Align Right: aliniază textul la dreapta.
• Justify: distribuie uniform textul pe lățimea blocului, aliniindu-l la ambele margini.

8. Liste

Creează liste ordonate (numerotate) și neordonate (cu marcatori):

• Insert/Remove Bulleted List: adaugă sau elimină marcatorii listei.
• Insert/Remove Numbered List: adaugă sau elimină o listă numerotată.

9. Trecerea automată pe rândul următor

Cu Line Wraps, activează sau dezactivează trecerea automată pe rândul următor în blocul de text. Când opțiunea este activă, rândurile lungi continuă automat pe rândul următor.

10. Indentare

Ajustează indentarea textului:

• Increase Indent: îndepărtează textul de margine, util pentru subpuncte sau citate.
• Decrease Indent: reduce indentarea și apropie textul de marginea stângă.

11. Inserarea unui link

Află cum să adaugi, să editezi și să gestionezi linkurile din conținutul e-mailului.

Pași pentru adăugarea sau editarea unui link

a) Selectează textul

Selectează textul pe care vrei să îl transformi într-un link.

b) Fă clic pe pictograma Link

În bara de instrumente pentru text, fă clic pe pictograma Link.

c) Editează linkul în panoul de setări

În dreapta va apărea panoul de setări, cu opțiunile pentru link:

• Câmpul Link: introdu URL-ul sau alege una dintre opțiunile predefinite.
• Tag: adaugă etichete pentru abonați sau pentru declanșarea automatizărilor.

Corectarea linkurilor după trimitere

Nimic nu e mai neplăcut decât să trimiți o campanie celor 2.365 de abonați și apoi să descoperi că un link nu funcționează din cauza unei simple greșeli de tastare. Iar vânzările de Black Friday sunt astfel pierdute!

Din fericire, poți corecta linkurile nefuncționale chiar și după ce e-mailul a fost trimis abonaților.

a) Deschide campania

Găsește campania trimisă în lista de campanii, fă clic pe cele trei puncte și alege View Campaign.

b) Modifică linkurile sau etichetele

Derulează până la lista de linkuri din detaliile campaniei pentru a:

• Actualiza destinațiile linkurilor: corectează URL-urile greșite.
• Gestiona etichetele: adaugă sau elimină etichete pentru automatizări.

Notă: pentru a modifica destinația linkurilor, opțiunea Click Tracking trebuie să fie activată în setările campaniei.

Personalizarea aspectului linkurilor

În panoul de setări din dreapta poți ajusta aspectul linkului:

• Link Color: alege o culoare sau introdu un cod hexazecimal.

• Underline Links: activează sau dezactivează sublinierea pentru un aspect mai curat.

12. Etichete de personalizare

Folosește Personalization Tags pentru a adăuga conținut dinamic, precum prenumele destinatarului sau alte câmpuri personalizate.

• Deschide meniul derulant Personalization Tags din bară pentru a alege câmpuri uzuale precum First Name (prenume), Email (e-mail) sau Country (țară). Poți și să definești câmpuri personalizate pentru a adapta e-mailurile fiecărui destinatar.

13. Emoji

Adaugă emoji pentru a face textul mai atractiv vizual.

• Fă clic pe pictograma Emoji din bară pentru a deschide o listă organizată pe categorii, ușor de parcurs.
• Notă privind compatibilitatea: testează e-mailurile în aplicații precum Outlook, deoarece unele pot să nu afișeze corect emoji.

14. Tabele și caractere speciale

La capătul barei de instrumente, fă clic pe cele trei puncte pentru a afișa opțiunile avansate.

Inserarea unui tabel

Creează și personalizează tabele pentru a îmbunătăți aranjarea conținutului e-mailului.

• Stabilește numărul de rânduri și coloane, spațiul dintre celule, spațierea interioară și grosimea chenarului, în funcție de nevoi.

Inserarea caracterelor speciale

Completează textul cu simboluri, caractere accentuate și alte caractere speciale.

• Accesează opțiunea Special Characters pentru a parcurge gama de caractere disponibile.

Setări suplimentare ale blocului Text (panoul din dreapta)

Panoul din dreapta îți oferă control detaliat asupra aspectului și funcționalității blocurilor de text. Iată setările disponibile:

1. Culoarea textului

În Text Color, stabilește culoarea textului folosind selectorul de culori sau introducând un cod hexazecimal.

2. Culoarea fundalului

În Background Color, setează o culoare de fundal personalizată pentru blocul de text. Fundalul este transparent în mod implicit.

3. Setări pentru linkuri

Când blocul de text conține linkuri, apar opțiuni suplimentare în setări:

• Link Color: ajustează culoarea linkurilor folosind selectorul de culori sau un cod hexazecimal.

• Underline Links: activează sau dezactivează sublinierea linkurilor din blocul de text.

• Editarea linkurilor: selectează un link din zona de conținut pentru a-i edita URL-ul în panoul de setări. Poți și să atribui sau să actualizezi etichetele asociate linkului folosind meniul derulant Tags.

4. Aliniere

Cu Alignment, aliniază blocul de text în container: Left (la stânga), Center (la centru) sau Right (la dreapta).

5. Înălțime fixă

Activează Fixed Height pentru a stabili o înălțime fixă a blocului de text. Poți regla și alinierea verticală a textului: Top (sus), Middle (la mijloc) sau Bottom (jos).

6. Spațierea rândurilor

Cu Line Spacing, reglează spațiul dintre rândurile de text. Alege Tight (redus), Normal (normal) sau Wide (mărit).

7. Spațiere interioară

Cu Padding, ajustează spațiul din jurul blocului de text. Aplică aceeași valoare peste tot sau personalizează fiecare latură: Top (sus), Bottom (jos), Left (stânga) și Right (dreapta).

8. Linkuri-ancoră

Creează linkuri-ancoră pentru a le permite cititorilor să ajungă la anumite secțiuni ale e-mailului. Reține că unele aplicații de e-mail nu acceptă linkuri-ancoră.

Blocul Button

Blocul Button îți permite să adaugi în e-mail un buton pe care destinatarii pot face clic, cu setări personalizabile pentru funcționalitate și aspect.

Setările linkului

Opțiunea Link stabilește acțiunea declanșată când un destinatar face clic pe buton.

Tipuri de linkuri disponibile

• Normal Site Link (HTTP sau HTTPS): direcționează utilizatorul către o pagină web.
• Mail Link: deschide aplicația de e-mail a utilizatorului pentru a compune un e-mail nou.
• File Link (FTP, FTPS): trimite la un fișier de pe un server FTP.
• Skype: inițiază un apel sau o conversație pe Skype.
• Telephone (tel): inițiază un apel telefonic pe dispozitivele compatibile.
• SMS: deschide aplicația de mesagerie cu numărul destinatarului completat.
• Viber: deschide aplicația Viber pentru mesaje sau apeluri.
• Another Protocol Type: permite specificarea unui protocol personalizat care nu apare în lista de mai sus.

Opțiuni de partajare pe rețele sociale

Poți configura butonul și pentru partajare pe rețele sociale sau prin e-mail:

• Facebook
• X (fostul Twitter)
• LinkedIn
• Pinterest
• Email Sharing — partajare prin e-mail

Câmpul URL

Lângă tipul de link, câmpul URL, care începe de obicei cu https://, îți permite să introduci adresa corespunzătoare tipului de link ales.

Textul butonului

În Button Label, personalizează textul butonului în funcție de îndemnul la acțiune. Textul implicit este „Button”, dar îl poți înlocui cu variante precum „Află mai multe”, „Abonează-te acum” sau „Cumpără acum”.

Stilul textului

Setările Text Style îți permit să ajustezi aspectul textului de pe buton.

Alegerea fontului

Alege dintre mai multe fonturi standard, inclusiv:

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

Sunt disponibile și fonturi nestandard, precum:

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

În partea de sus a listei de fonturi, o casetă de căutare te ajută să găsești rapid fontul dorit.

Dimensiunea și formatarea fontului

• Font Size: alege o valoare între 8 și 72, în funcție de cât de mult vrei să iasă în evidență textul butonului.
• Formatarea textului: aplică Bold (aldin) sau Italic (cursiv) cu pictogramele „B” sau „I” pentru a evidenția textul butonului.

Setările culorilor

Personalizează aspectul butonului ajustând culorile.

1. Button Color — culoarea butonului: schimbă culoarea de fundal a butonului. Culoarea implicită este verde (#31cb4b). Folosește câmpul pentru codul hexazecimal sau selectorul de culori pentru a alege altă culoare.

2. Text Color — culoarea textului: stabilește culoarea textului de pe buton. Culoarea implicită este alb (#ffffff). Alege o culoare care contrastează suficient cu fundalul butonului, astfel încât textul să fie ușor de citit.

3. Background Color — culoarea fundalului: ajustează fundalul containerului în care se află butonul. Acesta este transparent în mod implicit, dar îl poți schimba pentru a evidenția butonul pe fundalul e-mailului.

Rotunjirea colțurilor

Controlează cât de rotunjite sunt colțurile butonului cu setarea Border Radius.

• Valoare implicită: 30, pentru colțuri moderat rotunjite.
• Interval: de la 0, pentru colțuri drepte, la 100, pentru un buton în formă de capsulă.

Notă: Pentru afișarea corectă a colțurilor rotunjite în Microsoft Outlook, activează opțiunea Support of Outlook din fila Appearance.

Aliniere

Poziționează butonul în zona de conținut folosind setarea Alignment.

• Opțiuni: Left (la stânga), Center (la centru), Right (la dreapta).
• Utilizare obișnuită: alinierea la centru evidențiază butonul, iar alinierea la stânga sau la dreapta ajută la păstrarea coerenței designului.

Înălțime fixă

Activează Fixed Height pentru a păstra dimensiuni constante ale butonului.

1. Stare implicită: dezactivată.
2. Înălțime minimă: 44 de pixeli.
3. Alinierea verticală a conținutului: când înălțimea fixă este activată, alege Top (sus), Middle (la mijloc) sau Bottom (jos) pentru a poziționa precis conținutul butonului.

Buton cu pictogramă

Opțiunea Button with Icon îți permite să adaugi o pictogramă lângă textul butonului, pentru un aspect mai atractiv și un îndemn la acțiune mai clar. Funcția este dezactivată implicit.

• Formate acceptate: încarcă pictograme în format PNG, JPG sau GIF, cu o dimensiune maximă de 2 MB.
• Poziționarea pictogramei: alege Left pentru a o afișa în stânga textului sau Right pentru a o afișa în dreapta.

Notă: pictogramele nu sunt afișate în anumite versiuni de Microsoft Outlook pentru Windows, inclusiv:

• Outlook 2002, 2007, 2010, 2013, 2016 și 2019. Această limitare ține de modul în care aplicațiile respective afișează e-mailurile HTML. Ia-o în considerare dacă o mare parte a publicului folosește aceste aplicații.

Setările chenarului

Personalizează chenarul butonului pentru a-i defini stilul și a-l evidenția.

• Border Width: setează separat grosimea fiecărei laturi a chenarului — stânga, dreapta, sus și jos — până la 40 de pixeli.
• Border Style: alege Solid (linie continuă), Dashed (linie întreruptă) sau Dotted (linie punctată).
• Border Color: folosește selectorul de culori sau introdu un cod hexazecimal pentru a armoniza chenarul cu identitatea vizuală a brandului sau cu paleta de culori a designului.

Spațiere interioară

Cu Internal Padding, ajustează spațiul din interiorul butonului, dintre conținutul acestuia — text și pictogramă — și chenar.

• Opțiuni de personalizare: stabilește valorile pentru Left (stânga), Right (dreapta), Top (sus) și Bottom (jos), până la maximum 99 de pixeli.
• Efect: spațierea interioară influențează dimensiunea totală a butonului și poziția conținutului din interior.

Spațiere exterioară

Cu External Padding, controlează spațiul din jurul butonului pentru a-i ajusta poziția față de celelalte elemente ale e-mailului.

• Opțiuni de personalizare: stabilește valorile pentru Left (stânga), Right (dreapta), Top (sus) și Bottom (jos), până la maximum 40 de pixeli.
• Utilizare: împiedică afișarea butonului prea aproape de alt conținut sau de marginile e-mailului.

Adăugarea unui link-ancoră

Folosește Add Anchor Link pentru a direcționa cititorii către anumite secțiuni din același e-mail, facilitând navigarea în newsletterele mai lungi.

• Anchor Name: definește o destinație în e-mail și asociază butonul cu această ancoră. La clic, e-mailul derulează până la secțiunea indicată, pentru o navigare mai ușoară.

Important: linkurile-ancoră nu sunt acceptate în anumite aplicații și tipuri de e-mail, inclusiv:

• Aplicația Gmail pentru iOS
• Apple Mail pentru iOS
• Aplicația Outlook pentru Android
• Aplicația Outlook pentru macOS
• E-mailurile AMP

Testează temeinic e-mailul pentru a verifica funcționarea în diferite aplicații de e-mail și pentru a decide dacă această funcție este potrivită pentru publicul vizat.

Blocul Spacer

Blocul Spacer îți permite să adaugi spațiu ajustabil în conținutul e-mailului și să controlezi dimensiunea, alinierea, aspectul și spațierea interioară. Mai jos sunt explicate cele două tipuri de distanțiere: Normal Spacer și Dynamic Spacer.

1. Distanțier normal

Normal Spacer este un element de tip linie care separă vizual secțiunile e-mailului.

Setări principale

1. Grosimea și stilul liniei Personalizează grosimea, stilul și culoarea liniei:

   • Grosime: ajustează valoarea cu butoanele + și -, pornind de la 1.
   • Stil: alege solid (linie continuă), dashed (linie întreruptă) sau dotted (linie punctată).
   • Culoare: stabilește o culoare personalizată folosind un cod hexazecimal sau selectorul de culori. Valoarea implicită este #cccccc.

2. Lățime Stabilește cât de mult se întinde linia pe lățimea conținutului. Ajustează lățimea în pixeli cu butoanele + și -.

3. Aliniere Aliniază linia la stânga, la centru sau la dreapta pentru a se potrivi cu aranjarea conținutului.

4. Spațiere interioară Cu Padding, controlează spațiul interior din jurul distanțierului:

   • Valoare implicită: 20 pe toate laturile.
   • Activează comutatorul More pentru a stabili spațierea separat pe fiecare latură:
     • Top — sus
     • Right — dreapta
     • Bottom — jos
     • Left — stânga

Utilizare

Normal Spacer este ideal pentru delimitări vizuale clare între secțiunile e-mailului, oferind un aspect bine organizat și profesional.

2. Distanțier dinamic

Dynamic Spacer este un bloc invizibil de spațiu liber, conceput pentru a crea un aspect aerisit în e-mail.

Funcții principale

1. Ajustarea înălțimii Ajustează înălțimea direct în zona de conținut sau din panoul de control, cu butoanele + și -. Înălțimea stabilește cât spațiu vertical se adaugă între secțiuni.

2. Culoarea fundalului Fundalul distanțierului este transparent în mod implicit, dar poți aplica o culoare personalizată folosind un cod hexazecimal sau selectorul de culori. Astfel, distanțierul poate deveni un bloc vizibil, dacă este necesar.

3. Adaptarea la dimensiunea ecranului Opțiunea Responsive Spacer adaptează dinamic distanțierul la diferite dimensiuni ale ecranului, pentru o aranjare optimă pe toate dispozitivele. Funcția este activată implicit.

Principalele diferențe dintre distanțierul normal și cel dinamic

• Dynamic Spacer: adaugă spațiu liber, fără o linie vizibilă.
• Normal Spacer: include setări specifice liniei, precum:
  • Lățimea liniei
  • Alinierea
  • Stilul liniei
  • Spațierea interioară

Dynamic Spacer nu oferă aceste setări și este conceput exclusiv pentru separarea conținutului fără elemente vizuale.

3. Adăugarea unui link-ancoră

Linkurile-ancoră pot fi aplicate ambelor tipuri de distanțiere, astfel încât utilizatorii să ajungă direct la poziția distanțierului din altă parte a e-mailului. Acest lucru este util mai ales pentru navigarea în newsletterele lungi.

Notă: linkurile-ancoră nu sunt acceptate în unele aplicații de e-mail, inclusiv:

• Microsoft Outlook
• Gmail pe mobil

Blocul Video

Blocul Video îți permite să încorporezi videoclipuri în e-mail și să le personalizezi aspectul și comportamentul. Acceptă linkuri către videoclipuri de pe platforme precum YouTube și Vimeo, oferindu-ți flexibilitate și control asupra modului în care sunt prezentate.

1. Link către videoclip

Adaugă URL-ul videoclipului în câmpul Link to Video. Sunt acceptate YouTube, Vimeo și alte servicii care permit încorporarea videoclipurilor.

• Comportament automat: când adaugi un URL valid:

  • Se generează automat o imagine de previzualizare pe baza miniaturii videoclipului de pe platformă.
  • Câmpul Alternate Text se completează automat cu titlul sau descrierea videoclipului, dacă sunt disponibile.

• Câmpuri editabile: poți modifica sau înlocui manual imaginea de previzualizare și textul generate, dacă este necesar.

2. Text alternativ

Câmpul Alternate Text contribuie la accesibilitate prin afișarea unei descrieri a videoclipului dacă acesta nu se încarcă.

• Se completează automat când adaugi un URL video acceptat.
• Poate fi personalizat în funcție de conținut.

3. Miniatură personalizată

Încarcă o imagine proprie pentru a înlocui previzualizarea implicită a videoclipului.

• Activare: activează opțiunea Custom Thumbnail.
• Formate acceptate: PNG, JPG sau GIF.
• Utilizare: înlocuiește miniatura generată atunci când nu se potrivește cu designul e-mailului.

4. Butonul de redare

Cu Play Button, personalizează butonul de redare suprapus peste miniatura videoclipului.

• Opțiuni disponibile:
  • Alege stilul YouTube, Vimeo sau un alt stil pentru butonul de redare.
  • Selectează None pentru a ascunde complet butonul de redare.

5. Dimensiune

Ajustează dimensiunile videoclipului pentru a se potrivi cu designul e-mailului.

• Lățime și înălțime: folosește butoanele + și - sau introdu manual valorile pentru a regla dimensiunea.
• Design adaptabil: asigură-te că videoclipul se încadrează corespunzător pe diferite dispozitive.

6. Ajustare la lățimea containerului

Activează comutatorul Adjust to Width pentru ca videoclipul să se ajusteze automat la lățimea containerului. Astfel, acesta se adaptează la afișarea pe diferite dispozitive.

7. Imagine adaptabilă la ecran

Comutatorul Responsive Image adaptează miniatura videoclipului la lățimea ecranului pe dispozitivele mobile.

• Notă: adaptarea depinde de compatibilitatea dispozitivului și a aplicației de e-mail.

8. Aliniere

Folosește setarea Alignment pentru a controla poziția orizontală a videoclipului în bloc:

• Left: aliniază videoclipul la stânga.
• Center: centrează videoclipul.
• Right: aliniază videoclipul la dreapta.

9. Opțiuni pentru dispozitive mobile

Personalizează comportamentul și aspectul videoclipului pe dispozitivele mobile:

1. Hide Element on Mobile — ascunderea elementului pe mobil Ascunde blocul Video pe dispozitivele mobile, dacă este necesar.

   • Notă: funcția depinde de compatibilitatea cu interogările media și este posibil să nu funcționeze în toate aplicațiile de e-mail.

2. Mobile Padding — spațierea interioară pe mobil Ajustează spațiul din jurul videoclipului pentru afișarea pe mobil.

   • Activează comutatorul More pentru a stabili valori separate pentru:
     • Top — sus
     • Right — dreapta
     • Bottom — jos
     • Left — stânga

10. Includerea în AMPHTML sau HTML

Alege în ce versiuni ale e-mailului apare blocul Video:

• Both AMPHTML and HTML — atât în AMPHTML, cât și în HTML
• AMPHTML-only — doar în AMPHTML
• HTML-only — doar în HTML

Această opțiune stabilește includerea videoclipului în funcție de versiunea e-mailului livrat.

Blocul HTML

Blocul HTML îți permite să inserezi cod HTML și CSS propriu în e-mail, pentru personalizări avansate care respectă cerințele de compatibilitate ale aplicațiilor de e-mail. Îl poți folosi atât pentru adăugarea unui singur element HTML, cât și pentru crearea unui e-mail întreg cu un design personalizat.

1. Interfața editorului de cod

Când selectezi blocul HTML, în panoul de conținut apare o fereastră de editare a codului, cu fundal negru. Aici poți scrie, lipi sau modifica propriul cod. Editorul include două secțiuni:

• HTML: adaugă sau editează structura HTML a e-mailului.
• CSS: deschide un editor CSS separat pentru a defini stilurile conținutului.

2. Ajustarea dimensiunii fontului

Ajustează dimensiunea fontului cu care este afișat codul în editor, pentru a-l citi mai ușor:

• Folosește butonul A+ pentru a mări fontul.
• Folosește butonul A- pentru a micșora fontul.

3. Redimensionarea ferestrei editorului

Redimensionează fereastra editorului de cod în funcție de preferințele de lucru:

• Cum procedezi:
  • Treci cu cursorul peste cele trei puncte din partea de sus, la mijlocul ferestrei editorului.
  • Trage glisorul în sus sau în jos pentru a mări sau micșora fereastra.

Această funcție este utilă mai ales când lucrezi cu blocuri de cod mai mari sau mai detaliate.

4. Editorul CSS

Editorul CSS îți permite să gestionezi stilurile conținutului HTML. Îl poți deschide cu butonul din colțul din dreapta sus al editorului de cod.

Aspecte importante:

• Compatibilitate limitată: multe aplicații de e-mail nu acceptă funcții CSS avansate, precum Flexbox, Grid sau interogările media.
• Folosește soluții de bază: alege CSS inline simplu pentru compatibilitate maximă.
• Stiluri preconfigurate: evită să le ștergi, deoarece asigură afișarea corectă în principalele aplicații de e-mail.

5. Compatibilitatea cu aplicațiile de e-mail

Codul HTML pentru e-mailuri necesită atenție specială, deoarece multe aplicații de e-mail folosesc motoare de afișare învechite.

Recomandări principale:

• Folosește structuri bazate pe tabele în loc de structuri bazate pe <div>, pentru o compatibilitate mai bună.
• Evită funcții CSS avansate, precum animațiile, Flexbox sau Grid.
• Așteaptă-te la un comportament neuniform al interogărilor media și al proprietăților CSS secundare.
• Testare: testează întotdeauna e-mailurile în mai multe aplicații, de exemplu Gmail, Outlook și Apple Mail, pentru a verifica afișarea corectă.

6. Spațiere interioară

Setarea Padding ajustează spațiul din jurul conținutului HTML:

• Spațiere implicită: valoarea este 0.
• Spațiere personalizată: activează comutatorul More pentru a ajusta separat valorile pentru:
  • Top — sus
  • Right — dreapta
  • Bottom — jos
  • Left — stânga

Această funcție este ideală pentru alinierea conținutului HTML în e-mail.

7. Adăugarea unui link-ancoră

Funcția Add Anchor Link îți permite să creezi, în altă parte a e-mailului, un link care duce la blocul HTML când cititorul face clic pe el.

Cum o folosești:

• Activează opțiunea și introdu un nume de ancoră în câmp.

Limitări:

• Linkurile-ancoră nu sunt acceptate în unele aplicații și tipuri de e-mail, precum:
  • Aplicația Gmail pentru iOS
  • Apple Mail pentru iOS
  • Aplicația Outlook pentru Android și macOS
  • E-mailurile AMP

8. Scrierea propriului cod HTML

Editorul HTML este conceput pentru a scrie sau a lipi structura HTML personalizată a e-mailului.

Bune practici:

• Folosește HTML simplu, acceptat pe scară largă.
• Evită structurile complexe sau funcții precum elementele <div>.
• Alege structuri bazate pe tabele pentru o compatibilitate mai bună.

9. Sfaturi practice

1. Începe cu secțiuni mici: dacă ești la început cu dezvoltarea e-mailurilor, folosește blocul HTML doar pentru anumite secțiuni.
2. Validează codul: asigură-te că HTML-ul respectă cerințele aplicațiilor de e-mail.
3. Testează temeinic: folosește instrumente de previzualizare și testare a e-mailului în mai multe aplicații și pe mai multe dispozitive.