In this documentation, we will discuss the customization of the Dynamic Grid widget, brought to you by the Ultimate Post Kit Pro addon for Elementor.

🧩 Dynamic Grid Widget

The Dynamic Grid Widget allows you to display your posts, pages, or any custom post type in a flexible, responsive grid layout. It automatically fetches content from your WordPress database and showcases it beautifully with advanced layout and filtering options.

🔹 Key Features

• Dynamic Content Source – Display data from posts, pages, custom post types, ACF fields, or WooCommerce products.
• Multiple Layout Styles – Choose from Grid, Masonry, or Metro layouts to match your website’s design.
• Custom Query Options – Filter items by categories, tags, authors, or specific post IDs.
• Advanced Filtering & Sorting – Allow users to sort and filter content interactively.
• Customizable Design – Fully control the look of your grid items, including images, titles, excerpts, and metadata.
• Responsive & Lightweight – Ensures your content grid looks great on all devices while maintaining fast performance.

Enable The Dynamic Grid Widget

To use the Dynamic Grid widget from Ultimate Post Kit Pro, first, you have to enable the widget. Navigate to the WordPress Dashboard.

1. Go to Ultimate Post Kit Pro > Core Widgets section.
2. Search by the Widget Name ” Dynamic Grid ” and it will appear the.
3. Now Enable the Switcher of the Dynamic Grid.
4. Hit the Save Settings button.

Create Template for Dynamic Grid First

1. Navigate to the Templates section of WP Dashboard then click on the ” ADD NEW TEMPLATE ” button to and it will appear Form now click on it.

2. Select the type of template want to work with. Container.
3. Set the Name of the Template. e.g.: Dynamic Grid.
4. Once Done Click on the “Create Template ” button it will create a template and redirect to the Elementor Editor Page.

Create Custom Grid on the Template

Using this template, you can create any design you want, and it will appear on the front page. You can add any elements you like. Here, a simple design is demonstrated as an example.

Add Image Widget

It will work as a featured image.

1. Find the ” Image ” widget on the Widget panel and drag it.
2. Drop it on the page.

Dynamic Features image

1. Hover Over the image and it will appear the ” Dynamic Tags ” Icon and click on it.

2. It will appear the Ultimate Post Kit dynamic Content. Now Select the ” Featured Image “.

3. Post Type: Select Current Post as the post type. This will pull only the current post’s content from the source.
4. Fallback: Set an alternative image to display if the post’s featured image is not available.

Add Heading Widget

1. Click on the “+” icon to open the widget panel.
2. Search for the “Heading” widget and select it when it appears.
3. Drag the Heading widget.
4. Drop it onto the editor page.

Dynamic Post Title

1. Hover over the heading, and the “Dynamic Tags” icon will appear. Click on it to proceed.

2. Now, select “Post Title” as the dynamic post content. Choose it from the Ultimate Post Kit post section.

3. Post Type: Choose the Post type ” Current Post ” to pull data from the current post.

Dynamic Post Link

1. Link: Click on the “Dynamic Tags” icon in the link section and select the desired dynamic tag.

2. Post URL: Set the link to the post by selecting the post URL.

3. Post Type: Choose the post type in the settings. Set it to Current Post to display content from the current post.
4. Fallback: Set a fallback link. If there’s an issue loading the real link, the fallback link will act as a backup.

Add Text Editor Widget

1. Click on the “+” icon to open the widget panel.
2. Search for the widget named “Text Editor”, and it will appear in the results.
3. Select the widget, then drag.
4. Drop it onto the editor page.

Dynamic Text Select

1. Now, click on the “Dynamic Tags” icon to choose the dynamic tag for the post.

2. Now, select the “Post Excerpt” option to display the excerpt for the post.

3. Post Type: Choose the type of post you want to display. This will select content from the chosen post type.
4. Excerpt Length: Set the number of words to show in the post excerpt. For example, setting it to 10 will display only the first 10 words.
5. End Text: Enter the text to appear after the post excerpt, such as [ Read More ].
6. Link End Text: Enable this option to make the End Text clickable, linking it to the full post.

Customize the Design

1. You can set your own design for demonstrating the container if you prefer.

Once you have completed designing the template library, follow the steps provided and let us know your progress.

Insert Dynamic Grid Widget

1. Go to the Elementor Editor page and click the Add Element “+” icon.
2. Search for the Dynamic Grid widget by name.
3. The widget will appear — you can check the Element Pack Pro logo on the top-right corner.
4. Select the widget, then drag and drop it onto the editor page.

Content Tab Customization

Go to Content > Layout

Select the Custom Template

1. After inserting the Custom Template, you may see the message: “Oops! There is no template selected, please select a template first.” This means you need to select a template before proceeding.

Choose an already created template to continue.

Search by the template and select it

1. Search for the template by its name, for example: “Dynamic Grid.”
2. Once it appears in the results, select the template to apply it.

3. After selecting the template, the Dynamic Grid appears according to the template’s design. It automatically displays all the posts within the selected section.

4. Columns: Set the number of columns you want to display on the page.
5. Column Gap: Adjust the space between each column.
6. Row Gap: Adjust the space between each row.
7. Alignment: Choose the position of the content — Left, Center, Right, or Stretch.

Query

Go to Content > Query

1. Item Limit: Set the number of grid items to display. For example, if you set it to 4, only 4 items will appear.
2. Include Tab: Select the Include tab to add specific content to the query section.
3. Include By: Choose the criteria for including items, such as category or tag.
4. Terms: Search for and select the desired terms (tags or categories). The grid will display posts matching the selected terms..

Learn more about the Query follow the Link.

Designing with the Style Tab

The Style Tab offers a range of options to enhance the visual appearance of elements, enabling precise adjustments and creative design possibilities. It helps create polished and engaging layouts effortlessly.

Items Section

Go to Style > Items

Normal

1. Background Type: Choose the background type for the items. You can select either an image or a color. In this example, a color background is selected and applied.
2. Border Type: Choose the border style — Solid, Dashed, Dotted, etc.
3. Border Width: Set the thickness of the border.
4. Border Color: Select the color you want for the border.

5. Padding: Adjust the padding inside the grid item to control the spacing between the content and its border.
6. Box Shadow: Add a shadow effect to the grid item to create depth and highlight the box visually.

Hover

1. Background Type: Choose the background type for the items — either an image or a color. The selected background will appear when the mouse hovers over the item.
2. Border Color: Select the color for the border.
3. Box Shadow: Choose and apply a shadow effect to the box for better visual emphasis.

Video Assistant

Video Tutorial is Coming.
We appreciate your support.