28 мая, 2021

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

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

Позиционирование в web-разработке относится к одной их самых сложных тем, так как содержит большое количество «подводных камней», возникающих при верстке макетов. В данном разделе устанавливается значение ширины заголовка и позиционирование относительно других элементов на странице. Благодаря Элементору, нам нет необходимости очень сильно углублять свои знания в деле размещения элементов на странице, но, тем не менее, на тему позиционирования нужно обратить пристальное внимание и обязательно проверить функционирования всех настроек, описанных в нашей статье ниже, на практике.

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

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

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

Ширина

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

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

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

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

Во всю ширину

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

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

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

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

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

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

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

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

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

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

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

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

Что же, на этом мы закончим. Мы коротко рассмотрели позиционирование в Elementor. Ставьте лайки, если статья помогла Вам!

Рекомендуем прочитать наши статью по теме расширенных настроек.

0

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

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

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

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

Пункт меню без ссылки в Elementor

Пункт меню без ссылки в Elementor. Создать такой пункт очень просто. Для этого необходимо зайти в консоль Wordpress в раздел «Внешний вид => Меню» и в списке элементов меню слева выбрать пункт «Произвольные ссылки».

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

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.