How To Page

How To

Managing your website with has never been easier. But if you do get stuck, have a browse of the resources below.


Advanced Editing

This section of the how-to guide assumes you are familiar with editing content on Websites by sites.

Advanced Editing

WordPress will likely be used if your website requires ongoing content, but Websites by can also be used to create and manage several pages. If you will be adding pages regularly to Websites by, you will need to ask your local studio to upgrade your access level to allow advanced websites by editing privileges.

When you have advanced editing privileges, your websites by toolset will expand to allow you to:

  • Create pages
  • Duplicate pages
  • Delete pages
  • Edit menus
  • Add & amend panels
  • Add & amend block

Please beware: with advanced privileges you can radically alter the design, styles and every aspect of how the site looks. Contact your local studio if you make a mistake and we can revert the website to a previous time when it was last working as intended.

Creating, duplicating and deleting pages

Press the page icon at the top of your Websites by editor and enter your new page name to create a new page.

This will create a new blank page for you to start from. You can also press the duplicate icon to copy an existing page and use that as a starting point.

If you created a page you no longer want to use, select the page in your page dropdown then press the trash can icon to delete the page. This will delete whatever page is currently active in your Websites by editor. You can use the undo icon to revert this if you accidentally delete the wrong page.

Click to edit your paragraph

Editing menus

To edit your menus, go to Settings > Menus.

In the “Elements” section you will see the menus your website uses.
Press Add link to add a new menu item, or Add dropdown to add a new dropdown menu.

Adding panels & blocks

A panel is a full-width bar within which blocks are placed. Blocks are then filled with pre-designed website content that can be changed to be relevant to your client.

In the Websites by editor, panels are controlled and defined within purple lines while blocks are within green lines.

Adding Panels

To add a panel in Websites by, head to Add > Panels.

Select your preferred panel and drag it onto the page.

Customising Panels

 Panel Options

When you hover over a panel, you’ll see options to customise it.

The first crosshair icon lets you move the position of the panel on your page. Hold it and drag your panel up or down the page.

The second copy icon lets you duplicate the panel. It will copy all the blocks and all the content, letting you customise again from a better starting place.

The third cog icon lets you configure the panel, more on this later.

The fourth x panel option deletes the panel, along with all the blocks and content it contains.

The #2 tells you what order the panel is. This order can be used as an anchor point in the text editor and menus.

Panel configuration options

Press the panel cog icon and a right sidebar will appear specifically for this panel.


You can change the background colour, and even add a transparency. You can also add a background image. The top layer image scrolls with the page while the bottom layer image is static.


Use dimensions to define your panel’s max height and amount of padding.

You can also set the block widths of each block on both the tablet or desktop. By changing the sliders you can choose how much of the device width each block should take up.

In the above example the 4 blocks within the panel will show in 4 columns for desktop, and in 2 rows of 2 columns for tablet.

Customising Blocks

There are also block specific options when you hover over them.

The first crosshairs icon lets you drag & drop your block within the panel, and even onto another panel.

The second magic wand icon lets you add custom animations, more on this later.

The third cog icon lets you adjust the padding or margin of your block to give it more or less whitespace.

You can also add a background colour or upload a background image

And you can choose to hide some blocks from desktops, mobiles or tablets to create content specific to the device of your users.

The fourth copy icon lets you duplicate all the block content and creates a new copy next to your original.

The fifth rubber icon strips out the block content, but leaves a blank space in case you want a gap between two of your Blocks.

The sixth x icon deletes your block and all the content inside it.