Фон частиц добавляет анимированные, плавающие формы к вашим разделам Элементора, которые перемещаются, соединяются и реагируют на движение мыши. Они превращают статические секции в привлекательные интерактивные области, которые мгновенно привлекают внимание.
В этом руководстве вы узнаете, как добавить фон частиц Элементора в любой раздел вашего сайта с помощью Мастер-аддоны для Elementor. Мы рассмотрим базовую настройку, встроенные предустановки (NASA, Bubble, Snow) и способы создания собственных эффектов частиц с помощью конфигурации JSON particles.js.
Кодирование не требуется. Весь процесс занимает около 5 минут.
Что такое фон частиц?
Фон частиц - это анимированный эффект, который отображает небольшие формы (точки, круги, звезды или пользовательские формы), плавающие по сечению. эти частицы движутся с разной скоростью, соединяются тонкими линиями, когда они близки друг к другу, и могут реагировать на ваш курсор при наведении курсора.
Эффект питается от частицы.js, популярная библиотека JavaScript. Master Addons интегрирует particles.js непосредственно в Elementor, поэтому вы можете включить и настроить эффект, не касаясь какого-либо кода.
Master Addons включает четыре встроенных предустановки частиц:
| Пресет | Эффект | Лучший Для |
|---|---|---|
| Дефолт | Соединённые точки, плавающие в случайных направлениях | Технические веб-сайты, целевые страницы SaaS |
| НАСА | Пространственноподобные плавающие частицы с эффектом глубины | Разделы о темных героях, страницы на космическую тематику |
| Пузырь | Большие круглые пузыри поднимаются вверх | Креативные портфолио, игривый дизайн |
| Снег | Мелкие белые частицы, падающие как снежинки | Сезонные страницы, разделы на зимнюю тематику |
Вы также можете создавать полностью пользовательские эффекты, генерируя собственную конфигурацию JSON particles.js.
Что понадобится
- WordPress с Элементор (бесплатно или Pro) установлен
- Мастер-аддоны для Elementor установлен и активирован
- The Частицы расширение включено в настройках главных надстроек
Убедитесь, что расширение Частиц включено: перейдите к Мастер-аддоны → расширения на панели управления WordPress и переключатель Частицы вКЛ.
Как добавить частицы. Фон в Elementor: шаг за шагом
Выполните следующие действия, чтобы добавить фон частиц в любой раздел или контейнер Elementor на вашей странице.
Шаг 1: Создайте или выберите раздел
Откройте свою страницу в редакторе Elementor.Создайте новый раздел или выберите существующий, где вы хотите добавить эффект частицы.
Выберите предпочитаемую структуру столбцов Эффект частиц работает с любой компоновкой, будь то один столбец, два столбца или больше.
Шаг 2: Добавьте контент в раздел
Вашему разделу нужен хотя бы один виджет внутри него, чтобы быть видимым в предварительном просмотре. Если вы создаете отдельный раздел частиц (например, анимированную область героя), бросьте a Спейсер виджет в раздел и установить высоту 400-600px.
Вы также можете добавлять заголовки, кнопки, изображения или любые другие виджеты. Частицы будут появляться за всем вашим контентом.
Шаг 3: Установите для секции полную ширину (необязательно)
Для лучшего визуального воздействия установите макет раздела Полная ширина. Это делает частицы охватывающими всю ширину браузера.
Нажмите значок редактирования раздела, перейдите в Макет вкладка и набор Ширина контента чтобы Полная ширина.
Этот шаг не является обязательным. частицы также работают в секциях коробчатой ширины.
Шаг 4: Добавьте цвет фона
Этот шаг важен. частицы по умолчанию белые, поэтому вам нужен темный или цветной фон, чтобы сделать их видимыми.
Нажмите значок редактирования раздела, перейдите в Стиль вкладка и под Фон, установить сплошной цвет или градиент Темно-синий, черный, и глубокий пурпурный лучше всего работают с белыми частицами по умолчанию.
Совет: Для более динамичного образа попробуйте использовать Расширение фона с анимированным градиентом от Master Addons вместо сплошного цвета Градиентные фоны в сочетании с частицами создают потрясающий визуальный эффект.
Шаг 5: Включите эффект частиц
Теперь для основной части. с выбранным разделом, оставайтесь на Стиль вставьте и прокрутите вниз, чтобы найти Частицы МА раздел. Переключить НА.
Эффект элементарной частицы по умолчанию появится сразу в вашем разделе Вы увидите маленькие белые точки, плавающие и соединяющиеся тонкими линиями.
Если эффект по умолчанию выглядит хорошо для вашего дизайна, вы закончили. бить Обновить чтобы сохранить. но если вы хотите настроить стиль частиц, продолжайте читать.
Как настроить эффект элементарных частиц
Мастер Аддоны позволяет полностью настроить частицы с помощью визуального конфигуратора. вы можете изменить количество частиц, их форму, размер, скорость, цвет и поведение движения, все без написания кода.
Шаг 1: Откройте конфигуратор частиц
Ниже переключаются частицы, вы увидите сообщение: “Нажмите здесь, чтобы сгенерировать JSON для поля ниже.” Нажмите на ссылку, чтобы открыть визуальный конфигуратор particles.js.
В верхней части конфигуратора нажмите “Default” чтобы увидеть четыре встроенных предустановки: по умолчанию, НАСА, пузырь и снег. Выберите любой предустановленный параметр в качестве отправной точки или начните с конфигурации по умолчанию.
Шаг 2: Регулировка свойств частиц
Конфигуратор имеет три основных раздела. Сосредоточьтесь на Частицы раздел визуальной настройки:
- Номер — Управление количеством частиц. Более плотный эффект создает, но использует больше ресурсов браузера.
- Цвет — Установить цвет частиц. Используйте белый цвет для темного фона или соответствуйте цветам вашего бренда.
- Форма cho из окружности, квадрата), треугольника, многоугольника или звезды.
- Размер – Установить размер частицы. Включить более естественный вид.
- Непрозрачность – прозрачность. Частичный эффект.
- Линия Связана un able или отключить соединительные линии между близлежащими частицами.
- Движение ѕустанавливают скорость и направление движени частиц.
Шаг 3: Загрузите конфигурацию
Как только вас устроит, как выглядят частицы в живом превью, прокрутите до нижней части конфигуратора и нажмите “Скачать текущую конфигурацию (JSON)”.
Файл с именем particlesjs-config.json загрузится на ваш компьютер.
Шаг 4: Скопируйте код JSON
Открыть скачанное particlesjs-config.json файл в любом текстовом редакторе (Notepad, VS Code или TextEdit).Выберите весь код и скопируйте его.
Не редактируйте JSON вручную, если не знаете, что делаете Визуальный конфигуратор уже сгенерировал точные нужные вам настройки.
Шаг 5: Вставить в Элементор
Вернитесь в свой редактор Elementor. В разделе Стиль → Частицы МА настройки, вы увидите текстовую область, помеченную для частиц JSON-кода Вставьте скопированный вами код и нажмите Обновить.
Ваш пользовательский эффект частиц теперь жить на странице. Предпросмотреть его, чтобы подтвердить, что все выглядит правильно.
Креативные способы использования биографических данных частиц
Вот несколько практических вариантов использования элементного анимированного фона с частицами:
- Разделы Героев ind hero на вашу домашнюю страницу для современного вида в стиле tech-forward. Сочетайтесь с заголовком, подтекстом и кнопкой CTA.
- Разделы цен use тонкий эффект частиц низкой плотности за вашей таблицей цен, чтобы она выделялась на остальной части страницы.
- Отзывные области 1 Нежный снег или эффект пузыря за отзывами добавляют визуального интереса, не отвлекаясь от контента.
- Секции нижнего колонтитула ind частиц в ваш нижний колонтитул для полированного законченного взгляда в нижней части страницы.
- Скоро появятся страницы indicates создают движение на статическом одностраничном макете. Ознакомьтесь с нашим руководством по созданию Элементор скоро появится на странице.
- Разделы призыва к действию ѕривлечение внимания к вашему CTA, поместив его на раздел с анимированными частицами.
Советы по производительности для частиц
Эффекты частиц запускаются в браузере посетителя с помощью JavaScript. чтобы ваш сайт был быстрым:
- Предельное количество частиц. 40-80 частиц обычно достаточно для хорошего визуального эффекта. превышение 150 может замедлить старые устройства.
- Используйте частицы в 1-2 разделах на странице. Не добавляйте частицы в каждый раздел Эффект теряет свое влияние при чрезмерном использовании, и это добавляет накладные расходы на обработку.
- Тест на мобильном. Эффекты частиц могут разрядить батарею на телефонах. подумайте о снижении количества частиц или отключении эффекта на мобильном телефоне с помощью адаптивных настроек видимости Elementor.
- Избегайте частиц на страницах с большим содержанием контента. Длинные посты в блогах и страницы документации не нуждаются в анимированных фонах Сохранить частицы для целевых страниц и ключевых разделов.
Дополнительные советы по производительности можно найти в нашем руководстве как ускорить сайты Elementor.
Другие фоновые эффекты элементара
Частицы - лишь один из нескольких эффектов фона Элементора, доступных в Главных Дополнениях.Посмотреть эти связанные расширения:
- Анимированный градиентный фон — smooth, меняющийся цветовой градиент, который непрерывно оживляет
- Фоновый слайдер — Cy через несколько фоновых эффектов
- Реллакс (Параллакс) глубина Cre с эффектами параллакса прокрутки
- Раскрывать разделы раскрываются при просмотре
Все это включено в Более 80 виджетов и расширений Master Addons.
Часто задаваемые вопросы
Является ли фоновый эффект частиц свободным в Master Addons?
Расширение Particles доступно в бесплатной версии Master Addons с базовыми пресетами Версия Pro дает вам дополнительные возможности настройки и возможность использовать пользовательские конфигурации JSON.Проверьте страница ценообразования для деталей плана.
Работают ли частицы с контейнерами Elementor?
Да. расширение Частицы Master Addons работает как со старыми разделами Elementor, так и с более новыми контейнерами Flexbox.Включите его таким же образом с вкладки Стиль любого контейнера.
Затормозят ли частицы мой сайт?
Частицы запускаются в браузере с помощью JavaScript, поэтому они добавляют некоторые накладные расходы на обработку на стороне клиента. с 40-80 частицами, влияние минимально на современные устройства. Избегайте использования более 150 частиц или добавления эффекта в несколько разделов на одной странице. библиотека particles.js легкая (около 25 КБ), поэтому влияние размера файла на загрузку страницы незначительно.
Могу ли я изменить цвет частиц в соответствии со своим брендом?
Да. используйте визуальный конфигуратор particles.js (связанный с настройками расширения) для изменения цвета частиц, формы, размера, скорости, непрозрачности и т. д. Вы можете установить любое значение цвета гекса для частиц и соединительных линий независимо.
Как отключить частицы на мобильном телефоне?
Вы можете использовать встроенные настройки адаптивной видимости Elementor, чтобы скрыть раздел частиц на мобильных устройствах. Альтернативно, создайте отдельный оптимизированный для мобильных устройств раздел без частиц. Это экономит заряд батареи и вычислительную мощность на телефонах и планшетах.
Начните добавлять частицы на свой сайт Elementor
Добавление фона частиц элементара занимает всего несколько кликов с помощью главных аддонов. выбирайте из встроенных предустановок, таких как НАСА, пузырь или снег, для быстрой настройки или создайте свой собственный собственный пользовательский эффект с помощью конфигуратора particles.js для полного управления.
Ключ в том, чтобы использовать частицы стратегически Выберите один или два раздела с высоким воздействием, выберите темный фон, и держать количество частиц разумным Это все, что нужно, чтобы превратить статическую страницу в нечто, что кажется живым.
Готовы попробовать? Скачать Master Addors для Elementor и добавьте свой фон первых частиц менее чем за 5 минут.
