Website builder

The website builder is an editor where you put a page together from ready blocks, like building bricks. We call a block a section: the top menu, a big opening headline, pricing or the footer. You add sections, stack them, rewrite the texts and pick the colours.

You download the finished page as one file that any browser opens and that you can upload to any website. Nothing to install, no coding needed.

You'll find the builder under Tools → Website builder. It's part of the Ultimate plan.

• Use a computer, or a tablet held sideways. On narrower screens the builder doesn't show, because its three panels don't fit.
• Your page saves itself in your browser. Come back on the same computer and browser and it's there.
• To move it to another computer, use Save project and Open project, see Saving and projects.

The screen has four parts. The numbers in the picture match the list below it.

1. 1

   Top bar

   Undo and Redo, the Desktop / Tablet / Mobile switch, zoom, the Saved indicator, Preview and Export.

2. 2

   Left panel

   The Add tab holds every section and component you can put on the page. The Layers tab shows what's already there and in which order.

3. 3

   Canvas

   Your page exactly as it will look. Click a section to select it, click a text to type straight into it.

4. 4

   Right panel

   Settings. With a section selected you edit that section. With nothing selected you set up the whole page: colours, fonts, buttons and more.

1. 1

   Pick a template

   On the empty canvas click Landing page. A second later you have a whole page with a menu, intro, features, pricing and footer.

2. 2

   Rewrite the texts

   Click the headline on the canvas and start typing. Enter finishes, Esc restores the original. Buttons, prices and menu links work the same way.

3. 3

   Pick colours

   Click the empty space next to the page to clear the selection. The page settings appear on the right. Under Colors pick an accent, say blue, and Dark or Light mode.

4. 4

   Check mobile

   Switch to Mobile at the top and scroll through. Sections rearrange themselves on their own.

5. 5

   Download it

   Click Export, then Download HTML. You get an index.html file that opens with a double click.

Adding

• Click a section in the left panel to add it below the one you have selected. With nothing selected it goes to the end.
• You can also drag a section onto the canvas. A red line saying Drop here shows where it lands.
• The left panel has a search at the top: type pricing or footer, for example.

Moving, copying and deleting

Hover a section and a bar of buttons appears above it:

• Six dots: grab and drag up or down.
• Arrows: move the section by one place.
• Two squares: make a copy right below it.
• Eye: hide the section. It stays greyed out in the editor but isn't in the preview or the export.
• Bin: delete the section.

There are two ways to change texts and both end up the same:

• Right on the canvas: click a text and type. Texts you can edit get a dashed outline when you hover them.
• In the right panel on the Content tab: every text of the section is listed, including ones not visible on the canvas, such as button links.

Lists such as pricing plans or questions are edited in the right panel. The arrow expands an item, the buttons move, copy or delete it, and Add item at the bottom adds a new one.

Images

The builder doesn't upload images but shows them from the web. Paste an image address that starts with https:// and ends with something like .jpg or .png into the Image field. A small preview appears next to it.

Until you add an image, a coloured placeholder stands in, so the page never looks broken.

Links

Links in the menu and footer are written as text, a vertical bar and the address, one per line:

Pricing | #pricing
Contact | mailto:hello@example.com
Blog | https://example.com/blog

• #pricing points to a section on the same page that has the anchor pricing (see Section style).
• mailto: opens an email, https:// goes to another site.
• Buttons have their link in its own field, such as Main button link.

Select a section and switch to the Style tab in the right panel:

• Background: none, surface, soft tint, accent, gradient or a custom colour. Text and buttons adapt so they stay readable.
• Spacing: how much room there is above and below the section's content.
• Visibility: hide the section on mobile, or show it on mobile only.
• Line above the section: a thin divider from the previous one.
• Anchor: a short name you can link to, such as pricing. A link to #pricing then scrolls right here.

Most sections also have a Layout on the Content tab, for example features as a grid or a list, or the image on the left or right.

Besides ready sections you can put any component from the library on the page. The left panel has a nex-ui components group with every category.

1. 1

   Add a category

   Click Navbars, for example. The first navbar of the category is added to the page.

2. 2

   Pick the exact component

   The right panel shows every navbar with a live preview. Click another to swap it on the page.

3. 3

   Set it up

   Under the previews are the variants and props, the same as on the component page.

Components take the page's colours, corners and font, so they fit the rest.

Click the empty space next to the page, or Page settings in the right panel. The settings come in groups:

• Colors: dark or light mode, accent colour and, if you want, your own background, surface, text and line colours.
• Typography: heading font and body font, heading weight and spacing.
• Buttons and layout: solid, soft or outline buttons, corner radius, content width and sections fading in on scroll.
• SEO: page title and description, shown in search results and on the browser tab.
• Project: templates, saving and opening a project, and clearing the page.

The Desktop / Tablet / Mobile switch in the top bar changes the page width. Sections rearrange themselves: three cards side by side end up stacked on mobile.

Next to it is zoom. Fit shrinks the page so it fits; 100 % shows it at real size.

Preview hides the panels and shows the page the way a visitor sees it, without outlines or hidden sections. Go back with Back to editing or Esc.

The Layers tab in the left panel lists every section from top to bottom. Handy on long pages:

• Click to select a section and the canvas scrolls to it.
• Drag it by the six dots to another place.
• The eye hides or shows it again, the bin deletes it.

On a Mac use Cmd instead of Ctrl. Shortcuts pause while you type into a text, so nothing gets deleted under your fingers.

The builder saves automatically after every change. The top bar shows Saving… and then Saved.

In the page settings under Project you'll find:

• Save project downloads a file ending in .nexui.json. That's your page in progress, which you can open again any time.
• Open project loads such a file back into the builder, for example on another computer.
• Templates replace the page with the chosen template. Ctrl Z brings the old one back.

Export opens a window with the page's finished code. Copy it, or download it as an index.html file.

• The file has everything the page needs. Styles and fonts load from the internet, so you just open it in a browser.
• Hidden sections aren't exported. Sections hidden on mobile really disappear on mobile.
• With fading in turned on, sections glide in as you scroll.

The easiest way is the free Netlify Drop, where you just drop the file:

1. 1

   Prepare a folder

   Create a new folder on your computer and put the downloaded index.html in it.

2. 2

   Open Netlify Drop

   Go to app.netlify.com/drop in your browser.

3. 3

   Drop the folder

   Drag the whole folder onto the marked area of the page.

4. 4

   Done

   A few seconds later you get an address where your page is live. With a free account you can rename it or connect your own domain.

Already have web hosting? Upload index.html with its file manager or FTP into the site's main folder, usually called www or public_html.

I only see a message that the builder needs a wider screen

The builder needs at least 1024 pixels of width. Make the browser window bigger, turn the tablet sideways or use a computer.

My page in progress is gone

Are you in the same browser as last time and not in a private window? If so and it's still missing, the browser data was cleared. Open your last saved project with Open project.

An image doesn't show

Check that the address starts with https:// and points straight at the image. Opened in a new tab, it should show only the picture, not a whole page. Some sites don't allow their images to be shown elsewhere.

A menu link goes nowhere

Links don't open inside the builder on purpose, so you don't click away while editing. Try them in the exported file. For a link to a section, check the section has the same anchor.

A component doesn't respond in the export

Library components are a static snapshot in the export. For full behaviour they need to be added to a project in code, see Components.

Section

One block of the page, stacked under the others: a menu, an intro, pricing.

Component

A ready piece from the nex-ui library, such as a button or a carousel.

Canvas

The middle of the builder, where you see and edit the page.

Accent

The page's main colour, used by buttons and highlights.

Anchor

A short section name you can link to with #, such as #pricing.

Export

Turning the finished page into an index.html file you can put online.

Project

A .nexui.json file with your page in progress, for more editing in the builder.

SEO

The page title and description for search engines like Google.

Web hosting

A service that stores your site's files so others can open it.