TiCode (Easy mods)

Как сделать свой курсор для сайта Tilda

2025-01-27 23:27 Прочее
Эта модификация позволяет легко установить кастомный курсор на сайт. Можно загрузить собственную иконку, изображение или логотип в качестве основного курсора. Дополнительно, предусмотрена возможность загрузки второго изображения для состояния hover — когда курсор наводится на кнопки, ссылки или другие активные элементы сайта. Это улучшит пользовательский интерфейс и добавит индивидуальности вашему сайту.

Инструкция по установке

  • Создаем блок GL02 и загружаем свою иконку через контент (рекомендуемый размер — 30x30 px, максимальный — 100x100 px). Нажимаем ПКМ на картинку, копируем адрес изображения и вставляем ссылку в код;

  • Если для состояния наведения на ссылку или кнопку требуется другая иконка, загружаем вторую иконку в блок GL02, копируем ее ссылку и вставляем в скрипт. Если иконки должны быть одинаковыми в обычном и ховер-статусах, достаточно просто продублировать ссылку из первого шага. Блок с иконками можно скрыть, но не удалять;

  • Копируем код и вставляем в пользовательские стили. Для этого переходим в Настройки сайта / Еще / Пользовательские CSS-стили. Сохраняем изменения и переопубликовываем страницы.
<!--TICODE --><!-- Кастомный курсор | https://ticode.dev  -->
body {
    cursor: url('ссылка на изображение default'), auto; /* Сандартный курсор */
}
a, button {
    cursor: url('Ссылка на изображение pointer'), pointer; /* Курсор при наведении (Pointer) */
}
Вместо блока GL02 вы можно использовать любой другой блок для загрузки изображения. Можно загрузить иконки в любой Zero Block, вынести её за пределы видимости и скопировать ссылку. Главное, чтобы изображение было загружено на сайт, чтобы получить доступ к его URL.

Другие модификации для кастомизации курсоров на Тильда

Подсказка при наведении курсора: Добавление текстовой подсказки, которая появляется при наведении курсора на элемент, улучшая взаимодействие с пользователем.
Эффект хвоста из картинок для курсора: Кастомизация курсора с эффектом хвоста из изображений, который визуально сопровождает курсор.
{$co}