Отступы в Elementor

Привет, друзья! Сегодня мы разберем отступы в Elementor. Отступы в Elementor могут быть следующие:

• между секциями;
• между виджетами;

Какие бывают отступы

Чтобы научиться правильно работать с отступами, разберем, что же это такое с точки зрения css.

Отступы в web-разработке бывают двух типов:

• внешние;
• внутренние

Внешний отступ

Внешний отступ (css-свойство margin) обозначает расстояние от каждого края элемента (сверху, справа, снизу, слева).

Синтаксис этого свойства в css выглядит следующим образом:

margin: 10px 25px 15px 5px;

где в пикселях указано расстояние от края элемента в следующем порядке: сверху, справа, снизу и слева.

Поддерживаются как положительные, так и отрицательные значения.

Для внутренней секции возможно менять только отступы сверху и снизу, для виджетов сверху, справа, снизу и слева (с левого верхнего угла по часовой стрелке).

Внутренний отступ

Внутренний отступ (css-свойство padding) отвечает за расстояние от границ элемента до его внутреннего содержимого.

Синтаксис этого свойства в css выглядит следующим образом:

padding: 10px 25px 15px 5px;

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

Аналогично с margin, поддерживаются как положительные, так и отрицательные значения.

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

Расстояние между виджетами

Итак, рассмотрим работу отступов на примерах.

Давайте добавим на страницу секцию с двумя колонками внутри. В каждую из колонок вставим любой виджет (например заголовок или изображения) и закрасим фон разными цветами для большей нагдлядности.

Теперь отодвинем левую колонку от правой на -100px (почему указывается отрицательное значение почитайте самостоятельно здесь).

Далее применим внутренний отступ для правой колонки.

Установим значения 50px сверху, 100px справа, 150px снизу, 250px слева и получим следующий результат:

Как видите, внутренний отступ изменяет расстояние от края элемента до его содержимого внутри.

Отступы между колонками (отступы колонок).

Отступы между колонками устанавливаются на вкладке Макет => Отступы колонок и отвечают за установку фиксированных внутренних отступов для виджетов внутри колонки.

Включает следующие настройки.

• по умолчанию — внутренний отступ (padding) 10px;
• без разрывов — внутренний отступ 0px;
• узкий — внутренний отступ 5px;
• расширенный — внутренний отступ 15px;
• широкий — внутренний отступ 20px;
• широчайший — внутренний отступ 30px;

На этом у меня все! Экспериментируйте!