Chapters

Contents

the email tool that makes email marketing simple

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

Настройки на редактора за имейли с плъзгане и пускане Stripo

Published: · Last updated: · By

In brief

Научете как да оформяте имейли в редактора Stripo: структури, блокове, изображения, текст, бутони, видео, HTML и настройки за мобилни устройства.

От дясната страна на редактора за имейли на Maildroppa ще откриете колоната с настройки на имейла, която предоставя инструменти за структуриране и персонализиране на съдържанието и изгледа на вашия имейл. Тази колона е разделена на два раздела: Съдържание и Външен вид.

Колона с настройки на имейла в редактора за имейли Stripo

Раздел „Съдържание“

Разделът Съдържание е мястото, където проектирате и организирате съдържанието на имейла си. Той съдържа два основни раздела: Структури и Блокове.

Основни раздели – структури и блокове

1. Структури

Структури в редактора за имейли

Структурите определят оформлението на имейла ви, като подреждат съдържанието в редове и колони. Можете да избирате от различни предварително проектирани оформления, например:

  • Една колона
  • Две колони
  • Много колони

Не сте ограничени само до тези опции — можете да комбинирате множество блокове, за да създадете всяко желано персонализирано оформление, което ви дава пълна гъвкавост според нуждите на дизайна ви.

  • Плъзгане и пускане: Просто плъзнете структура от този раздел и я пуснете в работната област на дизайна на имейла, за да започнете да добавяте съдържание.
  • Персонализиране: След като добавите структура, можете да я запълните с различни блокове съдържание, като изображения, текст или бутони.

2. Блокове

Блоковете са елементите на съдържанието, които поставяте в структурите, за да изградите имейла си.

Блокове в редактора за имейли

Наличните типове блокове са:

  • Изображение: Качвайте изображения (PNG, JPG, GIF) и персонализирайте външния им вид.
  • Текст: Добавяйте и форматирайте текст, за да предадете посланието си.
  • Бутон: Добавяйте кликаеми бутони с персонализируем текст, връзки и стилове.
  • Разделител: Вмъквайте празно пространство, за да регулирате оформлението между други блокове.
  • Видео: Вграждайте видеосъдържание от платформи като YouTube, Vimeo и други.
  • HTML: Добавяйте персонализиран HTML и CSS код за разширено персонализиране на съдържанието на имейла.

Всеки блок е проектиран да бъде гъвкав и персонализируем, което ви позволява да създадете имейл, съответстващ на визията и усещането на вашата марка.

Подробно обяснение на блоковете за съдържание

Блок „Изображение“

Блок „Изображение“

Блокът „Изображение“ в редактора за имейли на Stripo с плъзгане и пускане ви позволява да добавяте и персонализирате изображения в имейл кампанията си.

Добавяне на блок „Изображение“

Можете да добавите блок „Изображение“ към имейла си по два начина:

Опция 1

Задръжте курсора над областта „Пуснете съдържанието тук“ в дадена структура и след това щракнете върху иконата за изображение. Това веднага ще превърне избраната структура в блок за изображение.

Пуснете съдържанието тук

Опция 2

Отидете в раздела Блокове в раздела „Съдържание“. Плъзнете блока „Изображение“ в желаната структура в оформлението на имейла си. Този метод ви дава по-голям контрол върху точното място, на което да поставите изображението.

Плъзгане и пускане на блок „Изображение“

Качване на изображение

След като добавите блока „Изображение“, имате два начина да качите изображение:

Плъзгане и пускане

Можете директно да плъзнете и пуснете файл с изображение (PNG, JPG, GIF) от компютъра си в полето за качване, което се появява в блока „Изображение“.

Пускане на изображение в полето за качване

Качване от компютър

Можете също да щракнете върху иконата на облак в блока „Изображение“, за да отворите файловия браузър и да изберете изображение от компютъра си (до 2 MB). След като го изберете, изображението ще се появи както в блока, така и в раздела за съдържание вдясно.

Качване на изображение от компютър

Смяна на изображението

За да замените изображението, използвайте опцията „Смяна на изображението“, която се намира в раздела за съдържание. Щракнете върху кръглата икона „Смяна на изображението“, за да качите ново изображение или да поставите връзка към изображение от външен URL адрес.

Опция „Смяна на изображението“

Редактиране на изображението

След като качите изображение, може да поискате да направите допълнителни редакции директно в платформата. Вграденият „Редактор на изображения“ на Stripo ви позволява да подобрявате и коригирате изображенията си, без да напускате редактора за имейли.

Опция „Редактиране на изображението“

Отваряне на редактора на изображения

  1. След като качите изображение, щракнете върху бутона „Редактиране на изображението“. Това отваря интерфейса на редактора на изображения.
  2. Редакторът предлага широк набор от инструменти, показани в горната лента с менюта.

Налични инструменти за редактиране на изображения

Редактор на изображения Stripo

  • Филтри Прилагайте различни филтри с едно щракване, например:

    • Нива на сивото
    • Черно-бяло
    • Изостряне
    • Инвертиране
    • Сепия
    • Яркост
    • Цвят
  • Преоразмеряване Коригирайте размерите на изображението. Можете да:

    • Зададете конкретна ширина и височина.
    • Запазите съотношението на страните.
  • Изрязване Изберете част от изображението, която да запазите, и премахнете нежеланите части.

  • Трансформиране Завъртете или обърнете изображението:

    • Хоризонтално
    • Вертикално
  • Рисуване Използвайте инструмента за рисуване, за да добавяте елементи на ръка, като линии или персонализирани форми, върху изображението.

  • Текст Добавяйте текст директно върху изображението. Персонализирайте:

    • Шрифт
    • Размер
    • Цвят
    • Подравняване
  • Форми и стикери Подобрете изображението си, като добавите:

    • Готови форми
    • Забавни стикери
  • Рамки Изберете от набор рамки, за да придадете на изображението стилна граница.

  • Ъгли Регулирайте стила на ъглите за завършен вид.

  • Фон Премахнете или заменете фона на изображението за по-чист вид.

Запазване на редакциите

След като направите желаните промени, щракнете върху бутона „Запазване“ в горния ляв ъгъл на редактора. Редактираното изображение автоматично ще замени оригинала в оформлението на имейла ви.

Настройки на изображението

След като качите изображението, можете да го персонализирате чрез опциите за настройки на изображението, налични в раздела „Съдържание“ от дясната страна.

Връзка

Добавете връзка към изображението. Можете да избирате от различни типове връзки, например:

  • Уебсайт (HTTP, HTTPS)
  • Поща (mailto:)
  • Файл (ftp)
  • Споделяне в социални мрежи (Facebook, X (преди Twitter), LinkedIn, Pinterest)

Можете да откриете тези опции в падащото меню с настройки на връзката. Различни типове връзки за изображение

Алтернативен текст

Добавете алтернативен текст, който ще се показва, ако изображението не се зареди. Този текст е полезен и за достъпността, тъй като позволява на екранните четци да опишат изображението на получатели със зрителни увреждания. Добавяне на алтернативен текст към изображението

Подравняване

Изберете как да бъде подравнено изображението в контейнера му. Можете да го подравните вляво, в центъра или вдясно. Подравняване на изображението

Размер

Коригирайте ръчно ширината и височината на изображението чрез бутоните плюс/минус или като въведете желаните размери. Коригиране на размера на изображението

Можете също да активирате опцията „Настройване според ширината“, за да може изображението автоматично да се побере в цялата ширина на контейнера.

Адаптивно изображение

Активирайте опцията „Адаптивно изображение“, за да се уверите, че изображението се адаптира към различни размери на екрана, особено на мобилни устройства. Адаптивно изображение

Вътрешен отстъп

Персонализирайте отстъпа около изображението, за да контролирате пространството между изображението и заобикалящото съдържание. Можете да приложите еднакъв отстъп или да го персонализирате за всяка страна (Отгоре, Отдолу, Отляво, Отдясно). Опция за вътрешен отстъп

Котвени връзки

Можете да зададете котвена връзка към изображението, която да позволява на получателите да преминат към конкретен раздел в същия имейл, когато щракнат върху изображението. Имайте предвид обаче, че котвените връзки може да не работят в определени имейл клиенти, като Gmail и Apple Mail. Котвена връзка

Текстов блок

Текстов блок

Подобрете текстовите си блокове, като персонализирате външния им вид и функционалността чрез следните настройки. Всяка опция ви позволява да настроите прецизно начина, по който се показва текстът, така че да съответства напълно на предпочитанията ви за дизайн.

Лента с инструменти за текст

Лента с инструменти за текст

Когато щракнете в текстов блок, над областта със съдържанието се появява лентата с инструменти за текст, която осигурява бърз достъп до много често използвани опции за форматиране на текст. Ето функциите, налични в лентата с инструменти:

1. Формат на абзаца

Задайте стила на абзаца, като избирате опции като Нормален за обикновен текст или различни нива на заглавия (Заглавие 1 до Заглавие 6) за създаване на структурирана йерархия в имейла ви. Това прави съдържанието по-четливо и организирано. Формат на абзаца

2. Шрифтово семейство

Шрифтът по подразбиране е Arial, но можете да избирате от различни шрифтове, включително често използвани опции като Georgia, Helvetica и Courier New. Има и функция за търсене, с която бързо да откриете конкретен шрифт. Избор на шрифт

3. Размер на шрифта

Регулирайте размера на шрифта от 8pt до 72pt. Стандартната стойност е 14pt, която е подходяща за повечето основни текстове в имейли. Използвайте падащото меню, за да зададете бързо желания размер. Избор на размер на шрифта

4. Стилиране на текста

Стилизирайте текста си чрез следните опции:

  • Получер (B): Подчертава текста, като го прави получер.
  • Курсив (I): Изписва текста в курсив за по-стилизиран вид.
  • Подчертаване (U): Подчертава текста, което обикновено се използва за хипервръзки.
  • Зачертаване (S): Прокарва линия през текста, което е полезно за редакции или премахнато съдържание. Избор на стил

5. Разширено стилизиране на текста (меню с три точки)

Щракването върху трите точки в лентата с инструменти разширява допълнителните опции:

  • Долен индекс: Поставя текста под базовата линия (полезно за бележки под линия или химични формули).
  • Горен индекс: Повдига текста над базовата линия (обикновено се използва за степени или поредни числа).
  • Премахване на форматирането: Премахва приложеното форматиране и връща текста към стила му по подразбиране. Избор на разширено стилизиране

6. Цвят на текста и фона

  • Цвят на текста: Щракнете върху бутона за цвят на текста, за да изберете от палитра или да въведете hex код за прецизен контрол върху цвета на текста.
  • Цвят на фона: Изберете цвят на фона (маркирането) за текста. Избор на цвят

7. Подравняване на текста

Подравнете текста в блока:

  • Подравняване вляво: Подравнява текста вляво.
  • Центриране: Центрира текста.
  • Подравняване вдясно: Подравнява текста вдясно.
  • Двустранно подравняване: Разпределя текста равномерно по ширината на блока. Избор на подравняване на текста

8. Списъци

Създавайте номерирани и неномерирани списъци:

  • Вмъкване/премахване на списък с водещи символи: Добавя или премахва водещи символи.
  • Вмъкване/премахване на номериран списък: Добавя или премахва номериран списък. Вмъкване на списък

9. Пренасяне на редове

Активирайте или деактивирайте пренасянето на редове в текстовия блок. Когато е активирано, дългите редове текст автоматично преминават на следващия ред. Активиране или деактивиране на пренасянето на редове

10. Отстъп

Регулирайте отстъпа на текста:
- **Увеличаване на отстъпа**: Премества текста по-далеч от полето, което е полезно за подточки или цитати.
- **Намаляване на отстъпа**: Намалява отстъпа и приближава текста до лявото поле.
![Отстъп на текста](https://cms.maildroppa.com/assets/0146b155-9fe5-4495-be1c-19dcf1427639)

11. Вмъкване на хипервръзка

Научете как да добавяте, редактирате и управлявате хипервръзки в съдържанието на имейла си.

Стъпки за добавяне или редактиране на връзка
a) Маркирайте текста

Изберете текста, който искате да превърнете в хипервръзка. Маркиране на текста, който искате да превърнете във връзка

b) Щракнете върху иконата за връзка

В лентата с инструменти за текст щракнете върху иконата за връзка. Икона за връзка

c) Редактирайте връзката в панела с настройки

Ще се появи панелът с настройки от дясната страна с опции за връзката:

  • Поле за връзка: Въведете URL адреса или изберете от предварително зададени опции.
  • Етикет: Добавете етикети, за да обозначите абонати или да задействате автоматизации. Добавяне на връзка и етикет
Коригиране на връзки след изпращане

Няма нищо по-лошо от това да изпратите нова кампания до своите 2365 абонати, само за да установите, че една от връзките е повредена заради обикновена печатна грешка. Сбогом, разпродажби за Черния петък!

За щастие, направихме възможно коригирането на повредени връзки — дори след като имейлът вече е изпратен до абонатите ви.

a) Преглед на кампанията

Намерете изпратената кампания в общия преглед, щракнете върху трите точки и изберете „Преглед на кампанията“. Щракване върху „Преглед на кампанията“

b) Промяна на връзки или етикети

Превъртете до списъка с връзки в подробностите за кампанията, за да:

  • Актуализирате целите на връзките: Коригирате неправилни URL адреси.
  • Управлявате етикети: Добавяте или премахвате етикети за автоматизации. Актуализиране на връзка в кампания

Забележка: Уверете се, че проследяването на кликванията е активирано в настройките на кампанията, за да използвате функцията за пренасочване на връзки.

Персонализиране на изгледа на връзката

В панела с настройки от дясната страна можете да коригирате изгледа на връзката:

  • Цвят на връзката: Изберете цвят или въведете hex код. Настройки за цвят на връзката

  • Подчертаване на връзките: Активирайте или деактивирайте подчертаването за по-изчистен вид. Настройки за подчертаване на връзките

12. Тагове за персонализиране

Използвайте тагове за персонализиране, за да добавяте динамично съдържание, като собственото име на получателя или други персонализирани полета.

  • Отворете падащото меню „Тагове за персонализиране“ в лентата с инструменти, за да изберете често използвани полета като Собствено име, Имейл или Държава, или дефинирайте персонализирани полета, за да адаптирате имейлите за всеки получател. Добавяне на таг за персонализиране

13. Емоджи

Добавете визуална привлекателност към текста си, като включите емоджи.

  • Щракнете върху иконата за емоджи в лентата с инструменти, за да отворите категоризиран списък с емоджи за лесно разглеждане.
  • Забележка за съвместимостта: Тествайте имейлите си в определени клиенти като Outlook, тъй като някои може да не показват емоджи правилно. Избор на емоджи

14. Таблица и специални символи

В края на лентата с инструменти щракнете върху трите точки, за да разкриете още разширени опции. Допълнителни опции – вмъкване на таблица или специални символи

Вмъкване на таблица

Създавайте и персонализирайте таблици, за да подобрите оформлението на имейла си.

  • Задавайте редове, колони, разстояние между клетките, вътрешен отстъп и размер на рамката според нуждите си. Добавяне на таблица и задаване на свойствата ѝ
Вмъкване на специални символи

Подобрете текста си със символи, знаци с ударения и други нестандартни символи.

  • Отворете опцията „Специални символи“, за да разгледате голямо разнообразие от знаци. Вмъкване на специални символи

Допълнителни настройки на текстовия блок (десен панел)

Десният панел предлага обширен контрол върху външния вид и функционалността на текстовите блокове. По-долу са наличните настройки:

1. Цвят на текста

Задайте цвета на текста чрез инструмента за избор на цвят или като въведете hex код. Избор на цвят на текста

2. Цвят на фона

Задайте персонализиран цвят на фона на текстовия блок. По подразбиране фонът е прозрачен. Избор на цвят на фона

3. Специфични настройки на връзките

Когато текстовият блок съдържа връзки, в настройките се появяват допълнителни опции:

  • Цвят на връзката: Коригирайте цвета на връзките чрез инструмента за избор на цвят или hex код. Избор на цвят на връзката

  • Подчертаване на връзките: Включете или изключете опцията за подчертаване на връзките в текстовия блок. Подчертаване на връзките

  • Редактиране на връзка: Изберете връзка в областта със съдържанието, за да редактирате нейния URL адрес в панела с настройки. Можете също да задавате или актуализирате етикети за връзката чрез падащото меню с надпис „Етикети“. Редактиране на връзка и добавяне на етикет

4. Подравняване

Подравнете текстовия блок в контейнера му: Вляво, В центъра или Вдясно. Задаване на подравняването

5. Фиксирана височина

Задайте фиксирана височина на текстовия блок, като активирате тази опция. Можете също да контролирате вертикалното подравняване на текста: Отгоре, В средата или Отдолу. Задаване на фиксирана височина

6. Междуредово разстояние

Контролирайте разстоянието между редовете текст. Избирайте между Тясно, Нормално или Широко. Избор на междуредово разстояние

7. Вътрешен отстъп

Регулирайте пространството около текстовия блок. Приложете еднакъв отстъп или персонализирайте всяка страна: Отгоре, Отдолу, Отляво и Отдясно. Коригиране на вътрешния отстъп

8. Котвени връзки

Създавайте котвени връзки, за да могат читателите да преминават към конкретни раздели на имейла ви. Имайте предвид, че някои имейл клиенти не поддържат котвени връзки. Добавяне на котвена връзка

Блок „Бутон“

Блок „Бутон“

Блокът „Бутон“ ви позволява да добавяте кликаем бутон към имейла си с персонализируеми настройки за функционалност и стил.

Настройки на връзката

Опцията „Връзка“ определя действието, което се задейства, когато получателят щракне върху бутона. Връзка на бутона

Налични типове връзки
  • Обикновена връзка към сайт (HTTP или HTTPS): Пренасочва потребителя към уебстраница.
  • Връзка към поща: Отваря имейл клиента на потребителя за създаване на нов имейл.
  • Връзка към файл (FTP, FTPS): Води към файл на FTP сървър.
  • Skype: Инициира разговор или чат в Skype.
  • Телефон (tel): Започва телефонно обаждане на съвместими устройства.
  • SMS: Отваря приложението за съобщения с предварително попълнен номер на получателя.
  • Viber: Отваря приложението Viber за съобщения или разговори.
  • Друг тип протокол: Задайте персонализиран протокол, който не е посочен по-горе.
Опции за споделяне в социални мрежи

Можете също да настроите бутона за споделяне в социални мрежи или по имейл:

  • Facebook
  • X (преди Twitter)
  • LinkedIn
  • Pinterest
  • Споделяне по имейл
Поле за URL адрес

До типа връзка полето за URL адрес (обикновено започващо с https://) ви позволява да въведете конкретния адрес, съответстващ на типа връзка.

Етикет на бутона

Персонализирайте етикета на бутона, така че да отразява призива ви към действие. Етикетът по подразбиране е „Бутон“, но можете да го промените на опции като „Научете повече“, „Абонирайте се сега“ или „Пазарувайте сега“. Етикет на бутона

Стил на текста

Настройките за стил на текста ви позволяват да коригирате изгледа на текста на бутона. Стил на текста на бутона

Избор на шрифт

Избирайте от различни стандартни шрифтове, включително:

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

За нестандартни шрифтове са налични допълнителни опции:

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

В горната част на списъка с шрифтове поле за търсене ви помага бързо да откриете конкретен шрифт.

Размер и форматиране на шрифта
  • Размер на шрифта: Избирайте между 8 и 72 в зависимост от това колко видим искате да бъде текстът на бутона.
  • Форматиране на текста: Прилагайте стил Получер или Курсив чрез иконите „B“ или „I“, за да подчертаете текста на бутона.

Настройки на цветовете

Персонализирайте външния вид на бутона, като регулирате настройките му за цвят.

  1. Цвят на бутона: Променете цвета на фона на бутона. Стандартният е зелен (#31cb4b). Използвайте полето за hex код или инструмента за избор на цвят, за да изберете нов цвят. Цвят на бутона

  2. Цвят на текста: Задайте цвета на текста на бутона. Стандартният е бял (#ffffff). Изберете цвят, който контрастира добре с фона на бутона за по-добра четливост. Цвят на текста на бутона

  3. Цвят на фона: Коригирайте фона на контейнера на бутона. По подразбиране той е прозрачен, но можете да го промените, за да изпъкне бутонът на фона на имейла. Цвят на фона на бутона

Радиус на рамката

Контролирайте заоблянето на ъглите на бутона чрез настройката „Радиус на рамката“.

  • Стандартна стойност: 30 (умерено заоблени ъгли).
  • Диапазон: от 0 (квадратни ъгли) до 100 (бутон с форма на хапче). Радиус на рамката на бутона

Забележка: За да се показват правилно заоблените ъгли в Microsoft Outlook, активирайте опцията „Поддръжка на Outlook“ в раздела „Външен вид“.

Подравняване

Позиционирайте бутона в областта му за съдържание чрез настройката „Подравняване“.

  • Опции: Вляво, В центъра, Вдясно.
  • Обичайна употреба: Центриране за акцент, подравняване вляво или вдясно за съответствие с дизайна. Подравняване на бутона

Фиксирана височина

Активирайте опцията „Фиксирана височина“, за да поддържате постоянни размери на бутона.

  1. По подразбиране: Деактивирана.
  2. Минимална височина: 44 пиксела.
  3. Вертикално подравняване на съдържанието: Когато е активирана фиксирана височина, подравнете съдържанието на бутона Отгоре, В средата или Отдолу за прецизно позициониране. Фиксирана височина на бутона

Бутон с икона

Опцията „Бутон с икона“ ви позволява да включите икона до текста на бутона, което подобрява визуалното въздействие и подсилва призива към действие. Тази функция е деактивирана по подразбиране. Бутон с икона

  • Поддържани формати: Качвайте икони във формат PNG, JPG или GIF, с максимален размер на файла 2 MB.
  • Позициониране на иконата: Изберете дали иконата да се показва от лявата или дясната страна на текста на бутона.

Забележка: Иконите не се показват в определени версии на Microsoft Outlook за Windows, включително:

  • Outlook 2002, 2007, 2010, 2013, 2016 и 2019. Това ограничение се дължи на начина, по който тези имейл клиенти визуализират HTML имейли. Имайте го предвид, ако голяма част от аудиторията ви използва тези клиенти.

Настройки на рамката

Персонализирайте рамките на бутона за допълнителен стил и акцент. Коригиране на рамката на бутона

  • Ширина на рамката: Задайте ширината за всяка страна (лява, дясна, горна и долна) поотделно, до 40 пиксела.
  • Стил на рамката: Избирайте между стилове Плътна, Прекъсната или Точкова линия.
  • Цвят на рамката: Използвайте инструмента за избор на цвят или въведете hex код, за да съобразите цвета на рамката с марката или цветовата схема на дизайна си.

Вътрешен отстъп

Регулирайте пространството вътре в бутона, между съдържанието (текста и иконата) и рамката на бутона. Вътрешен отстъп на бутона

  • Опции за персонализиране: Задайте стойности на отстъпа за страните Лява, Дясна, Горна и Долна, до максимум 99 пиксела.
  • Въздействие: Вътрешният отстъп влияе върху общия размер на бутона и позицията на съдържанието в него.

Външен отстъп

Контролирайте пространството извън бутона, за да коригирате позицията му спрямо други елементи в оформлението на имейла. Външен отстъп на бутона

  • Опции за персонализиране: Задайте стойности на външния отстъп за страните Лява, Дясна, Горна и Долна, до максимум 40 пиксела.
  • Употреба: Гарантира, че бутонът няма да изглежда прекалено близо до друго съдържание или до краищата на имейла.

Добавяне на котвена връзка

Използвайте котвени връзки, за да насочвате читателите към конкретни раздели в същия имейл, осигурявайки бърза навигация в по-дълги бюлетини. Котвена връзка на бутона

  • Име на котвата: Дефинирайте цел в имейла и свържете бутона с тази котва. Когато бъде натиснат, имейлът ще превърти до посочения раздел, което подобрява навигацията на потребителя.

Важно: Котвените връзки не се поддържат в определени имейл клиенти, включително:

  • Приложението Gmail за iOS
  • Apple Mail за iOS
  • Приложението Outlook за Android
  • Приложението Outlook за macOS
  • AMP имейли

Тествайте внимателно имейла си, за да гарантирате функционалност в различни имейл клиенти и да прецените дали тази функция е подходяща за аудиторията ви.

Блок „Разделител“

Блок „Разделител“

Блокът „Разделител“ ви позволява да добавяте регулируемо пространство в съдържанието на имейла си, като ви дава контрол върху размера, подравняването, изгледа и вътрешното разстояние. По-долу ще откриете подробности за двата типа разделители: Нормален разделител и Динамичен разделител. Опции за разделителя

1. Нормален разделител

Нормалният разделител е линеен елемент, който визуално отделя разделите в имейла ви. Елемент на разделител по подразбиране

Основни настройки
  1. Дебелина и стил на линията Персонализирайте дебелината, стила и цвета на линията:

    • Дебелина: Регулирайте чрез бутоните + и - (начална стойност 1).
    • Стил: Избирайте между плътен, прекъснат или точков.
    • Цвят: Задайте персонализиран цвят чрез hex код или инструмента за избор на цвят (по подразбиране: #cccccc). Стил на линията на разделителя
  2. Ширина Определете каква част от съдържанието да обхваща линията на разделителя. Регулирайте ширината в пиксели чрез бутоните + и -.

  3. Подравняване Подравнете линията вляво, в центъра или вдясно, така че да съответства на оформлението ви.

  4. Вътрешен отстъп Контролирайте вътрешното пространство около разделителя:

    • По подразбиране: Отстъпът е зададен на 20 от всички страни.
    • Използвайте превключвателя „Още“, за да зададете отстъп за отделните страни:
      • Отгоре
      • Отдясно
      • Отдолу
      • Отляво Вътрешен отстъп на разделителя

Употреба

Нормалният разделител е идеален за създаване на чисто визуално отделяне между разделите в имейла ви, като гарантира добре организирано и професионално оформление.

2. Динамичен разделител

Динамичният разделител е невидим блок от празно пространство, предназначен да създава визуален простор в оформлението на имейла ви. Динамичен разделител

Основни функции
  1. Регулиране на височината Регулирайте височината директно в областта със съдържанието или чрез контролния панел с бутоните + и -. Височината определя колко вертикално пространство се добавя между разделите.

  2. Цвят на фона По подразбиране разделителят има прозрачен фон, но можете да приложите персонализиран цвят на фона чрез hex код или инструмента за избор на цвят. Така разделителят може да функционира като видим блок, ако е необходимо.

  3. Адаптивно поведение Опцията „Адаптивен разделител“ гарантира, че разделителят се адаптира динамично към различни размери на екрана за оптимално оформление на различни устройства. Тази функция е активирана по подразбиране. Опции за динамичния разделител

Основни разлики между нормалните и динамичните разделители
  • Динамичен разделител: Добавя празно пространство без видима линия.
  • Нормален разделител: Включва специфични настройки за линията, като:
    • ширина на линията
    • подравняване
    • стилове на линията
    • вътрешен отстъп

Динамичният разделител не поддържа тези функции и е предназначен единствено за отделяне без визуални елементи.

3. Добавяне на котвена връзка

Котвени връзки могат да се прилагат и към двата типа разделители, което позволява на потребителите да преминават директно към местоположението на разделителя от друга част на имейла. Това е особено полезно за създаване на навигация в имейла при по-дълги бюлетини.

Забележка: Котвените връзки не се поддържат от определени имейл клиенти, включително:

  • Microsoft Outlook
  • Gmail (на мобилни устройства)

Блок „Видео“

Избор на блокове с маркиран блок „Видео“ между блоковете „Разделител“ и „HTML“

Блокът „Видео“ ви позволява да вграждате видеоклипове в имейла си и да персонализирате изгледа и поведението им. Той поддържа видео връзки от платформи като YouTube и Vimeo, осигурявайки гъвкавост и контрол върху начина, по който се представя видеото. Настройки на блока „Видео“ с полета за видео връзка, алтернативен текст, персонализирана миниатюра и стил на бутона за възпроизвеждане до визуализация на имейл

1. Връзка към видео

Добавете URL адреса на видеото в полето „Връзка към видео“. Поддържаните платформи включват YouTube, Vimeo и други услуги, позволяващи вграждане. Връзка към видео

  • Автоматично поведение: Когато добавите валиден URL адрес:

    • Автоматично се генерира изображение за визуализация, като се използва миниатюрата на видеото от платформата.
    • Полето „Алтернативен текст“ се попълва автоматично със заглавието или описанието на видеото (ако е налично).
  • Редактируеми полета: При необходимост можете ръчно да редактирате или замените генерираното изображение за визуализация и текста.

2. Алтернативен текст

Полето „Алтернативен текст“ осигурява достъпност, като показва описание на видеото, ако то не се зареди. Добавяне на алтернативен текст към видео

  • Попълва се автоматично при добавяне на поддържан URL адрес на видео.
  • Може да се персонализира според нуждите на съдържанието ви.

3. Персонализирана миниатюра

Качете персонализирано изображение, за да замените стандартната визуализация на видеото. Добавяне на персонализирана миниатюра за видео

  • Как се активира: Включете опцията „Персонализирана миниатюра“.
  • Поддържани формати: PNG, JPG или GIF.
  • Кога да я използвате: Заменете генерираната миниатюра, когато не съответства на дизайна на имейла ви.

4. Бутон за възпроизвеждане

Персонализирайте наслагвания бутон за възпроизвеждане върху миниатюрата на видеото. Избор на персонализиран бутон за възпроизвеждане на видео

  • Налични опции:
    • Избирайте между стилове на бутони за възпроизвеждане от YouTube, Vimeo или други.
    • Изберете „Няма“, за да скриете бутона за възпроизвеждане изцяло.

5. Размер

Регулирайте размерите на видеото, така че да съответстват на дизайна на имейла ви. Коригиране на размера на видеото

  • Ширина и височина: Използвайте бутоните + и - или въведете стойности ръчно, за да контролирате размера.
  • Адаптивен дизайн: Уверете се, че видеото се побира безпроблемно на различни устройства.

6. Настройване според ширината

Активирайте превключвателя „Настройване според ширината“, за да може видеото автоматично да се побере в ширината на контейнера си. Така видеото запазва адаптивния си дизайн на различни устройства. Настройване на видеото според ширината

7. Адаптивно изображение

Превключвателят „Адаптивно изображение“ гарантира, че миниатюрата на видеото се адаптира към ширината на екрана на мобилни устройства.

  • Забележка: Адаптивността зависи от поддръжката от устройството и имейл клиента. Адаптивно изображение на видео

8. Подравняване

Използвайте настройката „Подравняване“, за да контролирате хоризонталното позициониране на видеото в блока:

  • Вляво: Подравнява видеото вляво.
  • В центъра: Центрира видеото.
  • Вдясно: Подравнява видеото вдясно. Коригиране на подравняването на видеото

9. Опции за мобилни устройства

Персонализирайте поведението и изгледа на видеото на мобилни устройства:

  1. Скриване на елемента на мобилно устройство Скрийте блока с видеото на мобилни устройства, ако е необходимо.

    • Забележка: Тази функция разчита на поддръжката на медийни заявки и може да не работи във всички имейл клиенти.
  2. Мобилен вътрешен отстъп Регулирайте отстъпа около видеото за мобилни екрани.

    • Използвайте превключвателя „Още“, за да зададете отделни стойности за отстъп:
      • Отгоре
      • Отдясно
      • Отдолу
      • Отляво Скриване на видеото на мобилно устройство

10. Включване в AMPHTML или HTML

Изберете дали блокът с видеото да се показва в конкретни версии на имейла:

  • И AMPHTML, и HTML
  • Само AMPHTML
  • Само HTML

Тази опция гарантира, че видеото ще бъде включено правилно според версията на имейла, която се доставя. Скриване на видеото в AMPHTML или HTML

HTML блок

Избор на блокове с маркиран блок „Видео“ между блоковете „Разделител“ и „HTML“

HTML блокът ви позволява да вмъквате персонализиран HTML и CSS код в имейла си, осигурявайки гъвкавост за разширени персонализации при съобразяване със съвместимостта на имейл клиентите. Независимо дали добавяте един HTML елемент или проектирате цял имейл, този блок е инструментът ви за персонализирани дизайни.

1. Интерфейс на редактора на код

Когато изберете HTML блока, в панела за съдържание се появява черен прозорец на редактора на код. Този редактор ви позволява да пишете, поставяте или променяте персонализиран код. Редакторът включва два раздела:

  • HTML раздел: Добавяйте или редактирайте HTML структурата на имейла си.
  • CSS раздел: Отваряйте отделен CSS редактор, за да стилизирате съдържанието. HTML редактор за имейли

2. Регулиране на размера на шрифта

Регулирайте размера на шрифта на кода в редактора за по-добра четливост:

  • Използвайте бутона A+, за да увеличите размера на шрифта.
  • Използвайте бутона A-, за да намалите размера на шрифта. Регулиране на размера на шрифта в редактора

3. Регулиране на размера на прозореца на редактора

Преоразмерете прозореца на редактора на код според предпочитанията си за работа:

  • Как се регулира:
    • Задръжте курсора над трите точки в горния централен край на прозореца на редактора.
    • Плъзнете контрола на плъзгача нагоре или надолу, за да увеличите или намалите размера на редактора.

Тази функция е особено полезна при управление на по-големи или по-подробни блокове код. Регулиране на размера на прозореца на HTML редактора

4. CSS редактор

CSS редакторът ви позволява да управлявате стиловете на HTML съдържанието си и е достъпен чрез бутон в горния десен ъгъл на редактора на код.

Важни съображения:

  • Ограничена поддръжка: Много имейл клиенти не поддържат разширени CSS функции като Flexbox, Grid или медийни заявки.
  • Придържайте се към основните функции: Използвайте основен вграден CSS за максимална съвместимост.
  • Предварително конфигурирани стилове: Избягвайте да изтривате предварително конфигурираните стилове, тъй като те гарантират правилно визуализиране в основните имейл клиенти. Пример за CSS редактор

5. Съвместимост с имейл клиенти

HTML кодът за имейли изисква специално внимание заради остарелите механизми за визуализиране в много имейл клиенти.

Основни насоки:

  • Използвайте оформления, базирани на таблици, вместо оформления, базирани на <div>, за по-добра поддръжка.
  • Избягвайте разширени CSS функции като анимации, Flexbox или Grid.
  • Очаквайте непоследователно поведение при медийни заявки и незначителни CSS свойства.
  • Тестване: Винаги тествайте имейлите в множество клиенти (например Gmail, Outlook, Apple Mail), за да гарантирате правилно визуализиране.

6. Вътрешен отстъп

Настройката „Вътрешен отстъп“ регулира пространството около HTML съдържанието ви:

  • Отстъп по подразбиране: По подразбиране е зададен на 0.
  • Персонализиран отстъп: Активирайте превключвателя „Още“, за да регулирате отделния отстъп за:
    • Отгоре
    • Отдясно
    • Отдолу
    • Отляво

Тази функция е идеална за подравняване на HTML съдържание в оформлението на имейла. Пример за HTML вътрешен отстъп

7. Добавяне на котвена връзка

Функцията „Добавяне на котвена връзка“ ви позволява да създадете кликаема връзка на друго място в имейла, която да води към HTML блока.

Как се използва:

  • Включете опцията и въведете име на котвата в полето.

Ограничения:

  • Котвените връзки не се поддържат от някои имейл клиенти, като:
    • Приложението Gmail за iOS
    • Apple Mail за iOS
    • Приложението Outlook (Android и macOS)
    • AMP имейли

Пример за HTML котва

8. Писане на персонализиран HTML

HTML редакторът е предназначен за писане или поставяне на персонализираната HTML структура на имейла ви.

Най-добри практики:

  • Използвайте прост HTML код с широка поддръжка.
  • Избягвайте сложни оформления или функции като елементи <div>.
  • Придържайте се към дизайни, базирани на таблици, за по-добра съвместимост.

9. Съвети за успех

  1. Започнете с малко: Използвайте HTML блока за конкретни раздели, ако сте начинаещи в разработката на имейли.
  2. Проверявайте кода: Уверете се, че HTML кодът ви отговаря на изискванията на имейл клиентите.
  3. Тествайте внимателно: Използвайте инструменти за визуализация и тестване на имейла в множество клиенти и на различни устройства.

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.