Designing Your Site with the AI Site Builder - Managed Wordpress (Onyx)

The AI Site Builder includes a library of templates, block patterns, and style controls that let you create a professional design without needing custom code. You can choose from ready-made layouts, then customise them to fit your brand with your own colours, fonts, and images.

Don't have an AI site builder website yet?

We have a step by step guide that covers creating and configuring your AI powered site for the first time that you should follow before you continue with this guide!

Have an AI site builder website but want to start again?

Sometimes our initial design isn't quite right, and you may prefer to start again from scratch.

1. Log in to your Onyx Dashboard
2. Click the "Jump to WordPress Admin" button

   

3. Click the "Site Assistant" button

   

4. Click the "Reset site" button

   

5. From here, you can restart the design process from the beginning!
   We have a step by step guide covering installation and configuration here.

Using Templates and Block Patterns

The AI Site Builder Library provides complete page templates and smaller block patterns. Templates give you an entire page layout in one click, while block patterns add ready-made sections like testimonials, pricing tables, or image galleries.

For a new page:

1. Click the "Pages" button

   

2. Click "Add Page"

   

3. Complete the AI Page creation prompts

   

4. Click "Generate Page"

   

5. Review your newly created page!

   

6. If you want to change the layout, click the "Design library button"

   

7. Select your preferred template

   

8. When you're ready, click "Publish" to make your new layout live!

   

For an existing page:

1. Click the "Pages" button

   

2. Click "Edit" near the page you want to update

   

3. Click "Design Library"

   

4. Now you can select your preferred design from the list of templates, and organise this by the design type

   

5. When you're ready, click "Publish" to make your new layout live!

   

Working with the Block Editor

The block editor is where you’ll spend most of your time customising your site. Each piece of content (text, image, button, etc) is a “block” that you can add, move, and style.

1. From the menu on the left, click “Pages”.

   

2. Hover over the page you want to edit (for example, “Home”) and click “Edit”.

   

   This will open the block editor. You’ll see your page content in the main area.

To edit text

1. Click directly on the block of text you want to change.

   

2. Start typing to replace the existing content.

   

3. To add a new block, click the “+” button in the top left corner, or the small “+” that appears when you hover between blocks.

   

4. Select the block type to add

   

To move a block

1. Click once on the block you want to move.

   

2. Use the up or down arrows in the small toolbar above the block to shift its position.

   

3. Alternatively, drag the block using the “six dots” handle on the left.

   

To delete a block

1. Click on the block to select it.

   

2. Click the three dots in the toolbar that appears above the block.

   

3. Select “Delete” from the menu.

   

To format a block (bold, italics, links, alignment)

1. Click on the block to bring up the toolbar.

   

2. Use the toolbar options to apply formatting:

   

   • B = Bold
   • I = Italic
   • Link icon = Add or edit a hyperlink
   • Alignment icons = Left, centre, or right align

To use block settings in the sidebar

1. Select a block you want to customise.

   

2. If the sidebar is hidden, click the sidebar icon in the top right corner to show it.

   

3. Under the “Block” tab, adjust settings such as:

   

   • Text size and font
   • Text and background colour
   • Padding and margin (spacing around the block)

Styling Your Site

Global styles let you make changes across your entire site at once, instead of editing each page individually.

1. In the WordPress dashboard, go to “Appearance” > “Editor”.

   

2. The site editor will open, showing your homepage layout.

   

3. Click the “Styles” icon (a half-shaded circle).

   

From here you can:

• Click “Typography” to set global fonts for headings and paragraphs.
• Click “Colours” to set your site’s colour palette for text, backgrounds, and links.
• Click “Layout” to adjust spacing and container widths.
• Use “Blocks” to change the default style of specific block types (for example, make all buttons the same colour and shape across your site).

  

Any changes you make here will apply everywhere, keeping your design consistent. When you’re finished, click “Review X Changes” in the bottom left corner, then click "Save".

Tips for Best Results

• Keep a consistent design across all pages so the site feels cohesive.
• Avoid clutter: too many blocks or sections can make pages hard to read.
• Optimise images before uploading to keep page load times fast.
• Review your site on both mobile and desktop to make sure the design works everywhere.