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