Сетки макеты аккуратные, и аккуратный может стать скучным Изображение, которое наклоняется из своего столбца, или карта, которая немного растет под курсором: небольшие преобразования, как эти отделяют оформленную страницу от сложенной.The Преобразует расширение в Мастер Аддоны Про добавляет панель преобразования к каждому элементу: перевести, повернуть, масштабировать, перекос и перевернуть, с отдельными настройками для нормального и зависающего состояний.
Что делает расширение Transforms #
После включения каждый элемент Elementor получает a Преобразует раздел под своим Продвинутый вкладка. Перевернуть Включенные преобразования для да и появляются шесть элементов управления, каждый из которых применяет преобразование CSS к элементу, не касаясь фактического потока компоновки:
- Перевести: перемещайте элемент по осям X и Y, в пикселях, от -1000 до 1000.
- Поворот: поверните его на оси X, Y или Z, от -180 до 180 градусов.
- Масштаб: увеличивают или ужимают его на каждой оси независимо, от 0 до 5.
- Перекос: наклоните его, чтобы создать диагональный, динамичный вид.
- Переверните по горизонтали/переверните по вертикали: зеркально отзеркалите одним щелчком мыши.
The Нормальный и Наведите курсор вкладки содержат отдельные значения, поэтому элемент может сидеть в одном направлении и трансформироваться, когда курсор приземляется на него, с продолжительностью перехода, которую вы контролируете.
Прежде чем начать #
- WordPress с Элементор установлен и активен.
- Мастер-аддоны для Elementor установлен и активен. Новое в плагине? Следуйте руководство установки первый.
- А Мастер Аддоны Про лицензия, потому что Transforms - это расширение Pro.
Как включить расширение Transforms #
С панели управления WordPress перейдите по адресу Мастер Аддоны и откройте Расширения вкладка. Трансформы сидят в Виджеты анимации группа с горячим значком, между Входная анимация и Раскрыть. Нажмите на его переключатель, чтобы он стал фиолетовым, а затем нажмите Сохранить изменения и дождитесь зеленого “Настройки успешно сохранены” уведомление.
Откройте панель "Преобразования" на элементе #
Выберите элемент в редакторе Elementor, виджет изображения в демо-версии и откройте Продвинутый вкладка. Развернуть Преобразует раздел с фиолетовым значком MA и переключателем Включенные преобразования да. Шесть элементов управления преобразованием отображаются на вкладках "Нормальное" и "Наведение", каждый из которых открывается значком карандаша.
Перемещайте и масштабируйте элемент #
Нажмите карандаш рядом с Переводить и открываются два ползунка: Translate X и Translate Y. Демо-версия толкает изображение 71 на оси X, и оно скользит к краю секции на холсте при движении ползунка. Значения указаны в пикселях, и каждая ось имеет свою собственную настройку реагирования на устройство.
The Масштаб управление работает таким же образом. установка масштаба X на 1.4 в демо увеличил изображение за пределы его столбца, перекрывая границу раздела для типа разбивки кадрирование простой сетки не может сделать. Масштаб Y остается на своем уровне по умолчанию 1, если вы не измените его, поэтому установите оба для равномерного увеличения.
Вращать и Перекос работать одинаково Откройте управление, перетащите ползунок, и холст показывает угол, как вы идете.
Добавить преобразование наведения #
Переключиться на Наведите курсор вкладка и те же элементы управления применяются только во время нахождения курсора на элементе, плюс два дополнения: Флип Горизонтальный и Перевернуть Вертикальный станьте переключателями "Да/Нет" и "А" Продолжительность перехода (мс) слайдер управляет тем, как быстро изменение оживляет. демо-версия включает Flip Horizontal с переходом на 400 мс, поэтому изображение плавно зеркально отражается при наведении и отскакивает назад, когда курсор уходит.
Результат на странице #
Опубликовать и проверить передний конец. изображение сидит сдвинутым и увеличенным мимо его столбца точно так, как это было организовано в редакторе, и наведение на него воспроизводит переворот с легкостью 400ms. Преобразования являются простой CSS с одной небольшой таблицей стилей, и макет вокруг элемента никогда не возвращается.
Следует помнить одно: преобразования только визуальные. элемент по-прежнему занимает свое первоначальное место в макете, поэтому сильно переведенный элемент может перекрывать своих соседей. обычно это точка, но проверьте планшет и мобильный, где одно и то же смещение покрывает большую часть экрана.
Где трансформации зарабатывают свое место #
- Изображения прорыва. Фотография, масштабированная и сдвинутая за край колонки, дает глубину секции героя.
- Обратная связь Hover. Карты, которые поднимают, наклоняют или слегка растут под курсором, читаются как кликабельные.
- Повернутые акценты. Значки, марки и этикетки более естественно располагаются под небольшим углом.
- Перекошенные участки. Несколько градусов перекоса на разделителе или кнопке ломают однообразие прямоугольника.
- Зеркальные активы. Переверните одну стрелку или иллюстрацию вместо экспорта второго изображения.
Видео Учебник #
Следите за каждым элементом управления в действии, от включения расширения до переворота на висении на опубликованной странице.
Часто задаваемые вопросы #
Как повернуть или масштабировать элемент в Элементоре?
Включите расширение Преобразования на вкладке Расширения главных дополнений, выберите элемент и откройте Преобразования на вкладке Дополнительно Включите Включенные преобразования, затем используйте элемент управления Поворот или Масштаб; холст предварительно просматривает изменение в реальном времени при перетаскивании ползунка Собственный раздел Преобразование Элементора на вкладке Дополнительно предлагает аналогичные элементы управления бесплатно.
Могу ли я применить другое преобразование при наведении?
Да. панель имеет отдельные вкладки Нормальная и Ховер Установить значения покоя в Нормальном, навести значения в Ховере, и использовать ползунок Продолжительность Перехода, чтобы контролировать, как быстро элемент оживляется между двумя состояниями.
Преобразования нарушают макет моей страницы?
Нет. CSS преобразования являются только визуальными, поэтому элемент сохраняет свое исходное пространство в макете и окружающий контент никогда не рефлоугирует. преобразованный элемент может перекрывать соседей по дизайну, поэтому предварительный просмотр планшета и мобильного устройства для подтверждения смещений по-прежнему выглядит правильно.
Какие преобразования включает расширение?
Перевести X и Y, Поворот X, Y и Z, Масштаб X и Y, Перекос X и Y, Перевернуть по горизонтали и Перевернуть по вертикали, каждый доступен как в нормальном, так и в наведенном состоянии. ползунки отзывчивы, поэтому значения могут различаться для каждого устройства.
Расширение Transforms бесплатное?
Нет. Transforms является расширением Pro в Master Addons.Elementor также имеет бесплатный раздел Transform на вкладке Advanced с аналогичными элементами управления, и страница расширения Transforms сравнивает эти два.
Завершая #
The Преобразует расширение вручает вам набор инструментов преобразования CSS внутри панели Элементор: двигаться, вращать, масштабировать, перекосить и перевернуть что угодно, с наведением состояния и плавные переходы включены.Начните с одного изображения прорыва или одного подъема на зависание и стройте оттуда. Он естественным образом спаривается с Расширение входной анимации для элементов, которые приходят в движение, и полный состав Виджеты и расширения Master Addgets покрывает остальное.
