STEP TWO OF FOUR

Adding a recipe card

One module holds the whole recipe.

Open the post in the Divi Visual Builder and add the Recipe Card module where the recipe should sit, usually after your introduction. Everything on the card comes from the module’s settings, so there is nothing to fill in anywhere else.

STEP ONE

Add the module

Hover over the module above where the card should go, click the plus that appears below it, and search for recipe. Choose Recipe Card. Recipe Jump Buttons, the other module, has its own article.

The Divi Insert Module dialog searched for recipe, showing the Recipe Card and Recipe Jump Buttons modules

STEP TWO

Find your way around

The Content tab is split into groups in the order a recipe is written: Recipe, Times and Servings, Ingredients, Method and Notes, Photo, Buttons and Ratings. Most fields are optional, and an empty one simply does not show on the card.

The Recipe Card Content tab with its seven groups closed, beside the card in the Visual Builder

STEP THREE

Name and describe the recipe

In Recipe, leave Recipe Name empty to use the post title, or type a shorter name for the card. Add a one or two sentence Short Description, and Course and Cuisine if you like. The card in the builder updates as you type.

The Recipe group: Recipe Name left empty, a Short Description, Course set to Dessert and Cuisine to Italian

STEP FOUR

Add the times and servings

In Times and Servings, enter whole minutes: 25, not 25 mins. The card adds up the total and writes it in hours and minutes. Use Extra Time for resting, rising or chilling, and give it a label such as Chill or Rise.

Serves should be one whole number, such as 8, so readers can scale the recipe. Servings Unit is for things like slices or cookies, and Calories per Serving is optional.

Times and Servings: Prep Time 25, Cook Time empty, Extra Time 360 labelled Chill, Serves 8. The card shows Prep 25 mins, Chill 6 hrs, Total 6 hrs 25 mins

STEP FIVE

Choose the photo

The card uses the post’s featured image unless you choose another in Photo. Set Show Photo to No for a card without one.

The Photo group with no image chosen, so the card uses the featured image, and Show Photo set to Yes

STEP SIX

Choose the buttons

Buttons switches the Print Recipe and Pin Recipe buttons on the card on or off. The Pin button only appears when the card has a photo, because a Pinterest pin is an image.

The Buttons group with Show Print Button and Show Pin Button both set to Yes

STEP SEVEN

Save and take a look

Save the post and view it. This is the card your readers see. On a phone the photo moves above the recipe name and the times sit two by two.

The finished card: recipe name, description, average rating, Print and Pin buttons, photo, and the Prep, Chill, Total and Serves strip

The same card on a phone, with the photo above the recipe name

GOOD TO KNOW

Before you add more

ONE CARD PER POST

Each post holds one Recipe Card. The Jump button, the print view and Google’s recipe data all use the first card on the page.

IT FOLLOWS YOUR DIVI SETTINGS

The card takes your Divi global colours and fonts, so it matches your site from the start. Styling the card shows how to change them for the card alone.

Writing ingredients and method

READ THE ARTICLE

Back to Recipe Card - Getting Started