Instructions
Components
What are they?
The template includes a variety of reusable and editable components designed to help you build out pages quickly and efficiently. All available components are listed on the “Components” page within your Webflow project.
How to Use Them
To add a component to a page, open the desired page and select the “Components” tab in the left-hand panel. From there, drag and drop the desired component onto your page.
Once added, you can edit the component by selecting it and using the settings in the right-hand panel to customise text, images, and other elements. Adjust the styling as needed to match your brand.
Each component has a field called “Background Color - Class.” To change the background colour, type in one of the following class names:
- background-primary
- background-secondary
- background-accent
- background-dark
- background-light
All the class names and their corresponding styles can be found in the "style-guide".
Components are designed to be reused across different pages. Simply drag and drop the component from the “Components” section onto any page within your project.
Static Page Templates
Starter Template
The Starter Template serves as the foundational structure for your pages. It includes:
- Page-wrapper: Contains the overall page structure.
- Navigation: The site’s navigation bar.
- main-wrapper: The main content area where all components should be dropped.
- Footer: The footer of the page.
Rich Text Template
The Rich Text Template is a prebuilt page that includes a rich text element within the main-wrapper. It is designed for pages that require formatted text content, such as blog posts or articles.
Variables
The template uses variables to maintain consistency and confidence in the design. These variables allow for quick adjustments across the entire template, ensuring uniformity and ease of customisation:
- Swatch Color - Brand: All the brand’s colours.
- Swatch Color - Neutral: All shades of white and black.
- Swatch Color - Transparent: Transparency settings for overlay effects.
- Swatch Color - System: System colours for alerts and notifications.
- Borders: Standardised border settings for elements.
- Letter Spacing: Consistent spacing between letters for readability.
- Line Height: Uniform line height for text blocks.
- Radius: Border-radius settings for rounded elements.
- Typography: Standardised font settings for headings and body text.
Using these variables helps maintain a cohesive look and feel, making it easier to implement design changes across the template.
