styleguide

Style Kit setup template

A utility template to help you set up your Style Kit.

Primary / Links / Icons color

Secondary / button color

Dark Background Color

Light Background Color

Accent Background Color

Color

Style Kit Colors

Manage the essential colour system of your layouts by defining these basic colors.

Typography

Heading 1

Feature Heading 3

An example with an icon box

Feature Heading 3

An example with an icon box

This is Heading 2

In Style Kits you have complete flexibility of the Typographic styles. Adjust the styles for the Body and Headings typography panels in Style Kits.

This is Heading 3

This is Heading 4

This is Heading 5
This is Heading 6

Typography

Heading 1

Feature Heading 3

An example with an icon box

Feature Heading 3

An example with an icon box

This is Heading 2

Go to the Style Kit panel, and manage the whole typography on this layout via a number of useful controls. You can also set up your Buttons and Column Gaps. 

This is Heading 3

This is Heading 4

This is Heading 5
This is Heading 6

TExt Sizes

This is XXL Text

This is XL Text

This is Large Text

This is Medium Text

This is Small Text

Heading Sizes

XXL Heading

XL Heading

Large Heading

Medium Heading

Small Heading

Buttons

Button Styles

Dynamic button style control

Head over to the Style Kits panel, and open the Buttons tab to customise the style of each button size.

Accent background

Here's a section with an accent background colour class.

Forms

Contact Form Style

You can change the default styles of the Elementor form by customising the Forms panel in the Style Kit sidebar.

Default Column Gap

The Default column Gap defines the default padding of the columns in your Elementor Layouts.

01.

Color Pallette

#66A77C
#4B8B61
#FF7E54
#333333
#6B6B6B
#EBF2F0
#FFFCF1
02.

Typography

Cozy Lumox

Sphinx of black quartz, judge my vow

Bold text demo for lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.  Cras justo odio, dapibus ac facilisis in, egestas eget quam. Curabitur blandit tempus porttitor

Headings: Josefin Sans

Paragraph: Nunito Sans, 16px

Subtitle: Eb Garamond, 16px
Clouds come floating into my life, no longer to carry rain or usher storm, but to add color to my sunset sky
— Blockquote

Hero Title

How quickly daft jumping zebras vex

Hero Title

Heading

Jackdaws love my big sphinx of quartz

H1

The quick brown fox jumps over the lazy dog

H2

The quick onyx goblin jumps over the lazy dwarf

H3

Cozy lummox gives smart squid who asks for job pen

H4

How razorback-jumping frogs can level six piqued gymnasts

H5

We promptly judged antique ivory buckles for the next prize

H6

03.

Iconography

Logo