Элементор держит элементы в их колоннах, что точно верно, пока дизайн не требует чего-то другого: значок, который сидит наполовину на фотографии и наполовину от нее, или этикетка, проталкиваемая мимо края раздела.The Расширение позиционирования в Мастер-аддоны для Elementor добавляет элементы управления смещением в каждый виджет, столбец, раздел и контейнер. вы можете подтолкнуть или полностью изменить положение чего-либо с панели в px, em или %, с отдельными значениями для каждого устройства.
Что делает расширение Positioning #
После включения каждый элемент получает a Позиционирование раздел под своим Продвинутый вкладка. Выбрать а Тип позиции и перемещают элемент со смещенными ползунами:
- Тип позиции: По умолчанию и Статик поддерживают нормальный поток, Относительный смещает элемент из его собственного места, и Абсолют помещает его внутрь ближайшего расположенного родителя Здесь нет Фиксированного параметра; для этого используйте собственный параметр Позиция Элементора.
- Верх /Право /Нижний /Левый: смещения в px, em или % для каждой стороны, включая отрицательные значения для проталкивания за края.
- Из Центра: горизонтальное смещение от середины родителя. Он устанавливает левый до 50% плюс ваше значение.
- Z-индекс: решает, какой элемент победит, когда что-то пересекается.
Каждый элемент управления несет значок реагирования, поэтому рабочий стол, планшет и мобильный телефон сохраняют свои собственные значения. Панель добавляет одно разумное предупреждение: избегайте одновременного объединения "Из центра" и "Влево".
Прежде чем начать #
- WordPress с Элементор установлен и активен.
- Мастер-аддоны для Elementor установлен и активен. Новое в плагине? Следуйте руководство установки первый.
- Позиционирование - это бесплатное расширение, поэтому лицензия Pro не требуется.
Как включить расширение "Позиционирование" #
С панели управления WordPress перейдите по адресу Мастер Аддоны и откройте Расширения вкладка. Позиционирование находится в Отображение виджетов группа, рядом Сетка Линия и Дополнительные контейнеры. Нажмите на его переключатель, чтобы он стал фиолетовым, а затем нажмите Сохранить изменения и дождитесь зеленого “Настройки успешно сохранены” уведомление.
Откройте панель позиционирования #
Выберите элемент в редакторе Elementor, круглый значок качества в демо-версии и откройте Продвинутый вкладка. Развернуть Позиционирование раздел с фиолетовым значком MA и набором Тип позиции чтобы Относительный. Элементы управления смещением отображаются: сверху, справа, снизу, слева, из центра и Z-индекс под ними.
Перетащите любой ползунок, и элемент движется в реальном времени на холсте. негатив Вершина -143 в демо-версии поднимает значок от середины фотографии к его верхнему краю; положительные значения толкают в другую сторону.
Переместить элемент на место #
Демо-версия обходит значок вокруг фотографии с несколькими значениями: Топ-357 опускает его к нижней половине, Верно -262 сдвигает его наружу, и а Нижний значение точно настраивает перекрытие до тех пор, пока значок не окажется на нижнем крае фотографии. каждый ползунок также принимает типизированные значения, поэтому вы можете сопоставить точное расстояние от макета.
С Относительным, элемент сохраняет свой слот в макете и содержимое вокруг него остается поставленным Абсолют выводит элемент из потока, поэтому содержимое ниже перемещается вверх, чтобы заполнить пробел Когда два элемента в конечном итоге сложены, Z-Индекс поле оседает кто сидит на вершине.
Результат на странице #
Опубликовать и значок отображает именно то место, где он был припаркован: перекрытие нижнего края фотографии, разрыв прямоугольника, не касаясь структуры колонны внизу.
Проверьте планшет и мобильный прежде чем закончить. смещения, которые выглядят прямо на рабочем столе, могут вытолкнуть элемент за пределы экрана на узком окне просмотра, именно поэтому каждый элемент управления здесь отзывчив.
Где точное позиционирование окупается #
- Значки и марки. Печать, перекрывающая фотоуголок, читается как спроектированная, а не размещенная.
- Перекрывающиеся карты. Нажмите карточку с отзывами или статистикой на край изображения рядом с ним.
- Разрывные акценты. Формы или этикетки, пересекающие границы сечения.
- Точные исправления выравнивания. Подтолкнуть элемент на несколько пикселей, не обернув его маржинальными хаками.
- Слоистые композиции героев. Стекайте текст поверх изображений, при этом Z-Index определяет порядок.
Видео Учебник #
Наблюдайте, как значок перемещается по макету в режиме реального времени, начиная с включения расширения и заканчивая опубликованной страницей.
Часто задаваемые вопросы #
Как мне свободно перемещать элемент в Элементоре?
Включите расширение "Позиционирование" на вкладке "Расширения главных дополнений", выберите элемент и откройте "Позиционирование" на вкладке "Дополнительно". Установите тип позиции на "Относительно" и используйте ползунки "Вверх", "Вправо", "Вниз" и "Влево"; элемент перемещается в реальном времени по холсту при перетаскивании.
Могу ли я использовать отрицательные значения смещения?
Да. отрицательные значения проталкивают элемент за его нормальную границу, то есть как вы накладываете значок на край фотографии или вытягиваете элемент за пределы его раздела. Введите значение или перетащите ползунок в любом направлении.
Что делает настройка Z-Index?
Z-Index контролирует порядок укладки, когда элементы перекрываются. Элемент с большим числом отображает сверху. Установите его на одной и той же панели позиционирования всякий раз, когда перемещаемому элементу необходимо расположиться над или под своими соседями.
Срабатывают ли взаимозачеты и на мобильных устройствах?
Каждый элемент управления смещением является отзывчивым, поэтому рабочий стол, планшет и мобильный телефон сохраняют отдельные значения. Всегда просматривайте узкие окна просмотра после позиционирования: смещение, подходящее к широкому экрану, может вытолкнуть элемент за пределы экрана телефона, и значения для каждого устройства - это то, как вы его корректируете.
Расширение Positioning бесплатное?
Да. позиционирование поставляется с бесплатной версией Главных дополнений для Elementor, в группе Виджеты дисплея вкладки Расширения. на странице цен указано, что добавляют планы Pro.
Завершая #
Позиционирование позволяет разместить элементы Elementor за пределами их обычного слота: выберите Относительный или Абсолютный, установите смещения и используйте Z-Индекс и значения для каждого устройства для остальных. The Страница расширения позиционирования сравнивает его со встроенным параметром "Положение" Elementor. Если элементу также требуется вращение или масштабирование, соедините его с параметром Преобразует расширение (Про). Вы можете просмотреть остальную часть Виджеты и расширения Master Addgets на одной странице.
