Вышло новое крупное обновление Elementor. Мы перешли с версии 2.x на версия 3.0. Эта новая версия предлагает новый способ создания веб-сайтов с помощью WordPress и Elementor. Мы постараемся преобразовать эти новые функции.
Какие основные дополнения в Elementor 3.0?
Elementor 3.0 поставляется с тремя основными дополнениями: особенности системы дизайна, новый конструктор тем и значительные улучшения производительности.
Особенности системы дизайна
Вы когда-нибудь задумывались, как крупные компании добиваются таких высоких результатов, независимо от платформы, на которой они работают? Все, что они создают, выглядит согласованно и имеет одинаковый дизайн. Это возможно благодаря тому, что называется «Дизайн-система». Согласно UnxDesign.cc, Дизайн-система:
Единый источник правды, объединяющий все элементы, которые позволят командам спроектировать, реализовать и разработать продукт. Таким образом, дизайн-система - это не результат, а набор результатов. Он будет постоянно развиваться вместе с продуктом, инструментами и новыми технологиями.
Коллектив UX
Внедряя дизайн-систему, поддерживайте единообразие всей вашей команды вокруг одного языка дизайна, а также коренным образом изменяйте то, как ваша команда работает, и обеспечьте более быстрый рабочий процесс.
Создавайте потрясающие сайты
С лучшим бесплатным конструктором страниц Elementor
Начать сейчасОсобенности системы дизайна Elementor 3.0 включают в себя:
- Глобальные цвета
- Панель настроек нового сайта
- Глобальные шрифты
Давайте посмотрим, как это поможет вам создавать лучшие профессиональные веб-сайты.
Глобальные цвета
Elementor 3.0 добавляет новый способ работы с цветами сайта. Этот новый метод называется Global Colors.
Глобальные цвета помогают изменить цвет из одного места и обновлять этот цвет везде, где он используется.
Вы начнете выбирать основные глобальные цвета для своего веб-сайта. Затем перейдите в любой цветовой стиль в Elementor и определите его как один из четырех цветов. Обратите внимание, что вы можете добавить столько пользовательских цветов в глобальный список.
Теперь в дело вступили переменные CSS. Вернитесь в Global Colors и измените один из цветов. Цветовая схема всего вашего сайта меняется в соответствии с новым глобальным цветом. Вы когда-нибудь испытывали что-то более легкое?
Вы также сможете создать другой глобальный цвет из элемента управления или создать новый глобальный цвет, используя один и тот же набор цветов внутри элемента управления.
Настройки сайта
Создание первых настроек дизайна для сайта занимает много времени. Вам придется перемещаться между кодом темы, Customizer, functions.php. Этого достаточно, чтобы оправдать вашу головную боль.
В новых настройках сайта представлены различные инструменты настройки. Таким образом, вы продолжите выполнять все тезисы из одного места.
Чтобы начать работу, на любой странице, которую вы редактируете с помощью Elementor, на левой боковой панели щелкните значок в верхнем левом углу. Это заставит вас переключиться на панель глобальных настроек.
На этой панели глобальных настроек вы найдете:
- Макет: для настройки параметров макета Elementor по умолчанию, таких как ширина содержимого по умолчанию или макет страницы по умолчанию.
- Идентификация сайта: настройте свои межсайтовые идентификаторы, такие как логотип, заголовок, слоган и даже значок.
- Стиль темы: настройте элементы HTML, не связанные с Elementor (обычно устанавливаемые темой), для оформления, кнопок и полей формы.
- Лайтбоксы: определение стиля по умолчанию для лайтбоксов Elementor.
- Глобальные цвета и шрифты: позволяют настраивать глобальные цвета и шрифты, применимые к вашему веб-сайту.
Глобальные шрифты
Цвета и типографика являются составными частями любого веб-сайта. Используя ту же логику, что и функция «Глобальные цвета», это новый метод работы со стилями текста вашего сайта.
С глобальными шрифтами все настройки типографики могут применяться глобально. Теперь вы можете настроить все параметры типографики своего сайта глобально, включая семейство шрифтов, размер и масштаб шрифта, толщину шрифта, преобразование шрифта, стиль шрифта, оформление шрифта, высоту строки, межбуквенный интервал и даже настройки адаптивности. Вы также сможете установить эти настройки для каждого виджета, содержащего текст, и настроить свои собственные глобальные шрифты.
Если правильно спроектирована типографика, вы сможете применить эти изменения глобально.
Визуализация и организация всего сайта в одном месте
В то время как хорошо известный Конструктор тем стал лидером отрасли с точки зрения полного обзора дизайна веб-сайта, этот новый пользовательский интерфейс идет еще дальше. Новый конструктор тем теперь дает вам обзор всего веб-сайта в очень интуитивно понятной форме.
Этот конструктор тем предоставляет обзор сайта, включая все части сайта: верхний колонтитул, нижний колонтитул, глобальный шаблон страницы, глобальный шаблон сообщения и многое другое. Можно предварительно просмотреть любую часть сайта, что значительно упрощает задачу создания полноценного веб-сайта.
Улучшения производительности
Очевидно, что пока приложение растет, разработчик должен заботиться о производительности. Обновления, внесенные в Elementor 3.0, сделаны для обеспечения хорошей инфраструктуры кода, что привело к заметному повышению производительности.
Было произведено много очистки элементов DOM, что ускорило рендеринг Elementor. Это определенно должно улучшить рейтинг скорости вашей страницы и общий опыт пользователей на вашем сайте.
Что конкретно изменилось в отношении скорости страницы?
Elementor 3.0 обеспечивает значительные улучшения для процессов рендеринга на стороне сервера и способа рендеринга Elementor динамических значений CSS. Это позволяет вам включать динамические элементы и ценности по всему вашему сайту. Например, вы можете создать шаблон для сообщений на сайте и решить, хотите ли вы отображать избранное изображение каждого сообщения в качестве фона за заголовком сообщения.
В фоновом режиме, когда Elementor подготавливает сообщение для отправки в браузер, он анализирует сообщение на предмет динамических значений, извлекает их и, если они включают какие-либо значения CSS, печатает этот CSS.
С Elementor 3.0 время, затрачиваемое на этот процесс, значительно сократилось. Благодаря динамическим значениям, которые хранятся для каждого из ваших сообщений. После того, как этот список был сохранен, всякий раз, когда кто-то посещает сообщение, Elementor переходит прямо к этому списку, тем самым ускоряя процесс. Динамические значения, на которые влияет эта оптимизация, включают фоновые изображения, цвета и многое другое. Это улучшение приводит к заметному снижению нагрузки на сервер.
Обзор обновления Elementor 3.0
Как мы упоминали выше, в этой версии есть интересные особенности, которые действительно должны повлиять на вашу повседневную работу. Мы прошли через:
Функции системы дизайна, которые помогут вам работать более последовательно и эффективно.
Новый конструктор тем - мощный визуальный инструмент для управления каждой частью вашего сайта из одного места.
Улучшения производительности для лучшего взаимодействия с пользователем.
Elementor 3.0, безусловно, выведет вас на передний план как профессионального создателя веб-сайтов. Если вы еще этого не сделали, обновитесь до Elementor Pro. Вам также следует прочитать наш пост, объясняющий, почему Elementor, безусловно, лучший бесплатный конструктор страниц на WordPress..
