Особенности плагина Divi: Эффект следующего изображения Pro

Next Image Effect Pro - это сторонний плагин для Divi, который добавляет множество эффектов наведения изображения, которые помогают привлечь внимание к вашим изображениям и ссылкам. Плагин добавляет к Divi Builder 7 модулей, каждый со своим собственным набором дизайнов и эффектов. В этой статье мы рассмотрим Next Image Effect Pro и посмотрим, на что он способен.

Установка Next Image Effect Pro

Купите и загрузите плагин в Divi Marketplace. Чтобы установить его, выполните следующие действия:

1. На панели инструментов WordPress перейдите в Плагины > Добавить новый.
2. Загрузите плагин со своего компьютера
3. Нажмите Установить сейчас
4. После установки плагина нажмите Активировать.

Далее вам необходимо активировать лицензию. Перейдите в Плагины > Лицензия Image Effect Pro . Введите свой лицензионный ключ и сохраните изменения.

Модули Next Image Effect Pro

Image Effect Pro добавляет в Divi Builder набор модулей, которые включают стилизованные комбинации изображений и текста. Они добавляют сотни эффектов наведения и комбинаций направлений. Параметры стиля текста включают независимые элементы управления для заголовков, текста фокуса, содержимого и их фона.

Модули включают:

• Круговое изображение при наведении
• Поле для наведения на изображение
• Эффект значка изображения
• Эффект мега изображения
• Минимальное наведение изображения
• Прокрутка следующего изображения
• Ultimate Image Hover

Круговое изображение при наведении

Круговое изображение при наведении курсора имеет два основных раздела: изображение и текст (содержимое при наведении курсора). Я добавил прямоугольное изображение. Он отображает изображение в исходной форме, но затем делает его круглым. Если бы изображение было квадратным, это был бы идеальный круг.

Параметры дизайна для изображения включают положение тени блока, силу и цвет.

Текст включает раздел для добавления заголовка и содержания. Вы можете стилизовать их в настройках дизайна. В этом примере я увеличил размеры.

Фон заголовка может быть сплошным или градиентным. Здесь используется градиент по умолчанию.

Он имеет 19 эффектов наведения с 4 вариантами направления для каждого эффекта. Это эффект 1. Эффекты имеют различные способы перехода изображения и содержимого. Они включают увеличение, переворачивание, слайды и многое другое.

Поле для наведения на изображение

Поле для наведения изображения также включает изображение с наведенным содержимым. Не меняет форму изображения.

Он также включает наложение (или фон, который просвечивает и выглядит как наложение) и добавляет фон заголовка. Оба фона могут содержать сплошные цвета и градиенты. В этом примере используется фон наложения по умолчанию. Я изменил цвет фона заголовка и увеличил размер текста.

Он имеет 13 различных эффектов наведения, включая переворачивание, скольжение, затухание, масштабирование и т. Д. Некоторые из эффектов добавляют параметры для направления. Это эффект 1.

Эффект значка изображения

Эффект значка изображения добавляет элемент наведения, который отображает заголовок и текст фокуса над изображением. Как и другие, вы можете изменить цвет фона либо на сплошной цвет, либо на градиент, и он включает в себя несколько эффектов наведения. Эффекты наведения в этом случае создают границы и выглядят особенно элегантно. Это эффект зависания Зои.

Что отличает его от других, так это значки. Вы можете добавить 4 разных значка и открыть их в том же или новом окне.

Настройки значка включают цвет, размер, интервал, высоту строки, цвет фона, тень, границу и т. Д. В этом примере я добавил цвет фона и уменьшил высоту строки, чтобы создать линию. Я также добавил тень. Это эффект наведения Геры.

Это эффект зависания Терри. Я изменил цвета заголовка и текста фокуса и использовал настройки размеров шрифта и значков из предыдущего примера.

Эффект мега изображения

Mega Image Effect - это еще одна двусторонняя карта с изображением на одной стороне и контентом на другой. На лицевой стороне изображение отображается как обычно.

На обратной стороне карточки содержимое отображается как обычно, с настройками шрифта и фона. Что отличает его, так это возможность добавить кнопку.

У вас есть полный контроль над дизайном кнопок, включая тот же сплошной цвет и параметры градиента, что и у стандартного фона. В этом примере показан градиент для фона кнопки.

У вас есть полный контроль над стилем кнопки для шрифтов и фона. В этом примере я настроил шрифт и границу. У каждого элемента модуля также есть регулировка интервала. Я добавил 20 пикселей в нижнюю часть кнопки. Каждый из модулей имеет эти регулировки расстояния.

У этого модуля слишком много эффектов наведения, чтобы их можно было сосчитать. Впечатляют только эффекты изображения, но также есть множество текстовых эффектов. Вы можете настроить наведение изображения и наведение текста отдельно и установить время для текстового эффекта.

В этом примере показано наведение параллельного левого изображения, текстовый эффект «Увеличение» и небольшая задержка текста.

Минимальное наведение изображения

Minimal Image Effect - самый простой модуль в комплекте. Он отображает изображение с эффектами наведения.

Единственная настраиваемая настройка - это эффекты наведения. Он включает в себя 10 эффектов на выбор. Мы рассмотрим несколько.

Этот пример - масштабирование с уменьшением и поворотом. Изображение увеличено и немного повернуто в нормальном состоянии. При наведении курсора изображение увеличивается и возвращается в нормальное состояние.

Это Blur. Изображение размывается, пока вы не наведете курсор, затем оно медленно размывается, пока не станет резким.

Это мигает. Белая вспышка мигает поверх изображения, а затем исчезает при наведении курсора.

Прокрутка следующего изображения

Прокрутка следующего изображения накладывает на изображение изображение и добавляет кнопку в правом верхнем углу. Вы можете настроить цвет кнопки как для сплошных цветов, так и для градиентов. В этом примере показаны настройки по умолчанию.

Вы также можете настроить наложение. Установите сплошной цвет или градиент. Он также включает типы градиентов и стандартные элементы управления.

Положение фона позволяет отображать верхнюю или нижнюю часть изображения.

Изображение перемещается вверх или вниз при наведении курсора. В этом примере модуль показывает нижнюю часть изображения и прокручивает изображение вверху при наведении курсора.

Ultimate Image Hover

Ultimate Image Hover отображает размер и форму в зависимости от выбранного вами эффекта. Это Эффект 1. Он показывает часть фотографии на высоком прямоугольном изображении. Он включает заголовок и текст фокуса, содержимое и наложение. Наложение включает настройки цвета в виде сплошного или градиентного.

При наведении курсора оверлей становится светлее, а текст раскрывается.

Прозрачность изображения позволяет вам регулировать количество видимого фона. В этом примере я уменьшил непрозрачность, изменил размер текста заголовка и фокуса, цвет текста заголовка, жирность текста фокуса, сделал текст фокуса заглавными буквами и добавил тень текста к тексту фокуса.

Этот модуль имеет 24 эффекта наведения. Они отображают изображение разных размеров, уровней непрозрачности, размещения текста и добавления границ.

Это Эффект 4. Он отображает изображение в квадрате и добавляет границу внутри, перекрывающуюся по краям.

Это Эффект 5. Он затемняет наложение и добавляет рамку внутри изображения и отображает изображение в квадрате.

Эффект 6 размещает заголовок и текст фокуса вверху с линией под ними, а содержимое - внизу.

Эффект 8 сохраняет большой прямоугольный размер и добавляет тонкую границу.

Это Эффект 10. При наведении курсора изображение увеличивается, линия становится x и появляется градиент.

Пример Next Image Effect Pro

В качестве простого примера рассмотрим макет Divi Home Renovation с добавленным модулем Ultimate Image Hover для создания CTA. Я добавил его слева от изображения и использовал цвета из макета.

При наведении курсора изображение сдвигается вправо, отображается CTA, изображение становится менее непрозрачным (что пропускает больше цвета фона) и добавляется граница. В этом примере используется эффект наведения 8.

Купить Next Image Effect Pro

Next Image Effect Pro доступен на Divi Marketplace по цене 49 долларов. Он включает в себя неограниченное использование веб-сайта, 30-дневную гарантию возврата денег и 1 год поддержки и обновлений.

Конечные мысли

Это наш взгляд на Next Image Effect Pro для Divi. Эти 7 модулей добавляют множество функций изображения, которые выделяют ваш сайт. Их использование интуитивно понятно. Количество эффектов и комбинаций между всеми модулями впечатляет. Каждый модуль уникален, но большинство из них добавляют изображения, заголовки и контент, чтобы предоставить множество возможностей дизайна для CTA, членов команды, отзывов, общей информации, контактной информации и многого другого.

Ждем вашего ответа. Вы пробовали Next Image Effect Pro? Дайте нам знать, что вы думаете об этом в комментариях.

Лучшее изображение через elenabsl / shutterstock.com