View Categories

Recipe Post List 4

You can add the Recipe Post List 4 widget via the Elementor page editor.

Below are the settings you can configure to set up the Recipe Post List 4.

Layout Settings #

  • Layout: Select from all available layouts.
  • Row Gap: Set the gap between each box in the rows.

Query #

  • Number of Post: Determine how many recipe posts to display in this widget.
  • Offset: Set the offset for the widget, defining which posts to start displaying from.
  • Filter by: Choose the recipes that you want to display (e.g., latest recipes, categories of recipes )
  • Order by: Choose the criteria for displaying posts (e.g., published date, title, views).
  • Order: Decide the order in which posts should be displayed.
  • Exclude Recipe: Select recipes that you want to exclude from being displayed in this widget section.

Additional #

  • Heading Tag: Select the header tag for the post titles.
  • Total Time: Enable or disable the toggle to show the preparation time for the cuisine.
  • Difficulty: Enable or disable the toggle to show the difficulty level of the recipe.

Pagination #

  • Show Pagination: Toggle to enable or disable pagination on your content listings.
  • Pagination Type: Choose how the pagination should appear. Options include: Numbers and Load More Button.
  • Previous Label: Customize the text for the “Previous” button.
  • Next Label: Customize the text for the “Next” button.
  • Alignment: Set the alignment of the pagination controls. Options include Left, Center, and Right, allowing you to position the navigation as needed within your layout.

Content #

  • Background: Set the background color for the content of the widget.
  • Padding: Adjust the padding around the section.
  • Margin: Set the margin for the widget section.
  • Border Type: Select the border type for the widget section.
  • Border Radius: Set border radius for the widget section.
  • Box Shadow: Configure the box shadow for the widget content.
  • Alignment: Set the alignment for the content of the widget.
  • Content Padding: Configure padding around the content of the widget.

Featured Image #

  • Image Size: Select the aspect ratio for the featured image of the recipe post.
  • Width: Specify the width of the image.
  • Height: Specify the height of the image.
  • Border Radius: Define the border radius for the images.
  • Image Scale: Choose the image scaling option to display the featured image of the post.

Counter #

  • Color: Pick a color for the recipe counter.
  • Typography: Select a typography style for the counter title.
  • Background Color: Choose a background color for the counter section.
  • Counter Border Radius: Set a border-radius for the counter section.
  • Padding: Configure the padding around the counter section.

Title #

  • Color: Set the color of the post titles displayed in this widget.
  • Hover Color: Set the color for the post titles when hovered over.
  • Typography: Choose and configure the typography for the post titles.
  • Bottom Spacing: Adjust the bottom spacing for the recipe post title.

Recipe Metas #

  • Icon Size: Select the size of the category icons.
  • Icon Color: Choose the color for the icons in Recipe Metas.
  • Text Color: Select the text color for the Recipe Metas.
  • Spacing: Adjust the space between the Recipe Metas.

Pagination (Style) #

If you have selected “Number” as the pagination type in the settings, additional customization options will be available. You can configure the appearance of the numbered pagination using the settings below:

  • Padding: Adjust the inner spacing within each pagination item.
  • Margin: Set the outer spacing around the pagination element.
  • Typography: Customize the font style, size, weight, and other text properties for the pagination numbers.
  • Border Type: Choose the border style (solid, dashed, dotted, etc.) for pagination items.
  • Border Radius: Set the corner roundness of the pagination items for a softer or sharper look.

Pagination Styling:

  • Padding: Define internal spacing for each pagination item.
  • Spacing Between Items: Set the distance between each pagination number.
  • Color: Customize the text color for three states — Normal, Active, and Hover.
  • Background: Set the background color for each pagination state — Normal, Active, and Hover.
  • Prev/Next Hover Color: Define the text color specifically for the Previous and Next buttons when hovered.
  • Border Type: Select the border style for pagination elements.
  • Border Radius: Adjust the roundness of pagination elements’ corners for visual styling.

Load More Button #

If you have selected “Load More Button” in the pagination settings, you’ll see the following options to customize the appearance of the button:

  • Margin: Adjust the space around the Load More button.
  • Padding: Set the inner spacing within the button for better sizing and alignment.
  • Typography: Customize the font style, size, and weight of the button text.
  • Background Color: Set the background color for both normal and hover states of the button.
  • Text Color: Choose the text color for both normal and hover states.
  • Border Type: Define the border style (solid, dashed, etc.) for both normal and hover states.
  • Border Radius: Adjust the corner roundness of the button.