Как создавать собственные наложения изображений в Divi

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

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

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

Sneak Peek

Вот краткий обзор дизайна, который мы построим в этом уроке.

Загрузите макет наложения изображений Divi БЕСПЛАТНО

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

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

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

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

СКАЧАТЬ

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

Чтобы импортировать макет раздела в свою библиотеку Divi, перейдите в библиотеку Divi.

Щелкните кнопку Импорт.

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

Затем нажмите кнопку импорта.

После этого макет раздела будет доступен в Divi Builder.

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

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

Для начала вам необходимо сделать следующее:

1. Если вы еще этого не сделали, установите и активируйте тему Divi.
2. Создайте новую страницу в WordPress и используйте Divi Builder для редактирования страницы во внешнем интерфейсе (визуальный конструктор).
3. Выберите вариант «Строить с нуля».

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

Создание пользовательских наложений изображений в Divi

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

Для начала создайте строку из трех столбцов внутри раздела по умолчанию.

Откройте настройки раздела и добавьте следующий цвет фона:

• Цвет фона: # 3a0ca3

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

• Класс CSS: et-overlay-container
• Горизонтальное переполнение: скрыто
• Вертикальный перелив: скрытый

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

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

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

Загрузите изображение, которое больше похоже на портрет, чем на пейзаж. Я использую размер примерно 800 на 1050 пикселей. Убедитесь, что он достаточно широкий, чтобы охватить всю ширину столбца во всех размерах браузера.

(ПРИМЕЧАНИЕ: вы можете использовать альбомные изображения, но вам может потребоваться соответствующим образом отрегулировать расположение элементов наложения, чтобы они не перекрывались.)

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

• Поля: низ 0 пикселей

На вкладке «Дополнительно» добавьте следующий класс CSS:

• Класс CSS: et-overlay-image

Добавление цвета наложения изображения с помощью модуля разделителя

Чтобы создать цвет наложения изображения, мы собираемся использовать модуль разделителя. Идея состоит в том, чтобы создать покрытие поверх изображения, сделав разделитель на всю высоту и ширину столбца, чтобы он идеально сидел над изображением. Оказавшись в нужном положении, вы можете настроить цвет фона модуля разделителя, чтобы получить желаемый цвет наложения.

Сначала добавьте разделительный модуль под изображением.

Затем разместите разделитель как абсолютный так, чтобы он располагался поверх изображения:

• Позиция: Абсолютная

На вкладке содержимого обновите следующее:

• Показать разделитель: НЕТ
• Цвет фона: rgba (247,37,133,0,8)

Затем обновите высоту и ширину разделителя:

• Ширина: 100%
• Высота: 100%

Когда дизайн будет готов, добавьте следующий класс CSS в разделитель:

• et-overlay-item

(ПРИМЕЧАНИЕ. Этот класс следует добавить ко всем элементам дизайна наложения, которые вы хотите отображать только при наведении курсора. Если вы не хотите, чтобы элемент был скрыт изначально, оставьте его.)

Чтобы отслеживать элементы / модули дизайна, откройте модальное окно слоев и отметьте модуль разделителя («цвет наложения»).

Добавление накладываемого текста заголовка

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

Обновите содержимое заголовком H2:

<h2>Coaching</h2>

Затем обновите метку текстового модуля для использования в дальнейшем.

В настройках оформления текста обновите следующее:

• Выравнивание текста: по центру
• Цвет текста: светлый

• Шрифт заголовка 2: Cormorant Garamond
• Толщина шрифта заголовка 2: полужирный
• Размер текста заголовка 2: 40 пикселей

• Ширина: 100%
• Макс.ширина: 85%

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

• Позиция: Абсолютная
• Расположение: центр вверху
• Вертикальное смещение: 10%

(ПРИМЕЧАНИЕ. Вертикальное смещение может потребоваться отрегулировать в зависимости от размера формата изображения. Например, для изображения с альбомной ориентацией может потребоваться меньшее смещение)

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

• Класс CSS: перемещение вниз et-overlay-item

В дополнение к классу «et-overlay-item» мы добавляем дополнительный класс «move-down», чтобы с помощью настраиваемого CSS перемещать заголовок немного вниз при наведении курсора.

Создание основного текста наложения

Чтобы создать основной текст наложения, мы можем продублировать текстовый модуль, используемый для заголовка наложения. Прежде чем мы обновим настройки дубликата, измените метку на «overlay body».

Откройте параметры текста для нового текстового модуля и обновите содержимое основного текста несколькими предложениями текста абзаца.

На расширенной вкладке измените абсолютное расположение модуля на центр.

Поскольку мы не хотим, чтобы этот объект перемещался при наведении (только появлялся), обновите класс CSS, включив только следующее:

• Класс CSS: et-overlay-item

Создание кнопки наложения

Последним элементом наложения на этом изображении будет кнопка. Чтобы создать кнопку, добавьте новый модуль кнопки под текстовым модулем «основной текст».

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

• Позиция: абсолютная
• Вертикальное смещение: 10%

Теперь кнопка должна быть по центру в нижней части изображения.

Находясь на вкладке «Дополнительно», обновите класс CSS и добавьте фрагмент пользовательского CSS в основной элемент следующим образом:

• Класс CSS: перемещение вверх et-overlay-item
• Основной элемент CSS:

  min-width: 15em

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

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

• Расположение кнопок: по центру
• Размер текста кнопки: 14 пикселей
• Цвет фона кнопки: # 4361ee
• кнопка Ширина границы: 0 пикселей
• Расстояние между буквами кнопки: 0,1 м
• Толщина шрифта кнопок: полужирный
• Стиль шрифта кнопки: TT
• Отступ: 0.8em сверху, 0.8em снизу, 0 пикселей слева, 0 пикселей справа

Добавление пользовательского CSS с помощью модуля кода

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

Затем вставьте следующий CSS в содержимое кода. Не забудьте заключить код в необходимые теги скрипта.

<style>
 @media all and (min-width: 981px) {
  
  .et-fb-root-ancestor .et-overlay-item {
    opacity: 1; /*shows hidden overlay items when using the visual Divi Builder*/
  }
  .et-overlay-item {
    opacity: 0; /*hides overlay items by default*/
    margin-bottom: 0px;
  }
  .et-overlay-item, .et-overlay-image {
    transition: all 400ms !important; /*sets transition speed of all overlay items*/
  }
  .et-overlay-container:hover .et-overlay-item {
    opacity: 1; /*reveals hidden overlay items on hover*/
  }
  .et-overlay-container:hover .et-overlay-image {
    /*add new styles here to change image on hover*/
  }
  .et-overlay-container:hover .et-overlay-image.et-scale {
    transform: scale(1.2); /*adjust scale of image here*/
  }
  .et-overlay-container:hover .et-overlay-image.et-rotate {
    transform: scale(1.4)
    rotateZ(10deg)!important; /*adjust rotation of image and scale needed for rotation here*/
  }  
  .et-overlay-container:hover .et-overlay-item.move-up {
    margin-bottom: 15% !important; /*adjust how far you want the overlay item to move up*/
  }
  .et-overlay-container:hover .et-overlay-item.move-down {
    margin-top: 10%; /*adjust how far you want the overlay item to move down*/
  }

}
</style>

Код прокомментирован, чтобы вы могли понять, где можно настроить CSS по мере необходимости.

Дублирование колонки для большего количества дизайнов

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

Создание дизайна наложения изображений # 2

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

Отрегулируйте расположение основного текста и класс CSS

Откройте настройки для модуля оверлея основного текста в столбце 2 и обновите позицию:

• Расположение: внизу по центру
• Вертикальное смещение: 5%

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

• Класс CSS: перемещение вверх et-overlay-item

Отрегулируйте расположение кнопки и класс CSS

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

• Расположение: Центр Центр

Затем удалите класс CSS, потому что мы хотим, чтобы кнопка всегда была видимой.

Откройте настройки модуля разделителя (цвет наложения) и измените фон следующим образом:

• Цвет фона: rgba (67,97,238,0,8)

Затем откройте настройки кнопки и измените цвет фона:

• Цвет фона кнопки: # f72585

Настроить изображение и класс CSS

Далее откройте настройки изображения и загрузите новое изображение (если хотите).

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

• Класс CSS: et-overlay-image et-scale

Обратите внимание, что в дополнение к классу «et-overlay-image» существует дополнительный класс «et-scale», который заставляет изображение увеличиваться в размере, создавая эффект увеличения при наведении.

Создание дизайна наложения изображений # 3

Пришло время создать третий дизайн наложения изображения в столбце 3.

Настройка содержимого основного текста наложения и класса CSS

Начните с открытия настроек модуля оверлея основного текста в столбце 3 и добавьте заголовок H2 над текстом абзаца. Теперь двое будут внутри одного модуля вместо двух.

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

Отрегулируйте смещение кнопки и класс CSS

Откройте настройки для модуля кнопок и обновите вертикальное смещение позиции:

• Вертикальное смещение: 5%

Удалить заголовок наложения

Затем удалите модуль текста заголовка наложения.

Отрегулируйте цвет наложения и класс CSS

Откройте настройки модуля разделителя (цвет наложения) и обновите фон следующим образом:

• Цвет фона градиента слева: rgba (67,97,238,0,8)
• Цвет фона градиента справа: rgba (247,37,133,0,8)
• Стартовая позиция: 25%
• Конечная позиция: 75%

А так как мы хотим, чтобы наложение градиента всегда было видимым, удалите класс CSS.

Настроить класс CSS изображения

Наконец, мы собираемся добавить дополнительный класс CSS («et-rotate») к основному изображению, который будет масштабировать и вращать изображение при наведении курсора.

• Класс CSS: et-overlay-image et-rotate

Последние штрихи

Прежде чем мы проверим наши окончательные результаты, нам нужно внести несколько корректировок.

Уберите нижнее поле по умолчанию для всех модулей

По умолчанию каждый модуль имеет нижнее поле 30 пикселей из-за ширины желоба по умолчанию (3) в настройках строки. Это может нарушить расположение модулей в нашем дизайне наложения. Чтобы убрать их, откройте настройки модуля изображений для одного из изображений в дизайне. Поскольку мы уже обновили поле с нижним полем 0 пикселей, мы можем расширить это поле на все модули.

Щелкните правой кнопкой мыши настройку поля и выберите «Расширить поле».

Затем выберите расширение поля на все модули на странице.

Удалить повторяющиеся модули кода

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

Окончательные результаты

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

А вот и дизайн на мобильном телефоне. Эффекты наложения наложения применяются только к рабочему столу через настраиваемый медиа-запрос CSS в модуле кода. Таким образом, оверлеи всегда будут видны на мобильном устройстве.

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

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

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

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