Как воссоздать превью пакета макетов ET с эффектами наведения на разворот в Divi

Одной из замечательных особенностей нового дизайна веб-сайта elegancethemes.com является предварительный просмотр готовых макетов на странице продукта Divi. Что делает этот дизайн уникальным, так это то, что каждый пакет макетов представлен тремя отдельными изображениями, которые разворачиваются при наведении курсора.

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

Давайте начнем.

Sneak Peek

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

Макет из трех столбцов на рабочем столе будет изменен на один столбец на планшете и телефоне.

Загрузите пакет Layout Pack Preview Fan-Out Hover Effects Layout БЕСПЛАТНО

Чтобы получить доступ к дизайну из этого урока, вам сначала нужно загрузить его, используя кнопку ниже. Чтобы получить доступ к загрузке, вам необходимо подписаться на наш список рассылки Divi Daily, используя форму ниже. Как новый подписчик, вы будете получать еще больше добра Divi и бесплатный пакет Divi Layout каждый понедельник! Если вы уже есть в списке, просто введите ниже свой адрес электронной почты и нажмите «Загрузить». Вы не будете «повторно подписаны» или будете получать дополнительные электронные письма.

Скачать файлы

Скачать бесплатно

Подпишитесь на рассылку новостей Divi, и мы отправим вам по электронной почте копию окончательного пакета макетов целевой страницы Divi, а также множество других удивительных и бесплатных ресурсов, советов и приемов Divi. Следуйте за ним, и вы станете мастером Divi в кратчайшие сроки. Если вы уже подписаны, просто введите свой адрес электронной почты ниже и нажмите «Загрузить», чтобы получить доступ к пакету макетов.

СКАЧАТЬ

Вы успешно подписались. Пожалуйста, проверьте свой адрес электронной почты, чтобы подтвердить подписку и получить доступ к бесплатным еженедельным пакетам макетов Divi!

Чтобы импортировать макет на свою страницу, просто извлеките zip-файл и перетащите файл json в Divi Builder.

Давайте перейдем к руководству, ладно?

Подпишитесь на наш канал Youtube

Что вам нужно для начала

Для начала вам потребуется следующая настройка:

1. Тема Divi установлена ​​и активна
2. Новая страница, созданная для создания с нуля с помощью внешнего (визуального) конструктора Divi.
3. Три изображения для фиктивного содержания. Для наилучшего результата изображения должны иметь размер около 250 на 375 пикселей. Поскольку это предварительные просмотры веб-страниц, вы можете создавать свои собственные скриншоты любого дизайна страницы, а затем соответственно обрезать / изменять размер каждого изображения.

После этого у вас будет пустой холст, чтобы начать создавать несколько зависающих вкладок в Divi.

Воссоздание превью пакета макетов ET с эффектами наведения на разворот в Divi

Построение сечения и ряда

Создайте новый обычный раздел со строкой из трех столбцов.

Перед добавлением каких-либо модулей откройте настройки строк и обновите размер и интервал следующим образом:

• Ширина желоба: 2
• Ширина: 90%
• Максимальная ширина: 1120 пикселей (рабочий стол), 400 пикселей (планшет)

Затем добавьте отступ к строке на планшете, чтобы увеличить интервал на мобильном устройстве.

• Столбец 1 Заполнение: 20% снизу.
• Заполнение столбца 2: низ 20%.
• Столбец 3 Заполнение: 20% снизу.

Добавление изображения 1

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

Затем загрузите изображение в модуль изображения (оно должно быть размером около 250 на 375 пикселей).

Затем обновите настройки дизайна следующим образом:

• Выравнивание изображения: по центру
• Ширина: 220 пикселей
• Вертикальное переполнение: скрыто
• Индекс Z: 4

Поскольку нам нужно настроить таргетинг на контейнер изображения (а не на само изображение), нам нужно добавить настраиваемую высоту, тень блока и радиус границы с помощью настраиваемого CSS. Добавьте следующий CSS к основному элементу:

height: 240px;
box-shadow: 0 10px 70px 0 rgba(103,151,255,.22), 0 15px 105px 0 rgba(103,151,255,.22);
border-radius: 9px;

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

Добавление изображения 2

Чтобы создать второе изображение, добавьте новый модуль изображения под первым модулем изображения в столбце 1. Затем загрузите новое изображение (250X350) в модуль.

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

Для этого обновите следующее:

• Ширина: 180 пикселей
• Вертикальное переполнение: скрыто

Затем добавьте следующий настраиваемый CSS к основному элементу:

position: absolute !important;
top: 12px;
left: 25px;
height: 200px;
box-shadow: 0 10px 70px 0 rgba(103,151,255,.22), 0 15px 105px 0 rgba(103,151,255,.22);
border-radius: 9px;

Добавление изображения 3

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

Мы продублировали изображение, потому что хотим перенести большинство настроек, которые мы использовали для изображения 2. Единственное отличие (помимо нового изображения) в том, что нам нужно расположить изображение справа, а не слева.

Откройте дублированное изображение (изображение 3) и обновите модуль изображения, добавив новое изображение (250 × 375).

Затем обновите собственный CSS, изменив свойство left position на свойство right position. Никаких других изменений в CSS не требуется.

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

position: absolute !important;
top: 12px;
right: 25px;
height: 200px;
box-shadow: 0 10px 70px 0 rgba(103,151,255,.22), 0 15px 105px 0 rgba(103,151,255,.22);
border-radius: 9px;

Все идет нормально

Вот окончательный результат.

Дизайн на самом деле действительно красивый, но давайте поднимем его на ступеньку выше с помощью эффекта зависания.

Добавление CSS эффекта развеивания при наведении курсора

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

1. Добавьте продолжительность перехода к каждому изображению для плавного перехода при наведении курсора.
2. Измените изображение 1, чтобы оно имело ширину 180 пикселей и высоту 240 пикселей. Это приведет к тому, что контейнер изображения станет выше и уже, чтобы показать большую часть изображения.
3. Настройте изображения 2 и 3 так, чтобы ширина была 160 пикселей, а высота - 220 пикселей. Это также приведет к тому, что изображения будут становиться выше и уже, чтобы показать большую часть изображения.
4. Отрегулируйте изображение 2, чтобы повернуть его на 5 градусов против часовой стрелки и слегка сместить влево. Мы можем сделать это, добавив значение -5 градусов к свойству transform:rotate и установив значение свойства left position на 0.
5. Отрегулируйте изображение 3, чтобы повернуть его на 5 градусов по часовой стрелке и слегка сместить вправо. Мы можем сделать это, добавив значение 5 градусов к свойству transform:rotate и установив значение свойства right position на 0.

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

Откройте настройки строки и добавьте следующий класс CSS.

• Класс CSS: разветвленные изображения

Чтобы добавить настраиваемый CSS на страницу, откройте настройки страницы и добавьте следующий настраиваемый CSS на вкладке «Дополнительно».

/**transition duration and speed curve**/
.fan-out-images .et_pb_image {
  -webkit-transition: 300ms all cubic-bezier(.4,0,.2,1);
  transition: 300ms all cubic-bezier(.4,0,.2,1);
}
/**Change width and height of image 1 on hover**/
.fan-out-images .et_pb_column:hover .et_pb_image:first-child {
  width: 160px;
  height: 240px;
}
/**Change width and height of image 2 and 3 on hover**/
.fan-out-images .et_pb_column:hover .et_pb_image:nth-child(2), .fan-cards .et_pb_column:hover .et_pb_image:nth-child(3) {
  width: 160px;
  height: 220px;
}
/**Rotate image 2 counterclockwise and move to the left on hover**/
.fan-out-images .et_pb_column:hover .et_pb_image:nth-child(2) {
  left: 0;
  -webkit-transform: rotate(-5deg);
  transform: rotate(-5deg);
}
/**Rotate image 3 clockwise and move to the right on hover**/
.fan-out-images .et_pb_column:hover .et_pb_image:nth-child(3) {
  right: 0;
  -webkit-transform: rotate(5deg);
  transform: rotate(5deg);
}

Я добавил комментарий над каждым фрагментом CSS, чтобы напомнить вам, что каждый из них делает.

Как только вы закончите. Проверьте окончательный результат.

Конечный результат

Дополнительный эффект наведения: поворот изображения 1 и 2 отдельно при наведении курсора

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

Вот как ты это делаешь.

Извлечение свойств преобразования из пользовательских CSS настроек страницы

Во-первых, вам нужно удалить две строки пользовательского CSS, которые поворачивают изображение при наведении курсора на столбец. Откройте настройки страницы custom CSS и выньте следующее:

  -webkit-transform: rotate(-5deg);
  transform: rotate(-5deg);

  -webkit-transform: rotate(5deg);
  transform: rotate(5deg);

Добавление свойств преобразования при наведении курсора на изображение 2

Затем откройте настройки модуля изображения для изображения 2 и используйте встроенные параметры преобразования Divi, чтобы добавить то же значение поворота преобразования, которое мы удалили ранее для состояния наведения.

• Transform Rotate Z Axis (при наведении): -5deg
• Преобразовать преобразовать ось X (при наведении): -20 пикселей

Добавление свойств преобразования при наведении курсора на изображение 3

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

• Преобразование, поворот оси Z (при наведении): 5 градусов
• Преобразовать преобразовать ось X (при наведении): 20 пикселей

Теперь посмотрим на окончательный результат.

Конечный результат

Добавление ссылок на изображения

Если вы хотите создать ссылки перенаправления для демонстрации определенного пакета макетов или дизайна страницы на отдельной странице, лучше всего добавить один и тот же URL-адрес ссылки ко всем трем изображениям в пакете. Для этого откройте каждый из модулей изображения и добавьте URL-адрес ссылки.

Добавление нового предварительного просмотра пакета макетов в другие столбцы

Чтобы завершить дизайн, мы можем скопировать три изображения из столбца 1 и вставить их в столбец 2 и столбец 3.

После этого все, что вам нужно сделать, это обновить каждое из изображений в столбцах 2 и 3 новыми.

Вот и все!

Окончательный дизайн

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

Макет из трех столбцов на рабочем столе будет изменен на один столбец на планшете и телефоне.

Последние мысли

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

Я с нетерпением жду вашего ответа в комментариях.

Ваше здоровье!