Style Guide Template

Editing the Style Guide Template

To edit the Template: 

Navigate to Templates > Style Guide > click "Edit with Elementor."


The Style Guide template is made up of various Sections.


  1. Page Hero Section
  2. Text Style Section
  3. Text Pairing Section
  4. Button Style Section
  5. Tabs Toggle Accordion Section
  6. Flip Box and Slides Section
  7. Columns with Multiple Buttons Section


Full listing of Elementor Widgets: https://elementor.com/help/widgets/

1. Page Hero Section

Editable Content:

  1. Background Color: Edit Section > Style > Background and Background Overlay.
  2. Heading Widget


To edit the Section Template:

Navigate to Templates > Section > Page Hero Section > click "Edit with Elementor."

2. Text Style Section

This section shows your site's heading and paragraph styles laid out in two columns. This section is helpful if you ever decide to change your global styles.

This section is not meant to be used for content on your site.

3. Text Pairing Section

This section shows your site's heading styles in suggested pairings. This section is helpful if you ever decide to change your global styles. 

This section is not meant to be used for content on your site.

4. Button Style Section

Your site's global settings allow you to set 5 button styles (xs, small, medium, large and xl). The first column is your default button style (blue buttons that hover to black). I've created 3 other styles that will give you some more variation on the site.

If you want to add a button to a page on your site, the Button Widget can be used to add a blue button. If you want to use any of the other options, simply add this section to your page, copy and paste the button of your choosing and then delete the section.

This section is not meant to be used for content on your site.

5. Tabs Toggle Accordion Section

If you add a Tab, Toggle or Accordion Widget to your page, it will use Global styles, but I have created these options with a bit more specific styling to match your new site's style.

If you want to add a tab, toggle or accordion to a page on your site, simply add this section to your page, copy and paste the widget of your choosing and then delete the section.

This section is not meant to be used for content on your site.

6. Flip Box and Slides Section

If you add a Flip Box or Slide Widget to your page, it will use Global styles, but I have created these options with a bit more specific styling to match your new site's style.

If you want to add a flip box or slide to a page on your site, simply add this section to your page, copy and paste the widget of your choosing and then delete the section.

This section is not meant to be used for content on your site.

7. Columns with Multiple Buttons Section

There may be times you want to add columns of content with images and multiple links. Duplicate or delete columns as needed.


Editable Content:

  1. Background: Edit Section > Style > Background
  2. Heading Widget
  3. Column 1
    1. Background: Edit Column > Style > Background and Background Overlay
    2. Image Widget
    3. Text Editor
    4. Button Widget
    5. Button Widget
  4. Column 2
    1. Background: Edit Column > Style > Background and Background Overlay
    2. Image Widget
    3. Text Editor
    4. Button Widget
    5. Button Widget

Button Note:

These buttons are set on the same like by using inline positioning. To edit this, go to Edit Button > Advanced > Positioning > Inline(auto)