Elementor Landing Page

WordPress + Elementor Landing Page Builder

Build modern, SEO-focused landing pages that the user pastes into WordPress admin. The user has no FTP/hosting access — everything must be pasteable from the Elementor editor (HTML widget + Custom Code) or Customizer (Additional CSS).

Golden rules (these caused real breakage before)

1. <style> tags are mandatory in any file pasted into an Elementor HTML widget or Custom Code box. Raw CSS pasted there renders as visible text and breaks the page.
2. Raw CSS only (no <style>) goes into Appearance → Customize → Additional CSS or Elementor Advanced → Custom CSS. Style tags there break it.
3. Font @import must NOT be inside <style> for paste files — use a <link rel="stylesheet"> above the <style> block instead. Keep @import only in the raw .css source.
4. Scope everything to .slr-landing (or the project's wrapper id/class) and use !important on every rule to beat theme/Elementor styles.
5. Never restyle the global header/footer. The site already has Elementor Theme Builder header/footer. Only reset the page content wrapper (main#content / the landing HTML widget), never .e-con, .elementor-section, or .elementor-location-header/footer globally.
6. No full-bleed 100vw breakout — it misaligns content with the global header/footer container. Keep content in a .slr-container (max-width ~1200px).

Deliverables to produce

For each landing page, create these files in the project's templates folder:

The user copies one finished file and replaces — do not make them hand-edit.

Workflow

- [ ] 1. Confirm slug, wrapper id (e.g. #slr-landing), keyword, location, brand colors
- [ ] 2. Write scoped <slug>.css (see structure below)
- [ ] 3. Write semantic HTML using <main id="..." class="..."> + .slr-container
- [ ] 4. Generate paste files with the script (style tags + <link> for font)
- [ ] 5. Give Elementor setup steps + "clear cache" reminder

Step 2 — CSS structure

• Top: @import url('...Inter...') (raw file only).
• Reset: .slr-landing *, ::before, ::after { box-sizing: border-box !important; }
• Hide duplicate theme title: body:has(#WRAPPER) .page-header, .entry-header, h1.entry-title { display:none !important; }
• CSS variables on .slr-landing (colors, radius, shadow, --slr-max: 1200px).
• Content container .slr-container { max-width: var(--slr-max) !important; margin: auto !important; padding: 0 24px !important; }
• Layout reset scoped to content only:

body:has(#WRAPPER) main#content.site-main,
body:has(#WRAPPER) main#content .page-content,
body:has(#WRAPPER) #content,
body:has(#WRAPPER) .site-content {
  padding: 0 !important; margin: 0 !important; max-width: 100% !important;
}
body:has(#WRAPPER) main#content .elementor-widget-html .elementor-widget-container,
body:has(#WRAPPER) main#content .e-con-inner:has(#WRAPPER) {
  padding: 0 !important; max-width: 100% !important;
}

• Responsive breakpoints: 1024px, 768px, 480px.
• FAQ: use native <details>/<summary> (no JS).
• Gravity Forms: target .slr-form-wrap .gform_wrapper, inputs, .gform_button.

Step 3 — HTML rules

• Root: <main id="WRAPPER" class="WRAPPER" itemscope itemtype="https://schema.org/LocalBusiness">.
• Every section wraps inner content in <div class="slr-container">.
• One <h1> only (in hero). Use real image URLs from the WP media library.
• Embed the form via shortcode inside the HTML: [gravityform id="1" title="true"]. If a widget strips shortcodes, fall back to a separate Elementor Shortcode widget.

Step 4 — Generate paste files

Run the generator to wrap the raw CSS correctly (style tags + font link, no @import inside <style>):

bash <skill_dir>/scripts/make-paste-files.sh <slug>.css <slug>-html-only.html

It writes COPY-into-elementor-custom-code.html (CSS only) and, if a <main ...> HTML file is given, a combined *-html-only.html. See scripts/make-paste-files.sh.

If you prefer to do it by hand, the paste file must look exactly like:

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" />

<style id="slr-landing-styles">
/* all CSS, all !important, no @import here */
</style>

Elementor setup steps (give these to the user every time)

1. Edit page → Page Layout: Default (not Canvas/Elementor Full Width).
2. Page Settings → Hide Title: Yes.
3. Add a Section: Full Width, content width Full, padding 0.
4. Paste content:
   • Option A (simplest): paste *-html-only.html into one HTML widget.
   • Option B: paste COPY-into-elementor-custom-code.html into Elementor Custom Code → Head (this page only), and the markup into an HTML widget.
5. Save → clear LiteSpeed / page cache before checking the live page.

Match file to field (pasting in the wrong field is the #1 break cause)

CSS delivery format (also enforced by user rule)

When delivering CSS in chat, wrap it in <style> tags with a font <link> above the block, all rules !important. Only give raw .css when the user explicitly asks for an Additional-CSS-only file.

Additional resources

• For the project conventions, colors, and a full section checklist, see reference.md.