Анимированный градиентный фон Элементора (Pro): движущиеся градиентные секции
Анимированный Градиент BG является расширение Master Addons Pro, которое помещает медленно движущийся линейный градиент позади контейнера, секции или столбца. вы выбираете два или более цветов, угол, продолжительность и ослабление, и градиент дрейфует вперед и назад в петле без какого-либо изображения или видео файла. часто используется для героев разделов, диапазонов вызова к действию и скоро приходящих страниц. для градиентного цвета текста вместо фона попробуйте бесплатно Градиентный заголовок виджет.
Два или более цвета, один движущийся градиент
Добавить цвета в Цвет список, одна строка на цвет. расширение нужно как минимум два. Он равномерно распределяет их по линейному градиенту и повторяет первый цвет в конце, поэтому петля не имеет жесткого края. нет настроек для позиций остановки цвета или радиального градиента. редактор предварительно просматривает обновления по мере выбора цветов.
- Список цветов: добавляйте, дублируйте или удаляйте строки. Лучше всего обычно читают два-четыре цвета.
- Прозрачные цвета: градиент сидит на собственном слое над нормальным фоном секции, поэтому цвета с прозрачностью пропускают фоновое изображение.
- Где это работает: контейнеры, разделы и столбцы, во вкладке Стиль Виджеты не получают панель.
Угол, продолжительность и облегчение
Угол устанавливает направление градиента от -45 до 180 градусов, по умолчанию -45. Общая продолжительность анимации (секунды) проходит от 1 до 20 и по умолчанию до 6. Это время, необходимое градиенту, чтобы дрейфовать поперек и назад. Анимационный эффект устанавливает смягчение: линейное, легкое, легкое, облегченное, легкое или одно из трех плавных кривых, с Material Design (гладкий) по умолчанию.
- Медленно и тонко: От 12 до 20 секунд значительно отстают от текста героя.
- Всегда включен: цикл начинается при загрузке страницы и не имеет триггера наведения или прокрутки.
- Переход Плавность: этот ползунок отображается на панели, но он не меняет анимацию в текущей версии.
Градиентный фон элементара по сравнению с анимированным градиентом BG
Свободная настройка Fackground от Elementor имеет тип Gradient (отмечен на Elementor 4.2.4), но градиент не движется. анимировать его можно, написав CSS-ключевые кадры самостоятельно, или воспользоваться расширением.
| Особенность | Градиент Элементора | CSS вручную | Анимированный градиент BG |
|---|---|---|---|
| Цена | Бесплатно | Бесплатно | Мастер Аддоны Про |
| Движение | Статический | Да, вы пишете ключевые кадры | Да, встроенный |
| Цвета | 2, с местами остановки | Любой | 2 и более, равномерно расположенные |
| Градиентный тип | Линейный или радиальный | Любой | Только линейный |
| Угол | от 0 до 360 на устройство | Любой | -45 к 180 |
| Скорость и смягчение | Нет | Да | Продолжительность от 1 до 20 с, 8 вариантов смягчения |
| Настраивать в | Панель стиля | Пользовательские CSS | Панель стиля |
Для неподвижного градиента достаточно собственной настройки Elementor и дает больше контроля над остановками и типом градиента Расширение позволяет сохранять написание ключевых кадров, когда вы хотите, чтобы градиент двигался.
Связанный: Градиентный заголовок (бесплатно) для градиентного текста, плюс Частицы (бесплатно) и Фоновый слайдер (бесплатно) для других движущихся фонов.
Как добавить анимированный градиентный фон в Elementor
После включения расширения панель появляется на вкладке Стиль каждого контейнера, раздела и столбца Вот подробности документация по анимированному градиентному фону.
- С активными Master Addons Pro перейдите по адресу Основные дополнения > расширения и включайтесь Анимированный градиент BG.
- Редактируйте свою страницу с помощью Elementor и выберите контейнер, раздел или столбец.
- Открыть Стиль вкладка и расширение Анимированный градиентный фон.
- Набор Включить анимированный градиент да. Появляются три цвета образца.
- Измените цвета в Цвет список, затем набор Угол, Общая продолжительность анимации (секунды) и Анимационный эффект.
- Обновите страницу и проверьте, чтобы ваш текст оставался читаемым по каждому цвету.
Часто задаваемые вопросы по анимированному градиенту BG
Анимированный градиент BG бесплатен?
Нет. является частью Master Addons Pro. свободный Градиентный фон Elementor статичен, поэтому движущемуся градиенту нужно это расширение или собственный CSS.
Могу ли я использовать его на фоновом изображении?
Да. градиент нарисован на собственном слое над нормальным фоном секции. выбирайте цвета с некоторой прозрачностью в цветосборнике и фоновое изображение показывает сквозь.
Сколько цветов я могу использовать в одной анимации?
Как минимум два, и столько, сколько вы добавите после этого. цвета расположены равномерно, поэтому два-четыре обычно дают самый чистый результат.
Анимация играет постоянно, или я могу заставить ее играть на зависании?
Он играет все время. цикл начинается, когда страница загружается и не имеет hover или прокрутки триггера. для эффекта только hover вам понадобится ваш собственный CSS, например с Пользовательские CSS расширение.
Виджеты и расширения трендовых элементов
Создавайте сложные веб-сайты за меньшее время.
Стекломорфизм
Дополнительные контейнеры
Шаблоны
![Расширение Master Addons Post/Page Duplicator для Elementor: ссылка на строку MA Duplicator в списке WordPress Pages, создающая целевую страницу - [Дублированный № 128] черновик](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
Дубликатор сообщений/страниц
