Getting started with Website Builder

In this guide, we help you quickly get started with our Website Builder. With our AI onboarding and Writing Assistant, you can have a custom website online in no time.

Step 1 - Find Website Builder in the control panel

You access your Website Builder from its tile in the one.com control panel.

  1. Log in to the one.com control panel.
  2. Click Go to Website Builder.
Tip: Are you using the trial version of Website Builder? Then you need to log in through this link instead: Log in to the trial version of Website Builder.

CP-WSB-tile-new.png

You'll see the following screen if you haven't started working on your Website Builder site yet. Click Get Started to begin.

wsbstart1.png

Step 2 - Add basic information about your business or project

Add a category

  1. Choose a category for your business or project. 
  2. Since our setup flow is AI-driven, you must tick the box to show that you've read and understood the terms and conditions of OpenAI.
  3. Click Continue. 
Note: In this guide, we're showing the process as it unfolds when you choose the AI-driven flow. You can also just choose a template and go straight to adjusting it by clicking the link that says use templates instead. We recommend that you choose the AI-driven setup flow, as this will provide you with a custom website faster.

wsbstart2.png

Add additional information

  1. Depending on the topic you've chosen for your website, you will now be presented with the first of up to 4 steps where you can add information about your business or project. Add the information requested, and click Continue.
Note: In this guide, we're trying to set up a website for a landscape photographer as an example. However, depending on your topic, you might be asked to provide different information in the first step than what is shown here. If you have, for example, a restaurant, you might need to specify whether you offer both eat-in, delivery and takeaway. Or if you have a toy store, you will have to denote if you have both a physical store and a webshop.

wsbstart3.png

Add a few keywords

  1. Add some keywords or sentences that tell something about your business or project. You can list up to 3 things. These snippets of information will be the basis for your website texts.
  2. Click Continue to continue, or select Skip to add the info later.

wsbstart4.png

Enter contact details

  1. Enter your contact details. These will be included directly on your website.
  2. Click Continue to continue, or I'll add this later to skip this step.

wsbstart5.png

Specify how you want to be presented

  1. You might get asked to specify whether the website texts should be written from a singular or a plural perspective. Choose your preferred option and click Continue.

wsbstart6.png

Step 3 - Choose a colour theme and template

You'll now see a preview of a suggested template based on the information you entered in the previous step. The template determines the overall design of your site, like layout and fonts. All templates are fully customisable, so you can always change things later. 

The template also comes with a suggested colour theme to ensure that colours of, for example, buttons and backgrounds fit together and that the same colours are used consistently across all pages of your website. 

  1. Scroll through the template preview to see all the elements on the page. Remember that you can change any of the elements here if you decide to use this template suggestion.
  2. Select a colour theme in the left-hand panel. You'll see a list of recommended combinations at the top, but you can get an extensive list of other suggestions by clicking the drop-down arrow next to Other colours.
  3. Once you've selected a theme, click Apply to add the template to your workspace in the editor.
Tip: If you want a different template suggestion, you can click Back to go back in the process and change some of the information you entered. You can also click the link on the left that says See all templates. This will lead you to an overview of predesigned templates that you can choose from.

 

wsbstart7.png

Step 4 - Add, edit and remove components

Your Website Builder workspace is now set up with your chosen template, and you can start building your site. Each page in your Website Builder consists of a header, a footer and at least one section. The content you place in the header and the footer will be shown on all website pages. You can, for example, use the header for your menu and logo and the footer for your contact information.

We recommend reading the following guide to learn more about header, footer and sections:

Add a component

All content on your site consists of components, for example, text, images, buttons, etc. All available components can be found in the menu to the left. You can easily add more components to your pages by dragging them from the menu to your workspace.

  • The thin red lines indicate how the component is aligned with other components.
  • The red area indicates that you're placing the component on top of another component.

wsbstart8.png

Edit a component

Double-click on a component to open the settings for this component. In these settings, you can, for example, change the style and size of the component or have it link to another place. If you click outside the component, the settings menu disappears again.

Tip: Instead of changing the size of the component in the settings, you can also drag the orange handles on all corners and sides.

wsbstart9.png

Remove a component

To remove a component, select it and click delete on your keyboard. You can also click on the icon that looks like three dots in a circle and choose Delete from the menu that appears.

wsb_gettingstarted4.png

Step 5 - Edit text and images

Most of your site's content will likely be text and images. So, let's pay a bit more attention to these components.

Edit text

You can easily edit or replace the premade website text with your own. Simply double-click on a component to edit it.

Tip: You can use the Website Builder Writing Assistant to help you write or revise your website text. Read more about the feature in our guide: How do I use the Writing Assistant in Website Builder?

wsbstart14.png

Edit images

The images in our templates are stock images you are welcome to keep, but you most likely want to replace them with your own to represent your business or project best.

  1. Click on an image to select it.
  2. Click the Replace image button that appears above or below the component.
  3. Select the image you want to replace it with or click Upload in the top right corner to upload photos from your computer or another location.
  4. Click Add to page.
How do I add an image to my Website Builder site?

wsbstart11.png

Step 6 - Add or rename pages or sections

Add or rename pages

You can add more pages from the pages menu on the left in the top bar. It's highlighted with a blue background. Just click the + Add new page button and follow the instructions.

How do I add a new page?

You can also change the name of an existing page:

  1. Select the page in the pages menu in the top bar.
  2. Click on the circle icon with the three dots to open the page options.
  3. Select Settings.
  4. Here, you can, among other things, edit the page name that is visible in the menu and browser tab.
  5. Click Save to save your changes.

wsbstart12.png

Add or rename sections

You can add more sections to an existing page.

  1. Go to where you want to place a new section.
  2. Hover over the plus sign on the orange line. Click Add section when you see it.
  3. Choose a section from the left-side panel.

It is also possible to rename a section:

  1. Select the section and click the Edit section tab at the top or the bottom.
  2. In the floating menu that appears, select Section title.
  3. Enter the new title to rename the section.
Tip: You can also add links from your menu to a particular section. This is especially useful if you're creating a one-page website. You can read more about anchor links in our separate guide for this feature.

wsbstart10.png

Step 7 - Save

Remember to save your site often! That way, you won't lose all your changes if something goes wrong. Are you not happy with the result? Use the arrows in the top bar to undo or redo your changes. The only thing you cannot undo is the deletion of a page.

Tip! If you've signed up for Premium, you have access to the built-in Backup and Restore function that allows you to load previously saved versions of your site. Every time your site is saved, a backup is created automatically.

wsbstart15.png

Step 8 - Preview

It's a good idea to check a preview of your site before publishing it to see how it will look for your visitors.

  1. Click the Preview button in the top bar.
  2. Navigate through the menu to see all pages of your site. Also, check the mobile version of your site.
  3. Click Back to editor to return and implement possible changes.

wsbstart17.png

Step 9 - Publish

When you're ready to share your site with the world, it's time to publish.

  1. Click the Publish button in the top bar.
  2. Confirm your choice by clicking Publish again.

Well done! You've now created your website, and it is being published. Depending on your pages and content, this may take a few minutes.

Tip: Click on your domain name in the menu in the top right corner to check your site online. Don't see your site after publishing? Check if you have set your start page correctly.

wsbstart18.png

Related articles:

Was this article helpful?

Can’t find what you are looking for?

We're here for you.

Chat with us 24/7 - every day of the year

are answered as soon as possible

Phone us on weekdays from 10am to 2pm (UTC)
+44 20 8106 0910