Некоторые фоны сидят неподвижно, а некоторые дрейфуют Плавающие точки, соединенные тонкими линиями, или снег, падающий за заголовком: эффекты частиц дают секцию тихое движение без видеофайла в поле зрения Бесплатный Расширение ЧАСТИЦ в Мастер-аддоны для Elementor отображает именно это за вашим контентом, питается от известной библиотеки particles.js и настраивается с помощью одного поля JSON.
Вот демо-раздел, в котором на опубликованной странице запускается предустановка Snow:
Что делает расширение Частиц #
После включения разделы, столбцы и контейнеры получают a Частицы панель в их Стиль вкладка. Перевернуть Включить фон частиц к Да и фон раздела становится холстом живой частицы Панель сохраняет его минимальным:
- Включить фон частиц: переключатель включения/выключения для эффекта.
- Z-индекс: где слой частиц находится в стопке, поэтому он остается за содержимым.
- Частица JSON: здесь живет кодовое поле, содержащее конфигурацию particles.js: количество частиц, цвет, форма, размер, линии связи, скорость движения и интерактивность зависания.
Конфигурация по умолчанию поставляется в коробке, белые точки соединяются тонкой линейной сетью, а панель подключается прямо к генератору particles.js для создания собственного.
Прежде чем начать #
- WordPress с Элементор установлен и активен.
- Мастер-аддоны для Elementor установлен и активен. Новое в плагине? Следуйте руководство установки первый.
- Частицы - это бесплатное расширение, поэтому лицензия Pro не требуется.
- Кодирование не требуется: JSON поступает от генератора "укажи и щелкни".
Как включить расширение частиц #
С панели управления WordPress перейдите по адресу Мастер Аддоны и откройте Расширения вкладка Частицы находятся в Виджеты анимации группа с популярным значком рядом с Floating Effects и Анимированный градиент BG. Нажмите на его переключатель, чтобы он стал фиолетовым, а затем нажмите Сохранить изменения и дождитесь зеленого “Настройки успешно сохранены” уведомление.
Найдите панель "Частицы" в разделе #
Выберите контейнер или раздел в редакторе Elementor и откройте Стиль вкладка. Частицы раздел с фиолетовым значком MA находится вместе с другими фоновыми инструментами Master Addons: Animated Gradient Background, Фоновый слайдер, и Шаблоны.
Включите его и выполните эффект по умолчанию #
Разверните частицы и переключайте Включить фон частиц к Да. холст сразу запускает конфигурацию по умолчанию: белые точки дрейфуют по сечению, соединяются тонкими линиями в движущуюся сеть.The Частица JSON поле ниже содержит конфигурацию, которая управляет им, и Z-индекс держит слой за вашим текстом.
Возьмите предустановку из генератора particles.js #
The Нажмите здесь ссылка над полем JSON открывает демо-сайт particles.js, живой генератор с заданными конфигурациями: По умолчанию НАСА, Пузырь, Снег и Ньян Кэт. Выберите один, настройте ползунки, если хотите, и ударьте Скачать текущую конфигурацию (json).
Откройте загруженный файл, скопируйте JSON и вставьте его в поле Particle JSON. Демо-версия идет с предустановкой Snow, и холст переключается с сети линий на мягкие белые хлопья, падающие на раздел в момент приземления конфигурации.
Результат на странице #
Публикуйте и раздел заносится снегом самостоятельно, как в GIF в верхней части этой страницы. частицы рендерингуются на холсте за содержимым, поэтому все сверху остается четким, пока фон продолжает двигаться. конфигурации по умолчанию также реагируют на курсор; стандартный сетевой эффект отталкивает частицы при зависании.
Одно практическое примечание: количество частиц стимулирует производительность. предустановка Snow работает на 400 частиц и остается гладкой, но если страница укладывает несколько разделов частиц, сохраняйте количество скромным и проверяйте его на телефоне среднего класса.
Где подходит фон частиц #
- Разделы Героя. Сеть подключенных точек читает технические и современные темы под смелым заголовком.
- Сезонные кампании. Пресет Snow превращает любую зимнюю игру в разделе промо в одну пасту.
- SaaS и страницы запуска. Медленно дрейфующие частицы добавляют глубину, не отвлекаясь от пека.
- Темные разделы. Конфигурации звездного поля, такие как НАСА, заставляют темный фон казаться преднамеренным.
- Страницы событий и запуска. Движение за обратным отсчетом поддерживает редкую страницу.
Видео Учебник #
Посмотрите всю настройку: от включения расширения до падения снега на опубликованной странице.
Часто задаваемые вопросы #
Как добавить фон частиц в Elementor?
Включить расширение Частицы на вкладке Расширения главных дополнений, выбрать раздел и открыть Частицы на вкладке Стиль Переключить Включить фон Частиц в Да и анимированная сеть по умолчанию появляется немедленно, конфигурация не требуется.
Откуда у меня эффекты различных частиц?
Ссылка "Нажмите здесь" на панели открывает генератор particles.js с такими предустановками, как NASA, Bubble, Snow и Nyan Cat. Отрегулируйте настройки в реальном времени, загрузите конфигурацию как JSON и вставьте ее в поле Particle JSON.
Частицы замедляют страницу?
Эффект работает на легком холсте и остается гладким при типичных подсчетах; демо-версия Snow работает на 400 частиц без заикания. сохраняйте разумный счет и избегайте укладки множества разделов частиц на одной странице, особенно для мобильных посетителей.
Могут ли частицы реагировать на мышь?
Да. конфигурация particles.js включает в себя параметры интерактивности, а конфигурация по умолчанию отталкивает частицы, когда курсор перемещается по разделу. поведение "Наведите курсор" и "щелкните" настраивается в JSON.
Расширение Particles бесплатное?
Да. частицы поставляются с бесплатной версией Главных дополнений для Elementor, в группе Виджеты анимации вкладки Расширения На странице цен указано, что добавляют планы Pro.
Завершая #
Расширение Частицы помещает холст живых частиц за любой раздел Элементор: один тумблер для сети по умолчанию, один вставленный JSON для всего, что может придумать генератор частиц.js. Сохраняйте счеты в здравом уме, позвольте Z-индексу удерживать слой за содержимым, и раздел движется без загрузки одного актива. Он естественным образом находится рядом с Анимированный градиентный фон и Фоновый слайдер расширения на той же вкладке "Стиль" и полный набор Виджеты и расширения Master Addgets находится на одной странице. чтобы сравнить это с добавлением частиц.js вручную, см. Страница расширения частиц.
