Как придать вашим страницам архива Divi макет каменной кладки

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

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

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

Sneak Peek

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

Загрузите шаблон страницы архива БЕСПЛАТНО

Чтобы получить шаблон из этого руководства, вам сначала нужно загрузить его, нажав кнопку ниже. Чтобы получить доступ к загрузке, вам необходимо подписаться на наш список рассылки 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. Затем щелкните пустую область серого поля, чтобы добавить новый шаблон.

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

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

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

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

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

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

• Цвет фона: #eeeeee

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

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

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

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

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

До:

<h1>

После:

</h1>

Нам нужно заключить заголовок в тег H1 для целей SEO.

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

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

• Шрифт заголовка: Mulish
• Шрифт заголовка: Weight: Heavy
• Выравнивание текста заголовка: по центру
• Цвет текста заголовка: # 3a405a
• Размер текста заголовка: 70 пикселей (компьютер), 40 пикселей (планшет и телефон)

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

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

Для этого создайте новый текстовый модуль под предыдущим текстовым модулем с заголовком.

Удалите основной текст по умолчанию и добавьте динамическое содержимое заголовка публикации / архива в основной текст (как мы это делали ранее).

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

До:

<h3>Here are the articles on 

После:

 </h3>

Теперь заголовок будет отображаться в строке с предыдущей строкой текста.

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

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

• Шрифт заголовка 3: Mulish
• Выравнивание текста заголовка 3: по центру

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

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

Добавить новый раздел

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

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

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

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

• Использовать нестандартную ширину желоба: ДА
• Ширина желоба: 2;
• Ширина: 95%

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

Теперь нам нужно добавить в строку модуль блога.

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

• Сообщения для текущей страницы: ДА

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

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

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

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

• Цвет фона: # 3a405a

Обновить стили текста заголовка

• Шрифт заголовка: Mulish
• Толщина шрифта заголовка: полужирный
• Цвет текста заголовка: #eee
• Размер текста заголовка: 34 пикселей
• Высота строки заголовка: 1,3 мкм

Обновить стили основного текста

• Шрифт: Montserrat
• Цвет основного текста: #ffffff
• Высота линии тела: 2em

Обновить стили метатекста

• Мета-шрифт: Montserrat
• Цвет метатекста: # ffb100

Обновить стили разбивки на страницы

• Толщина шрифта пагинации: полужирный
• Цвет текста разбивки на страницы: # 3a405a

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

Конечный результат

Чтобы проверить результаты, посетите различные типы архивных страниц на своем сайте.

Вот пример шаблона страницы архива категории, показывающий все сообщения для категории «WordPress».

Вот шаблон страницы архива автора, отображающий все сообщения определенного автора.

Вот страница архива тегов, на которой отображаются все сообщения с тегом «Новости».

А вот шаблон страницы архива дат, отображающий все сообщения за октябрь 2019 года.

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

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

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

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