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.

1. Backgrounds

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:

  1. Core - colors you can add to your components.
  2. Link - color used for hyperlinked text (i.e. href).
  3. 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:

  1. Heading - every header's default font family
  2. 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.

Did this answer your question?