Наложение линий электросети Elementor (Pro): проектная сетка для выровненных компоновок
Grid Line - это расширение Master Addons Pro, которое рисует сетку столбцов на вашей странице внутри редактора Elementor. Вы устанавливаете количество столбцов, желоб, максимальную ширину и смещение в настройках страницы, затем выстраиваете разделы и виджеты в ряд с столбцами, как дизайнеры работают в Figma. сетка отображается только во время редактирования, и посетители никогда не видят ее на опубликованной странице.
Как использовать линию сетки в Elementor
Линия сетки - это настройка для каждой страницы, поэтому вы включаете ее только там, где вам это нужно. проверьте это Документы о расширении линии сетки.
- С активными Master Addons Pro перейдите по адресу Основные дополнения > расширения и включайтесь Сетка Линия.
- Откройте страницу в Elementor и нажмите Настройки страницы значок в верхней панели.
- На Настройки вкладка, развернуть Сетка Линия и набор Включить на На.
- Набор Столбцы, Максимальная ширина и Желоб чтобы соответствовать вашему дизайну, и добавьте Офсет если ваш макет имеет боковые поля.
- Переключитесь на просмотр планшета и мобильного телефона, чтобы установить значения для этих экранов.
- Выстраивайте свои разделы и виджеты в столбцах. сетка не отображается на опубликованной странице.
Колонны, желоб, ширина и смещение
Раздел "Строка сетки" в "Настройках страницы" имеет Включить переключатель, Цвет сетки (по умолчанию светло-полупрозрачный серый), Столбцы с 1 по 12, Максимальная ширина, Офсет, Желоб и Z-индекс. Столбцы, максимальная ширина, смещение и желоб могут принимать разные значения на настольном компьютере, планшете и мобильном телефоне.
- По умолчанию: 12 столбцов, максимальная ширина 1140px и желоб 15px на рабочем столе, 1025px и 10px на планшете, 768px и 8px на мобильном.
- Соответствуйте своей теме: установите максимальную ширину на ширину содержимого вашего сайта, чтобы столбцы совпадали с реальной планировкой.
- Видимость: выберите цвет с прозрачностью, чтобы ваш контент оставался читаемым, и сохраните Z-индекс на уровне 999, чтобы сетка располагалась над дизайном.
Способы проверки макета сетки в Elementor
У Elementor нет собственного наложения проектной сетки. это обычные варианты.
| Особенность | Элементор один | Инспектор сетки браузера DevTools | Линия сетки Master Addons |
|---|---|---|---|
| Цена | Бесплатно | Бесплатно | Мастер Аддоны Про |
| Разработайте сетку столбцов на странице | Нет | Только на элементах, использующих CSS Grid | Да, через всю страницу |
| Настройка внутри редактора Elementor | Нет | Нет, вы проверяете рамку предварительного просмотра | Да, в Настройках Страницы |
| Колонны, желоб и ширина на устройство | Нет | Следит за собственной сеткой элемента | Да |
| Видимо для посетителей | Нет | Нет | Нет |
Если в вашем макете уже используется контейнер Elementor Grid, инспектор сетки браузера может бесплатно отображать эти дорожки. Grid Line предназначен для проверки любого макета, включая контейнеры flexbox, на фиксированной сетке дизайна, подобной той, что есть в файле Figma.
Другие помощники редактора: Какой Элемент (бесплатно) и Позиционирование (бесплатно).
Часто задаваемые вопросы по линии сети
Влияет ли сетка на внешний вид моего сайта?
Нет. сетка отображается только внутри редактора Elementor.Посетители видят опубликованную страницу без нее, даже если вы оставите Включить включенным.
В чем разница между Gutter и Offset?
Желоб - это пространство между столбцами. смещение - это пространство между краем экрана и местом начала сетки. Вместе с максимальной шириной они позволяют копировать ширину контента и расстояние между столбцами вашей темы.
Могу ли я использовать это с собственной контейнерной системой Flexbox от Elementor?
Да. сетка рисуется на протяжении всего предварительного просмотра, поэтому она работает как с контейнерами flexbox, контейнерами сетки, так и со старыми секциями. Он не привязывает элементы к столбцам, поэтому вы выстраиваете их в линию самостоятельно.
Является ли Grid Line бесплатной?
No. Grid Line является частью Master Addons Pro.
Виджеты и расширения трендовых элементов
Создавайте сложные веб-сайты за меньшее время.
Стекломорфизм
Дополнительные контейнеры
Шаблоны
![Расширение Master Addons Post/Page Duplicator для Elementor: ссылка на строку MA Duplicator в списке WordPress Pages, создающая целевую страницу - [Дублированный № 128] черновик](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
Дубликатор сообщений/страниц
