How to edit your Theme Design using the Visual Designer
Step 1
Login to the CMS.
Step 2
Go to any page in the tree menu. For example, click on the 'Home' page.
Step 3
In the bottom right, click 'Save and Preview'. Preview mode will now load in a new tab or window.
Step 4
On the right-hand side, you will see two buttons. One with a Paint Bucket icon and the other a Pencil icon. Click on the 'Paint Bucket' icon to access the Visual Designer.
Step 5
Use the options on each tab: Layout, Colors, Spacing and Fonts, to create a unique Theme Design in real-time.
Step 5 a — Layout
![](https://5a6c430d1794-cdn-site-media.azureedge.net/media/bt3jmntz/design-layout-11.png?width=160&height=90&rnd=133131812250930000&format=webp)
Step 5 b — Colors
![](https://5a6c430d1794-cdn-site-media.azureedge.net/media/k3sok10o/design-color-12.png?width=160&height=90&rnd=133131745737030000&format=webp)
Step 5 c — Spacing
![](https://5a6c430d1794-cdn-site-media.azureedge.net/media/beklkyj1/design-spacing-11.png?width=160&height=90&rnd=133131811850770000&format=webp)
Step 5 d — Fonts
![](https://5a6c430d1794-cdn-site-media.azureedge.net/media/rs2bbbdt/design-font-11.png?width=160&height=90&rnd=133131812013400000&format=webp)
#h5yr
Related guides