The Recipe Categories Tab Widget lists all the Recipe Categories belonging to a selected Recipe Taxonomy in a tab format and also displays all the recipe posts belonging to each category in the form of a slider.
The site visitors can switch between the category name and explore the corresponding recipes that they’re interested in.
How to add a Recipe Categories Tab Widget? #
- Click to edit the page/post where you want to add the Recipe Categories Tab 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 Categories Tab
- Drag the Recipe Categories Tab widget to the added Section
Recipe Categories Tab Settings #
Layout Setting #
Layout: Choose your preferred layout for the Recipe Categories Tab.
Grid Gap: Adjust the spacing between each recipe grid in the recipe slider.
Query Setting #
No. of Posts: Select the number of recipe posts you want to display for each recipe category.
Offset: Enter the number of latest published recipe posts you want to skip.
Taxonomy: Select the Recipe Taxonomy of whose categories you want to display inside the Recipe Categories Tab widget.
Terms: Avoid this field if you want to display all the added categories. But if you want to display only specific categories inside the Recipe Categories Tab widget then you can select those categories here.
Order by: Here you can select the feature based on which you want to order the 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 displayed via the Recipe Categories Tab widget.
Additional Setting #
Heading Title: Enter the title for the Recipe Categories Tab section.
Heading Tag: Select the heading tag you want to apply to the Recipe Categories Tab section title.
Title: Enable this option to display the recipe post title.
Title Tag: Select the heading tag you want to apply to the recipe post title.
Total time: Enable this option to display the total preparation time for the recipes.
Difficulty: Enable this option to display the difficulty level of each recipe.
Content Setting #
Overlay Color: Here you can select the overlay color for the recipe posts listed.
Padding: Here you can set the padding value for the recipe post content.
Border Radius: Enter the border-radius value for the recipe post grid.
Alignment: Select the alignment for the recipe post content.
Tabs Setting #
Margin: Enter the margin value for the Recipe Categories Tab.
Border Type: You can assign a border style for the Recipe Categories Tab.
Width: Select a width value for the border added.
Color: Select a color for the border added.
Heading Title Color: Select a color for the Recipe Categories Tab section title.
Heading Title Background Color: Select a background color for the Recipe Categories Tab section title.
Heading Title Padding: Enter the padding value for the Recipe Categories Tab section title.
Heading Title Typography: Configure the typography setting for the Recipe Categories Tab section title.
Normal/Hover: Choose the ‘Normal’ option to configure the design setting for the individual recipe category tab in a normal state. And, choose the ‘Hover’ option to configure the design setting for the individual recipe category tab in the hover state.
Tab Items Color: Select a color for the tab items.
Tab Items Background Color: Select a background color for the tab items.
Tab Items Padding: Enter the padding value to apply for the tab items.
Tab Items Border Radius: Enter the border-radius value for the tab items.
Tab Items Item Spacing: Select the spacing to apply between each tab item.
Tab Items Typography: Configure the typography setting for the tab item here.
Slider Arrows Setting #
Normal/Hover: Choose the ‘Normal’ option to configure the design setting for the slider arrows in a normal state. And, choose the ‘Hover’ option to configure the design setting for the slider arrows in the hover state.
Color: Select the color for the slider arrows here.
Background Color: Select the background color for the slider arrows.
Border Type: You can apply a border to the slider arrow container via this option. Choose your preferred border type here.
Border Width: Enter the value for the border width.
Border Color: Select a border color.
Title Setting #
Color: Select a color for the recipe post title.
Hover Color: Select a hover color for the recipe post title.
Typography: Configure the typography setting for the recipe post title.
Recipe Metas Setting #
Icon Size: Select the icon size for the recipe meta.
Icon Color: Choose your preferred icon color for the recipe meta.
Typography: You can configure the typography setting for the recipe meta text here.
Text Color: Choose a color for the recipe meta text.
Spacing Between: Select the spacing value to apply between the recipe meta.
