Кастомный курсор в Tilda: эффект и подсказки над ссылками

Небольшая подпись «Смотреть проект» рядом с курсором может сделать портфолио понятнее. А огромный след из частиц поверх каждого абзаца, наоборот, мешает читать. Между выразительным эффектом и неудобством обычно стоит несколько настроек.

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

Выберите конкретную роль: подчеркнуть кликабельные проекты, подсказать действие над галереей или поддержать характер портфолио. Если роль сводится к «чтобы что-то двигалось», начните с небольшой точки и кольца.

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

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

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

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

В режимах с подписью текст может браться из атрибута data-label у элемента; если его нет, используется общая подпись конструктора. Добавляйте атрибут только способом, который доступен в вашей разметке. Если индивидуальная подпись не нужна, начните с общей и проверьте её смысл на каждой цели.

Сохраните режим «Только на десктопе (мышь)». Сенсорному экрану не нужен плавающий указатель: палец уже показывает место нажатия. Отсутствие курсора на таком устройстве — ожидаемое поведение.

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

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

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

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

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

Читайте также: Меню в Tilda: Zero Block, фиксация и Atelier · Слайдер в Tilda: как выбрать и настроить подходящий вариант.