Работа в онлайн-редакторе. Кнопки

В предыдущих статьях мы разобрались с тем, как в макет письма добавить текст и изображение. В этот раз мы научимся вставлять кнопки.

В отличие от предыдущих сниппетов (блоков) кнопки находятся только в одном:


Однако, это не просто блок с кнопкой, например, как этот:

а сочетание текста, изображения и кнопки:

Итак, выбираем подходящий блок и добавляем в макет письма. Наводим курсором на кнопку - появляется 2 иконки:


 - нажимаем, чтобы сделать кнопку кликабельной, активной ссылкой. Появляется диалоговое окно для ввода настроек:


URL - окно для ввода самой ссылки;

Текст - призыв к действию. Например: перейти, купить, прочитать и т.д.

Цель - это где именно открыть страницу - здесь же или в новом  окне.

Вводим нужные данные и нажимаем "Ok"

 - переход к настройкам внешнего вида кнопки. Нажмите и слева появится панель для редактирования.


Пойдем по порядку.

 - нажимаем на строку - появляется палитра. Выбираем на ней цвет, и видим результат сразу на кнопке:


 - внешняя обводка кнопки. Если не нужна - оставьте "0" в размерах и/или "нет" в выборе стиля линии, как на примере. Если нужна, то задайте стиль линии, ее цвет и толщину:


РАДИУС СКРУГЛЕНИЯ


Благодаря этой замечательной опции, мы можем получить как классическую прямоугольную кнопку (радиус 0), так и практически, овальную (радиус 50):


А как же мне изменить размер кнопки? - спросите вы.

Кнопка уменьшается / увеличивается пропорционально изменению размеров текста внутри нее:


а также, за счет манипуляций с внутренними отступами:


Помимо размера, мы можем задать цвет надписи:

А также выбрать шрифт:

Благодаря функции "внешний отпуск", вы можете позиционировать кнопку по горизонтали. По середине:

По левому краю:По правому краю:


Основные настройки кнопок мы рассмотрели. Теперь вы с легкостью сможете добавлять их в свои письма. И не только их - о том, как добавить и настроить иконки соц. сетей читайте в этой статье.