How to Create a Recipe Card Template with the Divi Theme Builder

November 25, 2019

Food bloggers and recipe creators know how important it is to have a consistent look to the recipes they publish. A common solution is to use a recipe card plugin but that comes with design limitations. Now, with the Divi Theme Builder, you can create your own recipe card template to use throughout your site and blog. With the help of the Advanced Custom Fields (ACF) plugin, designing a unique and reusable recipe card is easier than ever.

In this post, we’ll show you how to create a recipe card template with dynamic content. By using the Divi Theme Builder settings, the design can be applied to the blog posts which include recipes by selecting that specific category. We hope this tutorial will inspire you to create your own style of recipe cards with your very own custom fields.

Let’s take a look at how the design looks across different screen sizes.

Recipe Card Template Preview

Let’s take a look at how the design looks across different screen sizes.

Desktop

how-to-create-a-recipe-card-template-with-the-divi-theme-builder Theme Builder Layout

Tablet

how-to-create-a-recipe-card-template-with-the-divi-theme-builder-1 Theme Builder Layout

Mobile

how-to-create-a-recipe-card-template-with-the-divi-theme-builder-2 Theme Builder Layout

1. Download and Install Advanced Custom Fields Plugin

Search and Install

Find the ACF plugin by searching for ‘Advanced Custom Fields’ in the plugin search bar, install it and activate it.

how-to-create-a-recipe-card-template-with-the-divi-theme-builder Theme Builder Layout

Add New Field Group

Click on the ACF tab and select ‘add new’. Name the group ‘Recipe Card’. Add the custom fields one by one through the ‘add field’ button.

how-to-create-a-recipe-card-template-with-the-divi-theme-builder-1 Theme Builder Layout

Add Custom Fields

For each custom field, click the ‘add field’ button. Each can be customized for a different type of content. The list below specifies the label and type for each field. Add the word ‘recipe’  at the beginning of each field label so it’s easy to find when building the modules. The field name will autofill once you have added the label.

how-to-create-a-recipe-card-template-with-the-divi-theme-builder-2 Theme Builder Layout

Recipe Title

Start with the recipe title.

  • Field Label: Recipe Title
  • Field Type: Text
  • Required?: Yes
  • Placeholder Text: Recipe Title
  • Character Limit: 30

how-to-create-a-recipe-card-template-with-the-divi-theme-builder-3 Theme Builder Layout

Recipe Author

Then, create a field for the author.

  • Field Label: Recipe Author
  • Field Type: Text
  • Required?: Yes
  • Placeholder Text: Author

how-to-create-a-recipe-card-template-with-the-divi-theme-builder-4 Theme Builder Layout

Recipe Prep Time

Follow that with the prep time.

  • Field Label: Recipe Prep Time
  • Field Type: Number
  • Required?: Yes
  • Placeholder Text: ##
  • Prepend: Prep Time:
  • Append: min.

how-to-create-a-recipe-card-template-with-the-divi-theme-builder-5 Theme Builder Layout

Recipe Servings

Then, the servings.

  • Field Label: Recipe Servings
  • Field Type: Number
  • Required?: Yes
  • Placeholder Text: ##
  • Prepend: Servings:

how-to-create-a-recipe-card-template-with-the-divi-theme-builder-6 Theme Builder Layout

Recipe Flavor Tip

Add a flavor tip field.

  • Field Label: Recipe Flavor Tip
  • Field Type: Text
  • Required?: Yes
  • Prepend: Flavor Tip:
  • Character Limit: 40

how-to-create-a-recipe-card-template-with-the-divi-theme-builder-7 Theme Builder Layout

Recipe Image

Now, add the image field.

  • Field Label: Recipe Image
  • Field Type: Image
  • Required?: Yes

how-to-create-a-recipe-card-template-with-the-divi-theme-builder-8 Theme Builder Layout

Recipe Ingredients Title

Then, the ingredients title.

  • Field Label: Recipe Ingredients Title
  • Field Type: Text
  • Instructions: Just write the same as placeholder text.
  • Required?: Yes
  • Placeholder Text: Ingredients

how-to-create-a-recipe-card-template-with-the-divi-theme-builder-9 Theme Builder Layout

Recipe Ingredients List

Follow that with the ingredients list.

  • Field Label: Recipe Ingredients List
  • Field Type: Text Area
  • Instructions: Add a space after every item
  • Required?: Yes
  • Rows: 8
  • New Lines: Automatically add <br>

how-to-create-a-recipe-card-template-with-the-divi-theme-builder-10 Theme Builder Layout

Recipe Preparation Title

Next to last, the preparation title.

  • Field Label: Recipe Preparation Title
  • Field Type: Text
  • Instructions: Just write the same as placeholder text.
  • Required?: Yes
  • Placeholder Text: Preparation

how-to-create-a-recipe-card-template-with-the-divi-theme-builder-11 Theme Builder Layout

Recipe Preparation List

Finally, the preparation list.

  • Field Label: Recipe Preparation List
  • Field Type: Text Area
  • Instructions: Add a space after every item
  • Required?: Yes
  • Rows: 10
  • New Lines: Automatically add <br>

how-to-create-a-recipe-card-template-with-the-divi-theme-builder-12 Theme Builder Layout

Publish Field Group

Publish the field group. Your field group window should look like the screenshot below.

how-to-create-a-recipe-card-template-with-the-divi-theme-builder-13 Theme Builder Layout

How to Access ACF Plugin Content for Recipe Card Template in The Divi Builder

The advanced custom fields can be added to a Divi module by clicking on the dynamic content icon. This icon is on the top right corner of the content box. This is what it looks like:

how-to-create-a-recipe-card-template-with-the-divi-theme-builder-14 Theme Builder Layout

2. Create New Recipe Card Template With Divi Builder

Divi Theme Builder Steps

1. Create Recipes Category

You need a category named ‘recipes’ so you can assign the template to it. Add it in the category tab via the dashboard.

how-to-create-a-recipe-card-template-with-the-divi-theme-builder-15 Theme Builder Layout

2. Open Divi Theme Builder and Add New Template

Open the Divi theme builder and add a new template.

how-to-create-a-recipe-card-template-with-the-divi-theme-builder-16 Theme Builder Layout

3. Add Global Body

Click on ‘add global body’ and assign the template to posts in specific categories > recipes. Then, click on the ‘create template’ button.

how-to-create-a-recipe-card-template-with-the-divi-theme-builder-17 Theme Builder Layout

4. Build Custom Body

Click on ‘add global body’ and select ‘add custom body’.

how-to-create-a-recipe-card-template-with-the-divi-theme-builder-18 Theme Builder Layout

3. Recreate the Recipe Card Design Using Dynamic Content

Add New Section

Now, we can start designing the recipe card template. When the Divi builder opens, select ‘build from scratch’. Start by adding a new section.

how-to-create-a-recipe-card-template-with-the-divi-theme-builder-19 Theme Builder Layout

Background

In the section settings, add a background color.

  • Background Color: Light Grey #ededed

how-to-create-a-recipe-card-template-with-the-divi-theme-builder-20 Theme Builder Layout

Sizing

Also, adjust the sizing in the design tab.

  • Width: 100%
  • Max Width: 100%

how-to-create-a-recipe-card-template-with-the-divi-theme-builder-21 Theme Builder Layout

Add 1st Row

Column Structure

Add a new row with one column.

how-to-create-a-recipe-card-template-with-the-divi-theme-builder-22 Theme Builder Layout

Sizing

Before adding modules, adjust the row’s sizing settings.

  • Max Width: 90%

how-to-create-a-recipe-card-template-with-the-divi-theme-builder-23 Theme Builder Layout

Column Settings

Background

Customize the column settings inside the row. First, add a background color.

  • Background Color: White #ffffff

how-to-create-a-recipe-card-template-with-the-divi-theme-builder-24 Theme Builder Layout

Border

Then, modify the border styles.

  • Rounded Corners: 1vw all four corners
  • Border Styles: All four sides
  • Width: 5px
  • Color: Very Dark Grey #333333

how-to-create-a-recipe-card-template-with-the-divi-theme-builder-25 Theme Builder Layout

Add Text Module with Dynamic Content

Content

Once you’ve completed the row and column settings, it’s time to add modules. Start by adding a text module. In the content window, select the dynamic content for the recipe title. Once selected, click on the gear icon and input H1 snippets.

  • Body: Recipe Title
  • Body Settings:
    • Before: <H1>
    • After:</H1>

how-to-create-a-recipe-card-template-with-the-divi-theme-builder-26 Theme Builder Layout

how-to-create-a-recipe-card-template-with-the-divi-theme-builder-27 Theme Builder Layout

Heading Text

Then, style the H1 text settings accordingly:

  • Heading Level: H1
  • Font: Orienta
  • Weight: Bold
  • Alignment: Center
  • Color: Very Dark Grey #3d3d3d
  • Size:
    • Desktop: 3vw
    • Tablet: 4vw
    • Phone: 5vw
  • Letter Spacing: 3px
  • Line Height: 1.5em

how-to-create-a-recipe-card-template-with-the-divi-theme-builder-28 Theme Builder Layout

Spacing

Modify the spacing values too.

  • Bottom Margin:
    • Desktop: -1vw
    • Tablet: -2vw
    • Phone: -5vw
  • Top Padding:
    • Desktop + Tablet: 1vw
    • Phone: 2vw
  • Bottom Padding:0vw
  • Left + Right Padding:
    • Desktop + Tablet: 3vw
    • Phone: 4vw

how-to-create-a-recipe-card-template-with-the-divi-theme-builder-29 Theme Builder Layout

Add 2nd Text Module with Dynamic Content

Content

Add a second text module and select the dynamic content for the recipe author.

  • Body: Recipe Author

how-to-create-a-recipe-card-template-with-the-divi-theme-builder-30 Theme Builder Layout

Text

Then, style the text.

  • Font: Encode Sans
  • Color: Very Dark Grey #3d3d3d
  • Size:
    • Desktop: 1.4vw
    • Tablet: 2.4vw
    • Phone: 3vw
  • Alignment: Center

how-to-create-a-recipe-card-template-with-the-divi-theme-builder-31 Theme Builder Layout

Spacing

Afterward, adjust the spacing.

  • Top Margin: 1.5vw
  • Top Padding:
    • Desktop + Tablet: 0vw
    • Phone: 2vw
  • Bottom Padding: 2vw
  • Left + Right Padding:
    • Desktop: 2vw
    • Tablet + Phone: 3vw

how-to-create-a-recipe-card-template-with-the-divi-theme-builder-32 Theme Builder Layout

Add 2nd Row

Column Structure

Now, add a second row using the following column structure:

how-to-create-a-recipe-card-template-with-the-divi-theme-builder-33 Theme Builder Layout

Sizing

Open the row settings and adjust the sizing settings accordingly:

  • Gutter Width: 2
  • Width: 90%
  • Max Width: 100%
  • Row Alignment: Left

how-to-create-a-recipe-card-template-with-the-divi-theme-builder-34 Theme Builder Layout

Spacing

Then, the spacing.

  • Top + Bottom Padding: 0.5vw
  • Left Padding: 10vw

how-to-create-a-recipe-card-template-with-the-divi-theme-builder-35 Theme Builder Layout

Visibility

Lastly, in the advanced tab, adjust the visibility.

  • Horizontal Overflow: Visible
  • Vertical Overflow: Visible

how-to-create-a-recipe-card-template-with-the-divi-theme-builder-36 Theme Builder Layout

Column 1 + 2 + 3 Settings

Border

Style all three columns the same way. First, go to the border settings and make some changes. Repeat for all three columns.

  • Rounded Corners: 1vw all four corners
  • Border Styles: All four sides
  • Width: 5px
  • Color: Very Dark Grey #333333

how-to-create-a-recipe-card-template-with-the-divi-theme-builder-37 Theme Builder Layout

Transform

To give the design a hover effect, adjust the transform settings as follows. Repeat for all three columns.

  • Transform Scale On Hover: 105% x 105%

how-to-create-a-recipe-card-template-with-the-divi-theme-builder-38 Theme Builder Layout

Add Text Module to Column 1

Content

Add a text module and leave the content window empty for now. We’ll add that later.

Background

Add a background color to the module.

  • Background Color: Lime Green #b1e88d

how-to-create-a-recipe-card-template-with-the-divi-theme-builder-39 Theme Builder Layout

Heading Text

Style the H5 text settings next.

  • Heading Level: H5
  • H5 Font: Orienta
  • H5 Color: Very Dark Grey #3d3d3d
  • H5 Size:
    • Desktop: 1vw
    • Tablet: 2.3vw
    • Phone: 3.3vw
  • Alignment: Center

how-to-create-a-recipe-card-template-with-the-divi-theme-builder-40 Theme Builder Layout

Spacing

Finally, adjust the spacing values as follows.

  • Top Padding:
    • Desktop: 1vw
    • Tablet: 1.5vw
    • Phone: 3.5vw
  • Bottom Padding:
    • Desktop: 0.5vw
    • Tablet + Phone: 1.5vw
  • Left + Right Padding:
    • Desktop: 2vw
    • Tablet + Phone: 3vw

how-to-create-a-recipe-card-template-with-the-divi-theme-builder-41 Theme Builder Layout

Duplicate Text Module From Column 1 Twice and Move to Columns 2 and 3

In the wireframe view, duplicate the text module in the first column. Then, move the duplicates to column 2 and 3.

how-to-create-a-recipe-card-template-with-the-divi-theme-builder-42 Theme Builder Layout

Add Dynamic Content to Text Module in Column 1

Add the dynamic content for the prep time and adjust the settings.

  • Body: Recipe Prep Time
  • Body Settings:
    • Before: <H5>Prep Time:
    • After: min.</H5>

how-to-create-a-recipe-card-template-with-the-divi-theme-builder-43 Theme Builder Layout

how-to-create-a-recipe-card-template-with-the-divi-theme-builder-44 Theme Builder Layout

Add Dynamic Content to Text Module in Column 2

Add the dynamic content for recipe servings and adjust the settings.

  • Body: Recipe Servings
  • Body Settings:
    • Before: <H5>Servings:
    • After: </H5>

how-to-create-a-recipe-card-template-with-the-divi-theme-builder-45 Theme Builder Layout

how-to-create-a-recipe-card-template-with-the-divi-theme-builder-46 Theme Builder Layout

Add Dynamic Content to Text Module in Column 3

Add the dynamic content for the flavor tip and adjust the settings.

  • Body: Recipe Flavor Tip
  • Body Settings:
    • Before: <H5>Flavor Tip:
    • After: </H5>

how-to-create-a-recipe-card-template-with-the-divi-theme-builder-47 Theme Builder Layout

how-to-create-a-recipe-card-template-with-the-divi-theme-builder-48 Theme Builder Layout

Add 3rd Row

Column Structure

Now add the third row using the following column structure:

how-to-create-a-recipe-card-template-with-the-divi-theme-builder-49 Theme Builder Layout

Sizing

Before adding any modules, adjust the sizing of the row.

  • Custom Gutter Width: 2
  • Width: 80%
  • Max Width: 100%

how-to-create-a-recipe-card-template-with-the-divi-theme-builder-50 Theme Builder Layout

Spacing

Also, erase the default top margin.

  • Top Margin: 0vw

how-to-create-a-recipe-card-template-with-the-divi-theme-builder-51 Theme Builder Layout

Visibility

Finally, adjust the visibility in the advanced tab.

  • Horizontal Overflow: Visible
  • Vertical Overflow: Visible

how-to-create-a-recipe-card-template-with-the-divi-theme-builder-52 Theme Builder Layout

Column 1 + 2 + 3 Settings

Border

Style all three columns the same way, starting with the border settings. Repeat for columns 2 and 3.

  • Rounded Corners: 1vw all four corners
  • Border Styles: All four sides
  • Width: 5px
  • Color: Very Dark Grey #333333

how-to-create-a-recipe-card-template-with-the-divi-theme-builder-53 Theme Builder Layout

Transform

Continue by adding a hover transform in the design tab. Repeat for columns 2 and 3.

  • Transform Scale On Hover: 105% x 105%

how-to-create-a-recipe-card-template-with-the-divi-theme-builder-54 Theme Builder Layout

Add Image Module with Dynamic Content to Column 1

Content

Add an image module with dynamic content for the recipe image.

  • Image: Recipe Image

how-to-create-a-recipe-card-template-with-the-divi-theme-builder-55 Theme Builder Layout

Add Text Module with Dynamic Content to Column 2

Content

Now, add a text module with dynamic content for the ingredients title. Click on the gear icon and enter H3 snippets as follows.

  • Text Body: Recipe Ingredients Title
  • Body Settings:
    • Before: <H3>
    • After: </H3>

how-to-create-a-recipe-card-template-with-the-divi-theme-builder-56 Theme Builder Layout

how-to-create-a-recipe-card-template-with-the-divi-theme-builder-57 Theme Builder Layout

Heading Text

Then, style the heading text.

  • Heading Level: H3
  • H3Font: Orienta
  • H3 Color: Very Dark Grey #3d3d3d
  • H3 Size:
    • Desktop: 1.6vw
    • Tablet: 2vw
    • Phone: 5.5vw
  • Alignment: Center

how-to-create-a-recipe-card-template-with-the-divi-theme-builder-58 Theme Builder Layout

Spacing

Complete the module by adjusting the spacing.

  • Bottom Margin: 0vw
  • Top Padding:
    • Desktop: 2vw
    • Tablet: 3vw
    • Phone: 4vw
  • Left + Right Padding:
    • Desktop: 2vw
    • Tablet + Phone: 3vw

how-to-create-a-recipe-card-template-with-the-divi-theme-builder-59 Theme Builder Layout

Add Divider Module to Column 2

Line

Add a divider module and style it as follows.

  • Color: Lime Green #b1e88d

how-to-create-a-recipe-card-template-with-the-divi-theme-builder-60 Theme Builder Layout

Sizing

Then adjust the sizing values.

  • Weight: 5px
  • Width: 40%
  • Alignment: Left

how-to-create-a-recipe-card-template-with-the-divi-theme-builder-61 Theme Builder Layout

Spacing

Lastly, adjust the spacing.

  • Top Margin: 0vw

how-to-create-a-recipe-card-template-with-the-divi-theme-builder-62 Theme Builder Layout

Add Text Module with Dynamic Content to Column 2

Content

Add a text module with dynamic content for the ingredients list. Click on the gear icon in the dynamic content tab and enable raw HTML.

  • Text Body: Recipe Ingredients List
  • Body Settings: Enable Raw HTML

how-to-create-a-recipe-card-template-with-the-divi-theme-builder-63 Theme Builder Layout

how-to-create-a-recipe-card-template-with-the-divi-theme-builder-64 Theme Builder Layout

Text

Then, style the text as follows.

  • Font: Encode Sans
  • Color: Very Dark Grey #333333
  • Size:
    • Desktop: 0.9vw
    • Tablet: 2vw
    • Phone: 3vw

how-to-create-a-recipe-card-template-with-the-divi-theme-builder-65 Theme Builder Layout

Spacing

Also, adjust the spacing.

  • Top Margin:
    • Desktop: -1vw
    • Tablet: -3vw
    • Phone: -5vw
  • Top Padding:
    • Desktop + Tablet: 0vw
  • Bottom Padding:
    • Desktop: 3vw
    • Tablet + Phone: 4vw
  • Left + Right Padding:
    • Desktop: 3vw
    • Tablet: 4vw
    • Phone: 5vw

how-to-create-a-recipe-card-template-with-the-divi-theme-builder-66 Theme Builder Layout

Duplicate all Modules on Column 2 and Move to Column 3

In the wireframe view, duplicate all modules in column two. Move the duplicated modules to column three in the same order.

how-to-create-a-recipe-card-template-with-the-divi-theme-builder-67 Theme Builder Layout

Add Dynamic Content in 1st Text Module in Column 3

Add the dynamic content for the preparation title.

  • Body: Recipe Preparation Title

how-to-create-a-recipe-card-template-with-the-divi-theme-builder-68 Theme Builder Layout

Add Dynamic Content in 2nd Text Module in Column 3

Also, add the dynamic content for the preparations list to the last text module of the column.

  • Body: Recipe Preparation List

how-to-create-a-recipe-card-template-with-the-divi-theme-builder-69 Theme Builder Layout

Add 4th Row

Column Structure

To complete the template, we need a post content module. Add a new row using the following column structure:

how-to-create-a-recipe-card-template-with-the-divi-theme-builder-70 Theme Builder Layout

Sizing

Before adding a module, adjust the sizing of the row.

  • Custom gutter width: 2
  • Width: 100%
  • Max Width: 80%

how-to-create-a-recipe-card-template-with-the-divi-theme-builder-71 Theme Builder Layout

Spacing

Modify the spacing settings next.

  • Left + Right Padding: 0vw

how-to-create-a-recipe-card-template-with-the-divi-theme-builder-72 Theme Builder Layout

Column 1 Settings

Background

Style the column to match the recipe card above. First, add a background.

  • Background Color: White #ffffff

how-to-create-a-recipe-card-template-with-the-divi-theme-builder-73 Theme Builder Layout

Spacing

Also, adjust the spacing.

  • Left Padding: 0vw

how-to-create-a-recipe-card-template-with-the-divi-theme-builder-74 Theme Builder Layout

Border

Last but not least, modify the border settings.

  • Rounded Corners: 1vw all four corners
  • Border Styles: all four sides
  • Width: 5px
  • Color: Very Dark Grey #333333

how-to-create-a-recipe-card-template-with-the-divi-theme-builder-75 Theme Builder Layout

Leave Column 2 Empty.

Add Post Content Module to Column 1

Text

Add a post content module to column one and style the text to match the recipe card template.

  • Font: Encode Sans
  • Color: Very Dark Grey #333333
  • Size:
    • Desktop: 0.9vw
    • Tablet: 2vw
    • Phone: 3vw
  • Line Height: 2em

how-to-create-a-recipe-card-template-with-the-divi-theme-builder-76 Theme Builder Layout

Heading 1 Text

  • Font: Orienta
  • Color: Very Dark Grey #333333
  • Size:
    • Desktop: 2vw
    • Tablet: 5vw
    • Phone: 6vw

Heading 2 Text

  • Font: Orienta
  • Color: Very Dark Grey #333333
  • Size:
    • Desktop: 1.8vw
    • Tablet: 4.5vw
    • Phone: 5.5vw

Heading 3 Text

  • Font: Orienta
  • Color: Very Dark Grey #333333
  • Size:
    • Desktop: 1.6vw
    • Tablet: 4.5vw
    • Phone: 5vw

how-to-create-a-recipe-card-template-with-the-divi-theme-builder-77 Theme Builder Layout

how-to-create-a-recipe-card-template-with-the-divi-theme-builder-77 Theme Builder Layout

Spacing

To match the style of the recipe card, adjust the spacing values.

  • Top + Bottom Padding: 2vw
  • Left + Right Padding:
    • Desktop: 4vw
    • Tablet + Phone: 6vw

how-to-create-a-recipe-card-template-with-the-divi-theme-builder-78 Theme Builder Layout

If you want to change the color of the blockquote line or link color, you can do that in the theme customizer under accent color.

4. Edit / Create Post Using ACF Plugin Settings and Recipe Card Template

Input Custom Fields

Open or add a post. Below the content area, you will find all the custom fields for the recipe card template. In order to recreate this avocado toast design, fill in the fields as follows.

Recipe Title:

  • Supergreen Vegan Avocado Toast

Recipe Author:

  • Magdalena Swifter – www.veganchef.com

Recipe Prep Time:

Recipe Servings:

Recipe Flavor Tip:

  • Use sea salt flakes and extra virgin oil

Recipe Image:

  • Avocado Toast Image

how-to-create-a-recipe-card-template-with-the-divi-theme-builder-79 Theme Builder Layout

Recipe Ingredients Title:

  • Ingredients

Recipe Ingredients List:

  • 3 Whole Wheat Bread Slices
  • 1 Ripe Avocado
  • 100g. Cooked Broad Beans
  • 10g. Green Sprouts
  • 1 Chopped Spring Onion
  • 30g. Crumbled Feta Cheese
  • 1 Lemon Cut in Half
  • Dash of Olive Oil
  • Sprinkle of Sea Salt

Recipe Preparations Title:

  • Preparation

Recipe Preparations List:

  • 1. Toast the bread slices to your liking.
  • 2. Open the avocado, remove the pulp, mash with a fork.
  • 3. Squeeze lemon juice over the avocado, season with salt.
  • 4. Spread the avocado mash over the toast.
  • 5. Sprinkle the broad beans, sprouts and chopped spring onion.
  • 6. Season with salt.
  • 7. Add crumbled feta cheese.
  • 8. Finish off with olive oil.

how-to-create-a-recipe-card-template-with-the-divi-theme-builder-80 Theme Builder Layout

Give the Post a Title

Title

Don’t forget to add a title to your post.

  • Avocado Toast Recipe

how-to-create-a-recipe-card-template-with-the-divi-theme-builder-81 Theme Builder Layout

Add Content, Select Category, and Add Featured Image

Write or insert the content of the blog post into the regular editor. Select the recipes category and add a featured image.

how-to-create-a-recipe-card-template-with-the-divi-theme-builder-82 Theme Builder Layout

Recipe Card Template Preview

Once again, let’s take a look again at what the finished post with the recipe card template looks like on different screens.

Desktop

how-to-create-a-recipe-card-template-with-the-divi-theme-builder Theme Builder Layout

Tablet

how-to-create-a-recipe-card-template-with-the-divi-theme-builder-1 Theme Builder Layout

Mobile

how-to-create-a-recipe-card-template-with-the-divi-theme-builder-2 Theme Builder Layout

It’s a Wrap!

Let’s quickly review the steps we took to achieve this recipe card template design.

  1. Install the ACF plugin.
  2. Set up a recipe card field group.
  3. Add custom fields.
  4. Create a new template and assign it to blog posts under the ‘recipes’ category.
  5. Use dynamic content from ACF fields in the modules.
  6. Create or edit a blog post by filling in the fields.
  7. Add blog post content.

Since this design was created as a template with dynamic content, it will stay consistent throughout all recipe blog posts which use the ACF plugin custom fields. We hope that this recipe card template design inspires all sorts of new and innovative recipe templates for your food-related blogs. Let us know your thoughts in the comments.


Source

Share this article:
 




eHost-square-ad Theme Builder Layout

We’re listening.

Have something to say about this article? Share it with us on Facebook, Twitter or LinkedIn:

SHARE IT HERE:

Related Posts

Get ALL Your SEO, WordPress & Divi News

Join Our Daily Roundup

SEO News and More

SEO News and More

Subscribe ToThe Weekly SEO Trade News Updates

Get the latest SEO, SEM and SMM marketing intel, tips and tricks from one of the best SEO Gurus online. 

Every Tuesday morning we send out an aggregated email listing all new posts on SEO Trade News.

Excellent! Now check your email to confirm your subscription.