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

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

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

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

Sneak Peek

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

Скачайте макет БЕСПЛАТНО

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

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

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

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

СКАЧАТЬ

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

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

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

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

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

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

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

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

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

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

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

Создание адаптивного макета сетки изображений с призывом к действию и наложениями при наведении курсора в Divi

Часть 1: Создание макета специального раздела

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

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

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

• Цвет фона: # 84dbda

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

• Выровнять высоту столбца: ДА
• Использовать нестандартную ширину желоба: ДА
• Ширина желоба: 1
• Внутренняя ширина: 100%
• Внутренняя максимальная ширина: 1080 пикселей (рабочий стол), 500 пикселей (планшет и телефон)
• Набивка: 12vh сверху, 12vh снизу
• Отступ столбца 1: 0 пикселей сверху, 0 пикселей снизу.

После того, как стили раздела будут размещены, добавьте в раздел строку из одного столбца.

Настройки строки

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

• Ширина желоба: 1
• Выровнять высоту столбца: ДА
• Padding: 0px сверху, 0px снизу

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

Затем обновите повторяющуюся строку, используя макет с двумя столбцами.

Часть 2: Добавление изображений в качестве фоновых изображений столбцов

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

Фоновое изображение столбца верхнего ряда

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

Затем добавьте фоновое изображение в столбец.

Фоновые изображения столбцов нижнего ряда

Затем откройте настройки для столбца 1 во второй (нижней) строке и также добавьте фоновое изображение в этот столбец.

Затем добавьте фоновое изображение в столбец 2 той же строки.

Фоновое изображение столбца 1 специального раздела

И, наконец, откройте настройки раздела специальности и добавьте фоновое изображение в столбец 1.

Часть 3. Добавление призыва к действию наложения изображения в каждый столбец

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

Создание модуля призыва к действию

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

Содержание

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

• удалить текст заголовка
• удалить основной текст
• URL ссылки на кнопку: #
• Цвет фона: прозрачный (рабочий стол), rgba (255,235,77,0,5) (при наведении)

ПРИМЕЧАНИЕ. Добавление символа «#» для URL-адреса ссылки кнопки на данный момент является просто заполнителем, чтобы кнопка отображалась. Добавление полупрозрачного цвета фона при наведении курсора даст вам красивый настраиваемый цвет наложения при наведении курсора на модуль (и изображение за ним).

Кнопки Стили

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

• Использовать собственные стили для кнопки: ДА
• Размер текста кнопки: 22 пикселя
• Цвет текста кнопки: # ffeb4d
• Цвет фона кнопки: # 000 (рабочий стол), # ec5f00 (при наведении)
• Ширина границы кнопки: 0 пикселей
• Радиус границы кнопки: 100 пикселей
• Шрифт кнопки: Quicksand
• Толщина шрифта кнопок: полужирный
• Набивка кнопок: 0,5 м вверху, 0,5 м внизу, 2 м слева, 2 м справа

Размер, отступ и граница

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

Обновите следующее:

• Ширина: 100%
• Прокладка: 15vh сверху, 15vh снизу
• Ширина нижней границы: 5 пикселей
• Ширина левой границы: 5 пикселей
• Цвет границы: rgba (255,255,255,0,5)

ПРИМЕЧАНИЕ. Использование единицы длины vh для заполнения приведет к тому, что значение заполнения будет соответствовать высоте области просмотра браузера. Таким образом, элементы сетки изображений будут увеличиваться и уменьшаться по высоте по мере увеличения и уменьшения высоты окна браузера.

Вертикальное центрирование содержимого CTA

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

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

display:flex;
flex-direction:column;
justify-content:center;

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

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

Чтобы модуль призыва к действию занимал всю высоту столбца 1 в специальном разделе, обновите минимальную высоту до 100%.

• Мин. Высота: 100%

Обычно это не работает для модуля в обычном столбце. Но из-за свойства flex в столбце модуль по сути является дочерним элементом flex, поэтому значение min-height 100% будет работать.

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

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

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

А вот и эффекты наведения.

А вот как дизайн реагирует на изменение размера браузера.

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

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

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

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