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

Управляйте внешним видом кнопок: добавьте фирменные цвета и шрифты, задайте границы, создавая дизайн для различных состояний кнопки. Каждый стиль в Setka Editor может хранить неограниченное количество вариантов. На этапе верстки поста на кнопке можно написать любой текст.

 

Примечание: кнопки доступны для тарифа Pro или выше.

 

Чтобы добавить кнопку, проделайте следующее:

Шаг 1. Настройте стиль кнопки в Управлении дизайн системой

Вы можете задать:

• Название кнопки;
• Стиль текста;
• Толщину и скругление бордера;
• Цвета текста, обводки и фона для разных состояний кнопки — до взаимодействия, по наведению или при клике.

Количество кнопок в рамках одного стиля — не ограничено.

Шаг 2. Вставьте кнопку в пост

После сохранения стиля с кнопками, вы сможете вставить их в пост, с помощью инструмента в правой панели редактора:

В верхней панели инструментов вы можете поправить настройки вставленной кнопки:

• Сменить тип кнопки;
• Настроить нижний отступ;
• Задать ссылку для перехода по клику на кнопку: URL, переход по якорю, а также ввести телефонный номер — для этого введите tel:5555555555 в поле для ввода ссылки;
• Настроить анимацию;
• Сделать кнопку якорем;
• Управлять видимостью кнопки на разных типах устройств.

Дополнительное управление стилями кнопок

Вы можете дополнительно управлять некоторыми стилями кнопок с помощью Custom CSS стиля. 

1. Узнайте класс кнопки, которую вы хотите кастомизировать по инструкции, описанной в пункте "Шаг 1. Узнаем класс элемента"

2. Сделать кнопку тянущейся на всю ширину того элемента, в который она вставлена (параграф, колонка и тп)

.stk-theme_30507__stk-btn_basic.stk-reset {
  align-self: stretch;
  justify-self: stretch;
  text-align: center;
}

2. Управление отступами от краев кнопки до текста внутри нее

.stk-theme_30507__stk-btn_basic.stk-reset {
  padding: .5em 3em;
}

Где .5em — отступ сверху и снизу от текста до краев кнопки, 3em — по бокам.

Эти стили будут работать при условии, что у вас включена галочка "Apply to post only" в попапе редактирования Custom CSS стиля.