16 марта, 2022

Отступы в Elementor

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

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

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

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

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

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

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

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

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

margin: 10px 25px 15px 5px;

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

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

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

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

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

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

padding: 10px 25px 15px 5px;

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

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

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

Отступы в Elementor

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

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

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

Отступы в Elementor

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

otstupy v elementor 003

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

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

otstupy v elementor 004

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

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

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

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

sekcziya. razryv kolonok 1
  • по умолчанию — внутренний отступ (padding) 10px;
  • без разрывов — внутренний отступ 0px;
  • узкий — внутренний отступ 5px;
  • расширенный — внутренний отступ 15px;
  • широкий — внутренний отступ 20px;
  • широчайший — внутренний отступ 30px;
sekcziya. razpyv kolonok
Зеленым цветом подсвечены внутренние отступы, ширина которых устанавливается в настройках разрывов колонок

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

0

Интересные статьи

Секция. Вкладка Стиль.

Секция. Вкладка Стиль. Данный раздел, как Вы уже догадались, отвечает за визуальное оформление секции: размер и тип шрифтов, фоны, границы и др.

Читать полностью »

Плагин Elementor Addon Elements. Часть 1

Плагин Elementor Addon ElementsюЧасть 1 Привет, уважаемые посетители нашего блога! Сегодня рассмотрим замечательный плагин Плагин Elementor Addon Elements, который значительно расширяет стандартный

Читать полностью »

Announce

2019 collection

Let’s face it, no look is really complete without the right finishes. Not to the best of standards, anyway (just tellin’ it like it is, babe). Upgrading your shoe game. Platforms, stilettos, wedges, mules, boots—stretch those legs next time you head out, then rock sliders, sneakers, and flats when it’s time to chill.