Motive Webflow Template — Instructions
Welcome to Motive, a modern and flexible agency Webflow template built for creative teams, studios, and service providers.This guide will walk you through how to get started, edit content, and make the most of all template features. No coding required — just customize and launch.
Design system / Variables
You 4 variable collections:
- Base - Includes the Primitve colors, fonts and Sizes
- Text style - which is responsible for all Text styles from H1 to p
- Theme - Here you can have Light or dark mode
- Responsive - here are all the responsive valuese related to Texts or Containers.
1. Base
Here are all of the colors, fonts and Sizes:
2. Base
Here you can modify all text properties. Keep in mind that the purple values are linked to other variables — for example, the H1 size is tied to responsive settings, so it automatically adjusts based on the breakpoint.
3. Theme
At theme’s we set a two color modes, but you can add more or edit those. We connected the Background, text and Buttons to colors from the base collection.
To change the color mode you need to change the theme from variable Theme modes. You can apply those if you use on any section or element those clasess - u-theme-light or u-theme-dark clasess or apply directly to the main-wrapper
Adding utility class (Reccomended)
Changing element theme:
4. Responisve
Here, you can adjust responsive values based on breakpoints — for both text and spacing containers.
Elements (Components)
We have some elements as components. We will cover few more specific parts of those:
- Buttons
- Subtitles
- Tag-s
- Pricing Bullets
- Metrics (Metrics section)
- Nav Link - The big links in Nav
- Navigation
Buttons
We have two 3 types of buttons
- Normal - it is the main button
- Simple - used for the pricing
- Borderless - used in footer, blog cards and more... It can have arrow if switched on from the component properties
Normal Button
For the borderless buttons you can not only change the text and the link from the props, but you can also hid the arrow from the Show Arrow toggle
Borderless buttons
For the borderless buttons you can not only change the text and the link from the props, but you can also hid the arrow from the Show Arrow toggle
Pricing bullets
In order to make any of the bullets negative just select any of them and change the variant to Negative.
Sections
In order for sections to be used properly we have some instructions. So we will list few that might be little more confusing at first.
1. Home Hero - Dynamic
Tho work properly follow the instructions below:
- Hero h1. It applies to all texts in the dynamic marquee element
- Here you need to set tge back and front image. So for back you use it as background, while the front image should be Png with transparent background. Example:
Original:
Remove subject & Save
Additionaly isolate the subject as png
2. Services
The properties for this section are divided into General, CTA, and Boxes. Each of the four boxes has its own set of fields: Title, Description, Image, and Alt Text.
Additionally, the entire element includes a global link that directs users to the Contact page.
3. CTA
The CTA has Image property that changes both front and back image, and then we Have phrase 1 and 2, which are before and after the small image. (Try to keep it up to 2 words for each).
Pages & CMS
CMS (Dynamic) Pages
CMS Collections
"Here you can modify all text properties. Keep in mind that the purple values are linked to other variables — for example, the H1 size is tied to responsive settings, so it automatically adjusts based on the breakpoint.
1. Resources
Use this for blogs, guides, or articles. It came with two sub cms collections. Tags and Types. Each can be set in the Resources CMS in order to apply categories and types that will be shown in the Blog list and Blog page later. You can even filter them in the Resources 1 page.
2.Works
Showcase your projects with 20+ CMS fields such as - title, thumbnail, categories, testimonial, full case study content and SEO fields.
- Works CMS contains also Multireference collection, where you can add all of the services done for the desired project. You can always add or remove services from the Work Services collectionsYou have project external link, which if not set hides the button to it
- Showcase your projects with 20+ CMS fields such as - title, thumbnail, categories, testimonial, full case study content and SEO fields.
- Works CMS contains also Multireference collection, where you can add all of the services done for the desired project.
- You can always add or remove services from the Work Services collections
- You have project external link, which if not set hides the button to it
3. Servics
Services CMS is connected to this section you can find in About 2. You can add or remove services, that will list in this secion.
It has also has Subservices, which you add or remove in order to fit your business needs, and connect it to the desired service
4. Clients
This collection includes all of the Company logos and can be easily managed from each item. It has order number, so by changing it it will move closer or further in the Logos Ticker or logos Grid.
5. FAQ
In this collection are all of the question and answers you can find in the Pricing page or Contact page. You can Easily change their places by changing the order number field in the CMS.
6. Processes
In this collection you are managing the Process sections. Again as the previous collection you have Name, Description and order number.
7. Team
Here you can manage all team members. Add their title, image, description and social links. Also the articles they wrote, You can check one of those pages on this link.
8. Legal Pages
This is a collection of all of the Legal pages that you might need. We added two as example.
Images
1. Gallery
For your convenience split your assets in folders. E.g. Photos, Logos, Infographics, Team...
2. Image optimization
Always compress your images with TinyPNG before uploading. Image compression is one of the most important steps to prevent slow page loads and poor SEO performance.
Other
1. SEO
ALl ot the CMS pages have custom fields for the SEO at are located at the end of each collection that needs it (Resource, Works, Team).
- Title Tag
- Meta Description
- Open Graph Image
2. Sharing Resources
In order to be able to make this work, you need to open each of those links, and edit the URL in the custom code, with your domain:
Edit only the part that shows your domain:
https://www.yourdomain.com/resources/
