Гид по кнопкам в Tilda

Кнопка — один из ключевых CTA-элементов на любом сайте. Она содержит текст и ссылку, работает как инструмент навигации и продающий компонент. Ее оформление и расположение напрямую влияют на конверсию страницы. 

Разбираем, как делать кнопки в стандартных и нулевых блоках Tilda, и на что обращать внимание при дизайне.

Как создать кнопку в базовом блоке

В меню слева находим раздел «Кнопки». Внутри — много разнообразных шаблонов: от самых простых до полноценных композиций с фоном, дополнительным текстом, картинками.

Можно условно разбить кнопки на 3 категории относительно функций.

Призыв к действию на сайте: купить, скачать, оставить заявку.

Навигация: наверх, показать еще, перейти в другой раздел.

Ссылка на внешние ресурсы: соцсети, магазины приложений.

Дизайн кнопки

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

В разделе «Стиль кнопки» можно изменить внешний вид, размер, цвет фона и текста, цвет при наведении, скругление, а также добавить обводку, эффект, анимацию.

Кастомизация делает кнопку заметнее для пользователя и дополнительно мотивирует к целевому действию.

Дизайн необязательно придумывать самостоятельно: Tilda предоставляет пресеты. Нажимаем на кнопку рядом с заголовком и выбираем креативное оформление. Для каждого есть несколько цветовых гамм.

Дизайн блока с кнопкой

Для настройки переходим в раздел «Контент».  

Можно добавить/убрать кнопки и поменять их местами.

В разделе «Настройки» найдем еще одну полезную фишку — размер отступа между кнопками.

Стандартные блоки широко кастомизируются, но возможности все равно ограничены. Структуру блока и местоположение элементов поменять практически нельзя. Обойти это препятствие помогает нулевой блок — внутренний конструктор Tilda.

Как создать кнопку в zero-блоке

Нажимаем Zero в нижнем меню, чтобы добавить нулевой блок.

Внутри него можно создавать кнопки различными способами.

Обычная кнопка. Добавляем элемент Button через «+» в левом верхнем углу:

Задаем какие угодно настройки: цвета, шрифты, тени, эффекты, смену цвета при наведении, обводки и прочее.

Элемент можно расположить в любом месте — это выгодно отличает zero-блоки от стандартных. Главное — добавить ссылку, чтобы переадресация работала.

Самодельная кнопка. Если нужна кнопка необычной формы или с нестандартным оформлением, можно создать ее с нуля. 

Добавляем фигуру из меню слева, кликаем по ней и в «Настройках» элемента выбираем тип: прямоугольник или круг.   

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

Дальше объединяем элементы: нажимаем ПКМ → «Сгруппировать» в открывшемся окне или сочетание клавиш Ctrl + G. 

Выбираем тип группы — «Объект». Так прямоугольник + текст будут работать как единое целое. При клике в любое место ссылка точно откроется, а если добавим анимацию, то она применится ко всей конструкции. 

В меню слева находим поле URL и добавляем ссылку.

Еще более экзотическую кнопку можно отрисовать вручную с инструментом «Вектор». Конструируем элемент любой формы и вставляем в него ссылку.  

Кнопка-картинка. Один из способов — вставить картинку внутрь фигуры. Для примера: нажимаем на прямоугольник, в меню справа кликаем «Загрузить файл» в разделе «Фоновое изображение». 

Картинка впишется ровно в фигуру:

Так можно добавить фирменный фон, чтобы подчеркнуть айдентику бренда.

Другой вариант — добавить изображение как отдельный элемент и вставить в него ссылку. 

Нюанс в том, что со стороны непонятно, что картинка кликабельная. Можно сделать плитку с изображением и кнопкой/текстом:

Как сделать конвертящую кнопку

Технически добавить кнопку на сайт несложно — гораздо труднее добиться реальных кликов и конверсий.

Текст. Кнопка — это призыв к действию, поэтому лучше использовать глагол, желательно краткий и емкий: «Купить», «Узнать», «Написать», «Оставить заявку».

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

Дизайн. Кнопку нужно делать яркой и контрастной к фону, чтобы она сразу цепляла взгляд. Для нее подойдет акцентный цвет, которого нет или почти нет в других элементах.

Как оживить кнопку:

• Добавить тень, чтобы отделить ее от фона.
• Сделать анимацию при появлении в зоне видимости.
• Настроить изменение цвета/яркости при наведении — так сразу видно, что элемент кликабельный.

Ключевое: кнопка должна быть отчетливо заметна. 

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

Где расположить:

• После продающего текста. Описываем продукт/услугу и сразу предлагаем купить, оставить заявку, зарегистрироваться.
• В форме обратной связи. Пользователь дает согласие на обработку персональных данных — и только после этого может нажать на кнопку.
• На обложке с оффером — для прогретой аудитории.
• В шапке лендинга. Кнопка остается заметной при скролле — не нужно искать ее по всей странице.

Экспериментируйте с базовыми и zero-блоками, чтобы лучше привлекать внимание пользователей. В Tilda для этого есть все возможности, причем заверстать кнопки можно не только для сайта или лендинга, но и для email-рассылки.