Вышла бета-версия Elementor 4.2

В бета-версии Elementor 4.2 реализованы две самые запрашиваемые функции из дорожной карты Atomic Editor: CSS Grid и Loops, обе с нативной поддержкой классов (Classes), переменных (Variables) и компонентов (Components). Наряду с этими структурными нововведениями в релизе представлены улучшения Atomic Forms, включая действия для дополнительных писем и модернизированные функции доступности. Были устранены критические проблемы с производительностью, связанные с вложенными контейнерами, решены проблемы со стабильностью и корректностью работы платформы.

CSS Grid в Atomic Editor

В Atomic Editor в Elementor 4.2 добавлен специальный элемент Grid, позволяющий создавать сеточные макеты (карточки, галереи, секции с преимуществами и сложные структуры страниц) в рамках атомарной системы. Classes и Variables применяются к элементам Grid нативно, поэтому разработчикам больше не нужно поддерживать параллельные настройки или выходить за пределы дизайн-системы для управления стилями сетки.

Пользователи получают полный контроль над определением колонок и строк с помощью любых допустимых CSS-единиц, включая fr для указания долей пространства. Настройки отступов (gap), направление auto-flow и правила автоматического размера для неявных строк и колонок — всё это настраивается прямо в панели. Включение опции Show Grid Outline отображает линии сетки на холсте для визуального ориентирования во время построения макета. Этот контур виден только в редакторе и не выводится во фронтенде.

Настройки дочерних контейнеров в Grid и режим Dense

Каждый дочерний контейнер внутри родительского элемента Grid получает свои собственные настройки Grid Child. Параметры Column Span и Row Span позволяют любому элементу растягиваться на несколько треков, так что избранная карточка может занимать две колонки, в то время как окружающие элементы будут естественным образом заполнять пространство. Параметры Align Self и Order обеспечивают управление вертикальным выравниванием и визуальным порядком размещения для каждого дочернего элемента, независимо от структурного результата.

Одно из нововведений Atomic Editor, отсутствовавшее в классическом виджете Grid, — это Dense auto-placement. При включении этой функции алгоритм сетки активно заполняет пустые ячейки, оставшиеся после spanned-элементов. Для макетов галереи или карточек с элементами разного размера режим Dense обеспечивает визуальную компактность сетки без необходимости ручной перестановки элементов.

[Pro] Loop: Динамический контент в атомарной архитектуре

Пользователи могут задать запрос в контейнере Atomic Loop, определить пространственное расположение в разделе Layout, затем перейти в режим редактирования Loop Item и добавить динамические поля напрямую. После выхода из этого режима Loop отобразит все подходящие элементы согласно созданному шаблону. Также можно использовать Angie для генерации Atomic Loops.

Поддержка устаревших шаблонов

Разработчики, уже имеющие шаблоны V3 Loop Item, могут загрузить их в Atomic Loop Item в качестве моста миграции. Это не долгосрочное решение, но оно позволяет не перестраивать все Loops с нуля при переходе к Atomic Editor.

Пагинация с полностью атомарными элементами управления

Atomic Loop поддерживает пагинацию «Previous/Next» в двух режимах: стандартная перезагрузка страницы и Ajax-навигация (замена элементов без полной перезагрузки страницы). В соответствии с атомарной архитектурой элементы Previous и Next теперь полностью кастомизируемые.

Улучшения Atomic Forms [Pro]

В Elementor 4.2 добавлено Email 2 — второе письмо в процессе отправки Atomic Forms. Email 2 настраивается полностью независимо от основного email-уведомления: свой получатель, тема и содержание письма. Это позволяет реализовать популярный сценарий — отправку как подтверждения пользователю, так и отдельного внутреннего оповещения команде сайта.

В Atomic Forms также добавлена поддержка автозаполнения, что улучшает доступность и позволяет браузерам предлагать точные autofill-подсказки для полей. Обновлён интерфейс настроек Atomic Forms: он стал более последовательным и понятным. Добавлена поддержка доступности для сообщений об успешной отправке форм и ошибках, что гарантирует надежную обратную связь для скринридеров и ассистивных технологий.

Улучшения Angie AI

В этой версии Angie превратился в более мощного помощника по дизайну внутри атомарной архитектуры. Теперь он может:

• генерировать полную структуру Atomic Loop (запросы, пространственное расположение и др.);
• создавать нативные атомарные макеты и секции по дизайн-токенам или визуальному описанию;
• генерировать многократно используемые Components с открытыми свойствами для независимой настройки.

Также Angie AI предлагает расширенную поддержку динамических тегов для свойств, генерируемых ИИ, обеспечивая гибкость ИИ-процессов и их полную интеграцию с дизайн-системой.

Оптимизированная производительность: улучшена обработка вложенных контейнеров

В Elementor 4.2 устранены проблемы производительности, которые возникали при сильной вложенности контейнеров. Глубокая вложенность раньше влияла на отзывчивость редактора и потребление ресурсов. Теперь расчёт структуры макетов оптимизирован, благодаря чему страницы со сложными, многоуровневыми и grid-подобными макетами остаются быстрыми и удобными в редактировании.

В заключение

Elementor 4.2 Beta знаменует собой существенный шаг вперёд для Atomic Editor. CSS Grid полностью интегрирует профессиональную компоновку макетов в атомарную систему, Loops добавляют динамический контент, а Angie может генерировать готовые Loop-структуры по одному промпту. Критическое исправление производительности для вложенных контейнеров убирает препятствие для сложных страничных структур.

Источник: https://developers.elementor.com