Instructions

Webflow is a great tool to build websites. Below are a few starting points on how to edit this template. If you're looking for more, you can always explore Webflow University: Webflow University.

Elements

In this template, the elements are arranged and set ready. But it is possible for you to customize according to your needs.

To change an element, simply double click on it.

If an element is blue. Options will appear in the bar on the right, including styling under 'Style' and specifications on its possibilities and functions under 'Settings'.  

If an element is purple, it means it comes from the CMS. You can modify these items there or create new ones that fit your goals with this template.

instruction elements
instruction classes

Classes

Webflow has te option to name all it's elements. This is called a class. It can be added in the bar on the right in the option style. Because a class makes it possible to add styling to this name.

If another element has or gets this name. Then it will automatically have the same styling.

You are able to change its styling, this is easiest done on the style guide page. OR you can remove classes and create new ones or you can add another name to the class to give the one element specific other changes.

Components

When you click on an element and it is green, it means it is a component.

You can edit this element by clicking on the green pencil that appears after you click on it.

When you make adjustments to this element, it will change on every page where this component is used, as all green component elements with the same name are connected.

If you want to break this link, you can right-click and choose 'unlink instance.' After doing this, the element should no longer be green, and changes will apply only to the page you are editing.

instruction component
instruction accessibility

Accessibility

This website is designed with accessibility rules and improvements to ensure that every user, regardless of visual impairments, can have a good experience. One of the elements added, but not directly visible, is the skip link. This hidden link becomes visible when focused and allows users to skip directly to the main content of the page when tabbing through links.

Apart from these starting points, Webflow University offers a comprehensive explanation of its functionality and possibilities: Webflow University.