How To Use Template Kits For Your Elementor Cloud Site

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. 

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).

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
  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.
  3. The importer will now process your request. Do not close or refresh this page until complete.
  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.
  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.

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.

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:

  1. Click the Create New Menu button
  2. Name your new menu (example: Primary) and toggle the menu location.
  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.
  4. You will now have these pages in your menu. You may click and drag to reorder them as desired.
  5. You can also add Categories or other content related to your Kit by expanding the items.
  6. Create Sub-Menus by dragging the items under a parent item so they are slightly indented.
  7. Set the Menu Location primary and publish your menu.

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.

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 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.

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.

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.

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

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.

Editing the Global Fonts

  1. Locate the Site Settings – Site Settings is located at the top corner of your editor panel.
  2. Locating the Global Fonts – The Template Kit fonts are all located in the Global Fonts settings pictured below.
  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.
  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.
  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.

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.

Share it on social networks

Share on facebook
Share on twitter
Share on linkedin
Share on email
Was this article helpful?

Get Started With Elementor Today

Join millions of professionals who use Elementor to build WordPress websites faster and better than ever before

On this page