Castly Documentation

What is Castly

Castly is a compiler that converts hand-built HTML and CSS into native Elementor. You give it a finished page, either as code or as a live URL, and it gives you back real Elementor containers, headings, buttons, images and forms, plus a design system kit and a written handoff report. The result is not a screenshot embedded in a widget and not a locked iframe. Every element is editable in the Elementor editor exactly as if someone had rebuilt the page there by hand.

Castly is built around three principles:

• Native first. Every element becomes the closest native Elementor widget. Only effects that Elementor has no control for, such as certain filters or decorative pseudo-elements, are carried over as small scoped style snippets, and each one is listed in your handoff report.
• Measured, not guessed. Castly renders your source page in a real browser at three device widths, measures every element, and verifies its own output against those measurements before you ever see it.
• Honest output. If a section could not be converted natively, the report says so. Anything that needs manual wiring after import, such as menu assignments or form actions, is spelled out step by step.

Quick start

The fastest path from code to a working Elementor page:

1. Create an account. Go to the sign up page, register with your email, and click the verification link we send you.
2. Open the app. After verification you land in the converter workspace.
3. Add your page. Paste your HTML, upload a file or a ZIP with assets, or enter a public URL.
4. Convert. Press the convert button. A typical page takes well under a minute; complex pages take longer because every section is verified before output.
5. Check the preview. Flip through the desktop, tablet and mobile previews and open the Report tab to see the fidelity score.
6. Import into WordPress. Download the kit and the page template, then import them in Elementor, kit first. Or install the Castly Connector plugin and push the result to your site with one click. Both paths are described below.

Your account

Signing up and verifying

Accounts are email based. After signing up you receive a verification email; the converter unlocks once you confirm the address. If the email does not arrive within a few minutes, check your spam folder or use the resend button on the waiting screen.

The account page

The account page shows your plan, your credit usage for the current period, and your personal API key. The API key is the credential the Castly Connector plugin uses to talk to your account. Treat it like a password: anyone who has it can convert on your behalf. You can reveal and copy it from the account page whenever you need it.

Passwords

You can change your password from the account page, or reset it from the sign in screen if you forgot it. Reset links are valid for one hour and can be used once.

The workspace

The converter workspace is a two-pane editor. The left pane holds your source input; the right pane shows the result.

• Source pane. Paste or upload your HTML here. A split mode gives you separate HTML and CSS editors when your styles live in a separate file.
• Device preview. After a conversion, switch between desktop, tablet and mobile to see the compiled result at each width, rendered the way Elementor will render it.
• Results tab. Lists every part the compiler produced: the page itself, plus separate header, footer and popup templates when your page has them. Each part has its own copy and download buttons.
• Report tab. The visual fidelity report for the conversion, described in detail below.
• Kit download. The design system kit extracted from your page: global colors, typography and breakpoints. Import it before the page templates.

Input formats

Castly accepts your page in four forms:

• Single HTML file. Paste it or upload it. Inline styles and style blocks are read as they are.
• Split HTML and CSS. Use the split editor when your stylesheet is a separate file. Castly joins them for the conversion.
• ZIP archive. Upload a ZIP containing your HTML together with its images, stylesheets and fonts. Local image paths are resolved from the archive, so the conversion sees the page exactly as you built it. Keep individual images under 4 MB.
• Public URL. Point Castly at a live page. The page is loaded in a real browser, so styles, fonts and images resolve naturally.

What you get back

A conversion produces a set of files, all standard Elementor formats:

Why the kit comes first: page templates reference the kit's global colors and fonts. Importing the kit first means every page you import after it is wired to your design system from the start.

The fidelity report

Every conversion is verified before you see it. Castly renders its own output, compares it against your source page at three device widths, and turns the comparison into a score.

• The overall score is a pixel-level similarity percentage per device. Simple pages routinely score 97 to 99. Complex pages with heavy effects usually land in the low to mid 90s.
• Per-section scores show which part of the page carries any difference, so you know exactly where to look instead of scanning the whole page.
• Side-by-side screenshots in the report let you compare source and output visually.
• Review flags. If the compiler noticed text or images it could not place, or a section scored below its own bar, the conversion is flagged for review with a note about what to check.

The report is exportable, so agencies can hand it to a client as proof of what was delivered.

Batch conversion

The batch screen converts several pages in one run. Give it a list of URLs or a sitemap, and Castly compiles each page and packages the results together. Shared parts are handled sensibly: the header and footer are compiled once, not once per page. Batch runs consume one conversion per page.

Manual import into WordPress

The manual path needs no plugin and works on any WordPress install with Elementor:

1. In WordPress, go to Elementor > Templates > Import Templates and upload the kit file first.
2. Import the page, header, footer and popup templates the same way.
3. Open the imported page template and publish it, or insert it into an existing page from the template library.
4. Follow the handoff report for any manual wiring: menu assignment, form recipients, and similar site-specific settings.

The Castly Connector plugin

The Connector is a small WordPress plugin that connects your site to your Castly account, so results land in WordPress without any file juggling. It also applies compatibility fixes on import that manual imports do not get, which is why we recommend it even if you prefer downloading files.

1. Download the plugin from the workspace or the dashboard.
2. Install and activate it in WordPress under Plugins > Add New > Upload Plugin.
3. Connect it. Open the plugin's settings page and paste the API key from your account page. The plugin registers your site with your account.
4. Push. Back in the Castly workspace, your connected site appears as a push target. One click sends the compiled result to WordPress: pages are created as drafts, templates land in the Elementor library, the kit is merged, and images are moved into the Media Library.

You can connect several sites; each push lets you choose the target. Disconnecting a site removes it from the list without touching anything already imported.

Headers, footers and popups

When your page has a real header or footer, Castly compiles them as separate templates instead of baking them into every page. After importing:

1. Open Elementor > Theme Builder.
2. Assign the imported header template to your site's header, and the footer to the footer, with the display conditions you want.
3. Navigation menus inside the header are listed in the handoff report with their full structure, so you can recreate the menu under Appearance > Menus and point the nav widget at it.

Popup templates import as Elementor popups; set their trigger conditions in the popup settings after import.

Updating a live page

When you change the source mockup and reconvert, you do not have to re-import from scratch and lose edits made in Elementor since the first import. The sync feature performs a three-way merge: it compares the new compile against the previous one, applies only what actually changed in your source, and keeps the edits your team made in the editor. Sync is available through the Connector plugin on pages that were originally pushed through it.

Projects and history

The dashboard keeps your conversion history automatically. Every conversion is saved with its parts, kit, report and score, so you can re-download or re-copy a result later without reconverting.

• Projects group related conversions, for example all pages of one client site. Create a project, then assign conversions to it from the history list.
• Renaming a conversion or project keeps your dashboard readable when you convert often.
• Reopening a history entry restores it into the workspace, previews and all.

Credits and plans

Castly is priced on credits. One conversion of one page costs one credit; a batch run costs one credit per page it contains. Before a large conversion the workspace shows a preflight estimate, so a multi-part run never surprises you.

• Each plan includes a monthly credit allowance; unused monthly credits do not roll over.
• Credit packs can be purchased on top of any paid plan and are used after the monthly allowance runs out.
• Plan details and current pricing are on the pricing page.

Dynamic content

By default Castly converts your page as static content, exactly as designed. If you are building for WooCommerce or a blog, you can annotate elements in your source HTML with data-h2e attributes and Castly maps them to dynamic Elementor widgets instead:

Forms are detected automatically: a real <form> element becomes an Elementor form widget with your actual fields when your plan includes Pro widget output, and a faithful static fallback otherwise. Wire the form's recipient address in Elementor after import; the handoff report reminds you.

Getting the best result

Castly reads computed styles from a real browser, so anything a browser can render can be converted. A few habits produce noticeably better output:

• Ship the assets with the page. Use the ZIP upload or public URLs for images and fonts. A page whose images cannot load converts with placeholders.
• Use semantic structure. A real <header>, <main> and <footer> give you separate Theme Builder templates. Real <h1> to <h6> headings become Elementor headings with the right tags for SEO.
• Design responsively in CSS. Castly measures your page at desktop, tablet and mobile widths and carries your media queries into Elementor's responsive controls. If the source only has a desktop layout, the output can only follow it.
• Keep text as text. Text baked into images cannot become editable content.
• Prefer standard CSS. Flexbox, grid, gradients, shadows, transforms and standard animations all convert. Highly exotic constructions may fall back to scoped styles, which still render correctly but are less editable.

Known limitations

We would rather tell you here than have you discover it mid-project:

• JavaScript-driven behavior such as custom sliders, particle backgrounds or scroll-jacking is not converted into Elementor controls. Canvas animations are preserved where possible; complex scripts are listed in the report instead of silently dropped.
• Entrance animations from common libraries convert to Elementor's native entrance animations. Continuous looping animations are carried as scoped styles.
• Videos referencing local files cannot play from a converted page; host the video and use its URL. The report warns you when it finds one.
• Pixel scores are a guide. Font rendering differs slightly between systems; a 98 and a 100 are usually indistinguishable by eye.

Reporting bugs in the beta

During the open beta every user is also a tester, and reports genuinely shape what gets fixed first. The app has a built-in reporter so you never need to leave the page:

1. Click the Feedback tab on the right edge of any app screen.
2. Pick a type: Bug, Idea or Question.
3. Write a one-line summary and describe what happened. For bugs, list the steps to reproduce; that is the single most useful thing you can give us.
4. Attach a screenshot if you have one. You can browse for a file, drag one in, or just paste from the clipboard with Ctrl+V. Up to 3 MB, png, jpeg or webp.
5. Send. The report goes straight to the team with your page and browser details attached automatically.

Troubleshooting

The conversion finished but images are missing

The source referenced files the service cannot reach, usually local paths. Re-run with the ZIP upload so images travel with the page, or host them publicly.

My page looks different at tablet width

Check the same width in your source first: the report compares against your page as it actually renders. If your source has no tablet styles, both sides will show the stretched desktop layout. If the source is right and the output is wrong, open the Report tab, find the section with the lowest score, and send us a bug report with the source attached.

The verification email never arrived

Check spam, then use the resend button on the waiting screen. If it still does not arrive, contact us through the contact page and we will verify you manually.

Import says the file is not a valid template

Make sure you are importing under Elementor > Templates > Import Templates, not the WordPress media library, and that the file is the unmodified download from Castly.

Something else

Use the in-app Feedback reporter or the contact page. We read every message.