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