Кнопки

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

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

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

Шаг 1. Настройте стиль кнопки в Style Manager

Screen_Shot_2019-09-26_at_17.34.31.png

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

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

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

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

После сохранения стиля с кнопками, вы сможете вставить их в пост, с помощью инструмента в правой панели редактора:Screen_Shot_2019-09-26_at_17.38.50.png

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

Screen_Shot_2019-09-26_at_17.41.43.png

  • Сменить тип кнопки;
  • Настроить нижний отступ;
  • Задать ссылку для перехода по клику на кнопку: 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 стиля.

* Кнопки доступны только клиентам на платных тарифах.