28 мая, 2021

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

Позиционирование.

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

zagolovok stil.zagolovokyurasshirennye.poziczionirovanie

Включает в себя настройки:

  • ширина;
  • вертикальное выравнивание (пункт отображается при активации настроек ширины, кроме значения по умолчанию);
  • произвольная ширина (пункт появляется при выборе значения ширины «Произвольно»);
  • позиционирование

Ширина.

zagolovok stil.zagolovokyurasshirennye.poziczionirovanie.shirina

Настройки ширины предполагают следующие варианты:

  • по умолчанию;
  • во всю ширину (100%);
  • друг за другом (auto);
  • произвольно.

По умолчанию заголовок занимает всю ширину блока, в котором он находится.

Во всю ширину.

Виджет заголовка занимает 100% ширины секции.

Друг за другом.

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

Рассмотрим эту настройку на наглядном примере.

Допустим, нужно разместить на странице несколько иконок в один ряд.

Если мы добавим иконки в колонку, они станут друг над другом, так как по умолчанию виджет занимает 100% ширины родительского блока.

zagolovok stil.zagolovok.rasshirennye.poziczionirovanie.shirina. drug za drugom 003

Если мы установим в настройках ширины «Друг за другом», то виджет иконки займет ширину только по значению ширины своего внутреннего содержимого.

zagolovok stil.zagolovok.rasshirennye.poziczionirovanie.shirina. drug za drugom 004

Следовательно, нам останется установить ширину «Друг за другом» у остальных иконок и они выстроятся в одну линию.

zagolovok stil.zagolovok.rasshirennye.poziczionirovanie.shirina. drug za drugom 005
Виджеты выстроились в одну линию друг за другом.

Настройка ширины «Друг за другом» применима ко всем виджетам Elementor.

Произвольно.

Устанавливает произвольную ширину виджета в px, % и vm. Значения ширины можно установить перемещением ползунка слева или ввести цифровое значение в поле справа.

zagolovok stil.zagolovok.rasshirennye.poziczionirovanie.shirina. proizvolno
Вертикальное выравнивание.
zagolovok stil.zagolovok.rasshirennye.poziczionirovanie.shirina. vertikalnoe vyravnivanie

Допускаются следующие значения:

  • начало;
  • центр;
  • конец.

Необходима, если нужно выровнять виджеты c разной высотой, расположенные в друг за другом, по вертикали.

zagolovok stil.zagolovok.rasshirennye.poziczionirovanie.shirina. vertikalnoe vyravnivanie 001
Вертикальное выравнивание по верхнему краю, по центру и по нижнему краю

Позиционирование.

zagolovok stil.zagolovok.rasshirennye.poziczionirovanie.shirina. poziczionirovanie

Отвечает за размещение элемента на странице по оси-x и по оси-y.

В Элементоре существуют 3 вида позиционирования элементов:

  • по умолчанию;
  • абсолютное;
  • фиксированное.
По умолчанию.

Позиционирует элемент относительно его первоначального расположения.

Абсолютное позиционирование.

При активации отображаются дополнительные настройки позиционирования:

  • горизонтальная ориентация;
  • смещение (для горизонтальной ориентации);
  • вертикальная ориентация;
  • смещение (для вертикальной ориентации)
maska.poziczionirovanie.absolyutnoe

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

zagolovok stil.zagolovok.rasshirennye.poziczionirovanie.shirina. poziczionirovanie.absolyutnoe
Как видите, иконка открепилась от секции и справа появился специальный символ, указывающий на включение абсолютного позиционирования.

Элемент с абсолютным позиционированием возможно разместить в любом месте в пределах страницы.

Перемещать элемент можно как при помощи компьютерной мыши, так и при помощи изменения горизонтальной, вертикальной ориентации, и путем изменения смещения при помощи горизонтальных ползунков. Значения устанавливаются в px, %, vm и vh.

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

Фиксированное позиционирование.

При активации отображаются дополнительные настройки позиционирования:

  • горизонтальная ориентация;
  • смещение (для горизонтальной ориентации);
  • вертикальная ориентация;
  • смещение (для вертикальной ориентации)
maska.poziczionirovanie.fiksirovannoe

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

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

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

0

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

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

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

Читать полностью »
Подписаться
Уведомить о
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.