Виджет изображения Элементор по умолчанию показывает картинку и связывает ее где-то Бесплатно Расширенный виджет изображения в Мастер-аддоны для Elementor делает больше: он переключается на второе изображение на зависании, сверху опускает угловую ленту, открывается в лайтбоксе и добавляет трехмерный наклон или цветную тень, и все это без прикосновения к CSS.
Вы устанавливаете основное изображение, необязательное изображение наведения, ленту и несколько эффектов с панели Элементор. Это делает его хорошо подходящим для снимков продукта, миниатюр портфолио или любого изображения, которое требует метки или небольшого движения. Это руководство проходит через каждую вкладку и настройку.
Предпочитаете смотреть первым? Это короткое руководство проходит через виджет Advanced Image от начала до конца:
Что делает виджет Advanced Image #
В его ядре он показывает одно изображение, но он накладывает дополнительные элементы сверху. наведение изображения меняется, когда курсор над ним, лента вызывает метку, как “NEW,” и вкладка Настройки добавляет лайтбокс, эффект наклона, и колоризованная тень. Все настроено с панели, поэтому то же изображение может сделать намного больше, чем простое.
Виджет имеет четыре вкладки: "Содержимое изображений и ленты", "Настройки поведения, такого как лайтбокс и наклон", "Стиль размера и цвета" и "Дополнительно" для обычных параметров расстояния между элементорами и видимости.
Прежде чем начать #
- WordPress с Элементор установлен и активен.
- Мастер-аддоны для Elementor установлен и активен. Новое в плагине? Видеть руководство установки.
- Одно изображение, которое нужно показать, и второе, если вам нужен обмен ховерами.
Как добавить виджет Advanced Image #
В редакторе Elementor откройте Элементы панель и поиск Расширенное изображение, или прокрутите в раздел Главные дополнения Перетащите его на свою страницу, Он начинается с заполнителя, поэтому первым шагом является выбор изображения.
Установить изображение #
В Содержание вкладка, the Изображение раздел содержит основы. щелкните поле изображения, чтобы выбрать одно из медиатеки, установите Разрешение изображения WordPress должен служить и добавлять Ссылка на изображение если картинка должна где-то ссылаться.
Добавить изображение наведения #
The Наведите изображение раздел - это место, где виджет получает свое имя.Включите Отобразить изображение наведения и выберите второе изображение. на живой странице виджет показывает первое изображение и переходит на второе, когда кто-то зависает, что удобно для фронтов и спинок продукта или кадров до и после.
Добавить ленту #
The Лента раздел добавляет над изображением угловой баннер Включите Лента дисплея, установите текст и выберите, как он выглядит.
- Текст: этикетка, например НОВАЯ или ПРОДАЖА.
- Стиль ленты: Простой, угловой или крестный.
- Положение ленты: поместите его в любой угол, например, вверху справа или внизу слева.
- Толщина и ширина ленты: размер полосы соответствует тексту.
Настройки: лайтбокс, наклон и тень #
The Настройки таб - это место, где живет поведение. это дополнения, которые выделяют виджет из простого изображения.
- Открыть в лайтбоксе: нажмите на изображение, чтобы открыть его в полный размер во всплывающем окне. При включении добавляется знаковая опция кнопки (например, значок плюс) поверх изображения.
- Выравнивание: слева, в центре или справа внутри блока.
- Предварительная загрузка изображения: показывает заполнитель во время загрузки изображения, например размытый предварительный просмотр, анимацию окна выполнения или загрузочный спиннер.
- Эффект наклона: добавляет трехмерный наклон, который следует за курсором для небольшого движения.
- Раскрашенная тень: роняет тень, тонированную от собственных цветов изображения. обратите внимание, что она недоступна, пока изображение наведения на воздух активно.
Стиль изображения и ленты #
The Стиль вкладка обрабатывает размеры и цвета. The Изображение раздел задает вид самой картинки.
- Максимальная ширина и максимальная высота: закройте размер изображения.
- Граничный радиус: закруглять углы.
- Нормальное состояние и состояние Ховера: установите Box Shadow, Border и фон отдельно для отдыха и зависания.
The Лента раздел стиля контролирует внешний вид баннера: цвет фона, цвет текста, типографику, тени, смещения положения и радиус границы.
Результат на странице #
Опубликуйте или предварительно просмотрите изображение, рендеринг изображения с лентой на месте и эффектами в реальном времени: наведите курсор, чтобы поменять изображения местами, наведите курсор на наклон или нажмите, чтобы открыть лайтбокс, в зависимости от того, что вы включили.
Обычные случаи использования #
- Продуктовые кадры с перестановкой висения спереди назад или попеременным углом.
- Миниатюры портфолио это откроется в полный размер в лайтбоксе.
- Промо-изображения с лентой NEW или SALE в углу.
- Особенности графики с тонким наклоном для движения.
- Изображения героев использование цветной тени для глубины.
Советы по работе с виджетом Advanced Image #
- Используйте совпадающие размеры для замены зависания. Изображения одинакового размера не позволяют кроссфейду прыгать.
- Выберите правильное разрешение изображения. Подача полноразмерного файла в небольшой слот замедляет страницу; обычно достаточно среднего или большого размера.
- Держите текст ленты коротким. Одно слово подходит к угловой полосе чисто.
- Пропускайте цветную тень при использовании замены наведения. Эти двое не работают вместе, поэтому выбирайте по одному на изображение.
- Полегче на наклоне. Небольшое движение привлекает внимание; слишком много кажется бесполезным.
Часто задаваемые вопросы #
Что такое виджет Advanced Image в Master Addons?
Это виджет изображения Elementor со встроенными дополнениями: замена изображения наведения, угловая лента, лайтбокс, эффект трехмерного наклона и цветная тень. Вы устанавливаете все это с панели Elementor, поэтому одно изображение может делать гораздо больше, чем позволяет виджет изображения по умолчанию.
Как изменить изображение при наведении?
Откройте вкладку Содержимое, разверните раздел Наведение изображения и включите отображение Навести изображение Затем выберите второе изображение На живой странице виджет показывает первое изображение и переходит на второе, когда посетитель навевается на него.
Можно ли добавить ленту или значок к изображению?
Да. на вкладке Содержимое откройте раздел Лента и включите Лента отображения. Установите текст, выберите простой, угловой или перекрестный стиль и выберите угол. вкладка Стиль затем позволяет вам установить его цвет, типографику и положение.
Что такое эффект наклона?
Эффект наклона, найденный на вкладке Настройки, добавляет трехмерный наклон, который следует за курсором, когда он движется по изображению. Он дает плоскому изображению ощущение глубины и движения. Используйте его экономно, чтобы он оставался тонким, а не отвлекающим.
Поддерживает ли виджет Advanced Image лайтбокс?
Да. включите "Открыть в лайтбоксе" на вкладке "Настройки", и посетители смогут щелкнуть изображение, чтобы просмотреть его в полный размер во всплывающем окне. Вы также можете добавить знаковую кнопку, например значок "плюс", которая появляется над изображением, чтобы сигнализировать о том, что оно нажимается.
Завершая #
Виджет Advanced Image делает одно изображение и добавляет штрихи, которые обычно принимают собственный код: замена на зависание, лента, лайтбокс, наклон и раскрашенная тень. Установите изображения, включите нужные эффекты и создайте стиль результата с панели. дополнительные инструменты изображения см. в разделе Эффекты наведения изображения и Изображение Карусель виджеты, просмотр всего Виджеты и расширения Master Addgetsи посмотрите Страница расширенного виджета изображений для демо.
