[TEMPLATE GUIDE]
Divids ©2026
Everything you need to make Divids your own: get a copy, build new pages with Framer’s AI agent, change things by hand, and find every colour, font and component in one place.
[01 — GET THE TEMPLATE]
Get your own copy
Divids is a Framer website template. When you use it, Framer makes a full copy in your own account, with every page, CMS collection, component and this guide. Nothing you change touches the original.
01
Choose your option
Use the Get Divids card at the bottom right of any page. Pick Free to start straight away, Pro for unlimited sites and the Figma file, or ask us to customise it for you.
02
Open it in Framer
Framer opens a complete copy of the site in your workspace. Every page, CMS item and component is ready to edit, and nothing is locked.
03
Make it yours
Swap the logo, text, photos and contact details, connect your domain in Site Settings, then press Publish. Your site is live in minutes.
[02 — BUILD WITH THE AGENT]
Add pages with one prompt
Divids includes a skill called /design-system. It tells Framer’s AI agent which colours, text styles, components and layout rules this template uses, so every page it builds looks like it was always part of the site.
01
Open the Agent
In the Framer editor, click Agent at the top right. It runs on your workspace’s AI credits, so check you have some before a big request.
02
Type /design-system
Start your message with /design-system, then say what you want in plain words: which page, which sections, in what order, and the real content.
03
Check and publish
Look at Desktop, Tablet and Phone, adjust anything by hand, then publish. Nothing goes live until you press Publish.
Example prompts
/design-system
Add a Case Study page for the Nova Tech rebrand: a hero with the project image, the challenge, our process in three steps, three result stats, and the CTA at the end.
/design-system
Add a Pricing section to the Services page with three packages (Starter, Studio and Partner), what each one includes, and a Schedule a Call button under each.
/design-system
Add a new service called Motion Design to the services list, with a short description, two tags and four focus areas.
/design-system
Add a team member to the About page: Maya Chen, Motion Designer, with her photo and LinkedIn link.
/design-system
Add a Careers page with three open roles, a short note on how we work, and the contact form at the end.
/design-system
Add a client quote strip to the Works page, after the project list, using the existing Testimonials slider.
[03 — EDIT BY HAND]
Change text, photos and colours
You don’t need the agent for everyday changes. Everything on the canvas is editable, and the styles keep your edits looking consistent across the site.
01
Text
Double-click any text on the canvas and type. Headings and paragraphs keep their text styles, so the look stays the same everywhere.
02
Photos
Select an image, then choose a new one in the Fill section of the right panel. Use large, sharp photos; Framer resizes them for every screen.
03
Colours
Open Assets, then Colors, and change Brand/Lime. Every button, label and highlight that uses it updates at once.
04
Works, services and blog
Open the CMS to add, edit or remove projects, services and posts. Their list and detail pages update on their own.
05
Contact form
Select the form and add your email under Send To, so new messages land in your inbox.
[04 — DESIGN SYSTEM]
See every part in one place
In the Framer editor, open Design System under Design in the left panel. Its six boards show how to use the agent, every colour and text style, every component, the layout rules and an example page. The agent builds with exactly the same parts.
00
BOARD
How to Use
The agent in three steps, six example prompts and tips.
01
BOARD
Colors
Every colour style, grouped by its job, with where to use it.
02
BOARD
Typography
Display, body and label styles with real sizes.
03
BOARD
Components
Buttons, labels, cards, rows and the CTA band, with their variants.
04
BOARD
Layout Rules
The 1274px grid, section padding, hover and motion values.
05
BOARD
Example Page
A full case-study page built only from Divids parts.