Welcome
We are delighted to see you here.
This is a quick guide that will help you get started.
Table of contents
How to use this kit
An Elementor Template Kit is a collection of pre-designed templates for Elementor that share a cohesive visual style.
This kit has been optimized for use with the free Hello Elementor theme but may be used with most themes that support Elementor.
Install required plugins
Navigate to Plugins > Add New in your WordPress dashboard.
Install and activate the Elementor Website Builder plugin.
Install and activate the Elementor Pro Website Builder plugin.
One click import
To use this feature, activate the Import / Export Kit feature via Elementor > Settings > Experiments.
Once you activate the new Import/Export Kit functionality you will be able to find the options located in Elementor > Tools > Import Export Kit.
Unzip the downloaded zip file and you may found the three folders
Locate the OneClickImport folder and enter it. Inside you will fild the elementor-kit.zip file which is your Elementor template kit. Drag the elementor-kit.zip file to the area provided, or click the select file button and upload the elementor-kit.zip file:
You will now be asked to choose the content you wish to be imported. By default, all items are checked.
The process will start immediately. Depending on your file size, the process will take several seconds to a couple of minutes to complete. Once completed, you will be prompted to return to your dashboard.
Manual import
Before you can start importing individual sections and pages, it is recommended that you import Global site settings first.
To do so, check the previous One click import step and during upload select only Site settings:
You can then import templates at Templates > Saved Templates. You will find individual templates in the Templates folder.
Click the Import Templates button:
Header & Footer
First, make sure to install the Free Elementor Header & Footer Builder plugin.
Once you have the plugin activated, navigate to Appearance > Elementor Header & Footer Builder and click on the Add New button.
Then Follow these steps:
Select Type of Template (Header). Set its display location (usually Entire site) and user roles (You can leave this unset).
Publish it.
Click Edit with Elementor:
Click the Add Template From Library icon:
Insert Header template:
Save it and you are done!
Repeat the same steps for the Footer section with Footer.
Creating menus
To create your menu, navigate to Appearance > Menus.
In the section labeled Menu Structure drag all the pages you wish to appear as menu items. Now you can add Pages, Posts and Custom Links from blocks located on the left. Once you are finished editing click on Save Menu.
You can then choose your menu from the navigation menu widget:
Creating content
To create a new page, navigate to Pages > Add new.
Then open the page with the Elementor page builder:
Click the Add Template From Library icon to add a Page template, Block, or your own Saved template from the editing screen.
You will find your template files inside the Templates folder. Click the arrow in the top right corner to upload a .json or .zip file:
Your templates will be saved under the My templates tab.
Here you can preview each template by clicking the magnifying glass icon or you can insert templates by clicking Insert to select the required template.
Global site settings
Instead of having to edit each element individually, Elementor makes it easy to make a change in one place, and have that change reflected throughout the entire site. The combination of Elementor’s Theme Style options and Global Colors & Typography embodies this design system methodology.
Theme Style settings are global settings that allow you to set default styling options for various elements, such as Backgrounds, Headings, Buttons, Images, and Form Fields.
To set theme styles click the Hamburger menu in the upper left corner of any page or post’s widget panel to access the Site Settings > Theme Style settings. Theme Style consists of four tabs: Typography, Buttons, Images, and Form Fields.
Elementor Settings
If you are facing some fonts & colors issues. In case after the kit import, your fonts & colors are not the same as the template then just select the check box of disable default fonts & disable default colors Elementor > Settings > Disable Default Fonts, Disable Default Colors.
Editing CSS
Some custom CSS is implemented in this kit. If you want to change this CSS then Follow these steps.
Step 1 - Open the page with the Elementor page builder:
Step 2 - Click on the page settings:
Step 3 - Click on the Advanced option:
Step 4 - Edit the custom CSS and update the page:
Editing content
Elementor is a visual website builder plugin for WordPress enabling the creation of web pages in a live, visual way.
This step-by-step guide walks you through how to use Elementor. You can find more information and tutorials here.
Happy editing!