Tilda предлагает инструменты для быстрого добавления интерактивных элементов на страницу, и кнопки – один из самых востребованных. В стандартном конструкторе доступно более 20 предустановленных стилей кнопок, но их функционал можно расширить с помощью Zero Block или кастомного CSS. Начнем с базового метода: через блок «Кнопка» в разделе «Стандартные блоки».
Выберите блок, перетащите его на страницу и откройте настройки. Здесь задаются текст, ссылка (внутренняя или внешняя), размер, цвет фона и шрифта. Для адаптивности используйте параметр «Отступы» – минимальные значения (8–12 пикселей по вертикали) улучшат отображение на мобильных устройствах. Если нужна анимация, включите эффект «Hover» в разделе «Дополнительно» – доступны варианты подсветки, тени или изменения цвета.
Для продвинутых сценариев подключите Zero Block: создайте кнопку с нуля, используя HTML-элементы и стили. Добавьте класс .t-btn для сохранения единого стиля с остальными кнопками сайта. При необходимости интегрируйте JavaScript для обработки событий – например, отправки формы или прокрутки страницы. Не забывайте проверять кнопку в режиме предпросмотра на разных устройствах: Tilda автоматически подстраивает размеры, но иногда требуется ручная корректировка через медиазапросы.
Выбор блока для добавления кнопки в конструкторе
Tilda предлагает более 200 готовых блоков, но для кнопок подходят далеко не все. Основные категории: «Кнопки» (раздел Zero Block), «Формы» и «Контент». В Zero Block кнопки настраиваются с нуля – отступы, тени, анимация. В «Формах» кнопка интегрирована с полями ввода (например, блок BF602 для подписки). Для простых решений используйте блоки из «Контента»: CB101 (кнопка + текст) или CB102 (кнопка + изображение).
Выбор зависит от задачи. Для призыва к действию на лендинге оптимальны блоки с минимальным дизайном: Zero Block ZB101 или CB103 (кнопка по центру). Если нужна кнопка в шапке, используйте блок TH101 – он автоматически фиксируется при прокрутке. Для мультиязычных сайтов подойдет блок BF605 с переключением языков и кнопкой «Отправить».
| Тип блока | Пример блока | Подходящие сценарии | Ограничения |
|---|---|---|---|
| Zero Block | ZB101, ZB203 | Уникальный дизайн, анимация, кастомные эффекты | Требует настройки вручную, нет готовых стилей |
| Формы | BF602, BF604 | Подписки, обратная связь, интеграция с CRM | Ограниченные стили кнопок, зависимость от полей формы |
| Контент | CB101, CB105 | Быстрое добавление, адаптивность, готовые шаблоны | Меньше гибкости в настройке |
Избегайте блоков с избыточным функционалом. Например, блок CB106 (кнопка + видео) утяжеляет страницу, если видео не критично. Для мобильной версии проверяйте отображение кнопок в превью: некоторые блоки (например, ZB301) требуют ручной корректировки отступов. Тестируйте кнопки на разных устройствах – в Tilda есть встроенный инструмент для проверки адаптивности.
Для продвинутых задач используйте комбинации блоков. Например, Zero Block для кнопки + блок «Текст» (TB101) для заголовка. Это позволяет гибко управлять отступами и выравниванием. Если нужна кнопка с иконкой, выбирайте блоки с поддержкой SVG (ZB105) или используйте HTML-вставку в Zero Block. Помните: каждый лишний блок увеличивает время загрузки страницы – оптимизируйте количество элементов.
Настройка текста и стиля кнопки через панель редактирования
В Tilda кнопка настраивается через панель справа после её добавления на страницу. Перейдите во вкладку «Содержимое» (иконка с текстом), чтобы изменить надпись – поле «Текст кнопки» поддерживает до 30 символов для стандартных блоков (например, TL-22). Для многострочных кнопок (TL-33) лимит увеличивается до 60 символов, но переносы строк добавляются только через <br> в HTML-режиме.
Стиль кнопки редактируется во вкладке «Стили» (иконка с кистью). Доступны три предустановленных варианта: «Основной» (заливка + обводка), «Прозрачный» (только обводка) и «Текстовый» (без фона и рамки). Для каждого можно задать:
- Цвет заливки и обводки – палитра Tilda содержит 16 базовых оттенков, но HEX-код вводится вручную через поле «Дополнительный цвет».
- Радиус скругления углов – от 0 до 50 пикселей (значение по умолчанию – 4px).
- Толщину обводки – от 0 до 10px (шаг 1px).
Шрифт кнопки настраивается отдельно от остального текста на странице. Во вкладке «Стили» выберите семейство из 12 доступных шрифтов (включая Google Fonts: Montserrat, Roboto, Open Sans). Размер задаётся в пикселях (диапазон 12–36px), вес – от 300 до 900 (шаг 100). Межбуквенный интервал регулируется ползунком от -5 до +10px.
Для выравнивания текста внутри кнопки используйте параметр «Позиция» в разделе «Стили». Доступны три варианта: по левому краю, по центру (по умолчанию) и по правому краю. Отступы от границ кнопки настраиваются вручную через поля «Внутренние отступы» (padding) – значения вводятся в пикселях для каждой стороны отдельно (верх/низ/лево/право). Минимальное значение – 0px, максимальное – 50px.
Эффекты при наведении (hover) настраиваются в разделе «Анимация». Доступны 4 типа изменений: смена цвета заливки, обводки, текста и добавление тени. Например, для плавного перехода цвета заливки с синего (#2E86C1) на зелёный (#27AE60) установите время анимации 0.3s и выберите эффект «Плавный». Тень добавляется с параметрами: смещение по X/Y (0–20px), размытие (0–30px) и цвет (по умолчанию – rgba(0,0,0,0.2)).
Изменение цвета фона и шрифта кнопки с помощью палитры
В Tilda настройка цветов кнопки выполняется через панель «Стили» в редакторе блока. Выделите кнопку и перейдите в раздел «Цвета», где доступны два ключевых параметра: Background (фон) и Text (шрифт). Палитра предлагает три варианта выбора: предустановленные цвета из фирменного стиля, HEX-коды (#RRGGBB) или RGB-значения (например, rgb(255, 99, 71)). Для быстрого подбора контрастных сочетаний используйте инструмент «Палитра» – он автоматически генерирует гармоничные пары на основе выбранного оттенка.
Рекомендации по выбору цветов:
- Фон кнопки должен отличаться от фона страницы минимум на 30% по яркости (используйте контрастный калькулятор для проверки).
- Для текста на темном фоне применяйте светлые оттенки (#FFFFFF, #F5F5F5), на светлом – насыщенные (#212121, #333333).
- Избегайте сочетаний красного (#FF0000) и зеленого (#00FF00) – они плохо воспринимаются пользователями с дальтонизмом.
- Для акцентных кнопок используйте фирменные цвета бренда (например, синий #1DA1F2 для Twitter).
Сохраните изменения кнопки через «Сохранить и закрыть», затем опубликуйте страницу, чтобы увидеть результат. Если цвет не отображается корректно, проверьте настройки блока на наличие наложенных градиентов или теней – они могут искажать восприятие оттенка. Для тестирования разных вариантов создайте дубликат кнопки и сравните их в режиме предпросмотра.
Добавление ссылки или действия при нажатии на кнопку
Если нужно открыть страницу в новой вкладке, активируйте чекбокс «Открыть в новом окне». Это критично для внешних ссылок, чтобы не терять трафик с сайта. Для внутренних переходов используйте относительные пути, например, /contacts/, – так ссылка останется рабочей даже при смене домена.
Модальные окна настраиваются через «Действие → Показать модальное окно». Выберите существующее окно из списка или создайте новое с помощью конструктора Zero Block. Учтите: модалки работают только на опубликованных страницах, в режиме предпросмотра они не отображаются. Для кастомизации поведения (например, закрытие по клику вне окна) потребуется добавить JavaScript через «Действие → Запустить код».
Для динамических действий используйте JavaScript. В поле «Запустить код» введите функцию, например, alert(‘Спасибо за подписку!’); или интеграцию с CRM через API. Помните: код выполняется в контексте страницы, поэтому для доступа к DOM используйте document.querySelector(). Избегайте тяжелых скриптов – они замедляют загрузку.
Для кнопок с несколькими действиями (например, отправка формы + переход) комбинируйте варианты. Сначала настройте отправку данных через «Действие → Отправить форму», затем добавьте редирект в поле «После отправки». Если требуется условная логика (например, разные действия для авторизованных и гостей), используйте JavaScript с проверкой window.userLoggedIn или аналогичных переменных.
Тестируйте кнопки на всех устройствах. В мобильной версии Tilda иногда возникают баги с модальными окнами – проверяйте их отдельно. Для отладки JavaScript-кода используйте консоль браузера (Ctrl+Shift+J в Chrome). Если кнопка не реагирует, убедитесь, что она не перекрыта другим элементом с z-index выше.
Настройка отступов и выравнивания кнопки на странице
В Tilda отступы кнопки регулируются через параметры Margin и Padding в панели стилей блока. Для горизонтального выравнивания используйте секцию Alignment – выберите Left, Center или Right в зависимости от макета. Если кнопка расположена в контейнере с фиксированной шириной, задайте Margin: auto для автоматического центрирования по горизонтали. Вертикальные отступы настраивайте числовыми значениями в пикселях или процентах, избегая значений выше 60px для мобильных устройств.
Для точной подгонки кнопки под дизайн используйте инструмент Inspector (горячая клавиша Ctrl+Shift+I). Он позволяет увидеть текущие отступы в реальном времени и скорректировать их без перезагрузки страницы. Если кнопка «прилипает» к соседним элементам, добавьте Padding: 15px 30px – это создаст внутренний буфер, сохраняя пропорции при изменении текста. На мобильных версиях уменьшайте отступы до 8px 16px, чтобы избежать горизонтальной прокрутки.
При работе с группой кнопок (например, в форме или навигации) применяйте единые отступы через класс .t-btn-group. Задайте Margin-right: 10px для всех кнопок, кроме последней, чтобы создать равномерный интервал. Для вертикального стека кнопок используйте Margin-bottom: 12px и выравнивание по левому краю. Если кнопки разной ширины, выровняйте их по центру контейнера с помощью Flexbox – включите опцию Display: Flex и Justify-content: center в настройках родительского блока.
Проверяйте отображение кнопки на разных разрешениях через встроенный превью Tilda. На экранах до 768px уменьшайте горизонтальные отступы на 30-40% и увеличивайте вертикальные на 2-3px для удобства касания. Избегайте фиксированных значений в vw или vh – они могут ломать макет на нестандартных устройствах. Для кнопок с иконками задавайте Padding-left: 40px и Padding-right: 20px, чтобы текст не наезжал на графику.
Создание анимации при наведении курсора на кнопку
Для более сложных эффектов комбинируйте свойства. Например, вращение кнопки на 5 градусов при наведении: transform: rotate(5deg);. Если нужно изменить текст, используйте content: "Новый текст"; в псевдоэлементе ::after, предварительно скрыв оригинальный текст с помощью opacity: 0;. Убедитесь, что все изменения обратимы – добавляйте аналогичные свойства для состояния :not(:hover).
Тестируйте анимацию на разных устройствах. В Tilda проверьте отображение в режиме предпросмотра для мобильных версий – некоторые эффекты, например, scale(1.05), могут выглядеть избыточно на сенсорных экранах. Оптимизируйте время анимации: значения выше 0.5s воспринимаются как задержка, ниже 0.2s – как резкий скачок.
Проверка отображения кнопки на разных устройствах
После создания кнопки в Tilda протестируйте её на устройствах с разными разрешениями экрана. Встроенный инструмент «Предпросмотр» позволяет выбрать 5 предустановленных вариантов: десктоп (1920×1080), планшет (768×1024), мобильный альбомный (414×896) и портретный (375×667) режимы, а также широкий экран (1366×768). Однако реальные устройства могут иметь отклонения: например, iPhone 15 Pro отображает контент в 393×852 пикселя, а Samsung Galaxy S23 – в 360×780. Запустите эмуляцию через браузерные инструменты разработчика (Chrome DevTools) и вручную задайте эти параметры для точной проверки.
Обратите внимание на критические точки адаптивности. Tilda автоматически подстраивает элементы под брейкпоинты 1200px, 992px, 768px и 480px, но кнопки с фиксированной шириной или кастомными отступами могут «ломаться» в промежуточных разрешениях. Например, кнопка с шириной 300px на экране 800px займёт 37,5% пространства, что может нарушить композицию. Используйте относительные единицы (%, vw) или медиа-запросы в CSS-блоке Tilda для корректировки размеров и отступов в проблемных диапазонах.
Тестируйте интерактивность на сенсорных устройствах. Кнопка должна иметь минимальную высоту 48px и отступы не менее 16px по бокам – это требование Google Material Design для удобного тапа пальцем. Проверьте, не перекрывают ли соседние элементы активную зону кнопки на мобильных устройствах. В Tilda добавьте CSS-свойство touch-action: manipulation; для ускорения срабатывания клика на тачскринах и исключения задержки в 300 мс.
Сравните отображение кнопки в разных браузерах и ОС. Ниже приведена таблица с ключевыми отличиями рендеринга на iOS и Android:
| Параметр | iOS (Safari) | Android (Chrome) |
|---|---|---|
| Сглаживание шрифтов | Более тонкое, возможны артефакты на мелком кегле | Чёткое, но с заметным утолщением |
| Тени (box-shadow) | Мягкие, с размытием до 10px | Резкие, с жёсткими границами |
| Скругление углов (border-radius) | Поддерживает значения до 50% без багов | Может «обрезать» тень при значениях >20px |
| Анимации (transition) | Плавные, 60 FPS | Рывки на устройствах с низким разрешением |
Для финальной проверки используйте сервисы BrowserStack или LambdaTest, которые предоставляют доступ к реальным устройствам через облако. Загрузите проект в Tilda с включённым режимом «Публичный доступ» и протестируйте кнопку на 10–15 популярных моделях смартфонов и планшетов. Особое внимание уделите устройствам с нестандартными соотношениями сторон (например, Galaxy Z Fold с разрешением 2208×1768 в разложенном виде) и браузерами с низкой долей рынка (Samsung Internet, UC Browser), где могут проявляться неочевидные баги.
Сохранение и публикация страницы с новой кнопкой
Перед публикацией протестируйте кнопку в режиме предпросмотра (Ctrl/Cmd + P). Проверьте:
- Адаптивность: кнопка должна корректно отображаться на мобильных устройствах (ширина экрана ≤ 768px) – используйте инструмент «Адаптивный просмотр» в панели редактора.
- Функциональность: клик по кнопке должен открывать ссылку в новой вкладке (если установлен параметр
target="_blank") или прокручивать страницу до якоря без задержек. - Стили: убедитесь, что hover-эффекты (например, изменение цвета или тени) работают на всех браузерах – Chrome, Firefox, Safari.
Для публикации выберите один из вариантов в зависимости от задачи:
- Быстрая публикация: нажмите «Опубликовать» в правом верхнем углу – страница обновится на текущем домене Tilda (
*.tilda.ws) в течение 30 секунд. Подходит для тестирования. - Публикация на собственном домене: перейдите в «Настройки страницы» → «Домен», добавьте CNAME-запись в DNS-панели хостинга (например,
tilda.yourdomain.com) и подтвердите связку. Обновление может занять до 24 часов. - Экспорт кода: если требуется интеграция с CMS (WordPress, Bitrix), выберите «Экспорт» → «HTML-код» и вставьте сгенерированный блок в нужное место шаблона. Учтите, что интерактивные элементы (например, формы) могут потребовать дополнительной настройки JavaScript.
После публикации проверьте кнопку через инструменты вебмастера Google или Yandex: убедитесь, что ссылка индексируется и не блокируется файлом robots.txt.
Загрузка...
