/build-elementor-page

name: build-elementor-page
description: "Use when building an Elementor page by hand with respira_build_page: from a brief, a screenshot, a mockup, or a design you must restate as Elementor settings. Covers the template, the styles Elementor never inherits, reading a design's computed values instead of guessing, buttons, spacing, mobile, and checking the render. For a finished HTML file, use html-to-page instead."
license: MIT
metadata:
  author: Respira for WordPress
  author_url: https://respira.press
  version: 1.1.0
  mcp-server: respira-wordpress
  category: workflow

Build an Elementor page

**Version:** 1.1.0 **Updated:** 2026-10-04 **Category:** workflow **Status:** stable **Requires:** Respira for WordPress plugin (9.1+) and an MCP connection, on a site running Elementor

---

Description

A recipe for building an Elementor page through `respira_build_page` that looks like the design the first time. Elementor writes every style into the widget that shows it. Nothing cascades from the page the way CSS does, so whatever a widget's settings leave out comes from the theme or the Elementor kit: the theme's body size, the kit's heading colour, a default line height. Most of the distance between a hand-built page and its design comes from those gaps, not from the layout.

**Have the finished HTML?** Use the html-to-page skill. One `respira_convert_html_to_builder` call writes the page as native Elementor widgets and carries the file's stylesheet, so it matches the file without restating anything. Build by hand when there is no file, or when the user wants every style in Elementor's own controls.

---

When to Use

• A page from a brief, a screenshot or a mockup.
• A design you can read but that has to land as Elementor settings, not a stylesheet.
• A first build looked off: wrong font size, light blue headings, buttons on separate lines, the theme header and title above the page.

Trigger Phrases

• "build this page in elementor"
• "make an elementor landing page"
• "recreate this design in elementor by hand"

---

Workflow

1. Read the site

`respira_get_site_context`, then `respira_get_builder_info` for the Elementor version and whether containers are on. You write the tree as section > column > widget; Respira writes it in the shape the site uses.

2. Pick the template

A landing page draws its own header and footer, so it should not sit inside the theme's. Pass `template` to `respira_build_page`:

• `"elementor_canvas"`: nothing but the page. No theme header, page title or footer.
• `"elementor_header_footer"`: the theme's header and footer, the page full width between them, no page title.
• omitted: the theme's default template, with its title and content width.

An older plugin ignores the option. If the share link (step 8) still shows the theme's header and page title, tell the user to pick the template in the editor's page settings.

3. Read the design's computed values

Write down what the browser shows, not what the stylesheet happens to declare. If you can open the design in a browser, read `getComputedStyle` for each kind of element. If you work from the CSS, apply these browser defaults yourself:

• A heading with no `font-weight` is **bold (700)**, not 600.
• A heading or paragraph with no `line-height` **inherits the body's** (a body at `line-height:1.6` makes a 38px h2 60.8px tall). Elementor's own default for headings is about 1.2, which shrinks every section.
• A `<p>` has `1em` top and bottom margins; an `h1` to `h3` has margins too unless the CSS removes them.
• `letter-spacing` in `em` becomes px against the element's own size: `.12em` at 13px is 1.56px.
• A colour, font family or size set on `body` applies to every element that does not set its own. Restate it on every widget.

4. Style every text widget completely

Typography keys only apply when `typography_typography` is `"custom"`. For every heading, text editor and button, set:

typography_typography: "custom",
typography_font_family: "Inter",
typography_font_size: { unit: "px", size: 16 },
typography_font_weight: "400",
typography_line_height: { unit: "em", size: 1.6 },

plus the colour (`title_color` on a heading, `text_color` on a text editor, `button_text_color` on a button), and `typography_letter_spacing` and `typography_text_transform` where the design has them. A widget without a colour shows the kit colour (often light blue headings or grey text).

Text editor paragraphs take the theme's paragraph margins; set `paragraph_spacing: { unit: "px", size: 16 }` (the gap between paragraphs), or keep one paragraph per widget and space with `_margin`.

5. Buttons

• Size and shape: `text_padding` (per side), `border_radius`, `background_color`, `button_text_color`, and the typography keys above. Elementor's button line height is about 1; set the design's (`typography_line_height`) or the button comes out shorter.
• Outline buttons: `border_border: "solid"`, `border_width`, `border_color`, and a `background_color` of `"transparent"`.
• Hover: `button_background_hover_color`, `hover_color`.
• Two buttons side by side: give each `_element_width: "auto"` so they sit inline in the same column, with `_margin` for the gap. Without it each button takes the full row.

6. Layout and spacing

• Sections: `padding` per side, `background_background: "classic"` with `background_color`, `stretch_section: "section-stretched"` for full bleed, `content_width` for the inner width.
• Columns: `_inline_size` in percent; column gaps through the section's `gap` and the columns' own `padding`.
• Space between widgets: `_margin` on the widget, as the design's margins, rather than spacer widgets. The kit adds its own widget spacing (20px by default) below every widget but the last in a column, on top of your margin: set each bottom margin to the design's gap minus that spacing (a 24px gap is `bottom: "4"`), or the page grows by 20px per widget.
• Nesting: on a site without flexbox