A subtitle.
\n \n Get started\n \nA subtitle.
\",\"text_color\":\"#9ca3af\"}},\n {\"elType\":\"widget\",\"widgetType\":\"button\",\"settings\":{\"text\":\"Get started\",\"background_color\":\"#ec4899\",\"button_text_color\":\"#ffffff\"}}\n ]\n }\n]\n```\n\nDrop into `_elementor_data` meta of a WordPress page → your layout renders.\n\n---\n\n## Installation\n\n```bash\ngit clone https://github.com/dudaster/html2elementor.git\ncd html2elementor\npython3 -m venv .venv\nsource .venv/bin/activate\npip install -r requirements.txt\n```\n\nRequires Python 3.10+ and three tiny dependencies: `beautifulsoup4`, `tinycss2`, `cssselect2`. No browser, no Node, no services.\n\n### Install as a Claude Code skill\n\n`SKILL.md` at the repo root tells Claude when to invoke the tool. Clone straight into your skills folder:\n\n```bash\ngit clone https://github.com/dudaster/html2elementor.git ~/.claude/skills/html2elementor\ncd ~/.claude/skills/html2elementor\npython3 -m venv .venv && .venv/bin/pip install -r requirements.txt\n```\n\nAfter that, prompts like *\"convert landing.html to Elementor\"* or *\"import this mockup into the WP sandbox\"* auto-trigger the skill — Claude runs the conversion, the verifier, and the import for you.\n\n### Install as an openclaw skill\n\nThe same `SKILL.md` is valid for [openclaw](https://github.com/humanlayer/claude-code-skills) — the frontmatter declares `metadata.openclaw.requires` (Python bins + deps) so openclaw can install dependencies automatically.\n\n```bash\n# From your openclaw skills folder (or symlink from anywhere)\ngit clone https://github.com/dudaster/html2elementor.git ~/.openclaw/skills/html2elementor\nopenclaw install # resolves python bin + pip deps declared in frontmatter\n```\n\n---\n\n## Usage\n\n### CLI\n\n```bash\npython3 -m html2elementor input.html -o output.json\n```\n\nThis produces:\n- `output.json` — the Elementor data payload\n- `output.kit.json` — site-kit globals (custom colors, custom typography)\n\n**External stylesheets are loaded automatically.** If `input.html` links ``, the converter resolves that file relative to the HTML file's directory and includes it in the CSS cascade. CSS custom properties (`var(--accent)`) are resolved before mapping to Elementor settings.\n\nFor designs where the stylesheet can't be auto-detected (e.g. HTML piped via stdin, or a CDN URL), pass it explicitly:\n\n```bash\n# Extra CSS file\npython3 -m html2elementor input.html --css styles.css -o output.json\n\n# Multiple CSS files\npython3 -m html2elementor input.html --css reset.css --css design.css -o output.json\n```\n\n### Python API\n\n```python\nfrom html2elementor import convert\n\nwith open(\"landing.html\") as f:\n html = f.read()\n\n# Pass html_path so linked stylesheets are resolved automatically\nresult = convert(html, html_path=\"landing.html\")\n# result[\"layout\"] → list[dict] (sections → containers → widgets)\n# result[\"kit\"] → dict (custom_colors + custom_typography)\n\n# Or pass CSS strings directly\nwith open(\"styles.css\") as f:\n css = f.read()\nresult = convert(html, extra_css=[css])\n```\n\n### Importing into WordPress\n\n```bash\n# 1. Copy files into the container / host\ndocker compose cp output.json wp:/tmp/layout.json\ndocker compose cp output.kit.json wp:/tmp/layout.kit.json\n\n# 2. Merge into the active Elementor kit + create a page\ndocker compose exec wp wp eval '\n$data = file_get_contents(\"/tmp/layout.json\");\n$kit = json_decode(file_get_contents(\"/tmp/layout.kit.json\"), true);\n$active_kit = get_option(\"elementor_active_kit\");\n$ks = get_post_meta($active_kit, \"_elementor_page_settings\", true) ?: [];\nforeach (($kit[\"custom_colors\"] ?? []) as $c) {\n $ks[\"custom_colors\"][] = $c;\n}\nforeach (($kit[\"custom_typography\"] ?? []) as $t) {\n $ks[\"custom_typography\"][] = $t;\n}\nupdate_post_meta($active_kit, \"_elementor_page_settings\", $ks);\n\n$pid = wp_insert_post([\n \"post_title\" => \"My Page\",\n \"post_status\" => \"publish\",\n \"post_type\" => \"page\",\n \"meta_input\" => [\n \"_elementor_edit_mode\" => \"builder\",\n \"_elementor_template_type\" => \"wp-page\",\n \"_wp_page_template\" => \"elementor_canvas\",\n ],\n]);\nupdate_post_meta($pid, \"_elementor_data\", wp_slash($data));\necho \"Page: $pid\\n\";\n' --allow-root\n\n# 3. Flush Elementor's CSS cache so the page renders immediately\ndocker compose exec wp wp elementor flush_css --allow-root\n```\n\n### Verify the conversion\n\n`verify.py` compares the generated layout against the source HTML and reports mismatches in color, font-size, spacing, and alignment. Useful during iteration:\n\n```bash\npython3 -m html2elementor.verify input.html output.json\n# Widgets checked: 52\n# Issues: 0\n# ✓ All checks passed\n```\n\nTolerances: font-size ±2px, padding/margin ±4px, colors exact.\n\n---\n\n## What gets converted\n\n### Widget mapping\n\n| HTML | Elementor widget |\n|------|------------------|\n| `` (long text) | `text-editor` with resolved color + typography |\n| `
` / `