Как сделать кнопки в Тильде: настройки, ссылки, привязка форм

Кнопки в Тильде можно создать разными способами — от стандартных блоков до кастомных решений через зероблоки. В этой статье разберем доступные варианты, их настройки и важные нюансы работы со ссылками.

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

• Шаблоны страниц — кнопки уже встроены в базовые макеты.
• Текстовые блоки — некоторые элементы содержат кнопки внутри.
• Блоки с преимуществами, карточками товаров, каталогами — кнопки встроены в дизайн.

Чтобы добавить собственно кнопку, и ничего больше — перейдите в раздел блоков «‎Кнопки», и увидите несколько готовых вариантов.

1. Выберите подходящий готовый блок в библиотеке.
2. Добавьте его на страницу.
3. Дальше есть несколько вариантов того, как изменить кнопку на Тильде: измените текст, цвет, стиль бордюра, фон, скругление углов и прочие параметры.
4. Одна из свежих фишек Тильды — меню «‎Стили», где можно выбрать готовые варианты оформления кнопок (базовые, плоские, объемные и т. д.). Эта функция есть пока только в стандартных блоках.

5. Можно добавить цвет и тень при наведении — когда кто-то намеревается кликнуть по вашей заветной кнопке.
6. Здесь же можно настроить анимацию — например, сделать появление с эффектом вылета.
7. Дополнительно можно настроить эффект для кнопок. Например, мерцание.

8. Если нужно, включите аналитику кликов. Для этого поставьте галочку как на скрине ниже. Тильда сформирует ссылку, с помощью которой можно будет отслеживать клики в Метрике.

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

• Фиксированная кнопка для мобильных — всегда отображается внизу экрана, даже при скролле.
• Гигантская кнопка — занимает весь экран, подходит для лендингов.
• Кнопка «‎Наверх» — возвращает пользователя к началу страницы, удобно для блогов и длинных лендингов.
• Кнопки в одну колонку — можно использовать для навигации по сайту.
• Кнопка «Показать еще» — по клику на нее раскрывает ниже идущий блок, который вы пометили скрытым в настройках.

Еще можно присмотреться к стандартному блоку ME606 (он находится в разделе «‎Меню»). Это готовый набор кнопок, которые можно использовать как табы: при нажатии на кнопку показывается соответствующая ей страница или блок с контентом. Так можно реализовать меню, услуговую страницу, страницу с карточками товаров или статей.

Если стандартные кнопки не подходят, можно создать кастомную кнопку в зероблоках. Здесь доступны почти те же настройки, что и в стандартных блоках, но чуть пошире.

• URL — куда перейдет пользователь по клику.
• Caption — описание, текст на кнопке.
• BG color — цвет фона.
• Расположение текста — слева, по центру, справа.
• Шрифт и стилизация текста (размер, насыщенность, межбуквенное расстояние).
• Настройки бордера, тени, прозрачности (opacity).
• Анимация — можно выбрать стандартную или создать свою.

Еще для зероблоков можно подключить кастомные анимации через Annexx, Нолим или Mo-Ti, используя CSS, если хоть немного в этом разбираетесь. Главное не борщить со спецэффектами, чтобы не перегрузить дизайн.

1. Открываем Zero Block и нажимаем + (добавить элемент).
2. Выбираем Button.
3. Настраиваем внешний вид и параметры и указываем URL.

Если у вас многостраничный сайт, ссылки внутри него нужно прописывать через слэш, а не полные http:// и https:// и без домена проекта.

Исключение — если кнопка будет вести на внешний ресурс. Тогда в настройках кнопки ставим полную ссылку: https://ru.wikipedia.org/wiki/

Эти правила актуальны как для стандартных, так и для зероблоков.

Если копировать ссылки полностью (http://вашсайт.ru/страница), то после подключения SSL-сертификата в поисковике появятся дубли страниц:

• http://naje-s.ru/uslugi/razrabotka-sajta
• https://naje-s.ru/uslugi/razrabotka-sajta

Это негативно влияет на SEO.

В настройках ссылки для кнопки можно задать параметры перехода:

• в новом окне,
• конкретная страница (Тильда предложит выбрать из списка страниц в вашем проекте),
• конкретный блок (Тильда предложит выбрать блок на странице в вашем проекте).

Рекомендуем всегда ставить галочку «‎В новом окне», если вы добавляете ссылку на внешний ресурс. Это важно для SEO. Если этого не сделать, то у поискового робота сложится картина, будто человек листал ваш сайт и, находясь на текущей странице, решил уйти на внешний сайт. То есть помахал вам ручкой и не собирается возвращаться.

Чтобы при клике на кнопку открывался поп-ап с формой, нужно:

1. взять внутреннюю ссылку попапа (она указывается в его настройках).
2. вставить ее в URL кнопки.

Формат ссылки: #popup-имя

То же самое работает для всплывающих окон с видео или другим контентом.

Иногда в кнопку нужно добавить якорную ссылку на другой странице. Тогда в URL кнопки прописываем ссылку в таком формате: /названиестраницы#ссылка на якорь.

Что ж, вроде все обсудили. Читайте другие наши статьи по Тильде и не забудьте подписаться на телегу.