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

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

Мод связывает окончание ссылки с CSS-классом элемента в Zero Block. Он помогает найти предложение, но не выбирает тариф за посетителя и не меняет заказ.

Настройка состоит из пары: якорь в адресе и класс карточки. Например, окончанию #pro соответствует класс card-pro. Когда страница открывается с таким якорем, мод включает подсветку подходящего элемента.

Можно добавить несколько пар для разных предложений. Для каждой карточки придумайте короткое понятное имя и запишите его одинаково в Tilda и конструкторе. Якорь и CSS-класс — разные вещи: не нужно случайно вставлять # перед классом или точку в поле CSS Class Name. Сначала соберите одну рабочую пару, затем добавляйте остальные.

Откройте Zero Block и выберите элемент или контейнер, который задаёт границы всей карточки. Назначьте ему отдельный класс без точки. Если отметить только заголовок или маленькую кнопку, обводка выделит именно их, а не всё предложение.

Не раздавайте один класс нескольким соседним карточкам, если хотите подсветить только одну. Для тарифа Pro можно использовать card-pro, для другого предложения — своё имя. Проверьте тот же элемент в мобильной вёрстке: рамка должна совпадать с карточкой, когда её ширина и высота меняются.

Для сообщения или публикации возьмите полный адрес страницы и добавьте нужное окончание, например #pro. Для кнопки на этой же странице можно использовать сам якорь. На целевой странице должен стоять код с соответствующей парой.

Подсветка сама по себе не настраивает прокрутку к тарифам. Если карточки находятся ниже первого экрана, отдельно поставьте штатный якорь Tilda у нужного раздела и согласуйте его со ссылкой. CSS-класс карточки не превращается автоматически в якорь прокрутки. Проверьте оба результата: куда попал экран и какое предложение выделилось.

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

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

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

Мод реагирует и на изменение якоря. Если используете настройку немедленного обновления по клику, проверьте её вместе с обычными ссылками. Якорь, которого нет в списке, не должен случайно выделять чужое предложение. При неверном результате сначала сравните пары и классы, не добавляя второй код поверх первого.

Рамка не выбирает платный план, не добавляет товар в корзину и не применяет скидку. Кнопки карточки продолжают выполнять действия, заданные в Tilda. Поэтому в инструкции или сообщении лучше писать «откроется страница с выделенным тарифом», а не «тариф уже выбран».

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

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