Works with the AI Agents you already use
Claude Code
Cursor
Codex CLI
Muse
Dots+21 moreClaude CodeCursorCodex CLIMuseDots
Manus
Grok
Grok Bot+18 agentsClone Site to Elementor Pro
Converts webpage references into structured, responsive Elementor Pro build plans using native widgets.
$7.99
Clone Site to Elementor Pro
Example session with this skill installed
I need to rebuild my current landing page hero section in Elementor Pro. Here is a description: it has a split layout, a background gradient, a heading, a subhead, and two side-by-side buttons.
- Read your context and instructions
- Compiled the clone site to
I have analyzed your hero section requirements. The following plan utilizes native Elementor Flexbox Containers and Global Styles to ensure the layout remains lightweight and editable.
Elementor Implementation Plan: Hero Section
1. Global Design Tokens
| Token | Value (Estimated) | Elementor Setting |
|---|---|---|
| Primary Color | #3A47D5 | Global Colors > Primary |
| Secondary Color | #F8F9FA | Global Colors > Accent |
| Heading Typography | Inter, 600, 48px | Global Fonts > Primary |
| Body Typography | Inter, 400, 18px | Global Fonts > Text |
| Container Max Width | 1200px | Site Settings > Layout |
2. Widget Tree
- Container (Parent)
- Direction: Horizontal (Row)
- Justify Content: Space Between
- Padding: 80px 0px 80px 0px
- Background: Gradient (Primary to Secondary, 135deg)
- Container (Left Column - 60% width)
- Heading Widget (H1)
- Text Editor Widget (Subhead)
- Container (Inner - Horizontal)
- Button Widget (Primary)
- Button Widget (Secondary/Ghost)
- Container (Right Column - 40% width)
- Image Widget (Placeholder for Hero Asset)
3. Build Instructions
Main Container: Create a new container. Set width to Full Width, Content Width to 1200px. Apply the background gradient in the Style tab.
2. Left Column: Set this container to 60% width. Ensure the direction is Vertical.
3. Typography: Drag in a Heading. Link it to the Primary Global Font. Add a Text Editor below it for the subhead.
4.
Button Group: Use an Inner Container for the buttons. Set Direction to Horizontal and add a 20px gap between elements.
5.
Mobile Optimization: For Mobile Viewport, change the Parent Container direction to Vertical (Column) and set the Left/Right containers to 100% width. Center-align all text and buttons.
Next steps
- Set your Global Colors and Fonts in Elementor Site Settings before building.
- Upload your hero image asset and check the aspect ratio for the right-side container.
- Test the button interaction states (Hover/Active) in the Style tab.
Connects securely to your tools. The creator never sees your data.
About this skill
Rebuilding existing layouts in WordPress is a slow, manual process prone to spacing errors and bloated DOM structures. This skill streamlines the migration by analyzing source references and mapping them directly to a clean, native Elementor Pro implementation plan. It eliminates the guesswork involved in selecting widgets and setting responsive breakpoints.
What it does
- Structure mapping translates page screenshots or URLs into an ordered hierarchy of Elementor containers and nested sections.
- Widget selection identifies the specific native Elementor Pro widgets needed for every UI element to ensure full editability.
- Token definition extracts global styles, including typography roles, hex codes, and spacing scales for Site Settings.
- Responsive planning defines stacking behavior, font scaling, and visibility rules for desktop, tablet, and mobile views.
- Asset inventorying catalogs images, icons, and logos with recommended aspect ratios and object-fit settings.
How it works
- Source analysis where you provide a URL, screenshot, or HTML snippet and confirm your authorization to reproduce the design.
- Component mapping where the skill generates a detailed widget tree and identifies which native widgets to use for each section.
- Build instruction where it provides a step-by-step implementation guide including specific container settings and style values.
Frameworks & tools
Specifically designed for WordPress environments using Elementor Pro. It focuses on the Flexbox Container workflow and native widgets.
Why this beats prompting it yourself
General LLMs often suggest custom CSS or generic HTML for layouts, making the site hard to edit later. This skill prioritizes native Elementor components and global design tokens, ensuring the final build is maintainable, performant, and follows WordPress best practices.
Use cases
- Migrating a static HTML landing page to a manageable WordPress site.
- Rebuilding a client's old site in Elementor while maintaining visual consistency.
- Prototyping a layout based on a design reference with mobile-first logic.
- Auditing an existing Elementor build for responsive issues and widget optimization.
Known limitations
Does not perform automated site scraping or file downloading. Pixel-perfect accuracy requires manual verification of the final render. Requires user-supplied screenshots if URLs are behind logins.
Requires authorization to reproduce content. Cannot bypass paywalls or logins. No direct file export; provides structural plans for manual implementation.
How to use
- 1
Connect your agent to the Agensi MCP
Copy the prompt and paste it into Claude, ChatGPT, Cursor or any agent that supports MCP. It sets up the connection for you. Manual setup
- 2
Sign in to Agensi
Your agent shows a sign-in link. Sign in and click Allow.
- 3
Ask for what you need
Your agent loads this skill and uses it on your task. It always asks before any payment.
Reviews
No reviews yet
Be one of the first to try it. Every listed skill goes through the trust checks below.
Security scanned
Checked by our 8-point scan before listing
Fresh listing
Recently published to Agensi
Money-back guarantee
Doesn't do what its page promises? You get your money back.
Trust & safety
Security scan
Security scan passed 28 days ago
Permissions
No special permissions declared or detected