Плоский цвет фона делает свое дело и исчезает Градиент, который медленно дрейфует между цветами, заставляет один и тот же раздел чувствовать себя живым, не добавляя ни одного изображения.The Расширение анимированного градиента BG в Мастер Аддоны Про добавляет этот эффект в любой контейнер, секцию или столбец: выбирайте цвета, устанавливайте угол и скорость, а фон проходит через них самостоятельно.
Вот эффект, запущенный на живой странице Раздел перемещается через свой набор цветов, пока содержимое остается на месте:
Что делает расширение 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 на вкладке Расширения главных дополнений, выберите контейнер, раздел или столбец и откройте вкладку Стиль Включите Включить Анимированный Градиент на панели Анимированный Градиент Фон, добавьте два или более цветов, и фон начинает циклически сразу.
Сколько цветов может использовать градиент?
Столько, сколько вы добавляете в повторитель цвета Каждый клик Добавить элемент создает еще одну остановку градиента, и анимация циклически проходит через все из них в пределах общей продолжительности, которую вы установили Два-четыре цвета покрывают большинство дизайнов.
Могу ли я контролировать скорость градиентной анимации?
Да. Общая продолжительность анимации устанавливает, сколько секунд занимает один полный цикл, от 1 до 20, а Animation Effect устанавливает смягчение. ползунок "Плавнота перехода" не влияет на анимацию в текущей версии.
Анимированный градиент замедляет мою страницу?
Эффект - это CSS-анимация, настроенная небольшим сценарием, а не видео или файлом изображения, поэтому лишнего скачать очень мало. это один из самых легких способов поставить движение в разделе героя.
Расширение Animated Gradient BG бесплатное?
Нет. Анимированный градиент BG является расширением Pro в Master Addons.Elementor имеет свободный тип фона Градиента, но этот градиент не движется.
Завершая #
The Расширение анимированного градиента BG превращает фон раздела в медленно движущийся цвет: список цветов, угол, продолжительность и смягчение. Держите палитру тугой, проверяйте контрастность текста на каждой остановке, и раздел несет движение с нулевым весом актива. Он хорошо сочетается с Расширение входной анимации для контента, который попадает на движущийся фон, бесплатно Градиентный заголовок виджет охватывает градиентный текст и полный набор Виджеты и расширения Master Addgets находится на одной странице.
