Хотите, чтобы ваша страница блога DIVI отображалась в виде сетки с несколькими столбцами?
Модуль блога Divi может отображать сообщения блога в полноширинном или сеточном макете. Если вы выберете макет сетки, максимальное количество столбцов, которое вы можете иметь, равно трем.
В этом уроке с помощью всего лишь нескольких фрагментов CSS: ваш блог превратится в красивую многоколоночную сетку. Кроме того, столбцы будут плавными и отзывчивыми во всех размерах браузера, поэтому вам не придется беспокоиться об обновлении этих медиа-запросов или настроек адаптивности.
Вы также можете ознакомиться с нашей статьей, чтобы узнать Как создать страницу блога с помощью модуля DIVI Blog.
обследование
Прежде чем перейти к этому уроку, давайте сначала посмотрим на результат, которого мы хотим достичь.
Скачайте DIVI прямо сейчас!!!
Настройка модуля блога с полноэкранным макетом
Модуль блога DIVI можно использовать для добавления блога в любом месте вашего Веб-сайт. Это действительно упрощает создание страницы блога в Divi. Все, что вам нужно сделать, это добавить модуль блога на страницу с помощью Divi Builder.
Для этого урока мы будем использовать готовый макет блога из одного из бесплатные пакеты макетов DIVI, который уже содержит модуль блога с базовым стилем.
Чтобы загрузить готовый макет блога:
- Создайте новую страницу из панели инструментов WordPress.
- Дайте ему подходящее имя и нажмите «Использовать Divi Builder».
- Нажмите «Выбрать макет»
- Введите в строку поиска «Дизайнер одежды» и выберите макет «Страница блога дизайнера одежды».
- Обязательно выберите «Макет блога», а затем нажмите «Выбрать макет».
После загрузки макета найдите модуль «Блог», используемый для отображения сообщений блога, и откройте настройки.
Установить количество постов
В настройках блога обновите содержание чтобы ограничить количество сообщений до 10. (Это в основном из эстетических соображений, поскольку наша сетка в конечном итоге будет включать в себя две строки по пять сообщений в блоге.)
- Количество позиций: 10
Выберите полноэкранный режим
Поскольку мы собираемся размещать наш блог в столбцах с помощью CSS Grid, нам нужно убедиться, что макет модуля «Блог» 'Полный экран(не "Сетка"). Это гарантирует, что сообщения в блоге будут располагаться вертикально в обычном порядке страниц.
Чтобы изменить макет модуля «Блог», откройте настройки модуля и на вкладке «Стиль» откройте раскрывающееся меню. Шаблон и выберите Полный экран .
Теперь каждый пост в блоге будет охватывать всю ширину столбца (или родительского контейнера).
Давайте добавим границу к сообщениям в блоге. Обновите параметры границы следующим образом:
- Ширина границы: 1px
- Цвет границы: rgba (150,104,70,0.35)
Добавление пользовательского класса CSS в модуль блога
Чтобы эффективно нацелить наш CSS на этот конкретный модуль блога (а не на другой), нам нужно дать нашему модулю собственный класс CSS. На вкладке «Дополнительно» добавьте следующий класс CSS:
- Класс CSS: et-blog-css-grid
Создание многоколоночного макета с помощью CSS Grid
Теперь, когда наш модуль блога настроен с полноэкранным макетом, мы готовы добавить наш собственный CSS.
Мы собираемся вставить модуль кода под модуль блога, чтобы добавить CSS на страницу.
В поле ввода кода добавьте необходимые теги стиля, чтобы обернуть любой код CSS, добавленный на страницу.
Внутри тегов стиля вставьте следующий фрагмент кода CSS:
.et-blog-css-grid > div {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 20px;
}
Первая строка CSS представляет содержание (или модули) в виде сетки.
display: grid;Вторая строка CSS определяет модель столбца сетки.
grid-template-columns : repeat(auto-fill, minmax (200px, 1fr));Третья строка определяет расстояние между элементами сетки.
gap : 20px ;На данный момент отзывчивая сетка из пяти столбцов готова к работе. На самом деле, если вы не хотите использовать разбиение на страницы или границы для своих сообщений в блоге, вы можете остановиться здесь.
Вот результат.
Настройка элементов сетки
Затем мы можем добавить несколько строк CSS, предназначенных для элементов сетки, чтобы они были выровнены по верху каждой строки и имели некоторые отступы.
.et-blog-css-grid .et_pb_post {
align-self: start;
padding: 15px;
}
Удалена нумерация страниц в сетке.
В настоящее время, если у вас активна разбивка на страницы в модуле блога, она будет рассматриваться как последний элемент сетки в сетке CSS. Чтобы полностью удалить нумерацию страниц из сетки, мы можем присвоить ей абсолютную позицию и разместить непосредственно под модулем блога. Для этого добавьте следующий CSS:
.et-blog-css-grid > div > div {
width: 100%;
position: absolute;
bottom: 0;
transform: translate(0%, 150%);
}
Пока посмотрим результат!
Совет: отрегулируйте размер всех избранных изображений (или эскизов)
На этом этапе вы можете заметить несоответствие высоты изображений в каждом сообщении блога. Если вы хотите, чтобы все они были одинаковой высоты, вы также можете использовать для этого дополнительный CSS.
.et-blog-css-grid .entry-featured-image-url {
padding-top: 56.25%;
}
.et-blog-css-grid .entry-featured-image-url img {
position: absolute;
height: 100%;
width: 100%;
top: 0;
object-fit: cover;
}
С верхним внутренним полем 56,25% мы должны получить соотношение сторон 16:9 для всех наших изображений.
Не стесняйтесь настраивать отступы в контейнере изображения, чтобы получить желаемое соотношение сторон для вашего изображения.
Конечный результат
И вот окончательный предварительный просмотр нашего модуля блога с нашими новыми столбцами и сеткой. И, как мы видим, сетка полностью отзывчива.
Скачайте DIVI прямо сейчас!!!
Заключение
Сделано ! В этом уроке мы показали вам, как расположить сообщения блога в столбцах.
Мы смогли реструктурировать весь модуль блога Divi в гибкий макет из пяти столбцов. Надеюсь, это сэкономит ваше время и даст больше возможностей для создания красивых страниц блога. Вы также можете проконсультироваться Как создать страницу блога с модулем блога Divi
Смотрите также наши ресурсы, если вам нужно больше элементов для реализации ваших проектов создания интернет-сайтов, обратитесь к нашему руководству по Создание блога на WordPress или Divi: лучшая тема WordPress всех времен.
Но тем временем поделитесь этой статьей в разных социальных сетях.
