Accessible by default: what the page check catches
Headings, contrast, alt text, link names and more — the page check finds common problems before visitors do, and your AI can…
Content widget
Loop Grid
Your posts, products or any content in a grid of cards you design yourself, with pagination or load more.
Build it with your AI
“Show the six latest posts in a three-column grid using the Post card template, with numbered pages.”
Live demo
See it working
Why we built the Design System before the widgets
AI-built pages only look consistent when the AI has a design system to use. That is why Uncoder’s widgets read every color,…
Connect Cursor and VS Code to WordPress with MCP
Connect Cursor or VS Code to WordPress with a connection link. Follow the setup steps, check permissions, protect the link, and try…
Settings
35 settings in three tabs
Every setting below is in the editor — and available to your AI through get_widget_schema.
Content
18 settings
Layout
Loop item template
Columns
Masonry
Equal height
Featured image as CSS variable
Query
Query
Nothing found message
Alternate template
Alternate template
Position
Repeat
Column span
Pagination
Pagination
Previous text
Next text
Button text
Loading text
Button style
Alignment
Design
17 settings
Layout
Column gap
Row gap
Pagination distance
Pagination
Typography
Border radius
Space between
Text color
Background
Load more button
Typography
Border
Border radius
Padding
Text color
Background
Border color
Nothing found message
Typography
Color
Behaviour
shared
On every element
Spacing & position
Background & border
Animations
Motion & effects
Scroll & mouse effects
Visibility
Conditions
Interactions
Attributes & CSS
Build it with AI
Just describe what you want
Your AI looks up the Loop Grid settings over MCP and writes the element for you — real, editable and on brand.
Claude · connected to your site
You
Show the six latest posts in a three-column grid using the Post card template, with numbered pages.
Claude · using Uncoder
Done — it’s on your site and fully editable.
What the AI writes
loop-grid.jsonJSON
{
"type": "loop-grid",
"settings": {
"loop_template": "<Post card template id>",
"columns": 3,
"columns_tablet": 2,
"columns_mobile": 1,
"query": {
"source": "posts",
"post_type": "post",
"posts_per_page": 3,
"orderby": "date",
"order": "desc",
"terms": ["category:5", "category:6", "category:7"]
},
"column_gap": { "size": 16, "unit": "px" },
"row_gap": { "size": 16, "unit": "px" }
}
}More content widgets
Works well with
Breadcrumbs
Shows visitors where they are — Home › Blog › Post — and tells Google too, with structured data.
Code Highlight
Code in a tidy block with a file name, line numbers, highlighted lines and a copy button.
Loop Carousel
Your posts, products or any content, in a carousel of cards you design yourself.
Posts
A ready-made grid or list of posts with images, dates and excerpts.
Steps
A “How it works” row of numbered steps joined by a line.
Table
Data and comparison tables with striped rows, a sticky header and a caption.