The Repeater Grid widget for Elementor allows you to display dynamic content in a structured grid layout effortlessly. Whether you’re working with ACF, JetEngine, Meta Box, or Toolset, this widget helps you showcase repeater fields in a visually engaging grid format. With its flexible customization options and seamless integration, you can create dynamic content displays that enhance your website’s interactivity.
Let’s look at each of the options in the Repeater Grid widget for Elementor below.
Add a Repeater Grid Widget to Elementor
This widget requires Unlimited Elements Pro version installed and activated on your WordPress website.
- Go to Unlimited Elements Widget Library
- Search in the search bar for “Repeater Grid”
- Hover over the widget in the search results and click install
- Add the “Repeater Grid” widget to any Elementor Page
Repeater Settings
Repeater Source
You can select the repeater source from below options.
- Meta Fields: Use meta fields from the current post or a custom post type as the source.
- JSON / CSV: Import data from uploaded JSON or CSV files.
- Google Sheets: Connects to a Google Sheets file as the data source.
Meta Field Name
Specify the name of the meta field that contains the repeater data.
Meta Field Location
- Current Post: Use this option to fetch meta field data from the currently displayed post.
- Parent Post: Select this option to fetch meta field data from the parent post of the current post.
- Select Post: Choose this option to manually select a specific post as the source of meta field data.
- Current Term: Use this option to fetch meta field data from the currently displayed taxonomy term.
- Parent Term: Select this option to fetch meta field data from the parent taxonomy term of the current term.
- Current User: Use this option to fetch meta field data from the currently logged-in user.
Show Debug Data
Toggle this option to display raw data for testing and debugging purposes.
Show Debug Meta
Toggle this option to display meta information for debugging purposes.
Title Field Name
Type the title field name.
Content Field Name
Set the content field name.
Image Field Name
Specify the field name for image.
Button Link Field Name
Specify the field name for the button link URL.
General Settings
Grid Columns
Set the number of columns in the grid layout.
Grid Gap
Adjust the space (in pixels) between grid items.
Force Metro Layout
Enable to arrange grid items in a masonry-like layout where items of different heights are positioned dynamically to reduce empty spaces, rather than aligning strictly in rows.
Open Link in New Tab
Enable to open linked items in a new browser tab.
Link Full Item
Enable to make the entire item clickable instead of just the link.
RTL
Enable to switch the layout's text direction to right-to-left (RTL), suitable for languages like Arabic, Hebrew, and Persian.
Transition Duration (ms)
Set the animation transition duration in milliseconds.
Layout Settings
Show Title
Show or hide the title of the grid item.
Title Tag
Set the HTML tag for the title element.
- div
- h2
- h3
- h4
- h5
- h6
Show Image
Enable or disable displaying an image.
Fallback Image
Set a default image to be used when no image is provided for a carousel item.
Fallback Image Size
Define the size of the fallback image.
- Full
- Large (max width 1024)
- Medium Large (max width 768)
- Medium (max width 300)
- Thumbnail (150x150)
- 1536x1536 (max width 1536)
- 2048x2048 (max width 2048)
- Woocommerce Thumbnail (300x300)
- Woocommerce Single (max width 600)
- Woocommerce Gallery Thumbnail (100x100)
Show Content
Show or hide the content.
Content Number of Characters
Set the maximum number of characters to display in the content.
Show Button
Enable or disable displaying a button.
Button Text
Define the text displayed on the button.
Show Button Icon
Enable to display an icon alongside the button text.
Button Icon
Select an icon to be used within the button.
Show Item Counter Index
Enable to display an index number for each item in the layout.
Animations Settings
Entrance Animation
Set the entrance animation:
- None
- Appear
- Scale Down
- Scale Up
- From Left
- From Right
- From Top
- From Bottom
Item Hover Animation
Set the item hover animation:
- Grow
- Shrink
- Pulse
- Pulse Grow
- Pulse Shrink
- Push
- Pop
- Bounce In
- Bounce Out
- Rotate
- Grow Rotate
- Float
- Sink
- Bob
- Hang
- Skew
- Skew Forward
- Skew Backward
- Wobble Vertical
- Wobble Horizontal
- Wobble To Bottom Right
- Wobble To Top Right
- Wobble Top
- Wobble Bottom
- Wobble Skew
- Buzz
- Buzz Out
Button Hover Animation
Set the button hover animation:
- Grow
- Shrink
- Pulse
- Pulse Grow
- Pulse Shrink
- Push
- Pop
- Bounce In
- Bounce Out
- Rotate
- Grow Rotate
- Float
- Sink
- Bob
- Hang
- Skew
- Skew Forward
- Skew Backward
- Wobble Vertical
- Wobble Horizontal
- Wobble To Bottom Right
- Wobble To Top Right
- Wobble Top
- Wobble Bottom
- Wobble Skew
- Buzz
- Buzz Out
Repeater Grid Widget Styling
You can customize every aspect of the widget’s design, including colors, text, icons, fonts, and layout, to perfectly match your website’s style.
Item Styling
Set the item padding, margin, radius, background, border, and shadow.
Image Styling
You can set the image height, radius, padding, border, and positioning.
Content Styling
Set the content alignment, padding, margin, background, and border.
Title Styling
You can set the title color, typography, and spacing.
Text Styling
Set the text color, typography, and spacing.
Button Styling
Here, you can set the typography, width, alignment, spacing, padding, radius, and border of button.
Button Icon Styling
Set the icon size, gap, and color.
Repeater Grid Design Examples For Elementor
Here are some live use cases for the Repeater Grid Widget.
Repeater Grid with nutrition information.
Team member details as repeater grid.
We hope this guide helped you explore the powerful features of the Repeater Grid Widget. With its ability to transform repeater fields into structured grid layouts, along with support for ACF, JetEngine, Meta Box, and Toolset, you can showcase dynamic content with ease. If you have any questions or need further assistance, feel free to reach out. Happy designing!
