Tide Logo

Start Your Business

Business Accounts

Credit

Business Tools

Support

Tide Logo
Tide Logo
Tide Logo

How to style your website with the Be Online tool

If you've already built your website, you can now use the Be Online tool to easily style it. Scroll down and learn how to:

  • Add your logo

  • Choose styles

  • Customise colours, fonts, and sections to match your brand

If you don't have Be Online yet, see what it comes with, how much it costs and how to sign up over on this page.

Add your brand's logo to your website

  1. Click on your company name in the header

  2. Then click on Logo > Upload logo > Adjust size

  3. Save the changes and you're ready

Your logo will show at the top of the page.

Change your website's appearance

Use the Styles Gallery for preset combinations of colours, fonts and button shapes.

To apply a style:

  1. In the top bar, click on Design > Change style

  2. Slide through the available styles, select the one you prefer, and click Done

Change the colours and fonts of your website

To incorporate specific brand colours:

  1. In the top bar, click on Customise > Colours

  2. Choose from preset colour combinations or use the colour picker to customise

To change your website's fonts

  1. In the top bar, click on Customise > Fonts

  2. Select the font you like and save the changes

You can choose from preset font options or use the Custom tab to create your own font pairings.

Style your sections: appearance options

Sections are pre-designed content rows containing widgets like text and images.

To access the Appearance button:

  1. Hover over the section you want to customise

  2. The Appearance button will appear on the left - click on it to view your styling options

Change the appearance settings

When you click the Appearance button you can:

  • Select a section's colour: Easily update the background using the colour swatches – text colour will adapt automatically to ensure legibility

  • Add a gradient colour: Apply background that smoothly blends two or more colours for a more stylish look

  • Use shape dividers: Add stylish section breaks at the bottom of one or more sections, and customise their colours to match your branding

  • Add a touch of motion: Use fade or slide animations to reveal sections as visitors scroll down your website

Stylе your sections: layout options

The Layout options let you control how the different parts of your page look together.

To access the Layout options:

  1. Hover over the section you want to edit and you'll see the Layout button on the left

  2. Click it to view available layout options and select the one you prefer

Change the Layout Settings

Click on Layout > Change Layout to:

  • Change the layout: Browse the available options and select the one you prefer

  • Adjust the height: Control the space above and below your content

  • Adjust the width: Set how wide the content area should be

Once you're happy with the changes, click Done and you're all set.

Add a section link

A 'section link' is a URL that takes visitors directly to a specific section of your website, so they don’t have to scroll or go through different pages to find it.

  1. Click Section Link to get a direct link to the section

  2. You can then click on Copy the link or on Add New Link to create a navigation menu item that points directly to this section