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

Новая функция динамического содержимого Divi дает нам возможность создавать динамические макеты для сообщений в блогах (и многое другое). И есть веские причины, по которым вы можете подумать об этом. Одна из причин - дизайн. Вы можете создавать потрясающие макеты постов с помощью Divi, используя визуальный конструктор, особенно когда вы используете готовые макеты, доступные в качестве отправной точки. Еще одна причина - удобство. После того, как макет сообщения спроектирован со всеми элементами динамического содержимого (такими как категории, избранные изображения, теги сообщений, настраиваемые поля и т. Д.), Процесс создания и обновления сообщений блога значительно упрощается. Помимо фактического содержимого публикации, все остальные данные публикации могут быть обновлены без необходимости развертывания визуального построителя.

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

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

Sneak Peek

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

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

• Тема Divi
• Пакет макетов персонального тренера. Этот пакет макетов доступен из Divi Builder. Мы будем использовать макет страницы службы личного тренера, чтобы начать разработку макета нашего поста.

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

Часть 1: Добавление готового макета к публикации

Для начала создайте новый пост (не страницу), дайте своему посту заголовок, а затем нажмите кнопку «Использовать Divi Builder». Пока не развертывайте визуальный конструктор, потому что сначала нам нужно настроить параметры публикации на экране редактора WordPress по умолчанию.

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

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

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

Часть 2: Обновление настроек страницы Divi, метаданных публикации и избранного изображения

Настройки страницы Divi

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

В правом верхнем углу страницы найдите поле Параметры страницы Divi и обновите следующее:

Макет страницы: полная ширина
Показать заголовок сообщения: Скрыть

Если вы не видите настройки страницы Divi, вероятно, у вас не активирован Divi Builder, поэтому убедитесь, что вы сделали это в первую очередь.

Добавить категории

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

Добавить теги

В поле тегов добавьте следующие три тега: Speed, Training и Workouts.

Популярные изображения

Затем добавьте изображение, которое соответствует фоновому изображению, используемому в заголовке макета, как показано на снимке экрана ниже.

Часть 3: Добавление настраиваемых полей для динамического содержимого тренировки

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

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

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

Затем щелкните раскрывающийся список настраиваемых полей (если он свернут), чтобы добавить новое настраиваемое поле, и введите следующее:

Название: название тренировки
Значение: Рекомендуемая тренировка

Затем нажмите кнопку «Добавить настраиваемое поле».

Имя - это то, как вы определяете настраиваемое поле в Divi. Значение - это контент, который будет динамически добавляться на страницу с использованием функции динамического контента Divi (подробнее об этом позже).

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

Название: разминка
Значение: бег 800 м.

Имя: продолжительность
Значение: 30 мин.

Название: поднятие тяжестей
Ценить:

<ul>
<li>Squats: 10 reps at 60% max (4 sets)</li>
<li>Bench: 6 reps at 70% max (3 sets)</li>
</ul>

Имя: остыть
Значение: бег 400 м.

Примечание. Эти настраиваемые поля будут добавлены в тему Divi и будут доступны в любом новом сообщении, которое вы создадите в будущем. Другими словами, это не ограничивается одним постом.

Не забывайте обновлять свой пост!

Часть 4: Добавление динамического содержимого в макет публикации с помощью Visual Builder

Теперь, когда у нас есть настройки публикации и метаданные, пора начать добавлять динамический контент в нашу публикацию. Для этого разверните Visual Builder.

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

В разделе шапки удалим модуль кнопок (он нам не нужен).

Замена фонового изображения динамическим содержимым избранного изображения

Для нашей первой части динамического контента мы собираемся заменить фоновое изображение, используемое в столбце 1 нашей верхней строки раздела заголовка, на изображение, используемое для публикации. Для этого откройте настройки строки, найдите настройки фона для столбца 1 и щелкните вкладку фонового изображения. Затем удалите текущее изображение и наведите курсор на поле предварительного просмотра фонового изображения. Вы увидите значок динамического содержимого в правом верхнем углу поля. Щелкните по нему, чтобы открыть параметры динамического содержимого. Затем выберите из списка опцию динамического содержимого Featured Image.

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

Давай продолжим.

Добавление заголовка сообщения с модулем заголовка сообщения

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

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

Показать мета: НЕТ
Показать избранное изображение: НЕТ

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

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

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

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

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

Использование динамического содержимого для создания строки метаданных

Переходим ко второму разделу макета. Затем удалите верхний отступ раздела, перетащив его в визуальном построителе или установив для него значение 0 пикселей в настройках раздела.

В первой строке второго раздела макета вы увидите текстовый модуль (в нем есть содержание «О персональном обучении») с разделителем под ним. Здесь мы собираемся создать нашу настраиваемую строку метаданных с использованием динамического содержимого.

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

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

Пользовательское заполнение: 1% влево, 1% вправо

Затем сохраните настройки строки.

Теперь обновите структуру столбцов строк до четырех столбцов.

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

Затем выберите опцию: Опубликовать дату публикации.

Затем измените формат даты соответствующим образом.

Это добавит дату публикации сообщения как динамическое содержимое.

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

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

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

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

Теперь скопируйте текстовый модуль категорий сообщений с разделителем в столбец 3. Затем измените динамическое содержимое на «Количество комментариев». Во всплывающем окне «Количество комментариев» введите следующее в поле «До»:

До: Комментарии:

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

Теперь продолжим добавлять наш динамический контент. Скопируйте текстовый модуль и разделитель из столбца 3 и вставьте его в столбец 4. Этот последний столбец будет содержать миниатюру нашего сообщения и имя автора. Итак, измените динамическое содержимое текстового модуля на автора сообщения. Во всплывающем окне "Автор сообщения" обновите следующее:

До: автор:
Формат имени: имя и фамилия

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

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

Ширина: 80 пикселей
Пользовательское поле (для настольных ПК): -82px вверху
Пользовательское поле (планшет): 0px сверху

Примечание: имя автора сообщения будет показывать автора, который был назначен для текущего сообщения. А изображение профиля автора сообщения - это то, что было установлено для профиля пользователя на панели управления WordPress в разделе «Пользователи»> «Ваш профиль».

Часть 5: Добавление настраиваемых полей в качестве динамического содержимого для добавления избранной тренировки в публикацию

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

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

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

Для заголовка добавьте настраиваемое поле с именем «Заголовок тренировки» в качестве динамического содержимого. Затем для содержимого рекламного объявления добавьте настраиваемое поле с именем «Продолжительность» в качестве динамического содержимого.

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

Затем добавьте второй модуль аннотации ниже. В качестве заголовка введите текст «Разминка». А затем добавьте настраиваемое поле с именем «Warmup» в качестве динамического содержимого.

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

Добавьте последний модуль рекламного объявления с «Cool Down» в качестве заголовка и настраиваемым полем «Cool Down» в качестве динамического содержимого.

Теперь у вас есть динамический раздел для добавления тренировок в свой пост!

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

Часть 6. Создание раздела «Связанные темы» с использованием динамического содержимого тегов сообщений

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

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

До: Связанные темы:
Разделитель тегов: //

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

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

Шрифт текста: Освальд
Толщина шрифта текста: полужирный
Цвет текста текста: # ff4c00
Размер текста текста: 30 пикселей
Шрифт ссылки: Oswald
Толщина шрифта ссылки: полужирный
Цвет текста ссылки: # 262d3f
Размер текста ссылки: 50 пикселей
Расстояние между буквами ссылки: 2 пикселя
Высота линии связи: 1.6em

Вот окончательный дизайн.

Часть 7: Добавление биографии автора и раздела комментариев

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

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

Чтобы добавить раздел биографии автора внизу содержимого сообщения, вы можете использовать динамический контент автора сообщения, изображение профиля автора сообщения и биографию автора. Как вы можете видеть на скриншоте ниже, я создал строку 1/4 3/4 столбца. Затем я добавил изображение профиля автора сообщения в левый столбец. В правом столбце я добавил автора сообщения с биографией автора внизу. Я также добавил динамическое содержимое избранного изображения в качестве фонового изображения для раздела (и наложения градиента). Вот пример того, как это будет выглядеть.

Добавление раздела комментариев с помощью модуля комментариев

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

Окончательный дизайн

Вот окончательный дизайн всего поста после того, как весь дизайн был скорректирован.

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

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

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

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

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

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