What Are Site Kits
Site 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. 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
Site 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 kit you would like to use, you may start the import process below:
- Click the Apply Kit button
- 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.
- The importer will now process your request. Do not close or refresh this page until complete.
- 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.
- 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 Kit was Imported, What is Next
Editing 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
- Site Name: Enter the name of your website in the field
- Site Description: Enter a tagline for your website in the field
Adding the Logo
- 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
- 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.
Creating the Menu
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:
- Click the Create New Menu button
- Name your new menu (example: Primary) and toggle the menu location.
- Click the Add Items button. A panel will expand showing the available items to add to your menu. Add our newly imported Elementor Pages.
- You will now have these pages in your menu. You may click and drag to reorder them as desired.
- You can also add Categories or other content related to your Kit by expanding the items.
- Create Sub-Menus by dragging the items under a parent item so they are slightly indented.
- 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
- Locate the Site Settings – Site Settings is located at the top corner of your editor panel.
- Locating the Global Fonts – The Template Kit fonts are all located in the Global Fonts settings pictured below.
- 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.
- 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.
- 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.
Note: 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.