Create and Select Style Templates

  1. Happeo
  2. Pages
  3. The basics
Table of contents

This article aims to guide you through the process of creating, managing, and selecting a Style Template.

Create_and_Select_Style_Templates_1.png

Create_and_Select_Style_Templates_1.png

What are Style Templates?

The easiest way to make Pages look like your brand is to create and share a Style Template. Style Templates can be created, managed, and selected from the Page Group Styles Settings.

Select a Style Template

To Select a Style Template, you can:

  1. Navigate to a Page Group
  2. Open up edit mode (pen icon)
  3. Select the Page Group Styles section (paintbrush icon) from the navigation 
  4. From there, click Styles
  5. If there are any shared Page Group Style Templates, you can see and select them from the dropdown menu. Selecting a Style Template will immediately apply the Styles to the Page you are viewing and saving will change all the Pages in that group to match the Template

Create a Style Template

Style Templates can be created from the Styles section. You can select Create new Style Template, add a name for that Style Template and start setting its Styles. Once you've styled the Page to your liking, make sure to save your changes!

There is a multitude of Styles ranging from typography to Widget backgrounds and header heights. It's okay to feel overwhelmed by all the options! You can simply play around and learn from there.

List of styling options

To customize Page fonts and text styles organizationally, you can see our article about Brand Fonts and Text Styles.

Paragraph styles

Edit the way headings, body texts, links, quotes, and line separators are presented. These changes can range from font family to font color, alignment, etc.

You can edit:

  • h1: Header 1
  • h2: Header 2
  • h3: Header 3
  • Body

For these headers, you can customize the:

  • Font family
  • Font size (px): The larger the number, the larger the font size
  • Font weight
  • Line height (px): The larger the number, the larger the line height
  • Font color (RGB & HEX)
  • Alignment

You can also edit:

  • Link
    • Font family
    • Font weight
    • Font color (RGB & HEX)
    • Underlined / not underlined
  • Quote
    • Font family
    • Font size (px): The larger the number, the larger the font size
    • Line height (px): The larger the number, the larger the line height
    • Font color (RGB & HEX)
    • Alignment
  • Line separator
    • Color (RGB & HEX)

Page layout details

Edit the layout of the Page, this meaning the background, background overlay, content width, and padding.

You can customize the:

  • Background
    • Background color (RGB & HEX)
    • Background image
      • Image scrolling
      • Image size
      • Image position
      • Image repeat
    • Background overlay
      • Overlay color (RGB & HEX)
      • Show / don't show
    • Content
      • Width (px): The larger the number, the larger the width
      • Top spacing (px): The larger the number, the larger the spacing. You can go into negative numbers (e.g. -20 reduces the amount of space at the top of the content)
      • Padding (px): Adds space to your content. You can unlock the padding to adjust the space between specific sides of your content. 0 = no padding

Hero

Edit the hero of the Page such as its height, typography (if it has text), image details (if it includes an image), and image overlay.

You can customize the:

  • Layout
    • Height (%): The larger the percentage, the larger the height of the Page hero
    • Background color (RGB & HEX)
  • Typography
    • Font family
    • Font size (px): The larger the number, the larger the font size
    • Font color (RGB & HEX)
    • Font shadow
    • Case (e.g. upper case, lower case)
    • Alignment
    • Show hero text / don't show hero text
  • Image
    • Size
    • Position
    • Repeat
    • Show / don't show
  • Image overlay
    • Overlay color (RGB & HEX)
    • Show / don't show

Navigation

Edit the navigation menu such as its background details, font, hover item color, active item indicator, etc.

You can customize the:

  • Layout
    • Background color (RGB & HEX)
    • Border color (RGB & HEX)
    • Alignment
    • Navigation width (%): The higher the percentage, the wider the navigation
  • Font
    • Font family
    • Font size (px): The larger the number, the larger the font size
    • Case (e.g. upper case, lower case)
    • Font weight
  • Hover item
    • Background color (RGB & HEX)
    • Font color (RGB & HEX)
  • Sub-menu
    • Background color (RGB & HEX)
    • Font color (RGB & HEX)
  • Sub-menu hovering
    • Background color (RGB & HEX)
    • Font color (RGB & HEX)
  • Active item
    • Background color (RGB & HEX)
    • Font color (RGB & HEX)
  • Active item indicator
    • Color (RGB & HEX)

Sections

Edit the way sections are presented such as their background color, padding, border, widget spacing, etc.

You can customize the:

  • Section layout details
    • Background color (RGB & HEX)
    • Rounding (px): The larger the number, the more rounded the section
    • Shadow
  • Background image
    • Image
    • Image size
    • Image position
    • Image repeat
  • Padding (px): Adds space to your content. You can unlock the padding to adjust the space between specific sides of your content. 0 = no padding
  • Border
    • Color (RGB & HEX)
    • Width (px): The larger the number, the larger the width. You can adjust which sides of the border are affected by the width you customized by clicking on the boxes for each side of the border (in the image shown in the Edit Template menu
  • Widget spacing (px): Adds space to your Widget. You can unlock the spacing to adjust the space between specific sides of the Widgets. 0 = no spacing
  • Footer details
    • Text color (RGB & HEX)

Widgets

Edit how widgets are presented such as their background color, header border, padding, etc.

You can customize the:

  • Widget layout details
    • Background color (RGB & HEX)
    • Rounding (px): The larger the number, the more rounded the Widgets will be
    • Shadow
  • Header border
    • Color (RGB & HEX)
    • Width (px): The larger the number, the larger the width. You can adjust which sides of the header border are affected by the width you customized by clicking the boxes for each side of the border (in the image shown in the Edit Template menu
  • Border
    • Color (RGB & HEX)
    • Width (px): The larger the number, the larger the width. You can adjust which sides of the border are affected by the width you customized by clicking the boxes for each side of the border (in the image shown in the Edit Template menu
  • Padding (px): Adds space to your Widgets. You can unlock the padding to adjust the space between specific sides of your Widget. 0 = no padding

Create_and_Select_Style_Templates_2.png

Manage Style Templates

Style Templates can be managed by selecting a Style Template from the list and clicking Edit template.

Create_and_Select_Style_Templates_3.png

Clear a Style Template

If you want to remove all Styles at once, do not select any template. Instead:

  1. Navigate to the Styles menu
  2. Click Copy to my Styles
  3. Select Clear Styles in red at the top
    1. This will revert the Page Group to the default settings

Delete Style Templates

Style Templates can be deleted from Page Group styles > Edit template > Delete template.

Create_and_Select_Style_Templates_4.png
Previous
Next
7600160367121
Was this article helpful?
0 out of 0 found this helpful

Comments

0 comments

Please sign in to leave a comment.