Instructions

The Automator CMS template is made for SaaS and other digital product-based companies who need a flexible and versatile Webflow template for their agile business.

Structure

The structure of this template is built primarily using a 12-column layout structure. 

  1. To create a column layout, a section will need a parent div block with a class of “12 Columns”. Combo classes are available to change alignment.
  2. Then, place div blocks with the class of “Column” inside. These will turn into your columns so there should be as many as you need.
  3. Then, you can add a specific combo class that will determine the numbers of columns the content utilizes. For example, a layout with content on the left and an image on the right might use the combo class of “Desktop 6” for both columns. This means each block will take up 6 columns, or 50% of the available width.
  4. Combo classes can be added to change width of column for tablet and mobile devices.
Screenshot of 12 columns class
Screenshot of 12 column layout combo classes

Sections and containers

Sections and containers should be used for each block of content. Sections organize content and apply top and bottom padding to the block. Containers set a maximum width that responds with the device size. Both sections and containers have classes and combo classes for variations that you can reference below.

Screenshot of section class

Applied to Webflow section element, this adds top and bottom padding to the content.

Screenshot of double top combo class for section

Doubles top padding found in Section class.

Screenshot of double bottom combo class for section

Doubles bottom padding found in Section class.

Screenshot of double combo class for section

Doubles top and bottom padding found in Section class.

Screenshot of container class

Applied to div block nested inside section element. This limits all content to a maximum width.

Components

This template features pre-built components to allow for quick and easy page building. The template has components for the navigation, footer and common sections that would generally be repeated. Components can be used in three ways:

  1. Identical content for each instance: This is useful for the navigation and footer where it should be identical on every page. Making a change to the instance in one place will update it on every page.
  2. Component properties: For components that utilize Webflow's properties, such as the Double Call-to-Action component, you can use the right sidebar to make text, image and link updates on that single instance without affecting all other instances. This is great for modules that have varying content across the site but the layout and style should always be the same.
  3. Unique content: When you need to change text or images on other components but don't want it to affect other instances, it is best to unlink the instance by right-clicking on the component and selecting "Unlink Instance". This will maintain all the existing styling but will allow you to change content without affecting the symbol.
Screenshot of component library
How to use
  1. Access the symbols in the left toolbar. Select the desired symbol to place it on the page.
  2. Double-click into the symbol to globally update any text or images. Or, if the symbol should be a unique instance, simply right-click on the symbol and select "Unlink Instance".

Style guide

A style guide is provided to easily update styles that will change globally on the site. Visit the style guide here.

Screenshot of updating text styles
Typography
  1. Updating the font and font sizes should be done in the style guide. To update the primary font, select the Body element and then choose the Body (All Pages) tag from the style panel. Making changes here will update the font across the entire project. 
  2. To update headline font and sizes, select each headline and then change to your desired styling.
Screenshot of updating color styles
Colors
  1. To change the website colors, navigate down to the colors section in the style guide. Select one of the color blocks. In the style panel, select the background color. In the pop-up, choose the pencil icon to change the primary color. This will change the color across the entire site.

More information

For further information, please visit Webflow University for in-depth tutorials. 

 The only approachable and applicable mental wellness platform for all employees.