NLM107 • Время настройки: 1 минута
Курсор-точка на Тильде — настрой цвет и размер
Модификация дает возможность изменить внешний вид курсора, превратив его в точку. С ее помощью вы можете задать размер и цвет самой точки, определить размер, цвет границы и ширину обводки круга, выбрать тип обводки круга и даже настроить увеличение курсора при наведении.
Она работает в связке с другими нашими решениями, чтобы вы могли пройти весь путь от макета до запуска сайта, не привлекая разработчиков.
Эта модификация — часть системы инструментов для работы с Тильдой
Перенесите макет в Тильду за 10 минут
Начните работу правильно: экспортируйте дизайн из Figma сразу с адаптацией и авто-лейаутом. Вы получаете идеальный фундамент для дальнейшей настройки, не тратя часы на переверстку вручную.
Начните работу правильно: экспортируйте дизайн из Figma сразу с адаптацией и авто-лейаутом. Вы получаете идеальный фундамент для дальнейшей настройки, не тратя часы на переверстку вручную.
Плагин для Figma
AI-ассистент
Генератор CSS-стилей
Модификации
Расширение для Тильды
Работайте с модификациями внутри привычного редактора Тильды
Макет перенесен? Библиотека модификаций и продвинутые инструменты для верстки теперь встроены в интерфейс. Открываете редактор, и всё под рукой.
Макет перенесен? Библиотека модификаций и продвинутые инструменты для верстки теперь встроены в интерфейс. Открываете редактор, и всё под рукой.
Ваш персональный AI-ассистент для Тильды
Остались нестандартные задачи? Попросите нейросеть написать уникальный скрипт, поправить анимацию или сгенерировать контент. Идеальный штрих для сдачи проекта без компромиссов.
Остались нестандартные задачи? Попросите нейросеть написать уникальный скрипт, поправить анимацию или сгенерировать контент. Идеальный штрих для сдачи проекта без компромиссов.
Стандартные блоки Tilda не вписываются в дизайн?
Генератор стилей перекрасит элементы и поля, добавит тени, отступы или скругления — без написания кода.
Генератор стилей перекрасит элементы и поля, добавит тени, отступы или скругления — без написания кода.
Добавьте уникальные функции в один клик
База готова — время оживить проект. Выбирайте из 200+ готовых решений (слайдеры, формы, эффекты), которые легко «надеваются» на ваши блоки через интерфейс Расширения.
База готова — время оживить проект. Выбирайте из 200+ готовых решений (слайдеры, формы, эффекты), которые легко «надеваются» на ваши блоки через интерфейс Расширения.
Смотрите, как быстро установить модификацию
Инструкция
Для того чтобы изменить курсор на вашем сайте выполните следующие действия:
1. На странице модификации заполните следующие поля:
2. Добавляете блок Т123 и вставляете в него сгенерированный HTML код;
1. На странице модификации заполните следующие поля:
- «Размер точки (в пикселях)»;
- "Размер круга (в пикселях)";
- "Цвет точки" ;
- «Цвет границы круга»;
- «Ширина обводки круга»;
- «Увеличение при наведении» — укажите во сколько раз увеличивать курсор при наведении, либо оставьте поле пустым.
2. Добавляете блок Т123 и вставляете в него сгенерированный HTML код;
- P. S. Цвета курсора могут искажаться, если у вас включен режим инверсии
Сгенерируйте код для своего сайта
Обратите внимание!
Чтобы участвовать в бонусной программе, авторизуйтесь — после входа ваша реферальная ссылка будет автоматически добавлена при копировании.
Подробнее о реферальной программе
Скопировать обычную ссылку
Ведутся технические работы((
Попробуйте перелогиниться, если не помогло, загляните к нам через 20 минут...
Попробуйте перелогиниться, если не помогло, загляните к нам через 20 минут...
Напишите в нашу поддержку — мы поможем с настройкой и внедрением.
Остались вопросы?
Шаг 3
Чтобы получить доступ к копированию кода и использовать его на сайте, выполните 3 простых шага:
Скопируйте код из генератора, вставьте его в блок T123 на вашем сайте в Тильде и опубликуйте страницу.
Настройте модификацию
Шаг 2
И получите доступ к библиотеке из более чем 200 модификаций.
Возобновите подписку
Шаг 1
Напишите в нашу поддержку — мы поможем с настройкой и внедрением.
Остались вопросы?
Шаг 3
Чтобы получить доступ к копированию кода и использовать его на сайте, выполните 3 простых шага:
Скопируйте код из генератора, вставьте его в блок T123 на вашем сайте в Тильде и опубликуйте страницу.
Настройте модификацию
Шаг 2
И получите доступ к библиотеке из более чем 200 модификаций.
Оплатите подписку
Шаг 1
Курсор точка — нестандартный элемент, который запоминают
Курсор в виде точки — это небольшая деталь, которая сразу меняет ощущение от сайта. Стандартная стрелка браузера выглядит привычно, а точка делает интерфейс более аккуратным, дизайнерским и ближе к сайтам студий, портфолио и промо-проектов.
Модификация NLM107 от Nolim позволяет заменить курсор на точку в Тильде без ручной разработки: настроить размер, цвет, круг вокруг курсора, обводку и увеличение при наведении на интерактивные элементы.
Модификация NLM107 от Nolim позволяет заменить курсор на точку в Тильде без ручной разработки: настроить размер, цвет, круг вокруг курсора, обводку и увеличение при наведении на интерактивные элементы.
Как установить за 1 минуту
Открой генератор на странице модификации, задай размер точки, размер круга, цвет, толщину и цвет обводки. Если нужно, настрой увеличение курсора при наведении на ссылки и кнопки.
После этого скопируй готовый код, добавь на страницу блок T123, вставь код и опубликуй сайт. Отдельные файлы курсора скачивать не нужно: точка создаётся скриптом и сразу работает на опубликованной странице.
После этого скопируй готовый код, добавь на страницу блок T123, вставь код и опубликуй сайт. Отдельные файлы курсора скачивать не нужно: точка создаётся скриптом и сразу работает на опубликованной странице.
Где используют курсор точку
Такой курсор хорошо подходит для сайтов, где важны визуальное впечатление и ощущение кастомного интерфейса: портфолио дизайнеров, сайтов студий, промо-страниц, лендингов мероприятий, fashion-проектов, digital-агентств и креативных презентаций.
Курсор точка особенно уместен на страницах с минималистичным дизайном, крупной типографикой, тёмными секциями и плавной анимацией. Он не заменяет контент, но добавляет сайту более собранное и «дорогое» ощущение.
Курсор точка особенно уместен на страницах с минималистичным дизайном, крупной типографикой, тёмными секциями и плавной анимацией. Он не заменяет контент, но добавляет сайту более собранное и «дорогое» ощущение.
Что можно настроить
В генераторе можно задать не только саму точку, но и круг вокруг неё. Например, сделать маленькую чёрную точку без обводки для минималистичного сайта или добавить тонкий круг, который увеличивается при наведении на кнопку.
Увеличение при наведении помогает пользователю понять, что элемент кликабельный. Это особенно полезно для ссылок, карточек, кнопок и интерактивных блоков, где стандартного hover-эффекта может быть недостаточно.
Увеличение при наведении помогает пользователю понять, что элемент кликабельный. Это особенно полезно для ссылок, карточек, кнопок и интерактивных блоков, где стандартного hover-эффекта может быть недостаточно.
Когда лучше не использовать
Курсор точка не нужен на каждом сайте. Для интернет-магазина, сложного сервиса или страницы с большим количеством форм стандартный курсор может быть понятнее. Если пользователь должен быстро выбирать товары, заполнять поля и оформлять заказ, декоративные эффекты лучше использовать аккуратно.
На мобильных устройствах кастомный курсор почти не имеет смысла: пользователь взаимодействует с сайтом пальцем, а не мышью. Поэтому основной эффект такой модификации раскрывается на десктопе.
На мобильных устройствах кастомный курсор почти не имеет смысла: пользователь взаимодействует с сайтом пальцем, а не мышью. Поэтому основной эффект такой модификации раскрывается на десктопе.
Что проверить после публикации
После установки проверь, как курсор ведёт себя на светлых и тёмных секциях, поверх кнопок, ссылок, карточек и форм. Точка должна быть заметной, но не мешать чтению текста и не перекрывать важные элементы интерфейса.
Если курсор выглядит слишком активным, уменьши размер круга или отключи сильное увеличение при наведении. Хороший курсор в виде точки не перетягивает внимание на себя, а аккуратно поддерживает общий стиль сайта.
Если курсор выглядит слишком активным, уменьши размер круга или отключи сильное увеличение при наведении. Хороший курсор в виде точки не перетягивает внимание на себя, а аккуратно поддерживает общий стиль сайта.
Популярные решения для вашего сайта
Не нашли нужное решение?
Часто задаваемые вопросы
Открой nolim.cc/dot-cursor, в генераторе задай размер точки (px), цвет, режим инверсии (точка меняет цвет на фоне тёмных элементов). Скопируй код и вставь в «HTML-код для вставки внутрь HEAD» в настройках сайта Tilda. Курсор точка появится на всех страницах сайта сразу.
Нет. В отличие от курсоров-изображений (.cur, .ani), модификация Nolim работает как JavaScript-скрипт — никаких файлов скачивать не нужно. Код создаёт точку программно, поэтому курсор всегда чёткий на любом экране, включая Retina.
Инверсия — это режим, в котором точка меняет цвет автоматически в зависимости от фона под ней. На светлом фоне — тёмная, на тёмном — светлая. Это параметр в генераторе Nolim: включается одной галочкой и работает через mix-blend-mode CSS.
Было: сайт студии UI/UX выглядел как обычный лендинг — стандартный курсор-стрелка не подчёркивал дизайнерский уровень.
Стало: добавили курсор точка с инверсией через Nolim — на светлых секциях чёрная, на тёмном Hero — белая. Посетители отмечали «продуманность» в отзывах, а время на сайте выросло на 30%.
Стало: добавили курсор точка с инверсией через Nolim — на светлых секциях чёрная, на тёмном Hero — белая. Посетители отмечали «продуманность» в отзывах, а время на сайте выросло на 30%.