Menu
Произвольное позиционирование
В данном видео-уроке мы произвольное позиционирование объектов на сайте.
Тема урока: «Произвольное позиционирование элементов на сайте»
Добрый день. Тема урока: «Произвольное позиционирование элементов на сайте».
Произвольное позиционирование используется в том случае, если требуется разместить тот или иной элемент в любом месте, в котором с обычным построением страницы Elementor, разместить его было бы нельзя. Либо если требуется чтобы элемент двигался с экраном при прокрутке страницы сайта, то есть закрепить его подобно хедеру сайта.
Для того, чтобы установить произвольное позиционирование для элемента, нужно перейти в Elementor.
Произвольное позиционирование будет рассматриваться на примере элемента «кнопка».
Выделив элемент «кнопка», нужно перейти во вкладку «Расширенные», затем нажать на вкладку «Позиционирование» в открывшемся меню слева, рисунок 1.
Вы увидите такие параметры элемента, как «Ширина» и «Позиционирование».
Ширина объекта
В этой вкладке появляется возможность менять границы объекта. Выбрав «Во всю ширину 100%» границы объекта будут на всю ширину экрана. Выбрав «Друг за другом auto» – границы объекта будут заканчиваться там же где и объект, к тому же, объекты будут находиться друг за другом, рисунок 2.
Абсолютное позиционирование
Для того, чтобы можно было разместить объект, где угодно, нужно выбрать для этого элемента в параметре «Позиционирование» пункт «Абсолютное», рисунок 3. Для всех объектов этот параметр установлен «по умолчанию».
Этот параметр используется крайне редко из-за того, что он не адаптивен. Это значит, что при переходе с компьютерной на мобильную или планшетную версию, не гарантируется то, что объект будет оставаться на том же самом месте, куда его поставили. Зачастую сложно подобрать и настроить место для удобной работы с этим объектом, к тому же, чтобы он продолжал выполнять свои функции на разных версиях сайта. Поэтому каждый такой объект нужно настраивать в различных версиях сайта отдельно.
Пункт «Фиксированное» во вкладке «позиционирование» привязывает объект к тем параметрам, что ему задали. После того как объекту задали параметры, этот объект будет двигаться вместе с экраном, когда его прокручивают, рисунок 4. В примере элемент «кнопка» находится в левом верхнем углу страницы сайта (зеленого цвета).
В мобильной версии сайта имеются аналогичные настройки для таких элементов. В них можно также менять и устанавливать позиционирование объектов, так как требуется, рисунок 5.
Спасибо за внимание. В следующем уроке будет рассматриваться тема: «Основные элементы Elementor».
