NLM097 • Время настройки: 1 минута
Магнитная кнопка на Тильде — эффект притяжения без кода
Модификация поможет настроить эффект магнитной кнопки с возможностью изменения величины элемента, расстояния, на которое будет применяться данный эффект, его скорости и угла вращения.
Смотрите, как быстро установить модификацию
Инструкция
1. Добавляешь в Зеро-блок элемент (текст, шейп, картинка или кнопка). И указываешь ему тот же класс, что и в генераторе (например, magnit).
Что бы указать класс у элемента, нажимаешь на него правой кнопкой мыши и выбираешь из списка последнюю строку «Add CSS Class Name», далее, справа в настройках указываешь класс.
2. В генераторе заполняешь следующие поля:
Что бы указать класс у элемента, нажимаешь на него правой кнопкой мыши и выбираешь из списка последнюю строку «Add CSS Class Name», далее, справа в настройках указываешь класс.
2. В генераторе заполняешь следующие поля:
- «Класс элемента» – прописываешь класс, тот же, что и у элемента в Зеро-блоке, к которому будет применяться эффект магнитной кнопки (например, magnit);
- «На каком расстоянии от центра элемента магнитить(px)» – радиус в пределах которого элемент замечает курсор и магнититься к нему;
- «Увеличение элемента» – на сколько будет увеличиваться элемент во время применения эффекта;
- «Скорость эффекта»;
- «Угол вращения во время эффекта (deg)» – угол поворота элемента во время применения эффекта (может быть отрицательным)
- 3. Копируешь сгенерированный HTML код и вставляешь его в блок Т123;
Сгенерируйте код для своего сайта
Обратите внимание!
Чтобы участвовать в бонусной программе, авторизуйтесь — после входа ваша реферальная ссылка будет автоматически добавлена при копировании.
Подробнее о реферальной программе
Скопировать обычную ссылку
Код готов и доступен по подписке Нолим
Уже есть подписка? Войти
Добавляйте на сайт слайдеры, аккордеоны, вкладки и скроллы — 200+ готовых решений в одной подписке
Ведутся технические работы((
Попробуйте перелогиниться, если не помогло, загляните к нам через 20 минут...
Попробуйте перелогиниться, если не помогло, загляните к нам через 20 минут...
Напишите в нашу поддержку — мы поможем с настройкой и внедрением.
Остались вопросы?
Шаг 3
Чтобы получить доступ к копированию кода и использовать его на сайте, выполните 3 простых шага:
Скопируйте код из генератора, вставьте его в блок T123 на вашем сайте в Тильде и опубликуйте страницу.
Настройте модификацию
Шаг 2
И получите доступ к библиотеке из более чем 200 модификаций.
Возобновите подписку
Шаг 1
Напишите в нашу поддержку — мы поможем с настройкой и внедрением.
Остались вопросы?
Шаг 3
Чтобы получить доступ к копированию кода и использовать его на сайте, выполните 3 простых шага:
Скопируйте код из генератора, вставьте его в блок T123 на вашем сайте в Тильде и опубликуйте страницу.
Настройте модификацию
Шаг 2
И получите доступ к библиотеке из более чем 200 модификаций.
Оплатите подписку
Шаг 1
Магнитная кнопка на Тильде — интерактивность, которую замечают
Магнитная кнопка — это микроэффект, при котором элемент реагирует на движение курсора: слегка тянется к нему, увеличивается или поворачивается. Пользователь ещё не нажал кнопку, но уже видит, что элемент интерактивный.
Модификация NLM097 от Nolim добавляет такой эффект в Zero Block без ручной разработки. Его можно применить не только к кнопке, но и к тексту, шейпу, картинке или другому элементу, которому задан CSS-класс.
Модификация NLM097 от Nolim добавляет такой эффект в Zero Block без ручной разработки. Его можно применить не только к кнопке, но и к тексту, шейпу, картинке или другому элементу, которому задан CSS-класс.
Как установить за 1 минуту
Создай в Zero Block элемент, к которому нужно применить магнитный эффект: кнопку, текст, картинку или шейп. Нажми на него правой кнопкой мыши, выбери «Add CSS Class Name» и задай класс, например `magnit`.
После этого открой генератор на странице модификации, укажи тот же класс, настрой расстояние срабатывания, увеличение элемента, скорость эффекта и угол поворота. Скопируй готовый код, вставь его в блок T123 и опубликуй страницу.
После этого открой генератор на странице модификации, укажи тот же класс, настрой расстояние срабатывания, увеличение элемента, скорость эффекта и угол поворота. Скопируй готовый код, вставь его в блок T123 и опубликуй страницу.
Где использовать магнитную кнопку
Магнитная кнопка хорошо подходит для главных CTA: «Оставить заявку», «Смотреть проект», «Купить», «Записаться», «Открыть каталог», «Скачать презентацию». Эффект помогает выделить действие без лишних декоративных элементов.
Его часто используют на промо-страницах, портфолио, сайтах студий, лендингах мероприятий и креативных проектах. Особенно хорошо эффект смотрится в минималистичных блоках, где кнопка должна быть главным интерактивным акцентом.
Его часто используют на промо-страницах, портфолио, сайтах студий, лендингах мероприятий и креативных проектах. Особенно хорошо эффект смотрится в минималистичных блоках, где кнопка должна быть главным интерактивным акцентом.
Что можно настроить
В генераторе можно задать, на каком расстоянии от центра элемента будет срабатывать магнитный эффект. Чем больше значение, тем раньше кнопка начнёт реагировать на курсор.
Также можно настроить увеличение элемента, скорость движения и угол вращения. Например, для спокойного корпоративного сайта лучше оставить лёгкое увеличение без сильного поворота. Для промо-страницы можно сделать эффект заметнее: добавить поворот, увеличить радиус срабатывания и ускорить реакцию.
Также можно настроить увеличение элемента, скорость движения и угол вращения. Например, для спокойного корпоративного сайта лучше оставить лёгкое увеличение без сильного поворота. Для промо-страницы можно сделать эффект заметнее: добавить поворот, увеличить радиус срабатывания и ускорить реакцию.
Когда эффект лучше не использовать
Магнитная кнопка не нужна на каждой кнопке сайта. Если все элементы будут двигаться за курсором, интерфейс станет шумным и пользователь перестанет понимать, где главный акцент.
Лучше выбрать 1−3 важных элемента на странице: основную кнопку первого экрана, кнопку в блоке тарифов или финальный CTA перед формой. Так эффект будет работать как акцент, а не как визуальный шум.
Лучше выбрать 1−3 важных элемента на странице: основную кнопку первого экрана, кнопку в блоке тарифов или финальный CTA перед формой. Так эффект будет работать как акцент, а не как визуальный шум.
Что проверить после публикации
После установки проверь эффект на разных элементах и разрешениях. Кнопка не должна «убегать» слишком далеко от курсора, перекрывать соседние элементы или мешать нажатию.
Отдельно проверь мобильную версию. На телефоне нет курсора, поэтому магнитный эффект там не играет основной роли. Главное — чтобы кнопка оставалась обычной, понятной и удобной для нажатия пальцем.
Отдельно проверь мобильную версию. На телефоне нет курсора, поэтому магнитный эффект там не играет основной роли. Главное — чтобы кнопка оставалась обычной, понятной и удобной для нажатия пальцем.
Популярные решения для вашего сайта
Не нашли нужное решение?
Часто задаваемые вопросы
Зайди в генератор на nolim.cc/magnite-button, укажи ID элемента в Zero Block, задай силу притяжения (px), радиус срабатывания и скорость возврата. Скопируй код и вставь в блок «HTML-код». При поднесении курсора к кнопке она будет «притягиваться» к нему.
К любому элементу, который имеет ID в Zero Block: кнопкам, тексту, шейпам, иконкам. Ты задаёшь ID элемента в генераторе — и эффект магнитной кнопки применяется именно к нему. Можно настроить несколько элементов на одной странице.
Эффект магнита использует движение курсора мыши, поэтому на мобильных устройствах (где нет курсора) он не активируется. В мобильной версии кнопка выглядит и работает как обычно. Это ожидаемое поведение — эффект предназначен для десктопа.
Было: портфолио разработчика интерфейсов выглядело красиво, но не давало никакого «вау-момента».
Стало: главная CTA-кнопка «Посмотреть проекты» получила эффект магнита через Nolim — курсор тянется к ней, когда проходишь рядом. Посетители задерживались на странице дольше и чаще нажимали именно эту кнопку — рост CTR на 33%.
Стало: главная CTA-кнопка «Посмотреть проекты» получила эффект магнита через Nolim — курсор тянется к ней, когда проходишь рядом. Посетители задерживались на странице дольше и чаще нажимали именно эту кнопку — рост CTR на 33%.