Как сделать кнопку из текстовой ссылки в Tilda

В статье, описании услуги или текстовом блоке уже есть ссылка на запись. Хочется сделать её заметнее, но переносить весь блок в Zero ради одной кнопки неудобно. В этом случае можно изменить оформление самой ссылки.

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

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

Скопируйте значение целиком. Относительный путь /contact и полный адрес сайта с этим же путём для конструктора — разные записи. Якорь, параметры и завершающий слеш тоже могут влиять на совпадение. Если кнопка не получила стиль, первым делом сравните адреса, а не цвета и размеры.

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

Это удобно для повторяющегося действия, но требует внимания. Если такая же ссылка есть внутри абзаца или в меню, её оформление тоже может измениться. Здесь нет отдельного выбора одной ссылки по ID. До установки кода просмотрите страницу и решите, подходит ли общий стиль всем совпадениям. Пустой адрес в готовый код не включается.

Выберите пресет: сплошной, контурный, прозрачный или другой доступный вариант. Начните с цвета текста и фона, затем подберите внутренние отступы и обводку. Внешний вид должен объяснять действие, а подпись — говорить, что произойдёт после нажатия.

Лучше «Записаться на разбор», чем «Нажми сюда». Примерьте короткую и длинную подпись. Если текст упирается в края, увеличьте отступы или пересмотрите ширину, вместо того чтобы уменьшать шрифт до неудобного размера. На одной странице полезно держать один узнаваемый вид основного действия.

Настройте цвет, обводку и доступные эффекты при наведении. Небольшого изменения часто достаточно: посетитель видит, что ссылка реагирует на курсор. Если используете подъём или увеличение, проверьте расстояние до соседнего текста.

Плавность анимации общая для кнопок в этом коде, остальные параметры относятся к выбранному адресу. Не делайте основное состояние слишком незаметным в расчёте на hover. На телефоне посетитель должен сразу различать действие, без предварительного наведения. Контурная кнопка тоже должна читаться на фоне блока до нажатия.

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

Не оставляйте рядом старый вариант кода, который оформляет те же адреса иначе. Если после установки стиль выглядит смешанным, сначала проверьте такие пересечения. Сама надпись и адрес перехода по-прежнему редактируются в Tilda. Когда меняете ссылку, не забудьте сверить новое значение с записью в конструкторе.

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

• Длинная подпись помещается на телефоне и не вылезает из блока.
• Текст читается в основном состоянии и при наведении.
• Кнопка не накрывает соседние ссылки или строки.
• После изменения адреса в редакторе оформление продолжает применяться к нужной ссылке.

Читайте также: Как сделать копирование промокода по клику в Tilda · Меню в Tilda: Zero Block, фиксация и Atelier.