7 ноября, 2020

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

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

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

Теперь рассмотрим Секции Elementor и их настройки подробнее.

Секция — это основополагающий элемент, в который вставляются все виджеты Элементора.

Состоит из колонок и строк (рядов или внутренних секций).

Настройки секции.

Как и всех виджетов Elementor, настройки секции содержат три основные вкладки:

  • макет;
  • стиль;
  • расширенные.

Рассмотрим каждую вкладку с настройками немного подробнее.

Вкладка Макет.

Отвечает за настройки структуры секции.

Включает два раздела:

  • макет;
  • структура.
Макет
sekcziya. maket

Ширина макета.

Ширина включает две настройки.

sekcziya. shirina kontenta
  • ограниченная. Ширина контента страницы займет 1140px. Как это выглядит, показано на изображении ниже;
sekcziya. shirina kontenta. ogranichennaya
  • во всю ширину. Контент растягивается на всю ширину экрана.
sekcziya. shirina kontenta. vo vsyu shirinu

Если Вам нужна своя ширина, например 500px, вы легко это сделаете путем перемещения ползунка ширины, или заполнив поле справа от него.

sekcziya. shirina kontenta. sobstvennaya

При выборе пункта Во всю ширину ползунок с регулировкой ширины вручную пропадает, что логично.

Разрыв колонок.

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

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

Данная настройка устанавливает высоту секции. Включает 3 варианта:

  • по умолчанию. Высота секции устанавливается автоматически по высоте внутреннего содержимого.
  • по размеру экрана. Секция занимает всю высоту экрана.
  • мин. высота. Здесь можно установить необходимую высоту секции. Поддерживается установка высоты в px, vh и vw. По умолчанию при включении данной настройки, высота секции устанавливается в размере 400px.
sekcziya.vysota.minimalnaya

При выборе пункта Мин. высота, становится доступен пункт Позиция колонок, так как при установке минимальной высоты может понадобится функция выравнивания расположения колонок по вертикали в пределах секции.

Позиция колонок.

Включает четыре настройки:

pozicziya kolonok. punkty
  • растягиваться;
  • вверх;
  • посередине (устанавливается по умолчанию);
  • вниз.

Покажем это визуально на изображениях ниже.

pozicziya kolonok. poseredine
Позиция колонок — Посередине

pozicziya kolonok.verh
Позиция колонок — Верх

pozicziya kolonok. niz
Позиция колонок — Низ

pozicziya kolonok. rastyagivatsya
Позиция колонок — Растягиваться
Вертикальное выравнивание.

Данный пункт включает выравнивание контента внутри секции и состоит из следующих пунктов:

  • по умолчанию;
  • верх;
  • посередине;
  • низ;
  • расстояние между;
  • расстояние около;
  • равное расстояние

По умолчанию весь контент секции выравнивается по верхнему краю.

sekcziya. vertikalnoe vyravnivanie.po umolchaniyu
Вертикальное выравнивание — по умолчанию.

sekcziya. vertikalnoe vyravnivanie.po umolchaniyu
Вертикальное выравнивание — Верх

sekcziya. vertikalnoe vyravnivanie.poseredine
Вертикальное выравнивание — Посередине

sekcziya. vertikalnoe vyravnivanie.niz
Вертикальное выравнивание — Низ

sekcziya. vertikalnoe vyravnivanie.rasstoyanie mezhdu
Вертикальное выравнивание — Расстояние между. Все внутренние элементы (виджеты) выравниваются относительно верхней и нижней границы секции. Крайние виджеты прижимаются к краям секции, а все остальные, расположенные между ними, расставляются на одинаковое расстояние по вертикали.

sekcziya. vertikalnoe vyravnivanie.rasstoyanie okolo
Вертикальное выравнивание — Расстояние около. Отступы верхнего и нижнего виджета равны половине отступа между внутренними виджетами

sekcziya. vertikalnoe vyravnivanie.ravnoe rasstoyanie
Вертикальное выравнивание — Равное расстояние. Виджеты становятся на равное расстояние друг от друга.
Overflow.

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

Растянуть секцию.
sekcziya. rastyanut sekcziyu

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

Используете настройку для растягивание секции только в крайнем случае, когда не работают стандартные средства.

HTML-тег.
sekcziya. html teg

Данная настройка необходима для присваивания секции html-тегов:

  • div;
  • header;
  • footer;
  • main;
  • article;
  • section;
  • aside;
  • nav.

Например, если секция создается для шапки сайта, можете присвоить секции тег <header>, если секция содержит статью — тег <article>. Не будем отписывать каждый тег, более подробнее о них можете прочитать здесь.

Структура.

sekcziya. struktura

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

Про стилевые настройки секции читайте в нашей следующей статье Секция. Вкладка Стиль.

0

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

Прозрачность фона в Elementor

Прозрачность фона Прозрачность фонового изображения И так. Многим может показаться необычная, но часто встречающая формулировка запроса в поисковиках — «Яркость фона в

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

Пользовательские CSS в Elementor. Вкладка Расширенные. Общие настройки виджетов Elementor.

Пользовательские CSS. Разработчики подарили нам замечательную возможность дополнительной настройки css-стилей для всех элементов. Вы можете стилизовать любой элемент, использую весь спектр свойств

Читать полностью »
Подписаться
Уведомить о
0 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии
0
Оставьте комментарий! Напишите, что думаете по поводу статьи.x
()
x

Блог о Веб-разработке на Wordpress, Elementor и Elementor Pro:
Документация. Уроки. Видео

Блог о Веб-разработке на Wordpress, Elementor и Elementor Pro:
Документация. Уроки. Видео

Регистрация

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.