Вы хотите создать отзывчивый макет сетки изображений с помощью ВТОРАЯ ?
Конструктор 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.
Добавление модуля «Призыв к действию» с наложением на изображения в каждую колонку
Теперь, когда наши фоновые изображения добавлены в каждый столбец макета сетки, мы добавим модуль «Призыв к действию» в каждый столбец.
Использование наложения модуля «Призыв к действию» на фоновое изображение столбца позволит вам легко добавлять пользовательские стили наложения фона и эффекты наведения на фоновое изображение столбца.
В этом примере мы просто будем использовать элемент кнопки из модуля Action Call, но вы можете легко добавить его к элементу содержание заголовка или тела над кнопкой.
Мы добавим первый модуль «Призыв к действию» в столбец верхней строки.
Содержание
Обновите настройки модуля «Призыв к действию» следующим образом:
- удалить текст заголовка
- удалить основной текст
- 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 в разделе.
Чтобы модуль «Призыв к действию» покрывал всю высоту столбца 1 в специализированном разделе, установите минимальную высоту 100%.
- Минимальная высота: 100%
Закончилось ! Посмотрим конечный результат.
Конечный результат
Вот конечный результат адаптивного макета сетки изображений на веб-странице с эффектами наведения.
А вот как сетка реагирует на настройку размера браузера.
Скачайте DIVI прямо сейчас!!!
Заключение
Адаптивные макеты сетки изображений продолжают оставаться популярным аспектом многих веб-сайтов. Визуальная привлекательность, обеспечиваемая фоновым изображением в сочетании с оверлеем с призывом к действию, действительно может выделить эти важные навигационные ссылки.
Кроме того, отзывчивый характер макета сетки изображений будет отлично смотреться на всех устройствах, что всегда необходимо.
Мы надеемся, что это руководство будет вам полезно в ваших будущих проектах по созданию Веб-сайт. Если у вас есть какие-либо вопросы или предложения, найдите нас в раздел комментариев обсудить это.
Тем не менее, вы также можете проконсультироваться наши ресурсы если вам нужно больше элементов для завершения проектов по созданию веб-сайтов.
Вы также можете следовать нашему руководству по Создание блога на WordPress или Divi: лучшая тема WordPress всех времен.
Но тем временем поделитесь этой статьей в разных социальных сетях.
...
