Дизайнеры работают поверх сетки столбцов. именно так заголовки, карты и кнопки в конечном итоге выстраиваются в линию вместо того, чтобы раздвигать несколько пикселей друг от друга. Elementor не показывает вам ни одного, поэтому выравнивание обычно происходит на глаз. The Расширение линии сети в Мастер Аддоны Про исправлено, что с наложением сетки столбцов вы можете включить прямо внутри редактора.
Вы контролируете количество столбцов, желоб, максимальную ширину, смещение и цвет наложения прямо из настроек страницы Elementor. Вот как его включить и что делает каждый вариант.
Что делает расширение Grid Line #
Линия сетки рисует набор равномерно расположенных вертикальных столбцов над вашей страницей внутри редактора Elementor. наложение находится поверх вашего дизайна только в редакторе, поэтому посетители никогда его не видят, и вы можете проверить, действительно ли ваши разделы и виджеты выстраиваются в сетку, которую дизайнер использовал бы в Figma или Photoshop.
По умолчанию используется сетка из 12 столбцов при максимальной ширине 1140px с желобом 15px, сужающаяся до 1025px и 10px на планшете и 768px и 8px на мобильном телефоне. Каждое значение регулируется для каждого устройства, и все наложение включается и выключается с помощью одного тумблера.
Прежде чем начать #
- WordPress с Элементор установлен и активен.
- Мастер-аддоны для Elementor установлен и активен. Новое в плагине? Следуйте руководство установки первый.
- А Мастер Аддоны Про лицензия, потому что Grid Line - это расширение Pro.
Как включить расширение Grid Line #
Шаг 1: Включите его на вкладке Расширения #
С панели управления WordPress перейдите по адресу Мастер Аддоны и откройте Расширения вкладка. Сетка Line живет в Отображение виджетов группа с Популярным значком, рядом со Стеклянный морфизм и Узоры. Нажмите его тумблер, чтобы он стал фиолетовым.
Шаг 2: Сохраните изменения #
Прокрутите вверх и нажмите Сохранить изменения. зеленый “Настройки, успешно сохраненные” уведомление подтверждает, что расширение активно. Если редактор Elementor был открыт, перезагрузите его один раз.
Как показать сетку в редакторе Elementor #
Откройте любую страницу с помощью Elementor и нажмите на нее Настройки страницы значок в верхней панели. Под Настройки вкладка вы найдете новый Сетка Линия раздел, отмеченный фиолетовым значком МА. Флип Включить to On, и накладка колонны сразу же появляется на холсте.
Поскольку настройка находится в настройках страницы, сетка указана на странице: вы решаете, где она отображается, и она не следует за вами в каждый документ.
Объяснены настройки Grid Line #
- Включить: переключает наложение на эту страницу.
- Цвет сетки: цвет столбцов. выберите глобальный образец или установите собственный цвет с помощью выбора. Низкое значение непрозрачности делает ваш контент читаемым под наложением.
- Столбцы: сколько столбцов нарисовать, от 1 до 12. 12 является стандартом, но вы можете сопоставить любую сетку, которую использует ваш дизайн.
- Максимальная ширина: общая ширина сетки, 1140px по умолчанию.Сопоставьте его с шириной содержимого вашего сайта, чтобы столбцы совпадали с вашим фактическим макетом.
- Смещение: вталкивает сетку с краев, когда она нужна вашему макету.
- Желоб: пространство между столбцами, 15px по умолчанию.
- Z-индекс: порядок наложения наложения 999 по умолчанию, поэтому сетка остается видимой над вашим содержимым.
Столбцы, максимальная ширина, смещение и желоб являются адаптивными элементами управления: щелкните значок устройства рядом с каждым, чтобы установить разные значения для рабочего стола, планшета и мобильного телефона.
Изменить цвет сетки #
Нажмите пользовательский образец рядом с Цвет сетки чтобы открыть сборщик цветов Любое значение HEXA работает, и альфа-канал имеет наибольшее значение: что-то вроде 50 процентов непрозрачности дает вам видимые столбцы, не скрывая дизайн под ними.
Настройте колонны и желоб #
Перетащите ползунки и обновления наложения в реальном времени. В примере ниже желоб до 58px, и сетка имеет индивидуальный оттенок, поэтому она четко читается на светлом фоне, в то время как ценовые карты остаются разборчивыми.
Когда макет выровнен, вы можете перевернуть Включить отступите для чистого холста. оставляя его на не причиняет вреда, потому что сетка никогда не показывает на опубликованной странице.
Когда Grid Line экономит ваше время #
- Соответствие файлу дизайна. Перестройте компоновку Figma или XD на той же сетке из 12 столбцов, на которой она была спроектирована, вместо расстояний для глаз.
- Выравнивание разделов. Убедитесь, что элементы в разных разделах начинаются и заканчиваются в одном столбце.
- Последовательная серия страниц. Сохраняйте целевые страницы, созданные разными членами команды, в одной общей сетке.
- Полировка импортированных шаблонов. Опустите наложение на страницу с сайта a набор шаблонов и обнаруживайте элементы, которые находятся вне сети.
- Межпространственные решения. Используйте линии желоба в качестве быстрой линейки при установке ширины колонны и заполнения.
Видео Учебник #
Предпочитаете смотреть его в движении? Это видео проходит через включение Grid Line и настройку наложения в редакторе Elementor.
Часто задаваемые вопросы #
Что такое расширение Grid Line в Master Addons?
Это расширение Master Addons Pro, которое рисует наложение сетки столбцов в редакторе Elementor. вы устанавливаете количество столбцов, желоб, максимальную ширину, смещение и цвет из настроек страницы, а затем используете столбцы для выравнивания разделов и виджетов так, как это делают дизайнеры в Figma.
Где найти настройки Grid Line?
В редакторе Elementor откройте "Настройки страницы" на верхней панели и оставайтесь на вкладке "Настройки". После включения расширения на панели управления "Мастер-аддоны" там появится раздел "Линия сетки" со значком MA, в котором будет находиться переключатель "Включить" и все параметры сетки.
Могу ли я изменить количество колонн и желоб?
Да. поле Столбцы принимает от 1 до 12, с 12 по умолчанию, и ползунок Gutter управляет пространством между столбцами. Макс Ширина и Offset формируют место сетки. каждый из них является отзывчивым, поэтому рабочий стол, планшет, и мобильный может использовать различные значения.
Показывает ли наложение сетки на каждой странице?
Нет. Grid Line - это настройка для каждой страницы внутри Настроек Страницы, поэтому вы включаете ее только на тех страницах, где вы хотите наложение.Выключите переключатель Включить, когда закончите выравнивание, и эта страница возвращается к чистому холсту. сетка никогда не появляется на опубликованной странице в любом случае.
Расширение Grid Line бесплатное?
№ Grid Line - это расширение Pro в главных надстройках, указанное в группе "Виджеты отображения" на вкладке "Расширения". См страница ценообразования за планы.
Завершая #
The Расширение линии сети дает Elementor единственное, что уже есть у каждого инструмента проектирования: реальную сетку столбцов, против которой можно строить. Включите его один раз на панели управления, включите его из настроек страницы, когда вам это нужно, и настройте столбцы, желоб и цвет в соответствии с вашей системой проектирования. Просмотрите остальную часть Виджеты и расширения Master Addgets для большего количества подобных инструментов, включая Какой Элемент наведите метки для редактора.
