(Edit me)
Guide
Make it yours.
Everything here is native Framer, CMS and a few small code files. Start with these steps.
Everything here is native Framer, CMS and a few small code files. Start with these steps.
01
01
Remove the Buy template button
Remove the Buy template button
The floating Buy template button is our sales kit for this demo, not part of your site. After you buy, open Layout Templates → Main, select the layer “Buy Template (sales kit)” and delete it, or turn its Visible switch off. It disappears from every page at once.
The floating Buy template button is our sales kit for this demo, not part of your site. After you buy, open Layout Templates → Main, select the layer “Buy Template (sales kit)” and delete it, or turn its Visible switch off. It disappears from every page at once.
02
02
Name and logo
Name and logo
Change “Corbel” in the Navigation and Footer components. On Home, select the hero texts “Corbel”, “& interiors” and “Architects”. The two big words scale to fit any name.
Change “Corbel” in the Navigation and Footer components. On Home, select the hero texts “Corbel”, “& interiors” and “Architects”. The two big words scale to fit any name.
03
03
Hero photo
Hero photo
Select Home → Hero → Photo and swap the image fill. Darker photos keep the cream type readable. The navigation turns cream over the hero automatically.
Select Home → Hero → Photo and swap the image fill. Darker photos keep the cream type readable. The navigation turns cream over the hero automatically.
04
04
Project files
Project files
On Home, select the Project files component. In the right panel, edit each file: name, colour, text colour, photo, location, year, area and link. Add up to nine.
On Home, select the Project files component. In the right panel, edit each file: name, colour, text colour, photo, location, year, area and link. Add up to nine.
05
05
Sketch to building
Sketch to building
Home → Process → Stage → Stills holds four images, from sketch to finished photo. Keep the same framing in all four so the wipes line up. The finished photo goes last.
Home → Process → Stage → Stills holds four images, from sketch to finished photo. Keep the same framing in all four so the wipes line up. The finished photo goes last.
06
06
CMS
CMS
Projects, Disciplines, Journal, FAQ and Roles live in the CMS. Discipline colours come from the Colour field. The Work timeline and index fill themselves.
Projects, Disciplines, Journal, FAQ and Roles live in the CMS. Discipline colours come from the Colour field. The Work timeline and index fill themselves.
07
07
Badge, arch and principles
Badge, arch and principles
The spinning badge and the arch text are TypeOnPath components: change the words and size in the right panel. The Principles diagram takes one line per principle: Title | short line.
The spinning badge and the arch text are TypeOnPath components: change the words and size in the right panel. The Principles diagram takes one line per principle: Title | short line.
08
08
Colours and type
Colours and type
Edit the colour styles (Travertine, Ink, Oxide, Arch, Olive) and text styles in Assets. Fonts: Sofia Sans Extra Condensed, Boska, Supreme and Azeret Mono.
Edit the colour styles (Travertine, Ink, Oxide, Arch, Olive) and text styles in Assets. Fonts: Sofia Sans Extra Condensed, Boska, Supreme and Azeret Mono.
09
09
Motion
Motion
Motion comes from Motion.tsx code overrides. To remove an effect, select the layer and clear its Code Override. Visitors who prefer reduced motion see a still page.
Motion comes from Motion.tsx code overrides. To remove an effect, select the layer and clear its Code Override. Visitors who prefer reduced motion see a still page.
10
10
Contact form
Contact form
The form on Contact sends to Framer Forms. Choose where submissions go in the form’s settings.
The form on Contact sends to Framer Forms. Choose where submissions go in the form’s settings.
11
11
Images
Images
Demo images are placeholders for previewing the layout. Replace them with your own photography before you publish.
Demo images are placeholders for previewing the layout. Replace them with your own photography before you publish.