Представляем Elementor 3.13 — создавайте экономичные и гибкие макеты веб-сайтов с помощью CSS Grid

Опубликовано: 2023-05-17

Расширьте свои возможности дизайна и наслаждайтесь новыми способами оформления своего веб-сайта с помощью Elementor 3.13, чтобы вы могли создавать уникальные дизайны, которые привлекают посетителей вашего веб-сайта. Эта версия включает новый параметр макета в контейнерах — CSS Grid, отличный способ создавать сложные и легкие макеты веб-сайтов, сохраняя при этом высокий уровень согласованности. Кроме того, в этом обновлении представлены дополнительные параметры стиля в виджете меню и добавлены новые возможности в новую верхнюю панель.

Новинка — CSS Grid Container — создавайте легкие, адаптивные и профессиональные макеты

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

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

Каждая ячейка в сетке может принимать один элемент, который можно стилизовать и редактировать, как обычно. Чтобы достичь более высокого уровня сложности, вы можете поместить контейнер Flexbox в ячейку сетки и поместить столько элементов, сколько хотите, в контейнер Flexbox.

Чтобы использовать Container Grid, обязательно включите функции Flexbox Container и Grid Container на панели управления WordPress → Elementor → Настройки → Функции.

[Pro] Новые возможности оформления в виджете меню

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

В Elementor Pro 3.13 представлены две новые возможности, которые теперь доступны в виджете «Меню»:

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

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

Улучшения верхней панели — продолжение обновления пользовательского интерфейса Elementor

В Elementor 3.12 мы начали постепенное развертывание предстоящих изменений в интерфейсе Elementor. Эти изменения написаны на React, что повышает производительность и позволяет в будущем расширять и масштабировать продукт. Кроме того, эти изменения продвигают лучшие практики Elementor, что приводит к лучшему и более упорядоченному взаимодействию с пользователем.

Одним из самых больших изменений является новая верхняя панель, представленная в качестве эксперимента, которую вы можете активировать на странице функций Elementor в WordPress (Elementor → Настройки → Функции → Верхняя панель редактора). В этой версии верхняя панель включает два обновления:

  1. Параметры сохранения в кнопке публикации — хотя это и не новая возможность, эта функция не была доступна в первой версии верхней панели. Теперь у вас есть доступ ко всем параметрам сохранения, доступным в редакторе — «Сохранить как черновик», «Сохранить как шаблон» и «Условия отображения» (если применимо). Это также означает, что верхняя панель теперь включает в себя все возможности, ранее доступные в устаревшем пользовательском интерфейсе редактора.
  2. Навигация по страницам — новая функция, которая упростит ваш рабочий процесс и сделает переход между разными страницами и частями темы более плавным. При нажатии на указание страницы в центре верхней панели откроется раскрывающийся список, включающий пять последних страниц / сообщений / частей темы, над которыми вы работали, и позволит вам перенаправить на любую из них одним щелчком мыши, без необходимости возвращаться назад. на панель инструментов WordPress.

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

Раньше использование виджета Post Excerpt или динамического тега в WordPress означало, что содержимое автоматически заполнялось из Пользовательского отрывка, который вы вручную вставили в WordPress. Однако с Elementor 3.13 у вас теперь есть возможность выбрать, хотите ли вы, чтобы контент автоматически заполнялся из первых нескольких символов вашего сообщения или из пользовательского отрывка в WordPress. Это обновление устраняет один из самых частых запросов с момента появления Loop Builder, особенно после возможности добавления виджета Post Excerpt в элемент цикла.

Новинка: используйте искусственный интеллект Elementor, идеально разработанный для Elementor

Elementor 3.13 также включает Elementor AI, который изначально интегрирован в редактор и изменит способ создания веб-сайтов. В этой версии представлен первый этап Elementor AI, который позволяет вам создавать текст и код с помощью возможностей AI. Вы можете использовать его для создания контента с нуля, улучшения существующего контента на вашем веб-сайте, перевода его на любой веб-сайт и многого другого. Кроме того, вы можете использовать Elementor AI для написания кода для пользовательского CSS или пользовательского кода (требуется Elementor Pro или хостинг) или фрагментов HTML. Вы можете прочитать больше о том, что вы можете сделать с Elementor AI здесь.

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

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

Виджеты Author Box, Post Info и Price List отображают изображения и изображения профиля пользователя, к этим изображениям теперь применяется ленивая загрузка. Это изменение должно улучшить начальную загрузку ваших внутренних страниц.

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

Улучшения доступности

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

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

Наслаждайтесь дополнительными вариантами стиля и дизайна для фирменного и привлекательного веб-сайта

Улучшите дизайн своего веб-сайта и откройте новые возможности оформления для настройки вашего веб-сайта с помощью Elementor 3.13. С CSS Grid Containers вы можете легко создавать легкие, гибкие, похожие на сетку макеты, а с новыми возможностями стилей в виджете меню вы можете создавать уникальные дизайны, которые очаровывают и привлекают посетителей вашего веб-сайта.

Эта версия также включает новые возможности функции «Верхняя панель», что означает, что все возможности, ранее доступные в редакторе, теперь доступны при использовании эксперимента «Верхняя панель».

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

Попробуйте новые функции в Elementor 3.13 и дайте нам знать, что вы думаете о них в комментариях ниже.