Elementor Template Kits

Design System Setup

A guide for Envato Authors

Last updated Nov 1, 2022

Template Kit Requirement: All font settings must be setup under Site Settings to allow users to customize fonts in one place.

Global Font Styles control the core styles of your kit and are used to set all other styles.

setup style here

not here

Design System & Site Settings

If you have not developed a brand board or design system in advance of building your kit, you will need to reference your template element settings to create your set of visual font styles, then unset all element-level settings to replace them with the new global font option.

Intro

Your typography design system is split into two functions, document hierarchy and visual heirarchy.

The document hierarchy refers to the HTML tag selected on the element for the text and establishes the order content is read by search engines and screen readers. This is similar to a Google doc, where you want content to be organized in a logical, readable manner.

The visual hierarchy refers to the visual scale and emphasis of the font style itself. Font styles can be applied to any bit of text regardless of the document hierarchy they hold and control the visual flow of information vs the technical.

The Global fonts deal with visual styles only.

In Elementor Site Settings, there is a Design System (or set of global options) that establish the kit’s brand and style guideline, and allow for establishing visual styles that can be controlled from one spot but set in multiple elements across the templates.

Step 1: Create Global Font Styles

There are four System Font options pre-programmed to work with general groups of elements. These ensure a minimum level of styling will be applied, and that 3rd party plugins using these general style selectors will also (hopefully) match your kit.

The Primary, Secondary, Text and Accent are pre-coded to work with Headings, body text and buttons. You may change the labels of these items (such as “Accent” to “Label Text” but should not delete them.

Tip: The Primary and Secondary styles can serve as wildcard options that can be used in combination with an element’s Default Size dropdown or default size.

Go to Site Settings > Global Fonts and set the Primary Font to your kit’s main font. We recommend leaving size blank. If your kit only has one font family for headings, you might set a weight here as well
Set the Secondary font to your kit’s secondary font style.
- This may be a second font, or simply a different style of the main one (such as a lighter weight, or uppercase)
Set the Text style to your kit’s Body text font. In most cases, this should be 1em with at least 1.5em line height. The body font style does not have a transform and should not be italicized or bolded.
Set the Accent style to match your button/label text style.

Custom Styles

Your Custom Styles should follow the visual hierarchy of your design.

Avoid duplicating styles. All similar elements in your design will use one font style setting regardless of their HTML tag or purpose. If you have one element that is 16px and one that is 17px, consider creating just one style with a 1.1em font size that covers both to reduce complexity for your users.
Name your styles semantically. These should be easy for non-technical users to understand at a glance – for example, “Hero Title” “Large Title” “Small Title” “Uppercase Subtitle” are all easy to understand. “T1 43/500 1-9” is not.
Forget about the document hierarchy when creating styles. Styles are not H1 or H2 or H3 – the structure is. For example you might have a style “Medium Title” that is used on icon boxes throughout your design that happen to have an H4 assignment, but the Medium title might also need to be used in a small CTA that should have an H2 heading. Rather than make duplicate styles, you use the one Medium Title on both, and simply set whatever tag they need for the right document structure.

Tip The WAVE evaluation tool can help you with correctly identifying where document structure may need adjustment ocne all of your elements are styled.

Resources:

Step 2: Go to Site Settings > Global Colors and set the core colors.

Global default colors must be set and will be used throughout your templates everywhere a color is selected.

The Elementor Design System has 4 preset color options Primary, Secondary, Text and Accent, which are pre-populated from the user’s theme CSS, so these must be set with your kit colors. You may relabel these to be more semantic, but cannot delete or repurpose them.

Primary Colors are used for Headings and Icons.
Secondary Colors are used for List Items, Subheadings, Animated Headings, and Price Table backgrounds.
Text Colors are used for Paragraphs and Menu items
Accent Colors are used for Links, Button backgrounds, Tab and Accordion headings, and Badges

All additional colors can be created from your templates by clicking on the element’s color option and then clicking the plus icon to add the color. Be sure to name it in a way that helps users understand what customizing it will affect, such as “Alternate Background” or “Overlay” or “Tag bubbles” – using color descriptiors or pantone codes are not helpful.

Step 3: Set Site Settings > Typography

The Typography area is where Elementor applies document tag fallbacks for the theme or 3rd party plugins. These settings look at the top-level CSS styles for each HTML heading and apply the set style to ensure things like content created in the WordPress editor, or headings in plugin content that isn’t customized with Elementor, can match your kit design.

Go to Site Settings > Typography and click the pencil, then click Back to Default
Click the Globe icon and select the corresponding Global style for each option, except the Link option
- The links will inherit the parent style for the element
- These should follow a logical scale with H1 being larger than H2 and so on.
- To test, use the WordPress test unit dummy content, or create a post with all of the headings demonstrated.
Set a global color for each option, including the link. The color should be the default for whatever the overall background color is – for example if your pages are white, set these to the dark color. In your design, you will set alternate colors for light text on dark backgrounds separately.

Tip We recommend setting Link typography style to Default (so it inherits parent) with Text decoration set to None if you do not want all links to underline by default.

Step 4: Go to Site Settings > Buttons to Set main Button style

When a new button is added to a template, it should match your primary button style. The primary button is the style used for the CTA or most important choice.

Go to Site Settings > Buttons and and click the pencil on the Typography option, then click Back to Default if needed
Click the globe icon to select the “Accent” font style for the button label
Set the colors using Global colors (typically the “Accent” color)

You may have a second or third button style for things like alternate buttons or Read More. These will typically have the same label/font style but might be a different color or border – you can set alternate button colors or borders in the button options for those individual buttons OR if including a style guide template, style the buttons once and use copy/paste to easily copy those styles where the buttons are used in your templates.

Tip If your main button does NOT have a border, please set the border to Solid, 0px. This ensures buttons with undefined borders do not load in default pink, such as Comment submit button.

Do not set gradient background styles for global button style if your alternate styles are solid or transparent or you will need to set gradient styles for ALL buttons to reset the second color. Choose a simple solid UI, and use gradients as a secondary style even if they are your main CTA.

Step 5: Setup Form Style

Whether your kit uses Pro or not, the form style should be configured to ensure form plugins that support Elementor will use the preset styling (this is important for 3rd party forms that do not have full styling in the builder)

Go to Site Settings > Forms and and click the pencil, then click Back to Default if needed
Click the globe icon to select the corresponding font style for the labels, button and field text. These are typically the Accent style for labels, and text or small text style for fields.
Set the colors using Global colors
- The form button will default to the main button style, but you can configure it separately in individual forms where desired.

Step 6: Unset template element typography styles

This is the important part – all elements in your template layouts must be reset and the global options applied to colors and typography settings, replacing any pencil icon settings.

Go through each element in your templates to clear any typography styles from the pencil icon options by clicking the pencil, then clicking Back to Default.
Select the Global Font and Global Color style under the Globe Icons.

Step 7: Make sure the correct HTML tag is set for the document hierarchy.

As explained earlier, your text elements are styled independently of the HTML tag or document structure they hold. This does not mean document structure is not important – in fact it is a critical part of successful SEO and Accessibility.

To determine the correct tag, consider how your content reads as if it were in a Google doc where only the heading styles were set. How would the content be outlined to be grouped and ordered logically?

Start by ensuring the first headings at the top of your page – typically the hero or page titles – have an H1 tag set.
- If your title is a sentence broken into two headings with different styles, they should both have an H1 tag.
- There is only one H1 per page (or H1 group)
Group content (usually by sections). Headings that lead section content are typically H2. This may include small subtitles that proceed larger ones, in which case the larger one is also an H2, or takes an H3 depending on the wording.
Item titles like icon boxes are typically H3 and below.

Example of standard document structure:

Note how the smaller section headings are actually the H2 as they title the content group, whereas the taglines have larger emphasis in spite of being lower in the document structure.

Name your styles

Go to Site Settings to open the blue panel
Click the gear icon at the bottom left to access Kit Settings
Give the styles a name that matches your item e.g. Kitly Global Site Settings

Exporting

Theme Styles will show as Global Kit styles in your export list and must have “Include in template kit Export ZIP” checked

Ensure the Global Kit Styles image is the same as your TF cover image (this is used as the item cover image in the Elements/Elementor Template Kits listings.

Table of Contents