Workflow & evidence

Import your Code2Builder result into Elementor

Export a template JSON file, import it through Elementor's template library and insert it into a separate draft. Verify the actual controls and save/reload behavior before replacing production content.

Requirements and tested versions

Use an authorised WordPress installation with Elementor active and containers enabled. The generated heading, text, image, button, container and HTML widgets are core Elementor structures; this path does not depend on Pro-only widgets or Pro Custom CSS controls.

Existing isolated acceptance records used WordPress 7.1.2, Elementor 4.3.2, PHP 8.3.6 and MariaDB 10.11.14 with Code2Builder engine 0.5.0. Those records establish native document API import and persistence. They do not establish a completed browser-control editing workflow or universal compatibility with other versions. The earlier staging server is currently unavailable; repeat acceptance on your actual versions.

Download the right file

In the conversion workspace, choose Download Elementor template after reviewing the result. This produces the template object with content, title and Elementor format fields. It is not a WordPress plugin ZIP, a full website kit or a screenshot.

History storage can contain a service wrapper with version, template, counts and issues. Do not upload that wrapper as the Elementor template. Use the workspace's template download, or extract the template object when working with an archived service export. Keep your original HTML, CSS and warning report alongside the JSON.

Import through the template library

The following is Elementor's documented template-library import path. Exact labels can vary by editor version; the full browser sequence still needs acceptance on your authorised staging site.

  1. Back up your site and create a separate draft page. Open it with Elementor.
  2. Open the template library from the editor's library/folder control.
  3. Choose the import/upload control and select the downloaded .json template.
  4. Find the imported item in My Templates and insert it into the draft.
  5. Review the structure panel and generated widgets before saving. Do not paste raw JSON into an HTML widget.

Check native editing and persistence

Select the Heading widget and change its text through the content control. Select the Image widget and choose an image from the WordPress media library. Select the Button widget and change label, link and supported colour, border or spacing controls. Check that containers remain usable and that no expected content is missing.

Save the draft, reload the editor and verify every change. Preview the frontend as well as the editor. Previous document API checks changed heading, text, image URL/alt, button text/link and container styles and persisted them after reload; that is supporting technical evidence, not a substitute for these manual control checks.

CSS, responsive behavior and manual fixes

Residual CSS can be stored in a scoped HTML style widget. Do not remove it until you have compared the page and replaced the needed rules. Theme typography, inherited fonts, container defaults, advanced selectors and responsive rules can differ from the original source.

Compare desktop, tablet and mobile. Check stacking direction, widths, overflow, padding, gaps, font sizes and image crops. Replace placeholder or unavailable images and relative links. Rebuild forms, scripts and unsupported interactions using appropriate WordPress/Elementor features. Warning coverage is not exhaustive, so inspect complex elements explicitly.

Troubleshooting and rollback

An invalid-template error may mean that the file is a service wrapper or a full-site kit rather than an Elementor template. Inspect the downloaded JSON shape and confirm the installed Elementor version and container support. A blank image normally requires a reachable URL or media-library replacement; preserving its reference does not download the asset.

If layouts change, compare theme styles and residual CSS before editing the source engine. Keep work in a draft, retain an export of the original Elementor page and use WordPress revisions/backups for rollback. Only replace production content after native controls, save/reload, links, mobile layouts and necessary interactions pass your checks.

Official Elementor instructions: Template Library and Container requirements.

Try 3 successful conversions free

No card required. Review warnings before using the result on a live site.