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

Published: 22 octombrie 2024 · Last updated: 21 iulie 2026 · By Marcus Biel

În partea dreaptă a editorului de e-mail Maildroppa vei găsi Coloana Setări e-mail, care oferă instrumente pentru structurarea și personalizarea conținutului și aspectului e-mailului. Această coloană este împărțită în două file: Conținut și Aspect.

Fila Conținut

Fila Conținut este locul în care creezi și organizezi conținutul e-mailului. Conține două secțiuni principale: Structuri și Blocuri.

1. Structuri

Structurile definesc aspectul e-mailului prin organizarea conținutului în rânduri și coloane. Poți alege dintre diverse machete 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 machetă personalizată dorești, beneficiind de flexibilitate deplină pentru a răspunde nevoilor tale de design.

• Tragere și plasare: Trage pur și simplu o structură din această secțiune și plaseaz-o în zona de design a e-mailului pentru a începe să adaugi conținut.
• Personalizare: După adăugarea unei structuri, 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 plasezi în structuri pentru a construi e-mailul.

Tipurile de blocuri disponibile sunt:

• Imagine: Încarcă imagini (PNG, JPG, GIF) și personalizează-le aspectul.
• Text: Adaugă și formatează text pentru a transmite mesajul.
• Buton: Adaugă butoane pe care se poate face clic, cu text, linkuri și stiluri personalizabile.
• Spațiu: Inserează un spațiu gol pentru a ajusta macheta între alte blocuri.
• Video: Inserează conținut video de pe platforme precum YouTube, Vimeo și altele.
• HTML: Adaugă cod HTML și CSS personalizat pentru personalizări avansate ale conținutului e-mailului.

Fiecare bloc este conceput pentru a fi flexibil și personalizabil, permițându-ți să creezi un e-mail care se aliniază cu aspectul și stilul brandului tău.

Explicații detaliate despre blocurile de conținut

Blocul Imagine

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

Adăugarea unui bloc Imagine

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

Opțiunea 1

Treci cu cursorul peste zona „Plasează conținutul aici” dintr-o structură, apoi fă clic pe pictograma Imagine. Structura selectată se va transforma imediat într-un bloc de imagine.

Opțiunea 2

Accesează secțiunea Blocuri din fila Conținut. Trage blocul Imagine în structura dorită din macheta e-mailului. Această metodă îți oferă mai mult control asupra locului exact în care plasezi imaginea.

Încărcarea unei imagini

După ce ai adăugat blocul Imagine, ai două metode pentru a încărca o imagine:

Tragere și plasare

Poți trage și plasa direct un fișier imagine (PNG, JPG, GIF) de pe computer în caseta de încărcare care apare în blocul Imagine.

Încărcare de pe computer

Alternativ, poți face clic pe pictograma norului din blocul Imagine pentru a deschide browserul de fișiere și a selecta o imagine de pe computer (de până la 2 MB). După selectare, imaginea va apărea atât în bloc, cât și în fila de conținut din dreapta.

Schimbarea imaginii

Pentru a înlocui imaginea, folosește opțiunea Schimbă imaginea din fila de conținut. Fă clic pe pictograma circulară Schimbă imaginea, care îți va permite să încarci o imagine nouă sau să inserezi o imagine printr-un URL extern.

Editarea imaginii

După încărcarea unei imagini, este posibil să dorești să faci modificări suplimentare 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ă încărcarea unei imagini, fă clic pe butonul Editează imaginea. Se va deschide interfața Editorului de imagini.
2. Editorul oferă o gamă largă de instrumente, afișate în bara de meniu din partea de sus.

Instrumente de editare a imaginilor disponibile

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

  • Tonuri de gri
  • Alb-negru
  • Clarificare
  • Inversare
  • Sepia
  • Luminozitate
  • Culoare

• Redimensionare Ajustează dimensiunile imaginii. Poți:

  • Defini o lățime și o înălțime specifice.
  • Menține raportul de aspect.

• Decupare Selectează porțiunea imaginii pe care vrei să o păstrezi și elimină părțile nedorite.

• Transformare Rotește sau întoarce imaginea:

  • Orizontal
  • Vertical

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

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

  • Fontul
  • Dimensiunea
  • Culoarea
  • Alinierea

• Forme și autocolante Îmbunătățește imaginea suprapunând:

  • Forme predefinite
  • Autocolante amuzante

• Chenare Alege dintre mai multe chenare pentru a oferi imaginii o margine elegantă.

• Colțuri Ajustează stilul colțurilor pentru un aspect finisat.

• Fundal Elimină sau înlocuiește fundalul unei imagini pentru un aspect mai curat.

Salvarea modificărilor

După ce ai făcut modificările dorite, fă clic pe butonul Salvează din partea stângă sus a editorului. Imaginea editată va înlocui automat imaginea originală din macheta e-mailului.

Setările imaginii

După încărcarea imaginii, o poți personaliza folosind opțiunile Setări imagine disponibile în fila Conținut din partea dreaptă.

Link

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

• Site web (HTTP, HTTPS)
• E-mail (mailto:)
• Fișier (ftp)
• Partajare pe rețele sociale (Facebook, X (formerly Twitter), LinkedIn, Pinterest)

Aceste opțiuni se găsesc în meniul derulant al setărilor linkului.

Text alternativ

Adaugă un text alternativ care va fi afișat dacă imaginea nu se încarcă. Acest text este util și pentru accesibilitate, deoarece permite cititoarelor de ecran să descrie imaginea destinatarilor cu deficiențe de vedere.

Aliniere

Alege modul în care trebuie aliniată imaginea în containerul său. O poți alinia la Stânga, Centru sau Dreapta.

Dimensiune

Ajustează manual lățimea și înălțimea imaginii folosind butoanele plus/minus sau introducând dimensiunile dorite.

Poți activa și opțiunea „Ajustează la lățime” pentru ca imaginea să se potrivească automat pe întreaga lățime a containerului.

Imagine responsivă

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

Spațiere interioară

Personalizează spațiul din jurul imaginii pentru a controla distanța 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ă (Sus, Jos, Stânga, Dreapta).

Linkuri-ancoră

Poți atribui un link-ancoră imaginii, permițând destinatarilor să ajungă la o anumită secțiune din același e-mail atunci când fac clic pe imagine. Reține însă că linkurile-ancoră este posibil să nu funcționeze în anumiți clienți de e-mail, precum Gmail și Apple Mail.

Blocul Text

Îmbunătățește blocurile de text personalizându-le aspectul și funcționalitatea cu ajutorul următoarelor setări. Fiecare opțiune îți permite să ajustezi fin modul în care este afișat textul, astfel încât să corespundă perfect preferințelor tale de design.

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 și oferă acces rapid la multe opțiuni uzuale de formatare a textului. Iată funcțiile disponibile în bară:

1. Formatul paragrafului

Setează stilul paragrafului alegând opțiuni precum Normal pentru text obișnuit sau diferite niveluri de titlu (Titlu 1 până la Titlu 6) pentru a crea o ierarhie structurată în e-mail. Acest lucru face conținutul mai ușor de citit și mai bine organizat.

2. Familia de fonturi

Fontul implicit este Arial, dar poți alege dintre mai multe fonturi, inclusiv opțiuni uzuale precum Georgia, Helvetica și Courier New. Există și o funcție de căutare pentru a găsi rapid un anumit font.

3. Dimensiunea fontului

Ajustează dimensiunea fontului de la 8pt la 72pt. Valoarea implicită este 14pt, potrivită pentru majoritatea textelor din corpul unui e-mail. Folosește meniul derulant pentru a seta rapid dimensiunea dorită.

4. Stilizarea textului

Stilizează textul folosind următoarele opțiuni:

• Aldin (B): Evidențiază textul îngroșându-l.
• Cursiv (I): Scrie textul cu caractere cursive pentru un aspect mai stilizat.
• Subliniat (U): Subliniază textul, utilizat frecvent pentru hyperlinkuri.
• Tăiat (S): Trasează o linie prin text, utilă pentru modificări sau conținut eliminat.

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

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

• Indice: Coboară textul sub linia de bază (util pentru note de subsol sau formule chimice).
• Exponent: Ridică textul deasupra liniei de bază (utilizat frecvent pentru exponenți sau numere ordinale).
• Elimină formatarea: Șterge orice formatare aplicată, readucând textul la stilul implicit.

6. Culoarea textului și a fundalului

• Culoarea textului: Fă clic pe butonul Culoarea textului pentru a alege dintr-o paletă sau pentru a introduce un cod hexazecimal, controlând cu precizie culoarea textului.
• Culoarea fundalului: Selectează o culoare de fundal (evidențiere) pentru text.

7. Alinierea textului

Aliniază textul în bloc:

• Aliniere la stânga: Aliniază textul la stânga.
• Centrare: Centrează textul.
• Aliniere la dreapta: Aliniază textul la dreapta.
• Justificare: Distribuie uniform textul pe lățimea blocului.

8. Liste

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

• Inserează/Elimină lista cu marcatori: Adaugă sau elimină marcatorii.
• Inserează/Elimină lista numerotată: Adaugă sau elimină o listă numerotată.

9. Încadrarea rândurilor

Activează sau dezactivează încadrarea rândurilor în blocul de text. Când este activată, rândurile lungi de text trec automat pe rândul următor.

10. Indentare

Ajustează indentarea textului:
- **Mărește indentarea**: Mută textul mai departe de margine, fiind utilă pentru subpuncte sau citate.
- **Micșorează indentarea**: Reduce indentarea, apropiind textul de marginea stângă.
![Indentarea textului](https://cms.maildroppa.com/assets/0146b155-9fe5-4495-be1c-19dcf1427639)

11. Inserarea unui hyperlink

Află cum să adaugi, editezi și gestionezi hyperlinkuri în conținutul e-mailului.

Pași pentru adăugarea sau editarea unui link

a) Evidențiază textul

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

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

Va apărea Panoul de setări din dreapta, cu opțiuni pentru link:

• Câmpul linkului: Introdu URL-ul sau selectează dintre opțiunile predefinite.
• Etichetă: Adaugă etichete pentru a identifica abonații sau a declanșa automatizări.

Corectarea linkurilor după trimitere

Nu e nimic mai neplăcut decât să trimiți o campanie nouă celor 2.365 de abonați, doar pentru a descoperi că unul dintre linkuri nu funcționează din cauza unei simple greșeli de scriere. Adio, vânzări de Black Friday!

Din fericire, am făcut posibilă repararea linkurilor nefuncționale — chiar și după ce e-mailul a fost deja trimis abonaților.

a) Vezi campania

Găsește campania trimisă în prezentarea generală, fă clic pe cele trei puncte și alege Vezi campania.

b) Modifică linkurile sau etichetele

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

• Actualiza destinațiile linkurilor: Corectează URL-urile incorecte.
• Gestiona etichetele: Adaugă sau elimină etichete pentru automatizări.

Notă: Pentru a utiliza funcția de redirecționare a linkurilor, asigură-te că Urmărirea clicurilor este activată în setările campaniei.

Personalizarea aspectului linkurilor

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

• Culoarea linkului: Selectează o culoare sau introdu un cod hexazecimal.

• Subliniază linkurile: Activează sau dezactivează sublinierea pentru un aspect mai curat.

12. Etichete de personalizare

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

• Accesează meniul derulant Etichete de personalizare din bară pentru a selecta câmpuri uzuale precum Prenume, E-mail sau Țară, ori pentru a defini câmpuri personalizate și a adapta e-mailurile pentru fiecare destinatar.

13. Emoji

Adaugă atractivitate vizuală textului incluzând emoji.

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

14. Tabel și caractere speciale

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

Inserarea unui tabel

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

• Definește rândurile, coloanele, spațierea celulelor, spațierea interioară și dimensiunea chenarului după cum este necesar.

Inserarea caracterelor speciale

Îmbunătățește textul cu simboluri, caractere accentuate și alte caractere neobișnuite.

• Accesează opțiunea Caractere speciale pentru a răsfoi o gamă largă de caractere.

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

Panoul din dreapta oferă un control extins asupra aspectului și funcționalității blocurilor de text. Mai jos sunt prezentate setările disponibile:

1. Culoarea textului

Definește culoarea textului folosind selectorul de culori sau introducând un cod hexazecimal.

2. Culoarea fundalului

Setează o culoare personalizată pentru fundalul blocului de text. În mod implicit, fundalul este transparent.

3. Setări specifice linkurilor

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

• Culoarea linkului: Ajustează culoarea linkurilor folosind selectorul de culori sau un cod hexazecimal.

• Subliniază linkurile: Activează sau dezactivează opțiunea de subliniere pentru linkurile 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. De asemenea, poți atribui sau actualiza etichete pentru link folosind meniul derulant denumit „Etichete”.

4. Aliniere

Aliniază blocul de text în containerul său: Stânga, Centru sau Dreapta.

5. Înălțime fixă

Setează o înălțime fixă pentru blocul de text activând această opțiune. Poți controla și alinierea verticală a textului: Sus, Mijloc sau Jos.

6. Spațierea rândurilor

Controlează spațiul dintre rândurile de text. Alege dintre Strânsă, Normală sau Largă.

7. Spațiere interioară

Ajustează spațiul din jurul blocului de text. Aplică o spațiere uniformă sau personalizează fiecare latură: Sus, Jos, Stânga și Dreapta.

8. Linkuri-ancoră

Creează linkuri-ancoră pentru a permite cititorilor să ajungă la anumite secțiuni ale e-mailului. Reține că unii clienți de e-mail nu acceptă linkuri-ancoră.

Blocul Buton

Blocul Buton îți permite să adaugi în e-mail un buton pe care se poate face clic, cu setări personalizabile pentru funcționalitate și stil.

Setări link

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

Tipuri de linkuri disponibile

• Link obișnuit către un site (HTTP sau HTTPS): Direcționează utilizatorul către o pagină web.
• Link de e-mail: Deschide clientul de e-mail al utilizatorului pentru a compune un e-mail nou.
• Link către fișier (FTP, FTPS): Face trimitere la un fișier de pe un server FTP.
• Skype: Inițiază un apel sau un chat Skype.
• Telefon (tel): Inițiază un apel telefonic pe dispozitive compatibile.
• SMS: Deschide aplicația de mesagerie cu numărul destinatarului completat în prealabil.
• Viber: Deschide aplicația Viber pentru mesaje sau apeluri.
• Alt tip de protocol: Specifică un protocol personalizat care nu este enumerat mai sus.

Opțiuni de partajare pe rețele sociale

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

• Facebook
• X (formerly Twitter)
• LinkedIn
• Pinterest
• 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 specifică asociată tipului de link.

Eticheta butonului

Personalizează eticheta butonului pentru a reflecta îndemnul la acțiune. Eticheta implicită este „Buton”, dar o poți schimba în opțiuni precum „Află mai multe”, „Abonează-te acum” sau „Cumpără acum”.

Stilul textului

Setările Stil text îți permit să ajustezi aspectul textului butonului.

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

Pentru fonturile nestandard, opțiunile suplimentare includ:

• 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 un anumit font.

Dimensiunea și formatarea fontului

• Dimensiunea fontului: Alege o valoare între 8 și 72, în funcție de cât de vizibil vrei să fie textul butonului.
• Formatarea textului: Aplică stilul Aldin sau Cursiv folosind pictogramele „B” sau „I” pentru a evidenția textul butonului.

Setările culorilor

Personalizează aspectul butonului ajustând setările de culoare.

1. Culoarea butonului: Schimbă culoarea de fundal a butonului. Valoarea implicită este verde (#31cb4b). Folosește câmpul pentru cod hexazecimal sau selectorul de culori pentru a alege o culoare nouă.

2. Culoarea textului: Definește culoarea textului butonului. Valoarea implicită este alb (#ffffff). Alege o culoare care contrastează suficient cu fundalul butonului pentru o bună lizibilitate.

3. Culoarea fundalului: Ajustează fundalul containerului butonului. În mod implicit, acesta este transparent, dar îl poți schimba pentru ca butonul să iasă în evidență pe fundalul e-mailului.

Raza chenarului

Controlează gradul de rotunjire a colțurilor butonului folosind setarea Raza chenarului.

• Valoare implicită: 30 (colțuri moderat rotunjite).
• Interval: de la 0 (colțuri pătrate) la 100 (buton în formă de capsulă).

Notă: Pentru ca colțurile rotunjite să fie afișate corect în Microsoft Outlook, activează opțiunea „Asistență pentru Outlook” din fila Aspect.

Aliniere

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

• Opțiuni: Stânga, Centru, Dreapta.
• Utilizare obișnuită: Alinierea la centru pentru evidențiere, alinierea la stânga sau dreapta pentru coerența designului.

Înălțime fixă

Activează opțiunea Înălțime fixă pentru a menține dimensiuni constante ale butonului.

1. Implicit: Dezactivată.
2. Înălțime minimă: 44 de pixeli.
3. Alinierea verticală a conținutului: Când înălțimea fixă este activată, aliniază conținutul butonului la Sus, Mijloc sau Jos pentru o poziționare precisă.

Buton cu pictogramă

Opțiunea Buton cu pictogramă îți permite să incluzi o pictogramă lângă textul butonului, sporind atractivitatea vizuală și întărind îndemnul la acțiune. Această funcție este dezactivată implicit.

• Formate acceptate: Încarcă pictograme în format PNG, JPG sau GIF, cu o dimensiune maximă de 2 MB.
• Poziționarea pictogramei: Alege afișarea pictogramei în partea Stângă sau Dreaptă a textului butonului.

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 este cauzată de modul în care acești clienți de e-mail redau e-mailurile HTML. Ține cont de acest aspect dacă o parte importantă a publicului tău folosește acești clienți.

Setările chenarului

Personalizează chenarele butonului pentru un plus de stil și accent.

• Lățimea chenarului: Setează individual lățimea fiecărei laturi (stânga, dreapta, sus și jos), până la 40 de pixeli.
• Stilul chenarului: Alege dintre stilurile Continuu, Întrerupt sau Punctat.
• Culoarea chenarului: Folosește selectorul de culori sau introdu un cod hexazecimal pentru a potrivi culoarea chenarului cu brandul sau schema de design.

Spațiere interioară

Ajustează spațiul din interiorul butonului, dintre conținut (text și pictogramă) și chenarul butonului.

• Opțiuni de personalizare: Definește valorile spațierii pentru laturile Stânga, Dreapta, Sus și Jos, până la maximum 99 de pixeli.
• Impact: Spațierea interioară influențează dimensiunea totală a butonului și poziția conținutului în interiorul acestuia.

Spațiere exterioară

Controlează spațiul din exteriorul butonului pentru a-i ajusta poziția în raport cu alte elemente din macheta e-mailului.

• Opțiuni de personalizare: Setează valorile spațierii exterioare pentru laturile Stânga, Dreapta, Sus și Jos, până la maximum 40 de pixeli.
• Caz de utilizare: Asigură-te că butonul nu apare prea aproape de alt conținut sau de marginile e-mailului.

Adăugarea unui link-ancoră

Folosește linkurile-ancoră pentru a direcționa cititorii către anumite secțiuni din același e-mail, oferind navigare rapidă în newsletterele mai lungi.

• Numele ancorei: Definește o destinație în e-mail și leagă butonul de această ancoră. La clic, e-mailul derulează până la secțiunea specificată, îmbunătățind navigarea utilizatorului.

Important: Linkurile-ancoră nu sunt acceptate de anumiți clienți 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ă atent e-mailul pentru a te asigura că funcționează în diferiți clienți de e-mail și pentru a determina dacă această funcție este potrivită pentru publicul tău.

Blocul Spațiu

Blocul Spațiu îți permite să adaugi spațiu ajustabil în conținutul e-mailului, oferind control asupra dimensiunii, alinierii, aspectului și spațierii interioare. Mai jos găsești detalii despre cele două tipuri de spații: Spațiu normal și Spațiu dinamic.

1. Spațiu normal

Spațiul normal este un element de tip linie care separă vizual secțiunile din e-mail.

Setări principale

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

   • Grosime: Ajustează folosind butoanele + și - (pornind de la 1).
   • Stil: Alege între continuu, întrerupt sau punctat.
   • Culoare: Setează o culoare personalizată folosind un cod hexazecimal sau selectorul de culori (implicit: #cccccc).

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

3. Aliniere Aliniază linia la stânga, centru sau dreapta, pentru a se potrivi cu macheta.

4. Spațiere interioară Controlează spațiul interior din jurul elementului:

   • Implicit: Spațierea este setată la 20 pe toate laturile.
   • Folosește comutatorul Mai multe pentru a specifica spațierea fiecărei laturi:
     • Sus
     • Dreapta
     • Jos
     • Stânga

Caz de utilizare

Spațiul normal este ideal pentru a crea separări vizuale clare între secțiunile e-mailului, asigurând o machetă bine organizată și profesională.

2. Spațiu dinamic

Spațiul dinamic este un bloc invizibil de spațiu gol, conceput pentru a crea spațiu de respiro în macheta e-mailului.

Funcții principale

1. Ajustarea înălțimii Ajustează înălțimea direct în zona de conținut sau prin panoul de control, folosind butoanele + și -. Înălțimea determină cât spațiu vertical este adăugat între secțiuni.

2. Culoarea fundalului În mod implicit, spațiul are un fundal transparent, dar poți aplica o culoare personalizată folosind un cod hexazecimal sau selectorul de culori. Astfel, spațiul poate funcționa ca un bloc vizibil, dacă este necesar.

3. Comportament responsiv Opțiunea Spațiu responsiv asigură adaptarea dinamică a spațiului la diferite dimensiuni ale ecranului, pentru o machetă optimă pe toate dispozitivele. Această funcție este activată implicit.

Diferențe principale între spațiile normal și dinamic

• Spațiul dinamic: Adaugă spațiu gol fără o linie vizibilă.
• Spațiul normal: Include setări specifice liniei, precum:
  • Lățimea liniei
  • Alinierea
  • Stilurile liniei
  • Spațierea interioară

Spațiul dinamic nu acceptă aceste funcții și este conceput exclusiv pentru separare, fără elemente vizuale.

3. Adăugarea unui link-ancoră

Linkurile-ancoră pot fi aplicate ambelor tipuri de spațiu, permițând utilizatorilor să navigheze direct la poziția spațiului dintr-o altă parte a e-mailului. Acest lucru este util în special pentru crearea navigării în e-mailurile mai lungi.

Notă: Linkurile-ancoră nu sunt acceptate de anumiți clienți de e-mail, inclusiv:

• Microsoft Outlook
• Gmail (pe mobil)

Blocul Video

Blocul Video îți permite să inserezi videoclipuri în e-mail și să le personalizezi aspectul și comportamentul. Acceptă linkuri video de pe platforme precum YouTube și Vimeo, oferind flexibilitate și control asupra modului în care este prezentat videoclipul.

1. Link către videoclip

Adaugă URL-ul videoclipului în câmpul Link către videoclip. Platformele acceptate includ YouTube, Vimeo și alte servicii care permit inserarea.

• Comportament automat: Când este adăugat un URL valid:

  • O imagine de previzualizare este generată automat folosind miniatura videoclipului de pe platformă.
  • Câmpul Text alternativ este completat automat cu titlul sau descrierea videoclipului (dacă sunt disponibile).

• Câmpuri editabile: Poți edita sau înlocui manual imaginea și textul generate, dacă este necesar.

2. Text alternativ

Câmpul Text alternativ asigură accesibilitatea, afișând o descriere a videoclipului dacă acesta nu se încarcă.

• Se completează automat când este adăugat un URL video acceptat.
• Poate fi personalizat pentru a corespunde nevoilor conținutului tău.

3. Miniatură personalizată

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

• Cum se activează: Activează opțiunea Miniatură personalizată.
• Formate acceptate: PNG, JPG sau GIF.
• Când se folosește: Înlocuiește miniatura generată atunci când nu se potrivește cu designul e-mailului.

4. Butonul de redare

Personalizează Butonul de redare suprapus peste miniatura videoclipului.

• Opțiuni disponibile:
  • Alege dintre stilurile de butoane de redare YouTube, Vimeo sau altele.
  • Selectează „Niciunul” 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 controla dimensiunea.
• Design responsiv: Asigură-te că videoclipul se potrivește uniform pe diferite dispozitive.

6. Ajustează la lățime

Activează comutatorul Ajustează la lățime pentru ca videoclipul să se potrivească automat pe lățimea containerului. Astfel, videoclipul își păstrează designul responsiv pe diferite dispozitive.

7. Imagine responsivă

Comutatorul Imagine responsivă asigură ajustarea miniaturii videoclipului pentru a se potrivi cu lățimea ecranului pe dispozitivele mobile.

• Notă: Caracterul responsiv depinde de compatibilitatea dispozitivului și a clientului de e-mail.

8. Aliniere

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

• Stânga: Aliniază videoclipul la stânga.
• Centru: Centrează videoclipul.
• Dreapta: Aliniază videoclipul la dreapta.

9. Opțiuni specifice dispozitivelor mobile

Personalizează comportamentul și aspectul videoclipului pe dispozitivele mobile:

1. Ascunde elementul pe mobil Ascunde blocul video pe dispozitivele mobile, dacă este necesar.

   • Notă: Această funcție se bazează pe compatibilitatea cu interogările media și este posibil să nu funcționeze în toți clienții de e-mail.

2. Spațiere interioară pe mobil Ajustează spațiul din jurul videoclipului pentru afișarea pe mobil.

   • Folosește comutatorul Mai multe pentru a seta valori individuale pentru:
     • Sus
     • Dreapta
     • Jos
     • Stânga

10. Include în AMPHTML sau HTML

Alege dacă blocul video apare în anumite versiuni ale e-mailului:

• Atât AMPHTML, cât și HTML
• Doar AMPHTML
• Doar HTML

Această opțiune asigură includerea corespunzătoare a videoclipului în funcție de versiunea e-mailului livrat.

Blocul HTML

Blocul HTML îți permite să inserezi cod HTML și CSS personalizat în e-mail, oferind flexibilitate pentru personalizări avansate și menținând compatibilitatea cu clienții de e-mail. Fie că adaugi un singur element HTML sau creezi un e-mail complet, acest bloc este instrumentul pentru designuri adaptate.

1. Interfața editorului de cod

Când selectezi Blocul HTML, în panoul de conținut apare o fereastră neagră a editorului de cod. Aceasta îți permite să scrii, să inserezi sau să modifici cod personalizat. Editorul include două secțiuni:

• Secțiunea HTML: Adaugă sau editează structura HTML a e-mailului.
• Secțiunea CSS: Deschide un editor CSS separat pentru stilizarea conținutului.

2. Ajustarea dimensiunii fontului

Ajustează dimensiunea fontului codului din editor pentru o lizibilitate mai bună:

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

3. Ajustarea dimensiunii ferestrei editorului

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

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

Această funcție este deosebit de utilă pentru gestionarea blocurilor de cod mai mari sau mai detaliate.

4. Editorul CSS

Editorul CSS îți permite să gestionezi stilurile conținutului HTML și este accesibil printr-un buton din colțul din dreapta sus al editorului de cod.

Aspecte importante:

• Compatibilitate limitată: Mulți clienți de e-mail nu acceptă funcții CSS avansate precum Flexbox, Grid sau interogări media.
• Rămâi la elementele de bază: Folosește CSS inline de bază pentru compatibilitate maximă.
• Stiluri preconfigurate: Evită ștergerea stilurilor preconfigurate, deoarece acestea asigură redarea corectă în principalii clienți de e-mail.

5. Compatibilitatea cu clienții de e-mail

HTML-ul pentru e-mailuri necesită o atenție specială din cauza motoarelor de redare învechite folosite de mulți clienți de e-mail.

Recomandări principale:

• Folosește machete bazate pe tabele în locul machetelor bazate pe <div>, pentru o compatibilitate mai bună.
• Evită funcțiile CSS avansate precum animațiile, Flexbox sau Grid.
• Așteaptă-te la un comportament neuniform în cazul interogărilor media și al proprietăților CSS mai puțin importante.
• Testare: Testează întotdeauna e-mailurile în mai mulți clienți (de exemplu, Gmail, Outlook, Apple Mail) pentru a asigura redarea corectă.

6. Spațiere interioară

Setarea Spațiere interioară ajustează spațiul din jurul conținutului HTML:

• Spațiere implicită: Setată la 0 în mod implicit.
• Spațiere personalizată: Activează comutatorul Mai multe pentru a ajusta individual spațierea pentru:
  • Sus
  • Dreapta
  • Jos
  • Stânga

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

7. Adăugarea unui link-ancoră

Funcția Adaugă link-ancoră îți permite să creezi în altă parte a e-mailului un link pe care se poate face clic și care navighează către blocul HTML.

Cum se utilizează:

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

Limitări:

• Linkurile-ancoră nu sunt acceptate de unii clienți de e-mail, precum:
  • Aplicația Gmail pentru iOS
  • Apple Mail pentru iOS
  • Aplicația Outlook (Android și macOS)
  • E-mailurile AMP

8. Scrierea codului HTML personalizat

Editorul HTML este conceput pentru scrierea sau inserarea structurii HTML personalizate a e-mailului.

Recomandări:

• Folosește HTML simplu și acceptat pe scară largă.
• Evită machetele sau funcțiile complexe, precum elementele <div>.
• Folosește designuri bazate pe tabele pentru a asigura o compatibilitate mai bună.

9. Sfaturi pentru reușită

1. Începe cu puțin: Folosește Blocul HTML pentru anumite secțiuni dacă ești la început cu dezvoltarea e-mailurilor.
2. Validează codul: Asigură-te că HTML-ul respectă cerințele clienților de e-mail.
3. Testează temeinic: Folosește instrumente pentru a previzualiza și testa e-mailul în mai mulți clienți și pe mai multe dispozitive.