---
title: Recipe Grid 1
description: "You can add the **Recipe Grid 1** widget via the Elementor page editor. ![](https://wpdelicious.com/wp-content/uploads/2024/06/recipe-grid-1-1024x359.png) Below are the settings you can configure to set up the Recipe Grid 1: #### Layout - **Choose Layout**: Select from available layouts. - **Recipe per Row**: Specify…"
url: "https://wpdelicious.com/docs/recipe-grid-1/"
updated: "2025-04-18"
category: Delisho (Free)
---

# Recipe Grid 1

You can add the **Recipe Grid 1** widget via the Elementor page editor.

![](https://wpdelicious.com/wp-content/uploads/2024/06/recipe-grid-1-1024x359.png)

Below are the settings you can configure to set up the Recipe Grid 1:

#### Layout

- **Choose Layout**: Select from available layouts.
- **Recipe per Row**: Specify how many categories should be displayed in each row.
- **Column Gap**: Set the gap between each box in the columns.
- **Row Gap**: Set the gap between each box in the rows.

![](https://wpdelicious.com/wp-content/uploads/2024/06/layout-9.png)

#### Query

- **Number of Posts**: 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.

![](https://wpdelicious.com/wp-content/uploads/2024/06/query-9.png)

#### Additional

- **Featured Image:** Enable or disable the toggle to display featured image of the recipe post.
- **Title:**Enable or disable the toggle to display title of recipe post.
- **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.
- **Recipe Keys**: Enable or disable the toggle to display recipe keys of posts.
- **Excerpt**: Enable or disable the toggle to display an excerpt of the recipe post.
- **Except Length**: Set a length for excerpt.
- **Author**: Enable or disable the toggle to display author of the recipe post.
- **Comments**: Enable or disable the toggle to display comments on the recipe post.
- **Published Date**: Enable or disable the toggle to display the published date of the recipe post.
- **Rating**: Enable or disable the toggle to display the rating of the recipe post.

![](https://wpdelicious.com/wp-content/uploads/2024/06/additional-9.png)

#### 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.

![](https://wpdelicious.com/wp-content/uploads/2024/06/Screenshot_041825_022823_PM.jpg)

#### Content

In the “Content” tab, you can modify various aspects of the widget section. The available settings include:

- **Background Color**: Choose the background color for the widget section.
- **Padding**: Adjust the padding around the content within the widget section.
- **Margin**: Set the margin for the widget section.
- **Border Type**: Select the border type for the widget section.
- **Box Shadow**: Configure the box shadow for the post boxes within the widget section.
- **Border Radius**: Set the border radius to control the roundness of the corners.

![](https://wpdelicious.com/wp-content/uploads/2024/06/content-9.png)

#### Separator

- **Separator**: Select a separator to divide the recipe metadata.
- **Separator Color**: Choose a color for the separator.

![](https://wpdelicious.com/wp-content/uploads/2024/06/separator-5.png)

#### 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.
- **Alignment:** Choose the alignment for the images.

![](https://wpdelicious.com/wp-content/uploads/2024/06/image-6.png)

#### 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.
- **Margin: **Set a margin around the title of the post.
- **Typography**: Choose and configure the typography for the post titles.
- **Bottom Spacing:** Set the bottom spacing of the recipe title.

![](https://wpdelicious.com/wp-content/uploads/2024/06/Title-5.png)

#### Excerpt

- **Text Color**: Set the color for the recipe post excerpts.
- **Typography**: Choose the typography for the excerpts.
- **Alignment:**Choose alignment for the excerpts.

![](https://wpdelicious.com/wp-content/uploads/2024/06/excerpt-2.png)

#### Recipe Keys

- **Icon Size**: Set the size for the recipe key icons.
- **Space Between**: Define the space between the icons.
- **Alignment**: Select the alignment for the recipe key icons.

![](https://wpdelicious.com/wp-content/uploads/2024/06/recipe-keys-4.png)

#### 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.

![](https://wpdelicious.com/wp-content/uploads/2024/06/recipe-Metas-5-1.png)

#### Category

- **Space Between:** Set space between categories of the recipes.
- **Item Padding:** Set padding around the category of recipes.
- **Color:** Select a normal and hover color for the category text.
- **Background:** Select a normal and hover the background color of the category text.
- **Border Type:** Choose the border type for the button.
- **Border Radius:** Set the border radius for the button.
- **Margin:** Set the margin around the category of the recipe.

![](https://wpdelicious.com/wp-content/uploads/2024/06/category-6.png)

#### 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.

![](https://wpdelicious.com/wp-content/uploads/2024/06/Screenshot_041825_030216_PM.jpg)

#### 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.

![](https://wpdelicious.com/wp-content/uploads/2024/06/Screenshot_041825_030633_PM.jpg)