How Page Themes work
Page Themes is the central page setting where you establish your page width, colors, font families, text sizes and spacing increments.
Your page theme maintains the styles as you continue to make changes in your page layout, content, and design.
For example, if you had many links on your page and you want to update all of their colors, all you have to do is update the "Link" color in your Page's theme - saving you time from having to update each link's color individually.
Configure your Page Theme
You can access your current page's theme by clicking the second tab in the Top Right Bar.
Add, remove, or update your page's backgrounds.
💡 Create a cool pattern across your page by adding a small background image to your theme and repeating it vertically and horizontally.
2. Color Palette
Add or remove colors to your palette and update an existing one.
There are three types of color settings in your palette:
- Core - colors you can add to your components.
- Link - color used for hyperlinked text (i.e. href).
- Text - default color used for paragraphs.
There is no limit to the number of Core colors in your palette.
However, there is only one link color and one text color in your palette.
When you update the color palette, the component's color updates automatically. For example, if you had many links on your page and you want to update all of their colors, all you have to do is update the "Link" color in your palette - saving you time from having to update each link's color individually.
3. Font Family
Set your page's font families to maintain a consistent reading experience. Our font library is backed by Google Fonts so if you can find it there, it is available in Landing Lion.
Your theme has two font families:
- Heading - every header's default font family
- Paragraph - every paragraph's default font family
4. Font Size
Scale your font sizes so you can draw emphasis to certain copy when it's needed. You can set the size for all of your headers (H1-H6) and paragraphs (P).
5. Page Layout
Set your page width spacing increments. This is also where you set your page's minimum width.