Brand Your Theme Kit

This guide will walk you through how to configure Elementor to utilize your branding - including colors, fonts, your logo, and more.

TABLE OF CONTENTS

• Adjust Elementor Global Colors
• Adjust Elementor Global Fonts
• Upload Content (Page Content, Blog Posts, Etc.)
• Theme Kit Specific Branding
  • ETCH Theme Kit
    • Assign Home & Blog Page
    • Go to Appearance > Customize
    • Set Header Testimonial Template Item
    • Set Footer Contact Form Notification Email Address
    • Set Global Archive Template Item
    • Set Home Page Template Item Values & Content
    • Set Services Page Template Item Values

Adjust Elementor Global Colors

You will need to update the Global Colors to ensure that the coloring across the site reflects your brand properly.

1. Go to Elementor > Home
   
2. Click Site Settings (Customize)
   
3. Click Global Colors
   

Here, you will be presented with a style guide preview page, with all of your options on the left-hand side. Below, we've listed the main colors used in our sites:

• Style Main Color
  The main brand color that you want to showcase on your website. This will be used for things like buttons and highlights.
• Style Main Accent
  The secondary brand color that you want to showcase on your website. We recommend selecting something either complimentary, or neutral
• Style Main Light
  This is the light color that we use for light-background areas of the website. Typically these are a light grey, white, or beige, or even a pastel variation of the brand color.
• Style Main Dark
  This is the dark color that we use for dark-background areas of the website. Typically these are dark grey, black, or brown, or even a highly darkened/saturated version of the brand color.
• Style White
  Provides a global white variable that can be adjusted.
• Style Off-White
  Provides a global off-white variable that can be adjusted.
• Style Light Grey
  Provides a global light grey variable that can be adjusted.
• Style Grey
  Provides a grey variable that can be adjusted.
• Style Black
  Provides a black variable that can be adjusted. Usually set to black or off-black.

DIY TIP: If you need assistance figuring out good color matches, you can use a tool like coolors.co to enter your brand color to generate a palette to compliment it.

You can adjust these however you see fit, and they preview them on your site by turning off the Style Guide Preview

Adjust Elementor Global Fonts

We recommend against this step as there are a few special tweaks installed in the Elementor Page builder for your kit templates that correct for inconsistencies in font spacing that naturally occur between browsers. If you continue, please keep in mind that you may notice off-setting or strange spacing of elements.

Upload Content (Page Content, Blog Posts, Etc.)

Theme Kit Specific Branding

With some of our theme kits, there may be additional steps required to complete setup. We've included these below.

We are working to improve these features on a daily basis. Currently Elementor does not support the pre-selection export of Loop Item Templates, leading to the additional steps below. We may be branching this off into a separate article later on. We will provide proper adjustments to this documentation at that time.

ETCH Theme Kit

If you are using the ETCH Theme Kit, follow these additional steps to complete the setup of your Theme Kit.

Assign Home & Blog Page

1. Go to Appearance > Customize

2. Go to Homepage Settings
3. Ensure that Homepage is set to Home
4. Ensure that Posts page is set to Blog
   

Set Header Testimonial Template Item

1. Go to Templates > Theme Builder
   
2.  On the left-hand side, click Header
   
3. Click Edit on Global Header
   
4. At the very top of the page, find the gray box and click the pink pencil
   
5. Under Choose a template, search for "Header Testimonial Loop Item" and select it
   
6. Click Update to save
   

Set Footer Contact Form Notification Email Address

1. Go to Templates > Theme Builder
   
2. On the left-hand side, click Footer
   
3. Click Edit on Global Footer
   
4. Hover over the contact form and click the pink pencil
   
5. Click on the Email drop down
   
6. Configure your settings as necessary for your scenario
   
7. Make any adjustments to the fields if you need to if you wish to collect different information.
8. Click Update to save
   

Set Global Archive Template Item

1. Go to Templates > Theme Builder
   
2. On the left-hand side, click Archive
   
3. Click Edit on Global Blog Archive
   
4. Hover over the gray box and click the pink pencil
   
5. Under Choose a template, search for "Blog Post Loop Item (Tile)" and select it
   
6. Click Update to save
   

Set Home Page Template Item Values & Content

1. Go to Pages > All Pages > Home - Front Page, Elementor (Hover)
   
2. Click Edit with Elementor
3. Click on the slider
   
4. On the left-hand side, modify each slide (add or remove as necessary) to contain the content that you'd find appropriate. You can modify the text content under the Content tab
   
5. In the builder, scroll down to the Our Services section, and hover over the center of the black square until you see a pink outline show up. Once it does, click on the pink pencil to edit the element (Loop Grid).
   
6. On the left-hand side, under Choose a template, search for "Service Loop Item" and select it. You should see the example services populate unless you chose not to import them during the previous guides.
   
7. Scroll down to the About <Site Name> Section, and hover over the paragraph content, then click on the pink pencil icon
   
8. Modify this content as you see fit.
9. Hover over the gray box below, and click the pink pencil
   
10. On the left-hand side, under Choose a template, search for "Testimonial Loop Item" and select it. You should see the example testimonials populate unless you chose not to import them during the previous guides.
    
11. Click Update to save
    

Set Services Page Template Item Values

1. Go to Pages > All Pages > Services - Elementor  (Hover)
   
2. Click Edit with Elementor
3. Hover over the gray box below, and click the pink pencil
   On the left-hand side, under Choose a template, search for "Service Loop Item" and select it. You should see the example services populate unless you chose not to import them during the previous guides.
   
4. Click Update to save
   

Set Projects Page Template Item Values 

1. Go to Pages > All Pages > Projects - Elementor(Hover)
   
2. Click Edit with Elementor
3. Hover over the gray box below, and click the pink pencil
   
4. On the left-hand side, under Choose a template, search for "Project Loop Item" and select it. You should see the example services populate unless you chose not to import them during the previous guides.
   
5. Click Update to save
   

Set Employment Page Form Information

1. Go to Pages > All Pages > Employment - Elementor  (Hover)
   
2. Click Edit with Elementor
3. Hover over the form and click the pink pencil to edit it.
   
4. Click on the Email drop down
   
5. Configure your settings as necessary for your scenario
   
6. Make any adjustments to the fields if you need to if you wish to collect different information.
7. Click Update to save any changes
   

Set About Us Page Template Item Values & Content

1. Go to Pages > All Pages > About Us - Elementor  (Hover)
   
2. Click Edit with Elementor
3. Find the 'Meet <Site Name>' section, and hover over the paragraph, and clicking the pink pencil to edit it
   
4. Find the 'What People Say About Us' section, and hover over the gray box, and click the pink pencil
   
5. On the left-hand side, under Choose a template, search for "Testimonial Loop Item" and select it. You should see the example services populate unless you chose not to import them during the previous guides.
   
6. Click Update to save any changes