How to build a page by drag and drop: sections and elements

This post is part of our How to series on getting more from your htmlhost site. Every feature it mentions is documented in the docs.

You don't have to write code to add to your site. The editor's Library tab lets you drag in whole sections or small elements, and they're designed to match what's already there.

Sections: whole blocks of a page

Open Library → Sections. There are 46 to choose from, including heroes, features, pricing, testimonials, FAQs, menus, bookings, team pages and footers.

1. Drag a section onto the preview. A line shows where it will go, between your existing sections.
2. Optionally describe what it should say, like "Starter $9, Pro $29, Team $79, Pro is most popular", or leave it blank.
3. AI builds the section using your site's own fonts, colours and styles. You'll see it being built right where you dropped it.

Prefer clicking to dragging? Click a section and it's added at the end of the page.

Elements: the smaller pieces

Open Library → Elements for 48 building blocks: headings, buttons, images, videos, icons, lists, tables, accordions, carousels, maps, forms and more. Drag one inside any part of the page. The editor outlines the container it will go into, so you can see exactly where it will land.

Most elements appear instantly and copy your site's existing styles. A dropped button looks like your other buttons, and a form uses your inputs. A few, marked ✦, are designed by AI because they need real content, like pricing cards and tabs.

Some elements ask one quick question first. Image opens your media library, Icon lets you pick from a set of icons, and Video, Map and Embed ask for a link or address.

Rearrange with Structure

The Structure tab shows your page as an outline. Drag rows to reorder sections, right-click a row for the same actions as the page (duplicate, move, delete), and click a row to jump to it. Selecting something on the page highlights it in the outline.

Edit what you added

Double-click any text to change it. Click an element to describe a change to AI, like "make this button bigger" or "use a warmer colour". Every change can be undone.

Open the editor and try dragging in a section.