Managing Styles

The Styles section of the Swell editor allows you to customize the overall look and feel of your website. It includes options for adjusting typography, colours, shadows and layout across your entire site. 

With the Colours option, you can modify the colour scheme for elements like backgrounds, text, and buttons. The Typography settings let you choose fonts, and set text sizes, and line heights for headings and paragraphs. The layout settings help control the padding and margins between elements, ensuring consistent and visually pleasing layouts. These global style settings help maintain a cohesive design across all pages of your website. 

1. From the Navigation > Design menu, select Styles 

2. The Styles section of the Swell editor allows you to customise the overall look and feel of your website. It includes options for adjusting typography, colours, shadows and layout across the entire site. 

3. The Typography settings let you choose fonts, set text sizes, and line heights for headings and paragraphs.

4. Tap the “Manage Fonts” icon to display a list of fonts currently used on your site. Upload fonts if desired or install through Google Fonts.

Note: Keep in mind that too many font variants can make the website load slower. 

5. Select the Colours tab to modify the colour scheme of your site. You can set primary, secondary and background colours from the palette menu.

In the process of setting up your website, the delivery team will work with you to set up the initial colour schemes. The recommendation is that if there are any changes to certain colour elements on blocks, to do this through the Style panel from the right side menu once the site is live.

6. The Shadows style menu in the Swell editor lets you add depth and dimension to your website elements by applying shadow effects. You can customize shadows for specific components, such as images, buttons, and sections, to make them stand out visually.

7. The menu includes options to adjust the shadow's color, blur intensity, spread, and offset, allowing you to create subtle or dramatic effects. Using shadows effectively enhances the visual hierarchy of your site, giving it a more polished and professional appearance. 

8. Once you have made the adjustments, be sure to save any changes before returning to the Design tab.  

9. The Layout section in the editor allows you to manage the structure and spacing of your website’s elements.

10. Layout includes options for adjusting padding and margins to control the spacing within and around elements like blocks. The ability to add a background image is also available and can be adjusted with the layout tools.  By configuring these settings, you can ensure that your content is well-organized and easy to navigate. 

After editing any of the layouts, be sure to press save, so the adjustments are applied.