5 советов по организации содержимого страницы блога в Divi
Опубликовано: 2019-12-21Содержание вашей страницы блога можно организовать разными способами. Поскольку это страница блога, большая часть контента будет состоять из ленты последних сообщений блога. Знание того, как организовать этот контент, может быть отличным способом разбить однообразие и открыть дверь для более уникального дизайна страниц блога.
В этом руководстве мы поделимся с вами 5 полезными советами по организации содержимого страницы блога в Divi, которые помогут вам узнать следующее:
- Как создать макет из двух столбцов
- Как использовать липкие сообщения
- Как использовать смещения постов
- Как использовать несколько модулей блога для создания индивидуального макета для сообщений блога
- Как отобразить последние сообщения по категориям
Sneak Peek
Вот несколько способов организации содержимого страницы блога в Divi.
Использование макета из двух столбцов
Раздел избранных сообщений над основной лентой блога
Полноразмерный слайдер над основной лентой блога
Использование нескольких модулей блога для уникального макета и дизайна
Показывая последние сообщения по категориям
Что вам нужно для начала
Если вы еще этого не сделали, установите и активируйте тему Divi.
В этом уроке я буду использовать шаблон страницы категории Second Theme Builder Pack. Если вы хотите использовать его для отслеживания, загрузите пакет и импортируйте файл divi-theme-builder-pack-2-category-page-template.json в конструктор тем, используя параметры переносимости. 
По умолчанию импортированный шаблон будет назначен на «Все страницы категорий». Откройте настройки шаблона и назначьте его блогу.
Теперь вы готовы начать процесс организации содержимого страницы блога в шаблоне. Чтобы начать, щелкните значок редактирования в области основного текста шаблона.
Теперь вы можете использовать редактор макета для изменения макета.
5 советов по организации шаблона страницы блога в Divi
В этом шаблоне у нас есть модуль блога, который находится в строке с одним столбцом и отображает сообщения (в трех столбцах на рабочем столе) для текущей страницы. Это стандартная настройка для шаблонов страниц блога и архива. Однако нам не обязательно сохранять этот стандартный макет для отображения сообщений. Вот несколько полезных советов по организации содержимого страницы блога в Divi.
# 1 Создайте макет из двух столбцов
Модуль блога (если настроен на сетку) будет отображать сообщения в структуре из трех столбцов, если модуль добавлен в строку из одного столбца (как в нашем шаблоне).
Если вы хотите изменить макет, чтобы сообщения отображались в виде двух столбцов, вот что вы можете сделать.
Сначала измените макет столбца строки на макет две трети одной трети. Это отобразит сообщения блога в двух столбцах в левом столбце строки.
Затем откройте настройки для столбца 1 (тот, который содержит модуль блога) и добавьте следующий настраиваемый CSS в основной элемент:
width: 100% !important;
Это приведет к тому, что столбец займет всю ширину строки.
Теперь все, что нам нужно сделать, это скрыть столбец справа. Откройте настройки для столбца 2 (пустой) и отключите видимость столбца на всех устройствах.
Теперь вы можете организовать содержимое страницы блога с двумя столбцами на рабочем столе вместо трех, если хотите.
# 2 Используйте липкие сообщения
Если вы знакомы с WordPress, возможно, вы уже знаете об этом. Каждый пост, созданный в Divi (или WordPress), можно сделать прикрепленным. Когда вы делаете сообщение прикрепленным, оно будет автоматически отображаться в самом начале ленты блога на странице блога, даже перед самым последним опубликованным сообщением. Это отличный способ размещать посты, которые, как вы знаете, захотят (или захотят) увидеть ваша аудитория.
Чтобы сделать сообщение прикрепленным, просто отредактируйте сообщение в Divi и установите флажок «Прикрепить к началу блога» на правой боковой панели.
Каждое сообщение, которое вы делаете, будет помечено как «Прикрепленное» при просмотре всех сообщений на бэкэнде.
Теперь, когда вы посещаете страницу блога, вы можете видеть, что прикрепленные сообщения переместились в начало ленты сообщений блога.
Примечание. Прикрепленные сообщения могут не работать должным образом при использовании смещения сообщений в модуле блога. Например, если вы настроили модуль блога для отображения 3 сообщений со смещением 3, ваши прикрепленные сообщения будут по-прежнему отображаться перед (и в дополнение к) 3 сообщениями.
Прежде чем перейти к следующему совету, я предлагаю вам избавиться от липких сообщений.
# 3 Используйте смещения сообщений для организации содержимого страницы блога в отдельные разделы
В каждом модуле блога есть возможность ввести номер почтового сообщения. Это указывает модулю блога пропустить определенное количество недавних сообщений в блоге перед отображением ленты блога. Этот вариант пригодится, когда вы хотите немного изменить макет страницы своего блога, используя несколько модулей блога для отображения ваших сообщений. Это дает вам больше гибкости при разработке макета, поскольку вы можете создавать каждый модуль блога по-разному.
Отображение самых последних сообщений с отдельным модулем блога с использованием смещения сообщения
Один из способов организации содержимого страницы блога в макете шаблона - это добавить раздел избранного сообщения в блоге вверху страницы. Таким образом вы сможете уникальным образом выделить три самых новых сообщения. Вот и теперь, чтобы это сделать.
Добавьте в макет новый обычный раздел.
Затем добавьте строку из одного столбца.
Скопируйте модуль блога, поставляемый с шаблоном, и вставьте его в новую строку.
Обновите настройки блога следующим образом:
- Количество сообщений: 3
- Показать кнопку "Подробнее": НЕТ
- Показать категории: НЕТ
- Показать количество комментариев: НЕТ
- Показать выдержку: НЕТ
- Показать разбиение на страницы: НЕТ
У нас будут три последних сообщения, отображаемых в верхнем разделе страницы.
Теперь нам нужно добавить номер смещения сообщения в исходный модуль блога, чтобы он пропустил первые три сообщения, которые уже отображаются выше.
Откройте настройки блога для исходного модуля блога и обновите следующее:
- Номер почтового смещения: 3
Теперь лента блога начнется с поста №4.
Чтобы выделить выделенный раздел вверху страницы, вы можете добавить фоновый градиент.
Вот пример того, как это будет выглядеть.
Добавление полноразмерного слайдера над основной лентой блога
Как и в упомянутом выше разделе, мы также можем упорядочить контент сообщений в блоге, добавив ползунок публикации на всю ширину страницы вверху страницы блога. Это популярный дизайн для страниц блога, и вы можете использовать его в сочетании с модулем блога, у которого есть смещение сообщения.
Вот как это сделать.
Сначала добавьте в макет полноразмерный раздел.
Затем добавьте в раздел полноразмерный модуль пост-слайдера.
Затем обновите следующие настройки:
- Сообщения для текущей страницы: ДА
- Количество сообщений: 3
Затем обновите дизайн слайдера публикации, чтобы он соответствовал макету следующим образом:
- Шрифт заголовка: Lato
- Толщина шрифта заголовка: полужирный
- Размер текста заголовка: 40 пикселей
- Размер основного текста: 16 пикселей
- Размер текста кнопки: 14 пикселей
- Цвет текста кнопки: # ff0071
- Цвет фона кнопки: #ffffff
- Ширина границы кнопки: 0 пикселей
- Шрифт кнопки: Lato
- Толщина шрифта кнопок: полужирный
- Стиль шрифта кнопки: TT
Убедитесь, что модуль блога, отображающий основной канал, по-прежнему имеет номер смещения поста, равный 3, чтобы уместить 3 поста ползунка поста.
Тогда проверьте результат.
Пока все хорошо.
Теперь давайте рассмотрим идею использования отдельного модуля блога, используя следующий совет.
# 4 Добавление нескольких модулей блога, каждый с одним сообщением
Нам не нужно останавливаться только на добавлении одного дополнительного модуля блога в макет шаблона. Фактически, мы можем использовать столько модулей блога, сколько нам нужно. Мы даже можем выбрать отображение только одного сообщения в модуле блога, чтобы придать уникальный дизайн одной карточке сообщения блога. Затем, используя смещения сообщений, мы можем создать совершенно уникальный макет динамически отображаемых сообщений блога.
Вот как это сделать.
Во-первых, добавьте новую строку с половиной-половиной столбца над строкой, содержащей основной модуль блога.
Скопируйте исходный модуль блога ниже и вставьте его в левый столбец новой строки. Затем обновите следующее:
- Количество сообщений: 1
- Номер почтового смещения: 0
- Показать разбиение на страницы: НЕТ
Затем скопируйте только что созданный модуль блога и вставьте дубликат в правый столбец.
Затем обновите следующее:
- Номер почтового смещения: 1
- Показать избранное изображение: НЕТ
- Показать количество комментариев: НЕТ
- Показать выдержку: НЕТ
Обязательно установите номер смещения поста равным 1, чтобы пропустить первый в левом столбце.
Теперь продолжите этот процесс, создав еще один модуль блога и каждый раз увеличивая номер смещения публикации на 1.
Дублируйте модуль блога в правом столбце.
Затем измените число смещения стойки на 2.
Дублируйте модуль блога еще раз и измените номер смещения публикации на 3.
Теперь вы можете свободно настраивать дизайн каждого модуля блога индивидуально. Например, вы можете добавить каждому из них свой цвет фона.
Вот результат.
Если вы собираетесь сохранить основную ленту блога ниже, обязательно обновите номер смещения публикации до 4, чтобы учесть 4 сообщения в строке выше.
Вы также можете увидеть, как этот же метод используется в некоторых наших шаблонах страниц категорий в построителе тем. Ознакомьтесь с нашим руководством о том, как создать шаблон страницы категории, используя ту же концепцию.
# 5 Отображение последних сообщений по категориям на странице блога
В дополнение к основной ленте блога в шаблоне страницы блога вы также можете отображать свои недавние сообщения по категориям. Это отличный способ организовать контент страницы блога, немного разбив макет и выделяя разные категории одновременно.
Вот как это сделать.
Сначала добавьте новую строку из одного столбца под строкой, содержащей основной модуль блога.
Затем обновите настройки блога следующим образом:
- Публикаций для текущей страницы: НЕТ
- Тип сообщения: Сообщения
- Количество сообщений: 3
- Включенные категории: Бизнес (или одна из ваших)
Это отобразит три последних сообщения из категории «Бизнес».
Затем добавьте текстовый модуль над модулем блога с соответствующим заголовком категории.
И точно так же у вас есть раздел избранных категорий на странице вашего блога - отличный способ организовать контент страницы блога!
Вы даже можете добавить несколько разделов категорий, каждый с уникальным дизайном.
Эти разделы избранных категорий хорошо вписываются в нижнюю часть шаблона страницы блога.
Последние мысли
Эти советы должны помочь вам организовать контент страницы блога всевозможными уникальными способами. И эти же советы будут работать для множества других типов шаблонов (например, шаблонов страниц категорий / архивов), которые используют модуль блога для отображения контента. Не стесняйтесь изучать эти советы и использовать их в своем следующем проекте.
Я с нетерпением жду вашего ответа в комментариях.
Ваше здоровье!