Как создать шаблон карты рецептов с помощью Divi Theme Builder

Опубликовано: 2019-11-26

Продовольственные блоггеры и создатели рецептов знают, насколько важно постоянно следить за рецептами, которые они публикуют. Распространенное решение - использовать плагин карты рецептов, но он имеет конструктивные ограничения. Теперь, с помощью Divi Theme Builder, вы можете создать свой собственный шаблон карточки с рецептами, который будет использоваться на вашем сайте и в блоге. С помощью плагина Advanced Custom Fields (ACF) создание уникальной и многоразовой карточки рецептов стало проще, чем когда-либо.

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

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

Предварительный просмотр шаблона карточки рецепта

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

Рабочий стол

Планшет

Мобильный

1. Загрузите и установите плагин Advanced Custom Fields.

Поиск и установка

Найдите плагин ACF, выполнив поиск «Расширенные настраиваемые поля» в строке поиска плагинов, установите его и активируйте.

Добавить новую группу полей

Щелкните вкладку ACF и выберите «добавить новый». Назовите группу «Карточка рецептов». Добавьте настраиваемые поля одно за другим с помощью кнопки «Добавить поле».

Добавить настраиваемые поля

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

Название рецепта

Начните с названия рецепта.

  • Метка поля: Название рецепта
  • Тип поля: текст
  • Обязательно ?: Да
  • Текст-заполнитель: название рецепта
  • Максимальное количество символов: 30

Автор рецепта

Затем создайте поле для автора.

  • Метка поля: Автор рецепта
  • Тип поля: текст
  • Обязательно ?: Да
  • Текст-заполнитель: Автор

Время приготовления рецепта

Затем укажите время подготовки.

  • Метка поля: Время приготовления рецепта
  • Тип поля: Число
  • Обязательно ?: Да
  • Текст-заполнитель: ##
  • Подготовка: Время подготовки:
  • Добавить: мин.

Рецепт порций

Затем порции.

  • Этикетка поля: порции рецептов
  • Тип поля: Число
  • Обязательно ?: Да
  • Текст-заполнитель: ##
  • Приготовление: Количество порций:

Совет по вкусу рецепта

Добавьте поле наконечника ароматизатора.

  • Метка поля: Совет по вкусу рецепта
  • Тип поля: текст
  • Обязательно ?: Да
  • Приготовление: Совет по вкусу:
  • Максимальное количество символов: 40

Изображение рецепта

Теперь добавьте поле изображения.

  • Метка поля: изображение рецепта
  • Тип поля: изображение
  • Обязательно ?: Да

Название ингредиента рецепта

Затем название ингредиентов.

  • Метка поля: Название ингредиента рецепта
  • Тип поля: текст
  • Инструкции: просто напишите то же самое, что и текст-заполнитель.
  • Обязательно ?: Да
  • Текст-заполнитель: ингредиенты

Список ингредиентов рецепта

Далее следуйте списку ингредиентов.

  • Метка поля: список ингредиентов рецепта
  • Тип поля: текстовая область
  • Инструкции: добавьте пробел после каждого элемента
  • Обязательно ?: Да
  • Ряды: 8
  • Новые строки: автоматическое добавление <br>

Название приготовления рецепта

Предпоследний - название препарата.

  • Метка поля: Заголовок приготовления рецепта
  • Тип поля: текст
  • Инструкции: просто напишите то же самое, что и текст-заполнитель.
  • Обязательно ?: Да
  • Текст-заполнитель: подготовка

Список приготовления рецептов

Наконец, список подготовки.

  • Этикетка поля: Список приготовления рецепта
  • Тип поля: текстовая область
  • Инструкции: добавьте пробел после каждого элемента
  • Обязательно ?: Да
  • Ряды: 10
  • Новые строки: автоматическое добавление <br>

Опубликовать группу полей

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

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

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

2. Создайте новый шаблон карты рецептов с помощью Divi Builder.

Шаги по построению темы Divi

1. Создайте категорию рецептов.

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

2. Откройте конструктор тем Divi и добавьте новый шаблон.

Откройте конструктор тем Divi и добавьте новый шаблон.

3. Добавить глобальное тело

Нажмите «добавить глобальное тело» и назначьте шаблон сообщениям в определенных категориях> рецепты. Затем нажмите кнопку «Создать шаблон».

4. Создайте собственное тело

Нажмите «добавить глобальное тело» и выберите «добавить собственное тело».

3. Воссоздайте дизайн карты рецептов с помощью динамического содержимого.

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

Теперь мы можем приступить к разработке шаблона карточки рецепта. Когда откроется конструктор Divi, выберите «построить с нуля». Начните с добавления нового раздела.

Фон

В настройках раздела добавьте цвет фона.

  • Цвет фона: светло-серый #ededed

Размеры

Кроме того, настройте размер на вкладке дизайна.

  • Ширина: 100%
  • Максимальная ширина: 100%

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

Структура столбца

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

Размеры

Перед добавлением модулей настройте параметры размера строки.

  • Максимальная ширина: 90%

Настройки столбца

Фон

Настройте параметры столбца внутри строки. Сначала добавьте цвет фона.

  • Цвет фона: белый #ffffff

Граница

Затем измените стили границ.

  • Закругленные углы: 1vw все четыре угла
  • Стили границ: все четыре стороны
  • Ширина: 5 пикселей
  • Цвет: очень темно-серый # 333333

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

Содержание

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

  • Тело: Название рецепта
  • Настройки тела:
    • Раньше: <H1>
    • После: </H1>

Текст заголовка

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

  • Уровень заголовка: H1
  • Шрифт: Orienta
  • Вес: жирный
  • Выравнивание: по центру
  • Цвет: очень темно-серый # 3d3d3d
  • Размер:
    • Рабочий стол: 3vw
    • Таблетка: 4vw
    • Телефон: 5vw
  • Расстояние между буквами: 3 пикселя
  • Высота линии: 1,5 м

Интервал

Измените также значения интервала.

  • Нижняя маржа:
    • Рабочий стол: -1vw
    • Таблетка: -2vw
    • Телефон: -5vw
  • Верхняя обивка:
    • Рабочий стол + планшет: 1vw
    • Телефон: 2vw
  • Нижняя обивка: 0vw
  • Левый + правый отступ:
    • Рабочий стол + планшет: 3vw
    • Телефон: 4vw

Добавить 2-й текстовый модуль с динамическим содержимым

Содержание

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

  • Текст: Автор рецепта

Текст

Затем стилизуйте текст.

  • Шрифт: Encode Sans
  • Цвет: очень темно-серый # 3d3d3d
  • Размер:
    • Рабочий стол: 1.4vw
    • Таблетка: 2.4vw
    • Телефон: 3vw
  • Выравнивание: по центру

Интервал

После этого отрегулируйте интервал.

  • Верхняя маржа: 1.5vw
  • Верхняя обивка:
    • Рабочий стол + планшет: 0vw
    • Телефон: 2vw
  • Нижняя обивка: 2vw
  • Левый + правый отступ:
    • Рабочий стол: 2vw
    • Планшет + Телефон: 3vw

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

Структура столбца

Теперь добавьте вторую строку, используя следующую структуру столбцов:

Размеры

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

  • Ширина желоба: 2
  • Ширина: 90%
  • Максимальная ширина: 100%
  • Выравнивание ряда: по левому краю

Интервал

Затем интервал.

  • Верхняя + нижняя обивка: 0.5vw
  • Левое заполнение: 10vw

Видимость

Наконец, на вкладке «Дополнительно» настройте видимость.

  • Горизонтальное переполнение: видимое
  • Вертикальное переполнение: видимое

Столбец 1 + 2 + 3 Настройки

Граница

Одинаково оформьте все три столбца. Сначала перейдите к настройкам границы и внесите некоторые изменения. Повторите для всех трех столбцов.

  • Закругленные углы: 1vw все четыре угла
  • Стили границ: все четыре стороны
  • Ширина: 5 пикселей
  • Цвет: очень темно-серый # 333333

Преобразовать

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

  • Масштаб трансформации при наведении: 105% x 105%

Добавить текстовый модуль в столбец 1

Содержание

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

Фон

Добавьте цвет фона к модулю.

  • Цвет фона: Желто-зеленый # b1e88d

Текст заголовка

Затем задайте стиль для параметров текста H5.

  • Уровень заголовка: H5
  • Шрифт H5: Orienta
  • Цвет H5: очень темно-серый # 3d3d3d
  • Размер H5:
    • Рабочий стол: 1vw
    • Таблетка: 2.3vw
    • Телефон: 3.3vw
  • Выравнивание: по центру

Интервал

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

  • Верхняя обивка:
    • Рабочий стол: 1vw
    • Таблетка: 1.5vw
    • Телефон: 3.5vw
  • Нижняя обивка:
    • Рабочий стол: 0,5 Вт
    • Планшет + телефон: 1,5 ВВт
  • Левый + правый отступ:
    • Рабочий стол: 2vw
    • Планшет + Телефон: 3vw

Дублировать текстовый модуль из столбца 1 дважды и переместить в столбцы 2 и 3

В каркасном представлении продублируйте текстовый модуль в первом столбце. Затем переместите дубликаты в столбцы 2 и 3.

Добавить динамический контент в текстовый модуль в столбце 1

Добавьте динамический контент на время подготовки и настройте параметры.

  • Основная часть: Время приготовления рецепта
  • Настройки тела:
    • Раньше: <H5> Время подготовки:
    • Через: мин. </H5>

Добавить динамический контент в текстовый модуль в столбце 2

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

  • Тело: порции рецептов
  • Настройки тела:
    • Раньше: <H5> Порции:
    • После: </H5>

Добавить динамический контент в текстовый модуль в столбце 3

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

  • Основная часть: Совет по вкусу рецепта
  • Настройки тела:
    • Перед: <H5> Совет по вкусу:
    • После: </H5>

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

Структура столбца

Теперь добавьте третью строку, используя следующую структуру столбцов:

Размеры

Перед добавлением каких-либо модулей отрегулируйте размер ряда.

  • Пользовательская ширина желоба: 2
  • Ширина: 80%
  • Максимальная ширина: 100%

Интервал

Также удалите верхнее поле по умолчанию.

  • Верхняя маржа: 0vw

Видимость

Наконец, настройте видимость на вкладке «Дополнительно».

  • Горизонтальное переполнение: видимое
  • Вертикальное переполнение: видимое

Столбец 1 + 2 + 3 Настройки

Граница

Создайте одинаковый стиль для всех трех столбцов, начиная с настроек границ. Повторите для столбцов 2 и 3.

  • Закругленные углы: 1vw все четыре угла
  • Стили границ: все четыре стороны
  • Ширина: 5 пикселей
  • Цвет: очень темно-серый # 333333

Преобразовать

Продолжите, добавив преобразование при наведении курсора на вкладку дизайна. Повторите для столбцов 2 и 3.

  • Масштаб трансформации при наведении: 105% x 105%

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

Содержание

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

  • Изображение: Изображение рецепта

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

Содержание

Теперь добавьте текстовый модуль с динамическим содержимым для заголовка ингредиентов. Щелкните значок шестеренки и введите фрагменты H3 следующим образом.

  • Текстовое поле: название ингредиентов рецепта
  • Настройки тела:
    • Раньше: <H3>
    • После: </H3>

Текст заголовка

Затем стилизуйте текст заголовка.

  • Уровень заголовка: H3
  • H3Font: Orienta
  • Цвет H3: очень темно-серый # 3d3d3d
  • Размер H3:
    • Рабочий стол: 1.6vw
    • Таблетка: 2vw
    • Телефон: 5.5vw
  • Выравнивание: по центру

Интервал

Завершите модуль, отрегулировав интервал.

  • Нижняя маржа: 0vw
  • Верхняя обивка:
    • Рабочий стол: 2vw
    • Таблетка: 3vw
    • Телефон: 4vw
  • Левый + правый отступ:
    • Рабочий стол: 2vw
    • Планшет + Телефон: 3vw

Добавить модуль разделителя в столбец 2

Линия

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

  • Цвет: салатовый # b1e88d

Размеры

Затем отрегулируйте значения размеров.

  • Вес: 5 пикселей
  • Ширина: 40%
  • Выравнивание: по левому краю

Интервал

Наконец, отрегулируйте интервал.

  • Верхняя маржа: 0vw

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

Содержание

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

  • Текстовое поле: Список ингредиентов рецепта
  • Настройки тела: включить необработанный HTML

Текст

Затем стилизуйте текст следующим образом.

  • Шрифт: Encode Sans
  • Цвет: очень темно-серый # 333333
  • Размер:
    • Рабочий стол: 0.9vw
    • Таблетка: 2vw
    • Телефон: 3vw

Интервал

Также отрегулируйте интервал.

  • Верхнее поле:
    • Рабочий стол: -1vw
    • Таблетка: -3vw
    • Телефон: -5vw
  • Верхняя обивка:
    • Рабочий стол + планшет: 0vw
  • Нижняя обивка:
    • Рабочий стол: 3vw
    • Планшет + Телефон: 4vw
  • Левый + правый отступ:
    • Рабочий стол: 3vw
    • Таблетка: 4vw
    • Телефон: 5vw

Дублируйте все модули в столбце 2 и переместите в столбец 3

В каркасном представлении продублируйте все модули во втором столбце. Переместите дублированные модули в третий столбец в том же порядке.

Добавить динамический контент в 1-й текстовый модуль в столбец 3

Добавьте динамический контент для заголовка подготовки.

  • Текст: Заголовок приготовления рецепта

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

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

  • Тело: Список приготовления рецептов

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

Структура столбца

Для завершения шаблона нам понадобится модуль содержания поста. Добавьте новую строку, используя следующую структуру столбцов:

Размеры

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

  • Нестандартная ширина желоба: 2
  • Ширина: 100%
  • Максимальная ширина: 80%

Интервал

Затем измените настройки интервала.
  • Левый + правый отступ: 0vw

Столбец 1 Настройки

Фон

Стиль столбца должен соответствовать карточке рецепта выше. Сначала добавьте фон.

  • Цвет фона: белый #ffffff

Интервал

Также отрегулируйте интервал.

  • Левый отступ: 0vw

Граница

И последнее, но не менее важное: измените настройки границы.

  • Закругленные углы: 1vw все четыре угла
  • Стили границ: со всех четырех сторон
  • Ширина: 5 пикселей
  • Цвет: очень темно-серый # 333333

Оставьте столбец 2 пустым.

Добавить модуль содержимого публикации в столбец 1

Текст

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

  • Шрифт: Encode Sans
  • Цвет: очень темно-серый # 333333
  • Размер:
    • Рабочий стол: 0.9vw
    • Таблетка: 2vw
    • Телефон: 3vw
  • Высота линии: 2em

Заголовок 1 Текст

  • Шрифт: Orienta
  • Цвет: очень темно-серый # 333333
  • Размер:
    • Рабочий стол: 2vw
    • Таблетка: 5vw
    • Телефон: 6vw

Текст заголовка 2

  • Шрифт: Orienta
  • Цвет: очень темно-серый # 333333
  • Размер:
    • Рабочий стол: 1.8vw
    • Таблетка: 4.5vw
    • Телефон: 5.5vw

Текст заголовка 3

  • Шрифт: Orienta
  • Цвет: очень темно-серый # 333333
  • Размер:
    • Рабочий стол: 1.6vw
    • Таблетка: 4.5vw
    • Телефон: 5vw

Интервал

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

  • Верх + нижняя обивка: 2vw
  • Левый + правый отступ:
    • Рабочий стол: 4vw
    • Планшет + Телефон: 6vw

Если вы хотите изменить цвет строки цитаты или цвет ссылки, вы можете сделать это в настройщике темы в разделе «Акцентный цвет».

4. Отредактируйте / создайте сообщение, используя настройки плагина ACF и шаблон карточки рецептов.

Ввести настраиваемые поля

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

Название рецепта:

  • Супзеленый веганский тост с авокадо

Автор рецепта:

  • Магдалена Свифтер - www.veganchef.com

Время приготовления рецепта:

  • 15

Рецепт порций:

  • 3

Совет по вкусу рецепта:

  • Используйте хлопья морской соли и масло первого отжима.

Изображение рецепта:

  • Тост с авокадо

Название ингредиента рецепта:

  • Ингредиенты

Список ингредиентов рецепта:

  • 3 ломтика цельнозернового хлеба
  • 1 спелый авокадо
  • 100г. Приготовленные бобы
  • 10г. Зеленые ростки
  • 1 нарезанный зеленый лук
  • 30г. Крошеный сыр фета
  • 1 лимон, разрезанный пополам
  • Капля оливкового масла
  • Посыпать морской солью

Название рецепта:

  • Подготовка

Список рецептов приготовления:

  • 1. Поджарьте ломтики хлеба по своему вкусу.
  • 2. Открыть авокадо, удалить мякоть, размять вилкой.
  • 3. Выжмите сок лимона на авокадо, приправьте солью.
  • 4. Распределите пюре из авокадо по тосту.
  • 5. Посыпать фасолью, ростками и мелко нарезанным зеленым луком.
  • 6. Приправить солью.
  • 7. Добавьте раскрошенный сыр фета.
  • 8. В завершение полить оливковым маслом.

Дайте публикации название

Заголовок

Не забудьте добавить заголовок к своему сообщению.

  • Рецепт тоста с авокадо

Добавить контент, выбрать категорию и добавить избранное изображение

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

Предварительный просмотр шаблона карточки рецепта

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

Рабочий стол

Планшет

Мобильный

Это обертка!

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

  1. Установите плагин ACF.
  2. Настройте группу полей карточки рецепта.
  3. Добавьте настраиваемые поля.
  4. Создайте новый шаблон и назначьте его сообщениям в блоге в категории «рецепты».
  5. Используйте динамический контент из полей ACF в модулях.
  6. Создайте или отредактируйте сообщение в блоге, заполнив поля.
  7. Добавьте контент в блог.

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