Как создать шаблон страницы категории для вашего блога с помощью конструктора тем Divi

Страница категории может быть чрезвычайно полезной для пользователей, предоставляя им целую страницу, полную материалов, которые им интересны (или ищут). Но во многих случаях страница категории может пострадать, когда дело доходит до дизайна. В Divi, до появления Divi Theme Builder, разработчикам приходилось вручную настраивать php-код в файле темы шаблона страницы категории, а затем стилизовать шаблон страницы исключительно с помощью внешнего CSS. Но теперь, с Divi Theme Builder, этот процесс стал простым и приятным!

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

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

Sneak Peek

Вот краткий обзор шаблона страницы категории, который мы вместе создадим в этом руководстве. На этом изображении он используется для отображения всех сообщений с категорией «Бизнес».

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

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

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

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

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

СКАЧАТЬ

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

Чтобы импортировать макет шаблона на свой веб-сайт, вам нужно будет перейти в Divi Theme Builder и использовать опцию переносимости, чтобы импортировать файл .json в конструктор тем.

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

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

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

1. Если вы еще этого не сделали, установите и активируйте установленную тему Divi (или плагин Divi Builder, если тема Divi не используется).
2. Поскольку мы будем создавать шаблон страницы категории для сообщений в блоге, вам необходимо, чтобы на вашем веб-сайте уже были созданы сообщения с назначенными им категориями.

После этого все готово.

Модули и динамический контент, доступные для шаблонов страниц категорий

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

Модуль блога

Модуль блога - это основной модуль, который следует использовать для отображения шаблонов страниц категорий. Это потому, что есть встроенная опция для отображения сообщений для текущей страницы.

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

Модуль поста слайдера и модуль заголовка поста

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

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

Заголовок публикации / архива (динамический контент)

Более простой способ отобразить заголовок страницы публикации / архива - использовать обычный модуль Divi, а затем вставить заголовок страницы публикации / архива, используя функцию динамического содержимого, доступную во всех модулях Divi.

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

Теперь, когда вы понимаете инструменты, необходимые для создания шаблона страницы категории, давайте приступим и создадим его вместе.

Как создать шаблон страницы категории для вашего блога

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

Создание и назначение настраиваемого шаблона для категорий сообщений

Чтобы начать, перейдите в свою панель управления WordPress и перейдите в Divi> Theme Builder. Затем щелкните пустую область серого поля, чтобы добавить новый шаблон.

Затем назначьте шаблон всем страницам категорий.

Добавление новой настраиваемой области тела в шаблон

Чтобы создать настраиваемое тело для шаблона, щелкните область «Добавить настраиваемое тело» и выберите «Создать настраиваемое тело».

Затем выберите вариант «Строить с нуля».

Добавить заголовок динамического архива

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

Затем добавьте в строку текстовый модуль.

Удалите содержимое основного текста по умолчанию, щелкните значок «Использовать динамическое содержимое» и выберите параметр «Заголовок публикации / архива».

После того, как элемент заголовка публикации / архива будет на месте, откройте настройки, щелкнув значок шестеренки.

Затем обновите области ввода до и после, чтобы обернуть содержимое тегом H1 и добавить дополнительный фрагмент статического содержимого после динамического заголовка следующим образом:

До:

<h1>

После:

 Articles</h1>

Нам нужно заключить заголовок в тег H1 для целей SEO. Статическое слово «Статьи» добавляется после заголовка, поэтому, если пользователь посещает страницу категории «Бизнес», заголовок будет читать «Статьи о бизнесе».

Стиль заголовка динамического архива

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

• Шрифт заголовка: Ubuntu
• Шрифт заголовка: Толщина: полужирный
• Цвет текста заголовка: # 192231
• Размер текста заголовка: 48 пикселей (рабочий стол), 38 пикселей (планшет), 28 пикселей (телефон)
• Высота строки заголовка: 1,2 м

Использование модуля блога для динамического отображения сообщений текущей категории

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

Добавить новую строку

Добавьте новую строку из одного столбца под текущей верхней строкой.

Добавить модуль блога

Затем добавьте в строку модуль блога.

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

• Сообщения для текущей страницы: ДА
• Количество сообщений: 9
• Показать кнопку "Подробнее": ДА

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

Модуль блога дизайна

Установив настройки содержимого, давайте внесем некоторые изменения в дизайн следующим образом:

• Макет: сетка

• Шрифт заголовка: Ubuntu
• Толщина шрифта заголовка: полужирный
• Цвет текста заголовка: # 192231
• Мета-шрифт: Ubuntu
• Цвет метатекста: # 985e6d
• Размер метатекста: 13 пикселей

• Подробнее Шрифт: Ubuntu
• Подробнее Толщина шрифта: полужирный
• Подробнее Стиль шрифта: подчеркивание
• Подробнее Цвет текста: # 985e6d
• Шрифт разбивки на страницы: Ubuntu
• Цвет текста нумерации страниц: # 985e6d
• Размер текста разбивки на страницы: 18 пикселей
• Высота строки пагинации: 2em

• Ширина границы макета сетки: 0 пикселей
• Box Shadow: см. Снимок экрана
• Сила размытия тени коробки: 70 пикселей
• Сила распространения тени коробки: -10 пикселей
• Цвет тени: rgba (25,34,49,0.3)

На данный момент у нас есть основная страница категории, которая работает с заголовком страницы и сообщениями в блоге, которые будут отображаться правильно в соответствии с текущей страницей категории. Однако мы можем проявить больше творчества, добавив дополнительный модуль для креативного отображения сообщения.

Создайте слайдер сообщений, чтобы вывести 4 последних сообщения в текущей категории.

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

Добавить новую строку

Сначала добавьте новую строку с макетом 1/3 2/3 столбца под верхней строкой.

Добавить модуль слайдера сообщений

В левом столбце добавьте модуль слайдера сообщений.

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

• Сообщения для текущей страницы: ДА
• Количество сообщений: 4
• Показать мета сообщения: НЕТ

Модуль Design Post Slider

Теперь, когда содержимое слайдера публикации на месте, обновите настройки дизайна следующим образом:

• Выравнивание текста: по левому краю
• Шрифт заголовка: Ubuntu
• Высота строки заголовка: 1,3 мкм
• Использовать собственные стили для кнопки: ДА
• Размер текста кнопки: 16 пикселей
• Цвет фона кнопки: # 985e6d
• Ширина границы кнопки: 0 пикселей
• Шрифт кнопки: Ubuntu

• Box Shadow: см. Снимок экрана
• Размытие тени коробки Сила: 70 пикселей
• Сила распространения тени коробки: -10 пикселей
• Цвет тени: rgba (25,34,49,0.3)

Создайте модуль блога с полноразмерным макетом

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

Добавить модуль блога

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

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

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

• Сообщения для текущей страницы: ДА
• Количество сообщений: 3
• Длина отрывка: 120
• Показать избранное изображение: НЕТ (по крайней мере, на данный момент)
• Показать разбиение на страницы: НЕТ

• Макет: Полная ширина:
• Тень коробки: нет

Результат на данный момент

Пока результатом является минимальное отображение трех сообщений в блоге.

Но если мы хотим пойти еще дальше, мы можем добавить несколько небольших избранных изображений слева от каждого отрывка поста.

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

Чтобы добавить несколько небольших избранных изображений слева от выдержек из сообщений в блоге, нам нужно добавить собственный CSS.

Дайте модулю блога собственный класс CSS

Для начала нам нужно добавить собственный класс CSS в модуль Blog. Откройте настройки блога и на вкладке «Дополнительно» введите следующее:

• Класс CSS: левое изображение блога

Добавить код CSS с модулем кода

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

Вставить код CSS

Затем введите следующий CSS в область содержимого кода:

<style>
@media (min-width: 981px) {
.left-blog-image .et_pb_post .entry-featured-image-url {
float: left;
width: 100%;
max-width: 150px;
margin: 0 20px 30px 0;
}
.left-blog-image .et_pb_post {
margin-bottom: 20px !important;
}
}
</style>

Обновите настройки модуля блога, чтобы включить в него рекомендуемое изображение

Теперь мы можем снова добавить избранное изображение, чтобы оно отображалось в новой позиции слева, благодаря фрагменту CSS.

Дополнительные стили к шаблону

Прежде чем мы подведем итоги, давайте внесем несколько незначительных изменений в дизайн.

Добавление и стиль разделителя под заголовком архива

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

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

• Цвет линии: # 985e6d
• Вес разделителя: 3 пикселя
• Максимальная ширина: 200 пикселей

Добавить разделитель раздела в макет

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

• Стиль верхнего делителя: см. Снимок экрана
• Цвет верхнего разделителя: rgba (73,78,107,0.07)
• Высота разделителя: 90vw
• Divider Flip: горизонтальный и вертикальный

Используйте номер смещения сообщения с каждым модулем, чтобы избежать дублирования отображений сообщений

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

Смещение сообщений модуля блога полной ширины

Поскольку наш слайдер сообщений уже отображает первое (самое последнее) сообщение для страницы текущей категории, мы можем сместить это сообщение в модуле блога, расположенном рядом с ним. Откройте настройки модуля блога справа от ползунка публикации и обновите номер смещения публикации следующим образом:

• Номер почтового смещения: 1

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

Смещение сообщения модуля блога сетки

После того, как смещение сообщения первого модуля блога будет на месте, нам нужно сместить сообщения в основном модуле блога в нижней части шаблона. Откройте этот модуль блога и обновите номер смещения публикации следующим образом:

• Номер почтового смещения: 4

Нам нужно установить число смещения на 4, чтобы учесть 4 сообщения, которые уже отображаются выше. Теперь модуль продолжит работу с того места, где остановились другие модули, и начнется с пятой самой последней публикации.

Окончательные результаты

Чтобы увидеть окончательный результат, перейдите в панель управления WordPress и перейдите в «Записи»> «Категории». Затем щелкните, чтобы просмотреть одну из существующих категорий.

Вот окончательный результат.

А вот и на дисплее планшета и телефона.

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

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

Как Divi Theme Builder помог вам создавать страницы категорий?

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

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