NLM111 • Время настройки: 1 минута
Градиентный анимированный текст на Тильде
Модификация позволяет добавить анимацию градиента в заливку вашего текста. В генераторе модификации, вы можете настроить цвета градиента, а также продолжительность анимации.
Посмотрите, как будет выглядеть модификация на вашем сайте.
Дизайн настраиваете сами — наша модификация добавит нужный эффект.
НОЛИМ
Смотрите, как быстро установить модификацию
Инструкция
1. «Класс» — В данном поле необходимо придумать и указать краткое название класса, который будет использоваться для добавления анимации градиента к тексту. Пример: «text-gradient»;
2. «Секунды анимации (Длительность анимации в секундах)» — Это поле предназначено для настройки продолжительности анимации градиента. Анимация будет повторяться бесконечно, и время, указанное в этом поле, определит интервал, за который анимация будет переходить от первого цвета к последнему;
3. «Цвет крайних точек градиента (Цвет начала и конца градиента)» — Этот цвет задается для обеспечения плавного зацикливания анимации. Он используется в начале и конце анимации;
4. «Цвет слева от центра градиента» — Это второй цвет, который следует за начальным цветом при анимации;
5. «Цвет центра градиента» — Третий цвет, расположенный в центре градиента;
6. «Цвет справа от центра градиента» — Четвертый цвет, используемый справа от центрального цвета градиента;
7. Копируем сгенерированный HTML код и вставляем его в блок Т123.
2. «Секунды анимации (Длительность анимации в секундах)» — Это поле предназначено для настройки продолжительности анимации градиента. Анимация будет повторяться бесконечно, и время, указанное в этом поле, определит интервал, за который анимация будет переходить от первого цвета к последнему;
3. «Цвет крайних точек градиента (Цвет начала и конца градиента)» — Этот цвет задается для обеспечения плавного зацикливания анимации. Он используется в начале и конце анимации;
4. «Цвет слева от центра градиента» — Это второй цвет, который следует за начальным цветом при анимации;
5. «Цвет центра градиента» — Третий цвет, расположенный в центре градиента;
6. «Цвет справа от центра градиента» — Четвертый цвет, используемый справа от центрального цвета градиента;
7. Копируем сгенерированный HTML код и вставляем его в блок Т123.
Сгенерируйте код для своего сайта
Обратите внимание!
Чтобы участвовать в бонусной программе, авторизуйтесь — после входа ваша реферальная ссылка будет автоматически добавлена при копировании.
Подробнее о реферальной программе
Скопировать обычную ссылку
Код готов и доступен по подписке Нолим
Уже есть подписка? Войти
Добавляйте на сайт слайдеры, аккордеоны, вкладки и скроллы — 200+ готовых решений в одной подписке
Ведутся технические работы((
Попробуйте перелогиниться, если не помогло, загляните к нам через 20 минут...
Попробуйте перелогиниться, если не помогло, загляните к нам через 20 минут...
Напишите в нашу поддержку — мы поможем с настройкой и внедрением.
Остались вопросы?
Шаг 3
Чтобы получить доступ к копированию кода и использовать его на сайте, выполните 3 простых шага:
Скопируйте код из генератора, вставьте его в блок T123 на вашем сайте в Тильде и опубликуйте страницу.
Настройте модификацию
Шаг 2
И получите доступ к библиотеке из более чем 200 модификаций.
Возобновите подписку
Шаг 1
Напишите в нашу поддержку — мы поможем с настройкой и внедрением.
Остались вопросы?
Шаг 3
Чтобы получить доступ к копированию кода и использовать его на сайте, выполните 3 простых шага:
Скопируйте код из генератора, вставьте его в блок T123 на вашем сайте в Тильде и опубликуйте страницу.
Настройте модификацию
Шаг 2
И получите доступ к библиотеке из более чем 200 модификаций.
Оплатите подписку
Шаг 1
Анимированный градиент в тексте на Тильде
Модификация NLM111 добавляет движущийся градиент в текст на сайте Tilda. Такой эффект удобно использовать для акцентных заголовков, коротких офферов, промо-блоков и отдельных фраз, которые нужно визуально выделить без сложной анимации в Zero Block.
Когда подходит градиентный текст
Анимированный градиент хорошо работает там, где обычного цвета уже недостаточно: в первом экране, блоке с преимуществами, презентации нового продукта, тарифах или CTA-секции. Текст остаётся текстом, но получает живой визуальный акцент за счёт плавной смены цветов.
Когда подходит градиентный текст
Анимированный градиент хорошо работает там, где обычного цвета уже недостаточно: в первом экране, блоке с преимуществами, презентации нового продукта, тарифах или CTA-секции. Текст остаётся текстом, но получает живой визуальный акцент за счёт плавной смены цветов.
ффект лучше использовать точечно. Если добавить его ко всем заголовкам подряд, страница станет перегруженной. Оптимальный сценарий — выделить одну важную фразу или ключевой смысл, который должен быстро считываться пользователем.
ффект лучше использовать точечно. Если добавить его ко всем заголовкам подряд, страница станет перегруженной. Оптимальный сценарий — выделить одну важную фразу или ключевой смысл, который должен быстро считываться пользователем.
Что можно настроить в генераторе
В генераторе Nolim задаётся CSS-класс для текста, длительность анимации и несколько цветов градиента: крайние точки, цвет слева от центра, центральный цвет и цвет справа от центра. За счёт этого можно собрать мягкий перелив под спокойный интерфейс или более контрастный эффект для промо-страницы.
После настройки генератор создаёт готовый HTML-код. Его нужно скопировать и вставить в блок T123 на странице Тильды. Дальше эффект применяется к тексту, которому указан нужный класс.
После настройки генератор создаёт готовый HTML-код. Его нужно скопировать и вставить в блок T123 на странице Тильды. Дальше эффект применяется к тексту, которому указан нужный класс.
Как использовать эффект аккуратно
Перед установкой стоит заранее выбрать текстовый элемент, который будет работать как главный акцент. Это может быть слово в заголовке, короткая фраза или часть оффера. Для длинных абзацев анимированный градиент обычно не подходит: пользователю сложнее читать большой текст с постоянным движением цвета.
Также важно подобрать цвета под дизайн страницы. Если сайт сделан в спокойной палитре, лучше использовать близкие оттенки и плавную анимацию. Для ярких лендингов можно сделать градиент заметнее, но без резких переходов, чтобы эффект не спорил с остальными элементами интерфейса.
Также важно подобрать цвета под дизайн страницы. Если сайт сделан в спокойной палитре, лучше использовать близкие оттенки и плавную анимацию. Для ярких лендингов можно сделать градиент заметнее, но без резких переходов, чтобы эффект не спорил с остальными элементами интерфейса.
Градиентный текст без ручной настройки кода
NLM111 помогает добавить анимированный градиент в текст без самостоятельного написания CSS. Вы выбираете параметры в генераторе, копируете готовый код и вставляете его на страницу. Это удобно для дизайнеров, которые собирают сайт на Тильде и хотят быстро добавить визуальный эффект в Zero Block или другой текстовый элемент с заданным классом.
Популярные решения для вашего сайта
Не нашли нужное решение?
Часто задаваемые вопросы
Создайте текстовый элемент на странице, задайте ему CSS-класс, настройте цвета и длительность анимации в генераторе NLM111, затем скопируйте готовый HTML-код и вставьте его в блок T123 на странице Тильды.
Да, модификацию можно использовать для текста в Zero Block. Для этого нужно указать класс текстового элемента и применить к нему код, который создаёт генератор Nolim.
В генераторе можно задать цвет крайних точек градиента, цвет слева от центра, центральный цвет и цвет справа от центра. Так можно сделать плавный перелив под стиль конкретной страницы.
Да, скорость настраивается через поле длительности анимации. Чем больше значение в секундах, тем медленнее будет двигаться градиент. Чем меньше значение, тем быстрее будет перелив.
Сгенерированный HTML-код нужно вставить в блок T123 на той странице, где находится текст с анимированным градиентом. После этого страницу нужно опубликовать и проверить эффект на сайте.
Лучше использовать эффект для коротких фраз, заголовков, отдельных слов и CTA-блоков. На длинных абзацах анимация может мешать чтению, поэтому градиентный текст лучше добавлять точечно.
Нет, вручную писать CSS не нужно. Генератор NLM111 создаёт готовый код по выбранным настройкам: классу, длительности анимации и цветам градиента.