Create SEO Optimized Food Recipe Layout With Divi Theme
Building a popular food blog creates incredible opportunities to grow your audience and monetize your content. Using the Divi Theme paired with Food Recipe Plugin For Divi provides everything you need to create visually stunning and search engine optimized recipe pages.
To create an engaging food blog, your recipe pages should include:
- Complete Recipe Information:
- Clear, descriptive recipe title
- Engaging brief summary
- High-resolution recipe image & step-by-step video
- Detailed ingredients & equipment lists with affiliate link monetization options
- Personalized author profile to build trust
- Comprehensive nutrition breakdown
- Interactive user ratings & review system (rating submission form, customer reviews list, and aggregate rating summary)
- Essential cooking metadata (preparation time, cook time, total time, cuisine type, and course type)
- Author notes and cooking tips
- Structured Recipe Schema (JSON-LD): Automated structured data designed to display rich recipe cards in Google search results and drive more organic traffic to your website.
Pre-Requisites
Section titled “Pre-Requisites”- A WordPress Website
- Divi Theme
- Food Recipe Plugin For Divi
Plugins & Theme Installs
Section titled “Plugins & Theme Installs”- Ensure the following plugins and themes are installed and active on your WordPress website:
- Divi Theme by Elegant Themes
- Food Recipe Plugin by WP Tools
- Site Reviews Plugin (powers user rating forms, review lists, and rating summaries)
FREE DOWNLOAD
Start your FREE trial. No credit card required.
Enable Divi Builder For “Food Recipes” Post Type
Section titled “Enable Divi Builder For “Food Recipes” Post Type”- The plugin creates a dedicated Food Recipes content type. Enable the Divi Builder for it:
- Go to WordPress Admin > Divi > Theme Options
- Click the Builder tab
- Click the Advanced tab
- Toggle Food Recipe from Disabled to Enabled
- Click Save Changes
FREE DOWNLOAD
Start your FREE trial. No credit card required.
Create Recipe Template In Divi Theme Builder
Section titled “Create Recipe Template In Divi Theme Builder”- Use the Divi Theme Builder to design a global template for all recipe posts:
- Go to WordPress Admin > Divi > Theme Builder
- Click Add New Template
- Under Template Settings, check All Food Recipes (or select specific recipe posts if desired)
- Click Add Custom Body, then click Build Custom Body
- Click Start Building inside the Divi Builder interface
- You are now ready to design your global Recipe Template using custom recipe modules.
FREE DOWNLOAD
Start your FREE trial. No credit card required.
Recipe Image Divi Module & Recipe Settings
Section titled “Recipe Image Divi Module & Recipe Settings”- The Recipe Image displays the primary photo of your completed dish.
- For optimal search engine presentation, upload high-resolution images matching common aspect ratios (16:9, 4:3, and 1:1).
- To add a recipe image:
- Go to WordPress Admin > Food Recipes
- Edit a recipe post using the standard WordPress editor
- Scroll to the Recipe Information meta box
- Select or upload your photo in the Image field
- To add the Recipe Image module to your template:
- Open your Recipe Template in the Divi Theme Builder
- Insert the Recipe Image Divi module onto the layout
- In the Recipe Image Settings, leave Select Recipe Post Item as
--Use Current Recipe Post-- - Customize image alignment, border radius, padding, box shadow, and custom CSS in the Design and Advanced tabs.
FREE DOWNLOAD
Start your FREE trial. No credit card required.
Recipe Title Divi Module & Post Data
Section titled “Recipe Title Divi Module & Post Data”- The Recipe Title represents the name of your dish.
- To set a recipe title:
- Go to WordPress Admin > Food Recipes
- Create a new recipe post or edit an existing post title
- To add the Recipe Title module to your template:
- Open your Recipe Template in the Divi Theme Builder
- Insert the Recipe Title Divi module
- Leave Select Recipe Post Item as
--Use Current Recipe Post-- - Customize font family, text color, size, spacing, and alignment in the Design tab.
FREE DOWNLOAD
Start your FREE trial. No credit card required.
Recipe Description Divi Module & Recipe Settings
Section titled “Recipe Description Divi Module & Recipe Settings”- The Recipe Description provides a short, engaging summary of your dish that search engines display in search snippets.
- To add a recipe description:
- Go to WordPress Admin > Food Recipes
- Edit the recipe post in the standard WordPress editor
- Scroll to the Recipe Information meta box and enter your summary in the Description field
- To add the Recipe Description module to your template:
- Open your Recipe Template in the Divi Theme Builder
- Insert the Recipe Description Divi module
- Leave Select Recipe Post Item as
--Use Current Recipe Post-- - Customize typography, color, margins, and borders in the Design tab.
FREE DOWNLOAD
Start your FREE trial. No credit card required.
Recipe Author Divi Module & Author Details
Section titled “Recipe Author Divi Module & Author Details”- Displays the author name, avatar image, and profile link to personalize your recipe pages.
- To set author details:
- Go to WordPress Admin > Food Recipes and edit a recipe post
- In the Recipe Information section, select an Author option:
- None: Do not display author details
- Post Author: Automatically pull the publishing WordPress user’s name, gravatar, and bio link
- Custom: Manually enter a custom author name, profile photo, and URL
- To add the Recipe Author module to your template:
- Open your Recipe Template in the Divi Theme Builder
- Insert the Recipe Author Divi module
- Configure avatar sizing, font styles, prefix text (e.g., “Recipe by”), and layout options in the Design tab.
FREE DOWNLOAD
Start your FREE trial. No credit card required.
Recipe Cuisine Divi Module & Cuisine Selection
Section titled “Recipe Cuisine Divi Module & Cuisine Selection”- Specifies the regional style of your dish (e.g., “Italian”, “Mexican”, or “Japanese”).
- To select a cuisine:
- Go to WordPress Admin > Food Recipes and edit a recipe post
- In the Recipe Information section, check pre-defined cuisines or type custom cuisine names
- To add the Recipe Cuisine module to your template:
- Open your Recipe Template in the Divi Theme Builder
- Insert the Recipe Cuisine Divi module
- Choose single-line or multi-line layout options and style label fonts in the Design tab.
FREE DOWNLOAD
Start your FREE trial. No credit card required.
Recipe Course Divi Module & Category Settings
Section titled “Recipe Course Divi Module & Category Settings”- Specifies the meal category (e.g., “Appetizer”, “Main Course”, or “Dessert”).
- To set a course category:
- Go to WordPress Admin > Food Recipes and edit a recipe post
- In the Recipe Information section, select course categories
- To add the Recipe Course module to your template:
- Open your Recipe Template in the Divi Theme Builder
- Insert the Recipe Course Divi module
- Customize title labels, layout orientation, and text typography in the Design tab.
FREE DOWNLOAD
Start your FREE trial. No credit card required.
Recipe Prep Time Divi Module
Section titled “Recipe Prep Time Divi Module”- Displays the duration required to prepare ingredients before cooking.
- To set prep time:
- Go to WordPress Admin > Food Recipes and edit a recipe post
- Under Recipe Information, enter prep time in hours and minutes
- To add the Recipe Prep Time module to your template:
- Open your Recipe Template in the Divi Theme Builder
- Insert the Recipe Prep Time Divi module
- Customize label text, display format, and font styling in the Design tab.
FREE DOWNLOAD
Start your FREE trial. No credit card required.
Recipe Cook Time Divi Module
Section titled “Recipe Cook Time Divi Module”- Displays the active cooking or baking duration.
- To set cook time:
- Go to WordPress Admin > Food Recipes and edit a recipe post
- Under Recipe Information, enter cook time duration
- To add the Recipe Cook Time module to your template:
- Open your Recipe Template in the Divi Theme Builder
- Insert the Recipe Cook Time Divi module and customize styling in the Design tab.
FREE DOWNLOAD
Start your FREE trial. No credit card required.
Recipe Total Time Divi Module
Section titled “Recipe Total Time Divi Module”- Displays the combined prep and cook time required for the dish.
- To add the Recipe Total Time module to your template:
- Open your Recipe Template in the Divi Theme Builder
- Insert the Recipe Total Time Divi module and customize layout and typography settings.
FREE DOWNLOAD
Start your FREE trial. No credit card required.
Recipe Nutrition Divi Module & Nutritional Data
Section titled “Recipe Nutrition Divi Module & Nutritional Data”- Displays detailed nutritional facts (calories, protein, carbohydrates, fats, sodium, fiber, etc.) to inform health-conscious visitors and enrich search schema.
- To add nutritional data:
- Go to WordPress Admin > Food Recipes and edit a recipe post
- In the Nutrition section, enter values for standard nutritional attributes or click Add Nutrition Attribute to enter custom metrics
- To add the Recipe Nutrition module to your template:
- Open your Recipe Template in the Divi Theme Builder
- Insert the Recipe Nutrition Divi module
- Set grid column counts for Desktop, Tablet, and Mobile views, and style nutrition cards and text in the Design tab.
FREE DOWNLOAD
Start your FREE trial. No credit card required.
Recipe Video Divi Module
Section titled “Recipe Video Divi Module”- Embeds step-by-step cooking videos from YouTube, Vimeo, Facebook, or self-hosted MP4 files.
- To add a recipe video:
- Go to WordPress Admin > Food Recipes and edit a recipe post
- Under Recipe Information > Video, select video type (YouTube ID, Vimeo ID, MP4 URL, or Facebook video link) and set a custom poster image
- To add the Recipe Video module to your template:
- Open your Recipe Template in the Divi Theme Builder
- Insert the Recipe Video Divi module and adjust aspect ratio, borders, and shadows in the Design tab.
FREE DOWNLOAD
Start your FREE trial. No credit card required.
Recipe Instructions Divi Module
Section titled “Recipe Instructions Divi Module”- Displays step-by-step cooking instructions with optional step images, video clips, or grouped sections (e.g., “Making the Crust”, “Preparing the Filling”).
- To add instructions:
- Go to WordPress Admin > Food Recipes and edit a recipe post
- In Instructions, choose Simple List or Grouped List
- Click Add Step to enter step titles, text descriptions, and step media
- To add the Recipe Instructions module to your template:
- Open your Recipe Template in the Divi Theme Builder
- Insert the Recipe Instructions Divi module
- Toggle Create Recipe Schema Data to
ONto output JSON-LD instructions schema - Customize step counter badges, image lightboxes, font sizes, and container borders in the Design tab.
FREE DOWNLOAD
Start your FREE trial. No credit card required.
Recipe Equipment Divi Module & Monetization Links
Section titled “Recipe Equipment Divi Module & Monetization Links”- Displays kitchen tools and appliances needed for the recipe, with optional affiliate purchase links to monetize your blog.
- To create reusable equipment items:
- Go to WordPress Admin > Food Recipes > Equipment
- Click Add Equipment and enter the tool name and featured photo
- Under Affiliate Information, add your custom Amazon or store affiliate link
- To assign equipment to a recipe post:
- Edit your recipe post and select equipment items from the multi-select list (drag and drop to reorder)
- To add the Recipe Equipment module to your template:
- Open your Recipe Template in the Divi Theme Builder
- Insert the Recipe Equipment Divi module
- Set grid column counts for Desktop, Tablet, and Mobile displays and customize icon styles in the Design tab.
FREE DOWNLOAD
Start your FREE trial. No credit card required.
Recipe Ingredients Divi Module & Affiliate Links
Section titled “Recipe Ingredients Divi Module & Affiliate Links”- Displays ingredients categorized into custom groups (e.g., “Dough Ingredients”, “Sauce Ingredients”) with affiliate purchasing options.
- To create reusable ingredient items:
- Go to WordPress Admin > Food Recipes > Ingredients
- Click Add Ingredient and add the name and optional affiliate link
- To assign ingredients to a recipe post:
- Edit your recipe post and click Add Ingredient Group
- Enter group names, add ingredient items, quantities, and measurement units (tbsp, cups, grams, etc.)
- To add the Recipe Ingredients module to your template:
- Open your Recipe Template in the Divi Theme Builder
- Insert the Recipe Ingredients Divi module
- Configure grid layouts, bullet icons, checkmark icons, and link typography in the Design tab.
FREE DOWNLOAD
Start your FREE trial. No credit card required.
Recipe Ratings Form Divi Module
Section titled “Recipe Ratings Form Divi Module”- Displays an interactive rating and review form for visitors to leave feedback on your recipes.
- Requires the free Site Reviews Plugin to be installed and active.
- To add the Recipe Ratings Form module to your template:
- Open your Recipe Template in the Divi Theme Builder
- Insert the Recipe Ratings Form Divi module
- Toggle star ratings, review content, name, email, and consent fields
- Customize input field borders, submit button colors, and error/success message typography in the Design tab.
FREE DOWNLOAD
Start your FREE trial. No credit card required.
Recipe Ratings List Divi Module
Section titled “Recipe Ratings List Divi Module”- Displays a list of customer reviews and ratings with optional AJAX pagination.
- To add the Recipe Ratings List module to your template:
- Open your Recipe Template in the Divi Theme Builder
- Insert the Recipe Ratings List Divi module
- Configure review counts, minimum star rating filters, author avatars, and pagination settings in the module options.
FREE DOWNLOAD
Start your FREE trial. No credit card required.
Recipe Ratings Summary Divi Module
Section titled “Recipe Ratings Summary Divi Module”- Displays a high-level summary of customer reviews, including average star rating score and percentage distribution bars.
- To add the Recipe Ratings Summary module to your template:
- Open your Recipe Template in the Divi Theme Builder
- Insert the Recipe Ratings Summary Divi module
- Toggle rating bars, average score text, and star colors in the Design tab.
FREE DOWNLOAD
Start your FREE trial. No credit card required.
Recipe Notes Divi Module
Section titled “Recipe Notes Divi Module”- Displays helpful chef notes, storage tips, or ingredient substitution recommendations.
- To add recipe notes:
- Go to WordPress Admin > Food Recipes and edit a recipe post
- Enter your notes in the Recipe Notes field
- To add the Recipe Notes module to your template:
- Open your Recipe Template in the Divi Theme Builder
- Insert the Recipe Notes Divi module and customize box shadows, padding, and font styling in the Design tab.
FREE DOWNLOAD
Start your FREE trial. No credit card required.
Multilingual Translation - Localize Fixed Recipe Text
Section titled “Multilingual Translation - Localize Fixed Recipe Text”
- To translate fixed recipe labels (such as “min”, “sec”, or “servings”) into your local language, use the child theme code snippet provided in our GitHub repository: GitHub Code Snippet.
FREE DOWNLOAD
Start your FREE trial. No credit card required.
Adding A Print Layout Button
Section titled “Adding A Print Layout Button”- Allow visitors to print clean, printer-friendly recipe cards:
- Add a Divi Button module with the link target set to
?print=1 - Clicking this button opens a dedicated print layout where users can toggle elements, adjust serving counts, and select paper sizes (A3, A4, or A5).
- Add a Divi Button module with the link target set to
FREE DOWNLOAD
Start your FREE trial. No credit card required.
Recipe Schema Verification & Rich Results Test
Section titled “Recipe Schema Verification & Rich Results Test”- Verify that your recipe pages generate valid JSON-LD schema for search engines using Google’s official testing tools:
- Log in to your WordPress dashboard and open a published recipe page
- Click Check Recipe Schema in the WordPress Admin Bar
- A new browser tab opens Google’s Rich Results Test with your page URL pre-filled
- Review the test results to confirm your recipe schema is valid and ready for Google Rich Search snippets.
FREE DOWNLOAD
Start your FREE trial. No credit card required.