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