Elementor. 5 самых популярных блоков: Секция

На мой взгляд, в конструкторе сайтов Elementor существует 5 самых популярных блоков, с помощью которых вы, при желании, составите даже главную страницу. Эти блоки есть в бесплатной версии в разделе Базовый, и к ним я отношу:

В этой статье вы узнаете, как использовать и настраивать блок Секция.

Структура и размер колонок

С блока Секция вы начинаете страницу или запись. При создании страницы конструктор вам покажет блок следующего вида:

Если вы наведете курсор мыши на знак «+», появится название Добавить секцию. Далее, на выбор вам будет предложено несколько вариантов структуры:

В примере показаны 3 вида структуры секции: неделимая, с равно разделенными секциями и неравно.

Даже если вы ошибетесь при выборе, ничего страшного. Структуру можно изменить в любой момент.

Слева после добавлении блока у вас появится панель Редактировать Секция. Во вкладке Макет вам необходимо зайти в подраздел Структура и там уже выбрать подходящую. Однако, возможна ситуация и с отсутствием вариантов структуры.

с выбором структуры
без выбора структуры

В таком случае, вам необходимо будет самостоятельно добавить нужное количество колонок. У блока Секция наведите мышку на Редактировать Колонка, нажмите на него правой кнопкой мыши и в появившемся меню выберите пункт Добавить новую колонку.

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

Фон: цвет и изображение

Любой секции можно настроить цвет фона или поместить на фон изображение. Для этого необходимо перейти на вкладку Стиль (1) в подраздел Фон и выбрать режим отображения: обычный или наведение. В обычном режиме можно задать фон 4 способами: классический, градиентный, видео и слайдшоу. В режиме наведения — 2 способами: классический и градиентный.

Обычный: классический

Классический (2) способ включает в себя монохромный цвет и изображение.

Цвет. Для открытия палитры (3) необходимо нажать на иконку с цветом или красной косой чертой. Указать нужный цвет можно выбором на палитре или введением цветового кода hex от #000000 до #FFFFFF. Если вы предпочитаете использовать готовую цветовую схему шаблона, вам необходимо будет нажать на иконку По умолчанию и выбрать цвет из появившегося списка.

Если вы передумали использовать цвет для фона, можете сбросить его нажав на иконку Очистить (4).

выбор цвета фона

Изображение. Для того, чтобы установить на фон картинку, наведите на поле со знаком «+» и нажмите на появившееся Выберите изображение. Откроется окно библиотеки медиа файлов сайта, в котором нужно выбрать картинку и нажать на Вставить медиа.

После этого появятся 4 параметра: позиция, привязка, повтор и размер.

  • Позиция позволяет выбрать из 10 вариантов приоритетное положение картинки. Например, у вас на картинке товар видно лучше всего с нижнего правого угла, а фото по умолчанию присваивается позиция Верх Лево.
  • Привязка позволяет зафиксировать изображение фона при движении страницы вверх-вниз.
  • Повтор можно использовать при паттернах или текстурах. Также можно выбрать варианты повтора: полный, горизонтальный или вертикальный.
  • Размер позволяет распределить изображение по секции: автоматически — полный размер картинки, перекрыть — растягивает картинку по секции, а поместить — вмещает полностью картинку в размер секции.
Метки: