Конструктор сайта Elementor 3.4 вводит четыре новые пользовательские точки останова (брикпоинты) к двум существующим, включая широкоэкранный, ноутбук и две дополнительные точки останова для мобильных устройств и планшетов. Полностью настройте их, чтобы они соответствовали любому размеру экрана. Сделайте ваши веб-сайты отзывчивыми и адаптивными для любого устройства!
Вы только что разработали впечатляющий веб-сайт для своего клиента, но вдруг они захотят увидеть его на большом экране своего офиса.
Вы задаетесь вопросом – как будет выглядеть ваш сайт на 70-дюймовом телевизоре 16:9? 😬 Что ж, не удивляйтесь больше! Elementor прикроет твою спину.
Теперь вы можете настроить свой дизайн для большего количества мобильных экранов, экранов планшетов, ноутбуков и широкоэкранных устройств. Теперь у вас есть шесть пользовательских точек останова, с которыми можно поиграть, что дает вам больше контроля и свободы для создания сайта для любого устройства. Давайте погрузимся и узнаем больше об этой функции и о том, что делает ее такой уникальной.
Нарушайте Границы Проектирования С Помощью Точек Останова
Для начала давайте убедимся, что мы все на одной странице о том, как точки останова помогают вам создавать лучшие, более отзывчивые веб-сайты. Точка останова-это “точка”, в которой содержимое реагирует на ширину устройства. Это дает вам возможность настроить стиль для каждой точки останова, чтобы обеспечить наилучшие впечатления
Возможно, вы разместили галерею с тремя изображениями подряд, но хотите, чтобы посетители на мобильных устройствах видели только два изображения подряд. Именно здесь появляются точки останова, поскольку они позволяют настраивать макет вашего веб-сайта в зависимости от устройства и размера экрана.
Elementor 3.4 дает вам возможность настраивать дизайн-макет в соответствии с семью устройствами.
При использовании точек останова у вас есть полная гибкость для:
- Выберите, какие точки останова активны. Помимо оригинального рабочего стола, мобильного телефона и планшета, теперь вы можете добавить точки останова для большего размера экрана.
- Выберите значение каждой точки останова. Вы можете управлять значениями каждой точки останова индивидуально.
- Увеличьте или уменьшите масштаб предварительного просмотра. Уменьшите масштаб для предварительного просмотра широкоэкранных устройств. Работайте на экране меньшего размера, чем тот, для которого вы разрабатываете, одновременно видя более широкую картину.
Как настроить стиль для разных устройств с помощью точек останова
Elementor использует концепцию каскадирования между точками останова, уменьшая масштаб для каждого устройства, кроме широкоэкранного. Простой способ запомнить, как каждая точка останова влияет на другие: рабочий стол всегда используется по умолчанию.
Рабочий стол - это настройка экрана по умолчанию, которая влияет на все остальные точки останова как для больших, так и для меньших экранов.
Пример: Установка разных заголовков для каждой точки останова
Давайте рассмотрим простой пример, чтобы понять, как это работает.
Вы устанавливаете размер текста заголовка 80 пикселей для настройки экрана рабочего стола по умолчанию. Этот размер текста будет применяться ко всем другим точкам останова.
Если затем вы перейдете к точке останова планшета и установите размер заголовка 60 пикселей, он будет применяться ко всем меньшим точкам останова, включая мобильные и дополнительные мобильные устройства.
Стиль, установленный для планшета, не будет применяться к большим точкам останова, которые в данном случае включают ноутбук и планшет-дополнительно. Точки останова для этих более крупных устройств останутся на уровне 80 пикселей, как и для настольных компьютеров.
Точно знайте, какие стили вы установили на других точках останова
С каждой дополнительной пользовательской точкой останова возникает необходимость точно понимать, что наследуется от одной точки останова к другой.
Вот почему мы добавили новое улучшение пользовательского интерфейса, которое поможет вам определить, какие стили унаследованы от других точек останова. Итак, вы установили размер поля на планшете равным 10 пикселей, а затем перешли к дополнительному просмотру для мобильных устройств.
Теперь вы можете видеть, что унаследованные значения элементов управления, таких как отступ, поля, фоновые изображения и все другие числовые элементы управления, представлены в виде заполнителей. В нашем примере 10 пикселей, которые вы установили на планшете, будут отображаться как заполнитель серого цвета на всех устройствах, которые меньше планшета.
Быстрый совет! Помните, что вы можете изменить стиль для каждой точки останова только для значений, у которых значок устройства находится рядом с заголовком, как показано на рисунке ниже.
Точки останова, Нарушающие ограничение скорости
Чтобы максимально оптимизировать пользовательские точки останова, мы перестроили наш механизм загрузки адаптивного управления. Это увеличило время отклика сервера до 23% (!) и сократило использование памяти на ~5%. Мы также сэкономили примерно ~30% трафика данных на загрузке редактора. Другими словами, это сделало все быстрее и плавнее.
Благодаря обновлениям, которые мы внедрили, добавление пользовательских точек останова не окажет существенного влияния на производительность, в отличие от других решений, которые используют дублированный код для достижения этой цели.
Отказ от поддержки IE и улучшение загрузки шрифтов FONT AWESOME
Elementor был представлен 5 лет назад, в те дни, когда Internet Explorer и другие альтернативы нуждались в широкой поддержке и дублировании кода для интерпретации современного кода. В настоящее время веб-браузеры способны интерпретировать этот современный язык изначально, не нуждаясь в дополнительных объяснениях. Почему это так важно? Это позволило нам сэкономить до 110 КБ при каждой загрузке страницы, что означает более быстрые страницы для вас и ваших посетителей. Потрясающая загрузка шрифта также получила обновление! До сих пор при добавлении значка из Font Awesome на веб-сайте использовалась вся библиотека. Изменяя механизм загрузки значка в SVG, мы сокращаем количество запросов, следовательно, повышаем производительность и время загрузки по всем направлениям. Каждый уменьшенный КБ приводит к более быстрой загрузке страниц для каждой страницы, которую вы создаете в Elementor! Не волнуйтесь, мы будем продолжать предоставлять все больше и больше таких улучшений.
Лучшие Точки Останова, Лучшая Производительность
Новые пользовательские точки останова значительно облегчают адаптацию ваших дизайнов к различным экранам.
Эта версия также продолжает наше стремление предоставить вам инструменты, которые обеспечивают лучшую производительность в мире, с тремя различными улучшениями производительности.
Хотите ли вы настроить свой дизайн так, чтобы он лучше соответствовал последней версии iPhone (уже 13?), широкоэкранному телевизору вашего клиента или ландшафтным устройствам, воспользуйтесь новой функцией и творите дальше!