Section Creator — build and save custom HTML/CSS sections

The Section Creator lets you write a custom section in plain HTML and CSS and add it to any website in your account — just like a built-in template, but entirely designed by you.

Instead of being limited to EasyWebie's pre-built designs, you can build any layout you can imagine: a unique hero, a custom price table, a branded footer, anything.

To open it, go to Dashboard → Section Creator in the sidebar. The feature is available on the Basic plan and above. Free plan users see an upgrade prompt.

Your saved sections appear in the builder's Add Section → My Sections panel for every website you own.

The HTML editor accepts standard HTML. A few ground rules:

Start from a starter template (Hero, Features, About, or Blank) to get the structure right, then edit it to match your design.

The builder's Edit tab can only edit fields that are explicitly marked with special attributes. Without these, your section appears as a static block with no editable content.

Add these attributes to any HTML element to make it editable:

data-field="key" — makes the element's text content editable. The key becomes the label in the Edit tab. Example: adding data-field="headline" to an h1 — editors see a "Headline" text field.

data-href-field="key" — makes a link's href editable. Pair it with data-field on the button text for a fully editable button.

data-image="key" — makes an img src editable. Shows an image picker in the Edit tab.

data-bg-color="key" — makes a background color editable. Shows a color picker. Apply to the element whose background or background-color you want editable.

You do not have to add data attributes to every element — only the ones you want to be editable. Decorative elements can stay fixed.

Template tokens are placeholder strings in your HTML that the builder automatically replaces with real information from the website at display time.

Use these in your HTML anywhere you want site-specific content:

Example: writing "__BUSINESS_CITY__ since 2018" → on Sunrise Café's site becomes "Chennai since 2018".

Using tokens instead of hard-coding values makes your section reusable across all your websites — each site substitutes its own details automatically.

In the Section Creator preview, tokens show as placeholder values ("Sample Business", "Sample City", etc.) so you can see how the section will look.

Write all styles for your section in the CSS tab. A few conventions that prevent conflicts:

Use a unique class prefix — start every selector with something unique to your section: .sc-hero, .acme-feat, .jk-about. Never use generic names like .card or .btn — these will clash with the builder's own styles.

Scope all selectors — .sc-hero h2 {} is safe. h2 {} alone changes every heading on the page.

Use clamp() for responsive font sizes — font-size: clamp(1.5rem, 4vw, 3rem) adapts from mobile to desktop without media queries.

Avoid 100vh — the Section Creator preview converts 100vh to 800px to prevent the iframe from expanding infinitely. For full-height effects, use min-height: 100vh only in the final published context.

Test at multiple sizes — click Full Preview in the header to see your section at Desktop (1280 px), Tablet (768 px), and Mobile (375 px) in a proper full-screen preview.

Before you can save a section, you must pass the AI Security Check. Click Verify with AI in the right panel.

EasyWebie scans your HTML and CSS for dangerous code patterns, then runs an AI analysis to ensure your section is safe for all users on the platform. This step is required — you cannot save without passing it.

After the check you get one of:

- ✅ Verified — safe to save. The Save button unlocks.

- ❌ Security Issues (red) — specific problems that must be fixed before saving. These are hard blocks.

- ⚠️ Warnings (amber) — non-blocking concerns worth fixing but not required.

- 💡 Suggestions (blue) — best-practice tips for better sections.

The result also confirms which data-field attributes and template tokens were detected in your code — useful for checking your markup is correct.

Verification is free — it does not use any of your monthly AI build credits. Run it as many times as you like. The result resets automatically whenever you edit the code, so you will need to re-verify before saving again.

Once verified:

The section is saved to your account and appears in My Saved Sections at the bottom of the Section Creator. It is also immediately available in the builder's Add Section → My Sections tab for every website you own.

To edit a saved section: click the ✎ (pencil) button on its card in the gallery below. The section loads into the editor with its current code. Make your changes, re-verify, and click Update Section.

To delete a saved section: hover over its card, click ✕, then confirm. The section is removed from the builder immediately.

Your custom sections appear in the builder alongside all built-in section variants. To add one:

You can also click Change Style on any existing section and select your saved section to swap the design while keeping the same content fields.

Content fields (data-field attributes you defined) work exactly the same as built-in sections — they appear in the Edit tab, you can edit them, and they are saved with your page content.

The plan you are on when you save a section determines its visibility:

Basic plan — your sections are saved as Community sections. The EasyWebie admin team can review community sections and, with your implicit permission, promote the best ones to become built-in templates available to all users. Your section is not modified — you keep your personal copy. The promoted version appears in the public template library as a separate variant.

Starter or Pro plan — your sections are saved as Private — visible only to you, never reviewed or shared.

The Community badge appears on your section card in the gallery when your plan shares to the community.

Saved section limits per plan:

Upgrading your plan does not retroactively change the visibility of sections you saved on a lower plan. Sections keep the visibility they had at save time.

The Quick Reference panel in the editor (collapsible, left side below the code editor) is a built-in cheat sheet. It shows every data attribute and template token with a one-click copy button.

Attributes:

Tokens:

Click any chip to copy it to your clipboard, then paste it into your code. The panel stays open by default and you can collapse it to give the editor more vertical space.