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

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

Эта модификация предлагает четыре различных эффекта для кнопок в Зеро блоке, позволяя создавать уникальные и привлекательные кнопки. Она поддерживает гибкие настройки, включая изменение цвета текста и иконок, а также возможность загрузки любых иконок для каждой кнопки.
Инструкция
  1. Создаешь в 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
Появление иконки
Зумирование иконки
Перемещение иконки
Увеличение точки