Website Theme
Set your fonts and colors
once.
Your Theme holds the typography, colors, header and footer every Page shares. Change them in one place and preview the result with your content before it goes live.
Start a WebsiteMade for a slower everyday.
Explore our work ↗Notes from the studio.
A closer look at our process, materials and the things that inspire us.
Have something in mind?
Change the controls to update these illustrations. Your Website and its active Theme are unchanged.
What you can change in a Theme
Make a choice.
Keep it connected.
Fonts, colors and spacing are saved once in your Theme. Everything that uses them updates together, and anything you style individually keeps its own look.
Explore typography and color Codes ↗See where a style is used
- Heading family
- Page headings ↗
- Action color
- Connected buttons and links ↗
- Shared spacing
- Elements that reference the value ↗
Open a style to see its value and where it’s used. Reset a one-off change to follow the Theme again.
Use a Website font
Pick a font from your Media library in the typography settings. Check its family, weight and style, then look at it on a real Page. Make sure the font’s license covers your Website.
Decide how far a change should reach.
A new heading font everywhere and a different header on one Page are two different jobs. Theme has a place for each.
- Design values
- Set the shared starting point.
Choose fonts, colors and spacing in Design. Before you change a style, check where it’s used. Everything that uses it will change. Anything styled on its own stays as it is.
- Responsive styles
- Adjust the look for each screen size.
Set styles for desktop, tablet and phone. Check the same heading, button and Form at each size. Reset a one-off change to follow the Theme again.
- States and modes
- Check more than the default view.
Check how buttons and links look on hover and focus, and how Form errors appear. If your Theme has more than one mode, such as light and dark, edit each one.
- Parts and templates
- Edit the shared parts people see.
Open a shared header, footer or template, select an element and edit its content or styling. Choose which Pages it appears on, and keep its menu links up to date.
Your header belongs to the Website.
Edit a shared header or footer once. You choose which Pages it appears on.
Choose where a part appears
Show it on the whole Website, on Home or on Pages you pick, and leave out any Page you like. A choice for a specific Page wins over a Website-wide one. If two parts claim the same Page, decide which one stays before you save.
Edit inside a shared part
Select an element in the header, footer or template to change its text and style. Menus, parts placed inside other parts and connected content keep their own settings. Bring the selected part into Composer when you want help.
Give a campaign its own header.
Keep your normal header across the Website, but leave out the campaign Page. Then give that Page its own campaign header.
Before you save, you can see which Pages each header appears on and spot any clashes. Choosing the whole Website also covers Pages you add later. Picking Pages covers only the ones you pick.
Use the example to compare a header on the whole Website with one on Home only. The real editor also lets you leave out Pages and review clashes.
- HomeUses this header
- JournalUses this header
- CampaignUses this header
3 of 3 example Pages use this header.
Local display-condition illustration. No Theme or Page is changed.
Preview it with your content.
Start with the style sample, then switch to real Pages to see the Theme with your content. Check long headings, menus, Forms and one-off changes on desktop, tablet and phone.
- Save the draft. Keep your Theme changes without making them live.
- Review the impact. See which Pages and styles will change, and fix any warnings first.
- Make the Theme live. Activate the saved draft when you’re ready. Pages using the Theme get the new look. Publishing Pages and CMS Entries is still a separate step.