With the Recipe Posts widget, you can either display a list of the latest recipes on your website or you can display the recipe posts belonging to the selected category/s. This widget can only be added to the page/posts that you create via Elementor.
The Recipe Posts widget also provides you with the option to control the display of different recipe meta information and the order in which the listed recipes are displayed.
How to add Recipe Posts Widget? #
- Click to edit the page/post where you want to add the Recipe Posts widget
- Once you are on the page/post editor, click on Edit with Elementor
- Add a Section by clicking on the ‘+’ icon and select the Section structure
- Click on the Elementor icon to display the Elements option.
- On the Search Widget field, search for Recipe Posts
- Drag the Recipe Posts widget to the added Section
Recipe Posts Settings #
Layout Setting #
Layout: Choose your preferred layout to display the recipe posts.
Recipes per Row: Select the number of recipes you want to display in a row.
Columns Gap: Adjust the column gap between the recipe posts.
Rows Gap: Adjust the row gap between the recipe posts.
Query Setting #
No. of Posts: Enter the number of posts you want to display via the Recipe Posts widget.
Offset: Enter the number of latest published posts you want to skip.
Filter By: Through this option, you can choose to either display the latest published recipes or the recipes based on the selected category/s.
Taxonomy: This option is only visible when you choose the Taxonomy option in the Filter By setting. You can select a Recipe Taxonomy of whose recipe posts you want to display via the Recipe Posts widget.
Terms: This option is visible once you select a Recipe Taxonomy from the Taxonomy field. Click on the “+” icon to select the recipe categories of whose recipe posts you want to display via the Recipe Posts widget.
Order by: Here you can select the feature based on which you want to order the listed recipe posts.
Order: You can choose to display the recipe posts in ascending or descending order from the selected order feature.
Exclude Recipes: Here you can select the recipe posts that you do not want to be listed via the Recipe Posts widget.
Additional Setting #
Featured image: Enable this option to display the featured image of the recipe posts listed.
Title: Enable this option to display the recipe title.
Heading Tag: Select the heading tag you want to apply to the recipe title.
Total time: Enable this option to display the recipe preparation time.
Difficulty: Enable this option to display the difficulty level of the recipe in the recipe card.
Recipe keys: Enable this option to display the recipe keys in the recipe card.
Excerpt: You can enable this option to display the excerpt added for each recipes inside the recipe posts list.
Excerpt Length: This option is visible when the Excerpt option is enabled. You can enter the excerpt length value here.
Author: Enable this option to display the author of the listed recipes inside the recipe card.
Rating: Enable this option to display the ratings received by each recipes.
Comment: Enable this option to display the number of comments received by each recipes.
Published Date: You can display the date when a recipe was published by enabling this option.
Category: Enable this option to display the recipe categories assigned to the listed recipes.
Read More: Enable this option to display the Read more button inside the recipe card.
Read more text: Here you can enter the label for the Read more button. This option is only visible when the Read More option is enabled.
Content Setting #
Background: You can choose a background color for the recipe card via this option.
Padding: Here you can set the padding value for the recipe card content.
Margin: Here you can set the margin value for each recipe post listed.
Border Type: You can assign a border style for the recipe posts.
Width: Select a width value for the border added.
Color: Select a color for the border added.
Border Radius: Enter the border radius value for the recipe posts.
Box Shadow: Configure this setting to apply a box shadow effect to each recipe posts listed.
Alignment: Select the alignment for the recipe card content.
Separator Setting #
Separator: Select a separator symbol that you want to use to separate the recipe meta descriptions on the recipe card.
Image Setting #
Image Size: Select your preferred image size for the recipe posts thumbnail image.
Width: Choose the width value for the recipe image.
Height: Choose the height value for the recipe image.
Border Radius: Enter the border radius value for the recipe image.
Image Scale: Select your preferred image scaling option.
Title Setting #
Color: Select the recipe title color here.
Hover Color: Select the hover color for the recipe title.
Margin: Enter the margin value for the recipe title.
Typography: Configure the typography setting for the recipe title.
Excerpt Setting #
Typography: Configure the typography setting for the excerpt text.
Text Color: Select a text color for the excerpt.
Alignment: Select the alignment for the excerpt text.
Recipe Keys Setting #
Icon Size: Select the Recipe Keys icon size.
Space Between: Choose the space value between the Recipe Keys.
Alignment: Select the alignment for the Recipe Keys.
Recipe Metas Setting #
Icon Size: Select the icon size for the Recipe Metas icon.
Icon Color: Select your preferred icon color.
Typography: Configure the typography setting for the Recipe Metas text.
Text Color: Select your preferred text color.
Spacing: Select the spacing value between the Recipe Metas.
Alignment: Select the alignment for the Recipe Metas.
Category Setting #
Space Between: Select the spacing value between the recipe categories.
Item Padding: Enter the padding value for each recipe category.
Normal/Hover: Choose the ‘Normal’ option to configure the design setting for the recipe category in a normal state. And, choose the ‘Hover’ option to configure the design setting for the recipe category in the hover state.
Color: Select the text color for the recipe category.
Background: Select a background color for the recipe category.
Border Type: You can apply a border to the recipe category text via this option. Choose your preferred border type here.
Width: Enter the value for the border width.
Color: Select a border color.
Border Radius: Enter the border-radius value.
Margin: Enter the margin value you want to apply to the recipe category.
Typography: Configure the typography setting for the recipe category text.
Alignment: Select the alignment for the recipe categories.
Read More Button Setting #
Read More Arrow: Enable this option to display the Read More button linking to the actual recipe post. The Read More button only appears if you have added excerpt content for your recipe post.
Normal/Hover: Choose the ‘Normal’ option to configure the design setting for the Read More button in a normal state. And, choose the ‘Hover’ option to configure the design setting for the Read More button in the hover state.
Text Color: Select a color for the Read More text.
Color: Select a background color for the Read More button.
Border Type: Choose a border type to add a border for the Read More button.
Border Width: Enter the value for the border width.
Border Color: Select a color for the border.
Border Radius: Enter the value for the border-radius.
Box Shadow: Configure this setting to apply a box-shadow effect to the Read More button.
Padding: Enter the padding value for the Read More button.
Margin: Enter the margin value for the Read More button.
Typography: Configure the typography setting for the Read More button text.
Alignment: Select the alignment for the Read More button.
