Пользовательские точки останова для Elementor: добавьте больше представлений устройств бесплатно

Бесплатная версия Elementor дает вам больше точек останова, чем допускает большинство учебных пособий: всего семь представлений устройств, каждое с редактируемой шириной пикселя, все включено из настроек сайта. лицензия Pro не требуется. где останавливается собственная система, так это в этих семи фиксированных слотах. Если вашему дизайну нужен восьмой вид или ширина устройства, на которую не совпадают названные слоты, этот пробел - то, что бесплатно Пользовательское расширение точек останова от ручек Master Addons.Он покрывает стилистическую половину отзывчивой работы, в то время как расширение, как Условия отображения решает, какие разделы вообще отображаются на каком устройстве.

Ниже: что на самом деле включает в себя Elementor free (более трех представлений, какие бы старые сообщения ни заявляли), как активировать дополнительные собственные точки останова и как добавить по-настоящему пользовательские точки останова сверху. Эта последняя часть бесплатна до 3 точек останова, неограниченных с помощью Master Addons Pro.

Какие точки останова Elementor free на самом деле дает вам

Во-первых, миф, который не умрет: лишние точки останова в Elementor не заперты за Elementor Pro. Многие статьи все еще говорят, что да. с Элементор 3.4 поставляемая функция "Дополнительные пользовательские точки останова", бесплатная версия поддерживает до семи представлений устройств:

• Мобильный Портрет: до 767px по умолчанию (всегда активен)
• Мобильный Пейзаж: до 880px
• Планшет Портрет: до 1024px (всегда активен)
• Планшет Пейзаж: до 1200px
• Ноутбук: до 1366px
• Рабочий стол: базовый вид все остальное ответвляется от
• Широкоэкранный: 2400px и выше (один момент разрыва ширины в наборе)

Каждое из этих значений пикселей можно редактировать. Откройте настройки сайта, измените отсечку портрета планшета с 1024px на 900px, сохраните, готово. Элементор документация разработчика объясняет логику максимальной ширины внизу, если вам нужна механика.

Так что же не может сделать бесплатная версия? две вещи. вы не можете добавить восьмую точку останова, и вы не можете выйти за пределы названных слотов: шесть дополнительных представлений имеют фиксированные роли, и как только они все используются, собственная система заполнена. Этот потолок является причиной того, что выделенный плагин точек останова вообще существует.

Как активировать лишние точки останова Elementor (бесплатно, без плагина)

Прежде чем что-либо устанавливать, включите то, что вам уже дает Elementor. занимает около минуты:

1. Откройте любую страницу с помощью Elementor и щелкните меню гамбургера в левом верхнем углу панели, затем выберите Настройки сайта.
2. Перейти к Макет → Точки останова.
3. Нажмите в Активные точки останова поле и добавьте нужные виды: Мобильный пейзаж, Планшетный пейзаж, Ноутбук, Широкоэкранный.
4. Отрегулируйте значение пикселя под каждой точкой останова, если по умолчанию не соответствует вашему дизайну.
5. Хит Сохранить изменения. Elementor восстанавливает свой CSS, и новые представления появляются в адаптивном режиме.

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

Как добавить пользовательские точки останова за пределами семи Elementor

Бесплатный маршрут мимо потолка Элементора Пользовательские точки останова для Elementor, плагин, построенный командой Master Addons. он работает самостоятельно рядом с Elementor, другой плагин не требуется. он также спаривается с Мастер Аддоны если вы уже запускаете его, то вы управляете точками останова с той же панели управления, что и ваши виджеты. бесплатная версия добавляет до 3 пользовательских точек останова с точным контролем пикселей над каждой шириной устройства; Master Addons Pro полностью удаляет колпачок.

Шаг 1: Установите плагин

На панели управления WordPress перейдите по адресу Плагины → Добавить новое и поиск “Custom Breakpoints для Elementor”.Установите и активируйте его.Если вы уже используете Master Addons, вы также можете включить его с вкладки Расширение на панели управления Master Addons; оба маршрута заканчиваются на одной странице настроек.

Шаг 2: Откройте страницу "Точки останова"

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

Шаг 3: Добавьте точку останова с максимальной шириной

Назовите устройство и введите его Max-Width в пикселях. чтобы нацелиться на маленькие телефоны, введите 600 и сохраните. плагин регулирует для вас минимальную ширину соседнего устройства, поэтому диапазоны никогда не перекрываются: ваш новый Small Mobile view охватывает экраны до 600px, а следующий вид начинается с 601px. В бесплатной версии вы можете добавить до 3 из этих пользовательских точек останова; Мастер Аддоны Про пользователи получают неограниченное количество точек останова плюс импорт/экспорт.

Шаг 4: Создайте новый вид в Elementor

Редактируйте любую страницу с помощью Elementor и щелкните значок адаптивного режима в нижней части панели. Ваш пользовательский вид теперь находится в панели устройств рядом со значениями по умолчанию. Выберите его, выберите элемент и установите такие значения, как размер шрифта, заполнение или количество столбцов, которые применяются только внутри этого диапазона пикселей. Нажмите "Обновить", затем измените размер браузера, чтобы наблюдать за запуском стилей. Чтобы получить более глубокое описание стиля на устройство, см. наше руководство по адаптивный дизайн с точками останова Elementor.

Бесплатно против Pro: сколько точек останова дает вам каждый вариант

Вот сравнение, в том числе и то, что дает вам Elementor перед тем, как на картинку выйдет какой-либо плагин:

Для большинства сайтов семь просмотров Elementor плюс 3 пользовательских уровня покрывают каждый реальный пробел: просмотр малого телефона, нечетная ширина планшета, дисплей киоска Агентства, жонглирующие списками клиентских устройств, - это те, кто нажимает на свободную кепку, и вот кто Про за. Если вы взвешиваете весь плагин с альтернативами, пока вы этим занимаетесь, наш Сравнение Master Addons и Ultimate Addons охватывает более широкое сочетание функций.

Когда пользовательская точка останова фактически исправляет макет

Пользовательская точка останова стоит добавить, когда макет разрывается в промежутке между двумя существующими видами Классический случай - сетка из 3 столбцов. Он выглядит прямо на рабочем столе выше 1025px.Elementor опускает его до 2 столбцов в представлении планшета 1024px. На большом планшете, удерживаемом в ландшафте, тот самый вид 1024px оставляет широкую пустую колонку и тратит место.

Добавьте точку останова, скажем, на 992px, установите сетку обратно на 3 столбца там, и макет подходит для устройства вместо того, чтобы угадывать. тот же ход работает для просмотра с маленьким телефоном, где вы увеличиваете размеры шрифтов и набивку кнопок, которые выглядят тесно ниже 400px, диапазон, который даже вид мобильного портрета Elementor рассматривает как одно ведро.

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

Замедляют ли пользовательские точки останова ваш сайт?

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

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

Когда не нужно добавлять пользовательскую точку останова

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

Еще два случая, чтобы пропустить его. если активация одного из неактивных собственных представлений Elementor, или подталкивание значения пикселя по умолчанию в Настройках Сайта, исправляет проблему, сделайте это вместо этого; это ничего не стоит и держит редактор свет. и если проблема действительно в том, какой контент показывает на каком устройстве, а не в том, как он стилизован, это работа для условий отображения, а не еще одна точка останова.

Пользовательские точки останова расположены рядом с остальным набором инструментов Master Addons, от бесплатных расширений до Тема Строительвсе построено так, чтобы закрыть пробелы. Элементор оставляет открытыми.

Часто задаваемые вопросы

Связанное чтение

• Пользовательское расширение точек останова для Elementor
• Демо-версия Elementor Breakpoints в прямом эфире
• Адаптивный дизайн с точками останова Elementor
• Условия отображения Elementor
• Как ускорить сайты Elementor
• Мастер-аддоны против Ultimate-аддонов для Elementor