WebSite Builder Themes and Styling

WebSite Builder's themes and styling have undergone a pretty major change.

Themes


At the basic level, you have theme swapping as shown in the above screenshot. Changing a theme updates the background of your site, replacing the visuals with images, colours and gradients. You can preview any theme on your site by clicking it, and then click the “Confirm” button to use it on your site.



Each theme also includes specific styles that control the look and feel of each row, and within each row, each column. These can be mixed and matched to customise the look of the website. For instance, the above screenshot shows a theme based on a traditional book style. Column styles include options with different colour page holders, as well as the option to turn the page holder off entirely.



Colour is a huge part of the design of any site, and we know that everyone’s got their own opinion of what looks good. So, we’ve also designed every one of our new WebSite Builder themes to be compatible with a variety of colour schemes. Each theme includes a default, preferred colour scheme - but you can pick from the full library of colours on any themes.



If you really like a particular theme, but want to tweak (or totally replace) the background image, you can access the theme settings from the sidebar. Just upload whatever image you’d like to the media bar, and drag it onto the image drop zone under Theme Background. You can also easily set a single colour or gradient for your background.

Of course, any customisation you do to that theme will be saved for the future. You can update the backgrounds or styles however much you. You can swap over to one of the themes from our library, try it on and play around, and then decide to go back to your previous creation by selecting it from the Local Themes section of the theme browser.

Even better, with WebSite Builder’s design capabilities now fully in the browser, it means anyone can build a new theme - no SDK or other tools required.

It does mean, however, that we’re not currently supporting the traditional method of importing PSDs to create the row styles in WebSite Builder, since you can now create those row styles. You’ll still be able to import PSDs into WebSite Builder as images that can be dragged, dropped and resized on your site.

Text



We’ve also simplified text editing, by moving all the styling controls to a simple context menu on each text widget. By double clicking a text widget, rather than the traditional settings panel, you’ll now get a lean, easy to use styling panel which will allow you to quickly update the look and feel of any text you select.



Those familiar with our previous text Styles system will find it even more straightforward to use in WebSite Builder. You’ll find Styles can be applied right from the context menu. If you’d like to edit how a certain Style appears, simply edit it right from the drop down menu. That will expose the style controls, which let you apply basic styling (ie, size, color), as well as CSS3 styles like shadows, rotations and other visual effects.



Any updates you make to a style will be rolled out instantly across your site, wherever text in that style has been used.

Answer options

Your feedback was successfully added.

Answer tracking

Track

Watch the content of this article for changes.