Loading...
Мы в соцсетях
Ответим на вопросы
Техподдержка
No-code платформа для интеграции с российскими сервисами
Адаптер
Образовательные курсы и гайды для IT-специалистов
Академия
Партнерам
Клиентам
О нас
Плагин для Тильды
Скачать расширение
Техподдержка
Модификации
AI-ассистент
Обучение
Профиль
Подписка
Партнерка
Новости
Шаблоны
Ai-ассистент для Тильды
....
NLM183 • Время настройки: 3 минуты

Как добавить иконку с анимацией при наведении на кнопку в зеро блоке на Тильде?

Эта модификация предлагает четыре различных эффекта для кнопок в Зеро блоке, позволяя создавать уникальные и привлекательные кнопки. Она поддерживает гибкие настройки, включая изменение цвета текста и иконок, а также возможность загрузки любых иконок для каждой кнопки.
Инструкция
Создаешь в Zero Block кнопку, задаешь ей цвет и текст. Добавляешь кнопке класс, вписываешь этот класс в генератор модификации в поле «Класс кнопки».

Чтобы указать class у элемента, нажимаешь на него правой кнопкой мыши и выбираешь из списка последнюю строку "Add CSS Class Name", далее, справа в настройках указываешь class.

Настройки генератора модификации:
«Тип эффекта» – доступны 4 эффекта «Увеличение точки», «Перемещение иконки», «Зумирование иконки», «Появление иконки»;
«Класс кнопки» – указываешь класс кнопки такой же как в Zero Block;
«Ссылка для иконки» – указываешь ссылку на свою иконку.
Чтобы получить ссылку на иконку для вставки в модификацию, сделай следующее: добавь на страницу галерею GL12 и загрузи в неё изображение, далее копируешь ссылку на него и вставляешь в генератор в указанное поле. Формат файла советуем использовать svg или png;
«Ссылка для иконки при наведении» – добавь ссылку на иконку, которая будет появляться в эффекте «Перемещение стрелки».
«Цвет круга» – укажи начальный цвет круга в кнопке;
«Цвет круга при наведении» – укажи цвет круга в кнопке при наведении. Доступно только в эффекте «Перемещение стрелки».
2.Копируешь сгенерированный HTML код и вставляешь его в блок Т123.

Имей ввиду:
Анимация запускается только при наведении курсора, поэтому на мобильных устройствах она не сработает.

Посмотрите, как будет выглядеть модификация на вашем сайте.

Дизайн настраиваете сами — наша модификация добавит нужный эффект.
Появление иконки
Зумирование иконки
Перемещение иконки
Увеличение точки

Смотрите, как быстро установить модификацию

Сгенерируйте код для своего сайта

Напишите в нашу поддержку — мы поможем с настройкой и внедрением.
Остались вопросы?
Шаг 4
Копировать код
Чтобы получить доступ к копированию кода и использовать его на сайте, выполните 4 простых шага:
Скопируйте код из генератора, вставьте его в блок T123 на вашем сайте в Тильде и опубликуйте страницу.
Настройте модификацию
Шаг 3
И получите доступ к библиотеке из более чем 200 модификаций.
Оплатите подписку
Шаг 2
Создать аккаунт — это быстро и просто.
Войдите или зарегистрируйтесь на платформе
Шаг 1
Ведутся технические работы((
Попробуйте перелогиниться, если не помогло, загляните к нам через 20 минут...
Напишите в нашу поддержку — мы поможем с настройкой и внедрением.
Остались вопросы?
Шаг 3
Копировать код
Чтобы получить доступ к копированию кода и использовать его на сайте, выполните 3 простых шага:
Скопируйте код из генератора, вставьте его в блок T123 на вашем сайте в Тильде и опубликуйте страницу.
Настройте модификацию
Шаг 2
И получите доступ к библиотеке из более чем 200 модификаций.
Возобновите подписку
Шаг 1
Копировать код
Напишите в нашу поддержку — мы поможем с настройкой и внедрением.
Остались вопросы?
Шаг 3
Чтобы получить доступ к копированию кода и использовать его на сайте, выполните 3 простых шага:
Скопируйте код из генератора, вставьте его в блок T123 на вашем сайте в Тильде и опубликуйте страницу.
Настройте модификацию
Шаг 2
И получите доступ к библиотеке из более чем 200 модификаций.
Оплатите подписку
Шаг 1

Популярные решения для вашего сайта

Не нашли нужное решение?

Часто задаваемые вопросы

Наши видеоинструкции позволяют внедрять модификации за 2−5 минут даже без технических знаний. Всё делается прямо в редакторе Тильды, без ручного редактирования кода
Не нашли свой вопрос?
Напишите нам — мы поможем и подскажем оптимальное решение для вашего сайта.
Не нашли свой вопрос?
Напишите нам — мы поможем и подскажем оптимальное решение для вашего сайта.
Есть идеи по улучшению этой модификации или созданию новой?
Поделись своим предложением или проголосуй за понравившуюся идею. Наиболее популярные будем реализовывать.
Не забудь подписаться, чтобы быть в курсе последних обновлений.