Плоский цвет фона делает свое дело и исчезает Градиент, который медленно дрейфует между цветами, заставляет один и тот же раздел чувствовать себя живым, не добавляя ни одного изображения.The Анимированный градиент BG расширение в Мастер-аддоны для Elementor добавляет этот эффект в любой раздел или контейнер: выбирайте цвета, устанавливайте угол и скорость, а фон проходит через них самостоятельно.
Вот эффект, запущенный на живой странице Раздел перемещается через свой набор цветов, пока содержимое остается на месте:
Что делает расширение Animated Gradient BG #
После включения контейнеры и разделы получают an Анимированный градиентный фон панель в их Стиль вкладка, прямо под нормальным разделом "Фон" Вы загружаете его двумя или более цветами, и расширение отображает градиент, который оживляет между ними в петле. Угол, общее время цикла и плавность каждого перехода - все это ваше значение.
Все работает в CSS на самом элементе, поэтому нет видео, которое можно было бы разместить или сжать изображение, а текст сверху остается выбираемым и читаемым.
Прежде чем начать #
- WordPress с Элементор установлен и активен.
- Мастер-аддоны для Elementor установлен и активен. Новое в плагине? Следуйте руководство установки первый.
- Animated Gradient BG - бесплатное расширение, поэтому лицензия Pro не требуется.
Как включить расширение Animated Gradient BG #
С панели управления WordPress перейдите по адресу Мастер Аддоны и откройте Расширения вкладка. Анимированный градиент BG находится в Виджеты анимации группа, рядом с Частицы и Фоновый ползунок. Нажмите на его тумблер, чтобы он стал фиолетовым, затем нажмите Сохранить изменения и дождитесь зеленого “Настройки успешно сохранены” уведомление.
Установите градиент на участке #
Выберите контейнер или раздел в редакторе Elementor и откройте Стиль вкладка. Анимированный градиентный фон секция с фиолетовым значком MA находится чуть ниже фона. Перевернуть Включить анимированный градиент да, и элементы управления появляются, пока холст просматривает эффект в реальном времени.
- Анимационный эффект: смягчение цветового движения, Ease In в демо.
- Угол: направление градиента -45 в демо-версии для диагональной развертки.
- Общая продолжительность анимации (секунды): одно полное путешествие по всем вашим цветам. демо использует 6 секунд.
- Плавность перехода (секунды): как мягко один цвет руки прочь к следующему, 3 секунды в демо Подсказка панели говорит прямо: более высокие значения создают более плавные переходы между цветами.
- Цвет: ретранслятор, удерживающий градиент, останавливается Нажать Добавить элемент для другого цвета или для X, чтобы уронить один.
Выберите цвета #
Каждая строка в списке цветов открывает стандартный сборщик. демо-версия начинается с голубого, фиолетового и оранжевого набора, затем свопы останавливаются: удалите один, и петля затягивается, добавьте темно-синий (#3D6CD6), и цикл сразу же подхватит его. Предварительный просмотр в реальном времени делает это забавной частью; вы наблюдаете, как настроение раздела меняется с каждой остановкой, к которой вы прикасаетесь.
Два или три цвета в одном температурном диапазоне читаются как элегантные Пять цветов на всем колесе читаются как заставка Начните с малого.
Результат на странице #
Публикуйте и наблюдайте, как раздел дышит сквозь свои цвета, как в GIF в верхней части этой страницы. полный цикл принимает все, что вы установили в качестве продолжительности, затем циклы. кнопки, заголовки, и изображения сидят сверху незатронутыми.
Одно практическое примечание: темный текст остается читаемым на световых градиентных остановках, но может исчезнуть на насыщенных. сверьте заголовок с каждым цветом в наборе, а не только с первым кадром.
Где хорошо работают анимированные градиенты #
- Разделы Героя. Движение над складкой без тяжелого фонового видео.
- Группы призыва к действию. Перемещающийся фон притягивает взгляд к кнопке, на которой он едет.
- Скоро и целевые страницы. Полноэкранный градиент сам по себе содержит редкую страницу.
- Сайты портфелей и агентств. Цвета бренда циклически меняются через заголовок, не платя за стандартное видео.
- Разделы цен. Тонкий уклон за выделенным планом отделяет его от остальных.
Видео Учебник #
Следите за градиентом, построенным с нуля, от расширения до готового движущегося фона.
Часто задаваемые вопросы #
Как добавить анимированный градиентный фон в Elementor?
Включите расширение Animated Gradient BG на вкладке Расширения главных дополнений, выберите раздел или контейнер и откройте вкладку Стиль Включите Включить Анимированный Градиент на панели Анимированный Градиент Фон, добавьте два или более цветов, и фон начинает циклически работать немедленно.
Сколько цветов может использовать градиент?
Столько, сколько вы добавляете в повторитель цвета Каждый клик Добавить элемент создает еще одну остановку градиента, и анимация циклически проходит через все из них в пределах общей продолжительности, которую вы установили Два-четыре цвета покрывают большинство дизайнов.
Могу ли я контролировать скорость градиентной анимации?
Да, с двумя настройками. общая продолжительность анимации устанавливает, сколько секунд занимает один полный цикл цвета, а плавность перехода контролирует, как постепенно каждый цвет сливается с следующим. более высокие значения гладкости генерируют больше ключевых кадров для более мягкой передачи обслуживания.
Анимированный градиент замедляет мою страницу?
Эффект генерируется с помощью CSS-анимации на элементе, а не видео или файла изображения, поэтому больше нечего загружать. Это один из самых легких способов приведения движения в раздел героя.
Расширение Animated Gradient BG бесплатное?
Да. анимационный градиент BG поставляется с бесплатной версией главных дополнений для Elementor, в группе Виджеты анимации вкладки Расширения. на странице цен указано, что добавляют планы Pro.
Завершая #
Расширение Animated Gradient BG превращает фон секции в медленно движущийся цвет: список цветов, угол и два ползунка синхронизации. Держите палитру плотной, проверяйте контрастность текста на каждой остановке, и секция несет движение с нулевым весом актива. Он хорошо сочетается с Расширение входной анимации для контента, который попадает на движущийся фон, и полный набор Виджеты и расширения Master Addgets находится на одной странице.
