How To Use Template Kits For Your Elementor hosted website

Last Update: July 16, 2023

What Are Template Kits

Template kits are a bundle of templates, pages, pop ups, and all the needed parts for a complete website. Rather than importing each template individually as we have done in the past, you may now import all the content at once. The Kit Library can also help users learn about website structure, including all must-have pages and parts that every website needs to include. You will also learn to create menus for your site. Each kit comes with a complete design and structure of a full website and includes content pages, Theme Builder parts, and Popups. Learn more here.

Selecting a Kit

You may open the kit library by navigating to the WordPress Panel > Templates > Kit library. From there, you can choose one that best suits your needs. Kits can be completely edited after importing so use your imagination if a specific template genre is not yet available. 

Kits One 1024x493 1 How To Use Template Kits For Your Elementor hosted website 1

How Kits Are Structured

Template Kits are bundled with all the needed site parts and templates.You can see a working demo of the complete kit before importing. By clicking the Overview button at the top of the kit, you may view all the items that you will be importing. These typically include several demo Pages, Posts, and all the Theme Builder Site Parts (header, footer, archive, single post, single page, 404, etc).

Site Parts Overview 1 1024x576 1 How To Use Template Kits For Your Elementor hosted website 3

Applying a Kit

When you have selected the template it you would like to use, you may start the import process below:

  1. Click the Apply Kit button
    Apply Kit 1 How To Use Template Kits For Your Elementor hosted website 5
  2. Select the content you wish to import. You may keep all toggled, or only choose to import parts of the kit. Once completed, click the green Next button at the bottom of your screen.
    Select The Parts 1 How To Use Template Kits For Your Elementor hosted website 7
  3. The importer will now process your request. Do not close or refresh this page until complete.
    ProcessingFile How To Use Template Kits For Your Elementor hosted website 9
  4. If your website already has Theme Builder templates assigned, you will be asked to select the templates you wish to override. Unselected templates will still be imported but without display conditions.
    override warning How To Use Template Kits For Your Elementor hosted website 11
  5. Once the import is complete, you will see a complete list of all imported content.  You may now return to the dashboard and view your content.
    success How To Use Template Kits For Your Elementor hosted website 13 

The Site Identity

Navigate to Site Settings > Site Identity. Here you can change the name of your site, the tagline, the logo, and the favicon.

image 8 How To Use Template Kits For Your Elementor hosted website 15

Editing the Site Name and Tagline

  1. Site Name: Enter the name of your website in the field
  2. Site Description: Enter a tagline for your website in the field

Adding the Logo

  1. Site Logo: Use the media tool to choose an image from your media library or upload from your computer. This will be used by the Site Logo widget and other site functions
  2. Site Favicon: The favicon is used in the browser as the tiny icon located at the top of the tab. Use the media tool to choose an image from your media library or upload from your computer.

Note: SVGs may be used if previously uploaded to the media library. You must also define a size in the style tab of your Site Logo Widget.


From the top admin bar of your website, or from Dashboard > Appearance choose to enter the Customizer. For this example, we will be using the Hello Theme. Select the Menus accordion here:

Creating A Menu With The Customizer

From the top Admin Bar of your website, or from Dashboard > Appearance choose to enter the Customizer. For this example we will be using the Hello Theme. Select the Menus accordion here:

Create Menu Customizer How To Use Template Kits For Your Elementor hosted website 17
  1. Click the Create New Menu button
    Customizer Create New Menu How To Use Template Kits For Your Elementor hosted website 19
  2. Name your new menu (example: Primary) and toggle the menu location.
    Name New Menu How To Use Template Kits For Your Elementor hosted website 21
  3. Click the Add Items button. A panel will expand showing the available items to add to your menu. Add our newly imported Elementor Pages.Add Items How To Use Template Kits For Your Elementor hosted website 23
  4. You will now have these pages in your menu. You may click and drag to reorder them as desired.Pages Added How To Use Template Kits For Your Elementor hosted website 25
  5. You can also add Categories or other content related to your Kit by expanding the items.Add Categories How To Use Template Kits For Your Elementor hosted website 27
  6. Create Sub-Menus by dragging the items under a parent item so they are slightly indented.
    Create Submenu How To Use Template Kits For Your Elementor hosted website 29
  7. Set the Menu Location primary and publish your menu.
PublishMenu How To Use Template Kits For Your Elementor hosted website 31

Assign Menu To The Nav Menu Widget

You may now also need to assign your new menu to the Nav Menu widget. To do this, edit your Header template in the Theme Builder. From the Menu selector field, choose your newly created menu to assign it to the widget.

image 9 1 How To Use Template Kits For Your Elementor hosted website 33

Note: If your Footer template uses a Nav Menu widget, you may use the steps above to create and assign an additional menu(s)to be used.

Note: Learn more about the Navigation Widget here.

Editing the Content

Editing the Pages

Your kit will import several pages. These can be found in the Dashboard > Pages area of WordPress. To edit them click the Edit with Elementor link. For more information on editing with Elementor click here.

Editing Pages One 1 1024x497 1 How To Use Template Kits For Your Elementor hosted website 35

Editing the Posts

In order to help get you started, sample Posts will be auto generated, this helps you to visualize the Archives, Single Post, and other Kit layouts. Once you have started adding your own content these posts may be deleted.

SamplePosts 1024x534 1 How To Use Template Kits For Your Elementor hosted website 37

Editing the Theme Parts

Kits also import the Theme Builder theme parts. These will include the Header, Footer, Archive, Single Post, Single Page, and 404 Page (if applicable to the Kit) You can find these parts in the Theme Builder. Note that your site was created with a starter kit that included a default single page template, header and footer. If your template kit includes these templates they will replace these defaults. For more on the Elementor Theme Builder click here.

edit theme parts 1024x500 1 How To Use Template Kits For Your Elementor hosted website 39

Editing the Popups

If your kit includes popups for contact forms, navigation, or other uses, you may locate these in the dashboard located in the templates region.

Popups 1 1024x497 1 How To Use Template Kits For Your Elementor hosted website 41

You can add the kit popups to the icons or links by using the dynamic options. For more about popups click here.

Popups Part Two 1024x516 1 How To Use Template Kits For Your Elementor hosted website 43

Editing Template Kit Global Settings

When working with Template Kits, the Global Fonts and Colors have already been set up for you. To edit these, we will use the Global Site Settings.

Kit Global Fonts One 1 1024x576 3 How To Use Template Kits For Your Elementor hosted website 45

Editing the Global Fonts

  1. Locate the Site Settings – Site Settings is located at the top corner of your editor panel.Locating Site Settings 1 How To Use Template Kits For Your Elementor hosted website 47
  2. Locating the Global Fonts – The Template Kit fonts are all located in the Global Fonts settings pictured below.Locating Global Fonts 1 How To Use Template Kits For Your Elementor hosted website 49
  3. Locating the main hero title settings – In our example, we are editing the main hero title. You will find this in the list of imported styles. Editing the settings here will update the font on all usages in your site.PWZrFsyIQ4GF 4UyHcW1c3gIsipibMAEQdWEnQe1JycThHcwSWsmaR B bYT2hYwiIHh1Eth43QbsotvOwMfozKTcwlKwiDNUyrkJekIIZPN0ZtosAWZBgHjVI6LFY bJg C7ld How To Use Template Kits For Your Elementor hosted website 51
  4. Changing the font settings – Select the new family you wish to use for your main hero title throughout the website. You may also set the size, weight, transform, style, decoration, line-height, and letter spacing at this time.
    Locating The Main Hero Title 1 How To Use Template Kits For Your Elementor hosted website 53
  5. Update your site settings – Click the blue update button at the bottom. You may edit the other global fonts located on this page at this time, or return to the editor.

Editing the Global Colors

Your Template Kit also uses Global Colors in headings, text, backgrounds and buttons. These may also be found in the Site Settings at the top under Global Colors. You may edit these using the color picker. These settings will apply to all the applications used on your Kit. Learn more about Global Colors here.

Note: You may find that some kits also use the general site background color. You can change this located in Site Settings > Settings > Background.

FrZzq90 kSty0xg8V49Nlt3m1QmJ AuGHCQOTZPOGGNsoB52H9xP1zAMREn6T9GWdeWMvdOX KaopDkvpDtYsI7 b6YxwyUrr1xjw8C56oyFtmLpOWWyzkK5B5bdR5QC1Cap07n How To Use Template Kits For Your Elementor hosted website 55

Other Information

Tip: Learn more about the Navigation Widget here.

Note: Please be advised that some of the kits contain third-party images, videos, media, files, audio and other visual components. While we have the right to use them in our Kits Library, we cannot ensure that you may use them in your own product. Therefore, please replace or remove all above assets from your copy of the Kits.

Important: Importing Template Kits may overwrite or append your current site data. It is best to use Template Kits on a new installation or after a reset. Please make a backup if installing a kit on an existing site. 

Important: An invalid template error will be displayed if attempting to import kits from Envato using the Elementor Import feature. These kits are bundled differently than Elementor Kits. When using kits from Envato, you will need to install and import using their companion plugin. Please refer to their documentation for more information.

On this page

Share this article