Хотите создать адаптивную сетку изображений с помощью Divi?
Конструктор Divi имеет великолепные встроенные модули, которые используют сетку отображения,
Но иногда вам может понадобиться создать собственную сетку изображений с призывами к действию (CTA). Это даст вам больше контроля над дизайном и содержимым, отображаемым для каждого элемента сетки, без необходимости использования плагина.
Сегодня мы покажем вам, как создать адаптивный макет сетки изображений с призывами к действию (CTA), используя встроенные параметры дизайна Divi.
Давайте начнем!
обследование
Вот краткий обзор результата, который мы получим в конце этого урока.
Создайте страницу с помощью Divi Theme Builder
На панели инструментов WordPress создайте новую веб-страницу, перейдя в Страницы >> Добавить
См. Также: Как создать скользящее и push-меню в DIVI?
Затем дайте название своей странице, затем нажмите « Использовать Divi Builder ".
Затем нажмите " начать строить«
Создание макета специального раздела
Добавить новый раздел «Специализация». макет левой боковой панели одна треть две трети.
Выберите расположение столбцов, как показано на скриншоте ниже:
Удалите раздел по умолчанию, чтобы остался только новый специализированный раздел.
Откройте настройки раздела и измените цвет фона следующим образом:
- Фон: #84dbda
Под вкладкой Стиль, обновите следующие параметры:
- Выровнять высоту столбцов: ДА
- Использовать нестандартную ширину желоба: ДА
- Ширина желоба: 1
- Внутренняя ширина: 100%
Читайте также: Как размещать сообщения блога в DIVI?
- Максимальная внутренняя ширина: 1 пикселей (для настольных компьютеров), 080 пикселей (для планшетов и телефонов).
- Внутреннее поле (сверху и снизу): 12vh
- Отступ столбца 1 (сверху и снизу): 0px
Установив стили раздела, добавьте в раздел строку с одним столбцом.
Настройки линии
Обновите параметры линии следующим образом:
- Использовать пользовательскую ширину желоба: ДА
- Расстояние между столбцами: 1
- Гармонизировать высоту столбцов: ДА
- Внутреннее поле (сверху и снизу): 0px
Создайте вторую строку, продублировав первую.
Затем измените повторяющуюся строку на двухколоночную.
Добавление изображений в качестве фоновых изображений для столбцов.
Теперь, когда все строки и столбцы на месте, мы готовы добавить наши изображения в наш макет сетки.
Чтобы обеспечить адаптивность изображений в сеточной компоновке, мы добавим каждое из наших изображений в качестве фонового изображения к каждой из четырех колонок раздела.
Учитывая, что каждое фоновое изображение будет иметь размер фона, равный "одеяло"При изменении размера окна браузера изображение всегда будет занимать всю колонку.
Фоновое изображение верхнего ряда
Для начала откройте настройки столбца верхней строки.
Далее добавьте фоновое изображение в колонку.
Фоновые изображения столбцов в нижнем ряду
Далее откройте настройки для столбца 1 во второй строке (снизу) и добавьте фоновое изображение в этот столбец.
Далее добавьте фоновое изображение во второй столбец той же строки.
Фоновое изображение столбца 1 раздела
И, наконец, откройте раздел настроек "специализация" и добавьте фоновое изображение в столбец 1.
Добавлен модуль «Призыв к действию», наложенный поверх изображений в каждом столбце.
Теперь, когда фоновые изображения добавлены в каждый столбец сетки, мы добавим в каждый столбец модуль «Призыв к действию».
Использование модуля «Призыв к действию», наложенного на фоновое изображение колонки, позволит вам легко добавлять пользовательские стили наложения фона и эффекты при наведении курсора на изображение.
В этом примере мы просто воспользуемся элементом кнопки из модуля «Призыв к действию», но вы можете легко добавить информацию в заголовок или основной текст над кнопкой.
Мы добавим первый модуль «Призыв к действию» в верхнюю строку столбца.
Содержание
Обновите настройки модуля «Призыв к действию» следующим образом:
- удалить текст заголовка
- удалить основной текст
- URL ссылки на кнопку: #
НОТА : Добавление символа "#" к URL-адресу ссылки кнопки — это лишь временная мера для корректного отображения кнопки. Добавление полупрозрачного цвета фона при наведении курсора позволит получить приятный пользовательский цвет наложения при наведении курсора на модуль (и изображение за ним).
- Цвет фона: прозрачный (для рабочего стола), rgba (255,235,77,0.5) (при наведении курсора)
Стили кнопок
Перейдите на вкладку Стиль и измените настройки кнопки модуля «Призыв к действию» следующим образом:
- Использовать пользовательские стили для кнопки: ДА
- Размер текста кнопки: 22px
- Цвет текста кнопки: #ffeb4d
- Фоновая кнопка: #000000 (рабочий стол), #ec5f00 (наведение)
См. Также: Как создать скользящее и push-меню в DIVI
- Ширина границы кнопки: 0 пикселей
- Радиус границы кнопки: 100 пикселей
- Шрифт кнопки: зыбучие пески
- Кнопка тусклого света: полужирный
- Кнопка заполнения: 0,5 em сверху, 0,5 em снизу, 2 em слева, 2 em справа
Размер, набивка и окантовка
Далее нам необходимо убедиться, что высота нашего модуля определённая, чтобы отображалось фоновое изображение колонки, расположенной позади него.
Для этого мы добавим в модуль внутренние поля (сверху и снизу).
Мы также добавим к модулю тонкую рамку, чтобы немного отделить его от других изображений в макете сетки.
Примените следующие настройки:
- Ширина: 100%
- Внутреннее поле (сверху и снизу): 15vh
- Ширина нижней границы: 5px
- Ширина левой границы: 5 пикселей
- Цвет границы: rgba (255,255,255,0.5)
НОТА : Использование единицы измерения длины vh для отступов сделает значение отступа относительным к высоте окна браузера. Следовательно, высота элементов сетки изображений будет увеличиваться и уменьшаться пропорционально высоте окна браузера.
Вертикальное центрирование содержимого модуля «Призыв к действию»
Чтобы гарантировать вертикальное центрирование содержимого модуля «Призыв к действию», можно добавить небольшой фрагмент пользовательского CSS, используя свойство `flex`.
На вкладке «Дополнительно» добавьте следующий CSS-код к основному элементу:
display:flex;
flex-direction:column;
justify-content:center;
Добавлено всплывающее окно с призывом к действию в другие колонки.
Теперь, когда первый модуль «Призыв к действию» настроен, скопируйте и вставьте его в остальные 3 столбца макета, включая 2 столбца в нижнем ряду и столбец 1 раздела.
Чтобы модуль «Призыв к действию» занимал всю высоту первой колонки в специализированном разделе, установите минимальную высоту на 100%.
- Минимальная высота: 100%
Готово! Давайте посмотрим на конечный результат.
Конечный результат
Вот окончательный результат адаптивной сетки изображений на веб-странице с эффектами при наведении курсора.
А вот как реагирует сетка при изменении размера окна браузера.
Скачайте DIVI прямо сейчас!!!
Заключение
Адаптивные макеты с сеткой изображений по-прежнему остаются популярной функцией на многих веб-сайтах. Визуальная привлекательность, обеспечиваемая фоновым изображением в сочетании с наложенным призывом к действию, действительно может выделить важные навигационные ссылки.
Кроме того, адаптивный дизайн сетки изображений обеспечит отличное отображение на всех устройствах, что всегда является необходимостью.
Мы надеемся, что это руководство будет вам полезно в ваших будущих проектах по созданию веб-сайтов. Если у вас есть какие-либо вопросы или предложения, пожалуйста, дайте нам знать. раздел комментариев обсудить это.
Тем не менее, вы также можете проконсультироваться наши ресурсы если вам нужно больше элементов для завершения проектов по созданию веб-сайтов.
Вы также можете следовать нашему руководству по Создание блога на WordPress или Divi: лучшая тема WordPress всех времен.
Но тем временем поделитесь этой статьей в разных социальных сетях.
...