Как подсветить карточку по ссылке в Tilda
Пульсирующая обводка нужного тарифа или предложения по якорю в адресе страницы.Подробнее о модеСвернуть описание
Как подсветить карточку по ссылке в Tilda
Пульсирующая обводка нужного тарифа или предложения по якорю в адресе страницы.Что умеет мод
- Связывает якорь в ссылке с CSS-классом карточки Zero Block.
- Включает подсветку при открытии страницы с нужным якорем и при его изменении.
- Настраивает цвет, скругление, толщину, длительность и плавность пульсации.
- Позволяет задать собственный цвет для каждой пары «якорь — карточка».
Как подключить
Назначьте классы
Выберите корневой элемент каждой карточки Zero Block и задайте CSS Class Name без точки. Например, card-pro для тарифа Pro и card-club для клубного предложения. Используйте отдельный класс для каждой карточки.
Сопоставьте ссылки и карточки
Добавьте пары в конструкторе: якорь #pro соответствует классу card-pro. Укажите такой же якорь в ссылке кнопки или добавьте его к полному адресу страницы.
Настройте подсветку
Подберите общий цвет, скругление, толщину и ритм пульсации. При необходимости задайте отдельные цвета карточек и включите немедленное обновление подсветки по клику на якорную кнопку.
Проверьте переходы
Вставьте код в T123 на странице с карточками и опубликуйте её. Откройте ссылку с якорем, затем переключите предложение другой кнопкой. Проверьте совпадение якорей и классов, а также вид обводки на телефоне.
Что учитывать. Мод выделяет карточку. Прокрутку к нужному месту настраивайте штатным якорем Tilda отдельно: CSS-класс карточки сам по себе не становится якорем прокрутки. Если текущего якоря нет в списке, подсветка не включается. Соберите все пары в одном коде мода на странице.
Вопросы и ограничения
Подсветка меняет выбранный тариф или заказ?
Нет. Это визуальное выделение. Покупка, выбор варианта и кнопки карточки продолжают работать по своим настройкам.
Можно перейти с другого сайта?
Да. Используйте полный адрес страницы с нужным окончанием, например #pro. На целевой странице должен быть установлен код с соответствующей парой.
Почему выделилось несколько карточек?
Один и тот же CSS-класс назначен нескольким элементам. Для одного предложения задайте уникальный класс только корневому элементу его карточки.
Можно сделать разные цвета?
Да. Общий цвет используется по умолчанию, а в строке сопоставления можно указать собственный цвет конкретной карточки.
Доступ к конструктору
Мод доступен по подписке Pro. Войдите в аккаунт, чтобы настроить его и получить код. Действующие условия указаны в тарифах.
