• Главная
• Новости
• Elementor 3.10 – Новые вложенные элементы - будущее дизайна с помощью виджетов Elementor

Elementor 3.10 – Новые вложенные элементы - будущее дизайна с помощью виджетов Elementor

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

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

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

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

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

Представляем обновленный виджет Tabs – первый вложенный виджет Elementor, обеспечивающий гибкость дизайна

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Новое: Полностью отключите шрифты Google

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

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

Улучшения производительности и доступности

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

Отложенная загрузка карт Google

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

Отложенная загрузка изображений с пользовательскими размерами

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

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

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

Улучшения доступности для навигации по страницам

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

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

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

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