Evencof

Step 1: Import Template Files

First, you need to upload and import the template kit files into your WordPress site.

Navigate to Plugins > Add Plugin and search for Template Kit – Import
Install and activate the plugin
Once activated, go to Tools > Template Kit
Click “Upload Template Kit ZIP File” and upload the file you downloaded from Envato Market
Wait for the upload to complete — a list of available templates to import will appear when done
Click “Install Requirements” in the top-right corner, check all required items, then click “Install Above Selected Requirements” to install them
Start by importing the Global Kit Styles — click “Import Template” on that item first, then continue importing the remaining templates

Note!
When you click “Import Template”, the pages will be added to Elementor > Theme Builder and Elementor > Editor > Templates. If your Elementor version is under v3.35.0, they will appear under Elementor > Saved Templates instead.

Step 2: Set Up WooCommerce

Before importing any WooCommerce-related templates, you need to set up WooCommerce first so all the required pages are ready.

After activating WooCommerce, you will be prompted to run the Setup Wizard — follow the steps to configure your store (currency, location, payment, etc.)
Once the wizard is complete, WooCommerce will automatically create the following pages: Shop, Cart, Checkout, and My Account
Verify these pages exist by going to Pages in your WordPress dashboard
For the Purchase Summary (Thank You page), create it manually under Pages, then assign it in Elementor via Site Settings > WooCommerce

Note!
If these pages are not created automatically, create them manually under Pages. After that, go to WooCommerce > Settings > Advanced and assign each page.

Step 3: Create and Import Pages

Now you will create your website pages and apply the imported templates to them.

In your WordPress dashboard, go to Pages > Add New Page
Enter a title for your page (e.g. “Home”, “About”, “Contact”)
Click Publish, then click Edit with Elementor
In the Elementor editor, click the Folder icon to open the Template Library
Go to the My Templates tab, find the template you want to use, and click Insert Template
Customize the content as needed using Elementor’s drag-and-drop editor
Repeat this process for all pages in the template kit to get the complete look of the design

Note!

For WooCommerce pages (Cart, Checkout, My Account), do the same — open each page, edit with Elementor, and insert the matching template from the kit.
Specifically for the WooCommerce Shop page (Storefront), use the Elementor Product Archive in Theme Builder instead of editing it as a regular Page. Then set the Display Condition to apply to the Shop Page.

Step 4: Display the Home Page as the Main Page

Once your Home page is ready, set it as the front page of your website.

Go to Settings > Reading
Under Your homepage displays, select A Static Page
Set the Homepage dropdown to your Home page
Click Save Changes

Step 5: Set Up the Header and Footer

With Elementor Pro, you can build your header and footer using the Theme Builder and apply them across your entire site.

Create the Header

Go to Templates > Theme Builder
Click Add New and select Header as the template type
Give it a name (e.g. “Main Header”) and click Create Template
In the Elementor editor, click the Folder icon to open the Template Library
Go to the My Templates tab and find the header design imported from the template kit
Click Insert to load the design
Click Publish, then set the condition to Entire Site and click Save & Close

Create the Footer

In Templates > Theme Builder, click Add New and select Footer
Give it a name (e.g. “Main Footer”) and click Create Template
In the Elementor editor, click the Folder icon to open the Template Library
Go to the My Templates tab and find the footer design from the template kit
Click Insert to load the design
Click Publish, then set the condition to Entire Site and click Save & Close

Once published, your header and footer will automatically appear on all pages of your site.

Step 6: Set Up WooCommerce Page Templates

Using Elementor Pro’s Theme Builder, you can apply custom designs to your WooCommerce pages for a consistent store experience.

Product Archive

Go to Templates > Theme Builder, click Add New, and select Product Archive
Name it (e.g. “Product Archive”) and click Create Template
Insert the Product Archive template from the template kit via the My Templates tab
Click Publish and set the condition to Product Archive, then click Save & Close

Single Product Page

In Templates > Theme Builder, click Add New and select Single
Name it (e.g. “Single Product”) and click Create Template
Insert the Single Product template from the template kit via the My Templates tab
Click Publish and set the condition to All Products under Products, then click Save & Close

Step 7: Add Menus to Your Website

Set up your site’s navigation so visitors can move between pages easily.

Go to Appearance > Menus
Enter a name for your menu (e.g. “Main Menu”) and click Create Menu
Select the pages you want to include (e.g. Home, About, Shop, Contact) and click Add to Menu
Arrange the menu items by dragging and dropping them into order
Under Menu Settings, check Primary Menu to assign it as the main navigation
Click Save Menu

Tip!
Make sure to include your WooCommerce pages (Shop, My Account) in the menu so they are easy to find.

Step 8: Customize the Font and Color

Finally, adjust the global fonts and colors to match your brand. Changes made here will apply across your entire site.

Open any page with Edit with Elementor
In the top-left panel, click the hamburger icon (☰) and select Site Settings
Click Global Colors to update your primary, secondary, and accent colors
Click Global Fonts to update the typography for headings and body text
After making your changes, click Save Changes in the bottom-left corner

Note!
If the colors or fonts do not appear correctly, go to Elementor > Settings > General and make sure both “Disable Default Colors” and “Disable Default Fonts” are checked.