Представляем Elementor 3.10 — новые вложенные элементы — будущее дизайна с виджетами Elementor

Elementor и Elementor Pro 3.10 включают в себя новые возможности дизайна, которые откроют совершенно новый мир творчества, когда дело доходит до дизайна ваших веб-сайтов с помощью вложенных элементов, и представляет новую пользовательскую единицу в элементах управления размером, которая позволит вам достичь более высокого уровня точности при дело доходит до разработки ваших веб-сайтов. Эти версии также включают новую библиотеку на основе контейнеров и улучшения производительности.

Новые вложенные элементы, которые улучшат дизайн вашего сайта

Вложенные элементы открывают совершенно новый способ концептуализации дизайна вашего веб-сайта. С помощью вложенных элементов вы можете поместить любой элемент внутрь другого, используя возможности контейнеров Flexbox. Подобно тому, как вы можете поместить один контейнер в другой и бесконечно вкладывать их друг в друга, с помощью вложенных элементов вы можете поместить любой элемент (виджет или контейнер) внутрь другого.

Поскольку контейнеры Flexbox официально стабильны, в следующих выпусках мы представим возможность вложения в ряд существующих виджетов, таких как карусель, аккордеон, вкладки и другие. Мы также представим совершенно новые вложенные виджеты, такие как Мегаменю.

Представляем виджет «Обновленные вкладки» — первый вложенный виджет Elementor, раскрывающий гибкость дизайна.

С новым виджетом «Вкладки» вы сможете раскрыть свой творческий потенциал и достичь высокого уровня сложности. Новый виджет «Вкладки» основан на контейнере и включает три основных улучшения по сравнению с исходным виджетом «Вкладки».

• Вкладки и заголовки. С помощью нового виджета «Вкладки» вы сможете настроить макет и положение вкладок, чтобы определить, где они расположены по отношению к содержимому вкладки — сверху, снизу или с одной из ее сторон. Кроме того, у вас будет больше вариантов оформления, в том числе возможность добавлять значки к заголовку вкладки.
• Новая область содержимого. Благодаря возможностям контейнеров Flexbox область содержимого каждой вкладки станет основным контейнером, в который вы можете поместить любой элемент, настроить его макет и представить любой контент, который вы хотите — точно так же, как пустой холст Редактор.
• Новая настройка адаптивности. Чтобы улучшить дизайн и взаимодействие с пользователем в зависимости от размера устройства, вы можете выбрать точку останова, при которой вкладка будет автоматически отображаться в виде аккордеона. Это означает, что вам не нужно создавать разный контент для каждого устройства, что также повышает производительность.

Поскольку виджет «Вкладки» основан на контейнерах, для его использования на вашем веб-сайте вам необходимо убедиться, что эксперименты с контейнером Flexbox и вложенными элементами активированы. После активации новый виджет «Вкладки» автоматически заменит существующий на панели виджетов (это не повлияет на дизайн существующих вкладок на вашем сайте).

Новые пользовательские единицы измерения — выберите любую единицу измерения, включая математические функции CSS.

Числовые элементы управления в редакторе обновляются, и теперь вы можете выбирать любые единицы измерения, смешивать числовые единицы и запускать в них вычисления функций CSS. Многие элементы в Редакторе включают параметры изменения размера, такие как отступы и поля, размер шрифта и многое другое. Разумное использование этих единиц измерения может оказать положительное влияние на точность дизайна и скорость отклика веб-сайта.

Раньше, например, если вы настраивали отступы или поля, вам приходилось выбирать один из следующих типов единиц измерения: PX, EM, REM, % или VW. С этим обновлением вы также сможете выбрать пользовательский вариант, чтобы быть более конкретным с выбором ваших юнитов. Например, вы можете выбрать PX для сторон и % для верхней и нижней части. Кроме того, в этом обновлении метки единиц были перемещены в раскрывающийся список, чтобы соответствовать новому пользовательскому параметру.

Выбор параметра «Пользовательский» также позволит вам выполнять расчеты для измерения значения в поле ввода значения, таким образом, вы можете добиться большей точности проектирования и оперативной поддержки.

Например, при выборе пользовательского параметра в элементах управления размером типографики вы сможете использовать функцию CSS `clamp()`, чтобы настроить размер шрифта для разных размеров устройств, или функцию CSS `calc()` для расчета и установить значение, которое смешивает единицы, и многое другое.

В рамках этой версии следующие элементы управления размером получат настраиваемые параметры:

• Контейнеры, разделы и столбцы — везде, где только можно, включая нестандартную ширину, границу и т. д.
• Элементы управления типографикой — высота строки, интервал между буквами и интервал между словами.

Дополнительные области также будут обновлены в будущем.

Полные наборы веб-сайтов, шаблоны и блоки на основе контейнеров

Поскольку контейнеры Flexbox помечены как бета-версия, что делает его стабильным и готовым к использованию, было важно предоставить вам полные наборы и шаблоны веб-сайтов на основе контейнеров. В течение последних нескольких недель команда библиотеки работала над созданием полной библиотеки на основе контейнеров, чтобы вы могли запустить процесс создания и проектирования веб-сайта, включив эксперимент с контейнером Flexbox, используя самые современные тенденции дизайна. .

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

С новой библиотекой есть два дополнительных примечательных обновления. Во-первых, мы представили несколько мини-магазинов, одностраничный полный набор веб-сайтов для веб-сайтов электронной коммерции, включая кнопки PayPal и Stripe для сбора платежей. Во-вторых, все предыдущие Блоки (такие как Контакт, 404 и т. д.) были заменены на совершенно новые конструкции.

[Pro] Динамическая дата выполнения в виджете обратного отсчета

Виджет обратного отсчета, отличный инструмент для создания FOMO и повышения конверсии, теперь имеет динамическое управление тегами в сроке выполнения. С этим обновлением вы сможете использовать собственные настраиваемые поля WordPress, а также настраиваемые поля из ACF и PODS для динамического заполнения даты выполнения на каждой странице.

Благодаря новым элементам управления динамическими тегами вы сможете, например, использовать виджет обратного отсчета в шаблоне отдельной публикации и добавлять настраиваемое поле в WordPress к каждому из ваших сообщений, которое включает дату выполнения, которую вы хотите включить в каждое сообщение. Это также позволит вам доставить веб-сайт клиенту, позволяя им обновлять дату выполнения в WordPress, не отправляя их в редактор, где они могут изменить ваш дизайн.

Новое: полностью отключить Google Fonts

Google Fonts, популярная онлайн-библиотека шрифтов, позволяет использовать различные шрифты на вашем веб-сайте. Однако в недавних событиях было обнаружено, что шрифты Google в некоторых случаях нарушают GDPR и правила конфиденциальности.

Чтобы устранить этот риск, Elementor позволяет вам удалить все шрифты Google с вашего сайта. При отключении шрифтов Google вы больше не сможете использовать онлайн-библиотеку шрифтов Google в Редакторе, что уменьшит количество шрифтов, доступных вам в Редакторе, до 7 шрифтов. Если вы уже использовали шрифт Google на своем веб-сайте, но решили отключить шрифты Google в этом обновлении, все шрифты на вашем веб-сайте по умолчанию будут использовать один из доступных шрифтов на вашем веб-сайте. Чтобы продолжить использовать ваши любимые шрифты, вы можете загрузить локально размещенные шрифты в Elementor, используя функцию пользовательских шрифтов, доступную для пользователей Elementor Pro.

Улучшения производительности и специальных возможностей

В Elementor 3.10 мы продолжаем улучшать производительность и доступность. Это обновление включает в себя три новых обновления для улучшения производительности и два обновления для улучшения специальных возможностей.

Ленивая загрузка Google Maps

Виджет Elementor Google Maps позволяет размещать карту в любом месте на вашем веб-сайте. Это идеальный виджет, который можно использовать, когда вы хотите поделиться определенным местоположением с посетителями вашего веб-сайта. С этим обновлением вы сможете отложенно загружать фреймы Google Map, что ускоряет начальную загрузку страницы.

Ленивая загрузка изображений нестандартных размеров

Размер изображения, которое вы используете, может оказать существенное влияние на производительность вашего сайта. В предыдущих обновлениях мы добавили возможность ленивой загрузки почти каждого изображения, загруженного в медиатеку. С Elementor 3.10 вы также сможете лениво загружать изображения нестандартного размера.

Управление предварительной загрузкой самостоятельных видео

Подобно изображениям, видео также влияет на скорость и производительность вашего веб-сайта, при этом самостоятельные видео, как правило, оказывают большее влияние, чем, например, видео, размещенные на YouTube, в которых применяются методы оптимизации. Благодаря этому обновлению вместо загрузки собственных видео во время начальной загрузки страницы вы можете выбрать, хотите ли вы предварительно загружать видео, метаданные видео или не загружать его содержимое до того, как посетитель нажмет кнопку воспроизведения.

Улучшения специальных возможностей для навигации по страницам

Виджет «Блокировать цитату» и виджет «Опубликовать комментарии», два виджета Elementor Pro, получили обновления разметки, чтобы сделать их еще более доступными для людей с ограниченными возможностями, которые используют вспомогательные технологии для навигации по странице.

Наслаждайтесь дополнительными вариантами дизайна, большей отзывчивостью и лучшей производительностью

Elementor 3.10 открывает множество новых возможностей для дизайна, которые вы можете использовать на своем веб-сайте. Внедрение нового виджета «Вкладки», первого обновления, использующего возможности вложенных элементов, позволит вам создавать продвинутые и креативные макеты, используя все виджеты Elementor, знакомым способом перетаскивания. Когда вы включите контейнеры Flexbox для использования этого нового виджета, вы также получите доступ к совершенно новому набору и библиотеке шаблонов на основе контейнера, чтобы ускорить свой творческий процесс.

Обязательно попробуйте Elementor 3.10 и дайте нам знать, что вы думаете в комментариях ниже.