Element UI’s V4 website templates (Belvista, Accora and Smile) are complete websites built natively in Elementor V4. This guide takes you from download to a working site: what you need, how to download your template, how to import it, and how to customize it by hand or with your AI.
Every download also includes a Start Here PDF with the same steps for that template. This guide adds a little more detail, including why one extra step (the Import Helper plugin) is needed for now.
Installing a V3 template such as Eradica, ZenPay or Insura? See How to install a website template instead.
What you need
- A new, empty WordPress site. The import adds pages, a header, a footer, templates and settings, so start fresh rather than importing over an existing site.
- The free Hello Elementor theme.
- Elementor 4.3 or later (free).
- Elementor Pro 4.3 or later. The templates use Pro for the header, footer, 404 and post layouts (Theme Builder), the forms, the popups, the reusable cards (components) and the design system’s size settings. Each template’s Start Here PDF lists exactly which Pro features it uses.
- Optional: an AI tool that supports MCP servers, such as Claude, Codex or Cursor. You only need this if you want your AI to edit the site.
Download your template
You can download your template any time, as often as you like:
- On the template’s page: after you buy, the Buy button becomes Download template.
- In your account: go to Manage account and find it under Your V4 templates. The design systems are there too, each as its own download.
Your download is one zip file named after the template, for example belvista.zip. Unzip it on your computer first. Inside you’ll find:
| File | What it is |
|---|---|
<template>-kit.zip |
The whole website: pages, header, footer, templates, popups, posts and the design system. This is the file you import into Elementor. |
element-ui-import-helper.zip |
A small free plugin that finishes the import (see step 5). |
<template>-setup-pack.zip |
The file the helper plugin reads: the template’s images, icons, cards and links. |
<template>-design-system.zip |
The design system on its own, to restore the original or reuse it. |
styles/ |
Three design systems, one file each, to switch the whole look. |
AGENT-GUIDE.md |
The guide for your AI. |
START-HERE.pdf |
The install and customize steps for this template. |
Don’t import the download itself. Elementor needs the kit file inside it, for example belvista-kit.zip, not belvista.zip.
Install the template
1. Install the theme and plugins
In WordPress, install and activate Hello Elementor (Appearance, Themes). Then install and activate Elementor and Elementor Pro (Plugins), and activate your Elementor Pro license.
2. Turn on the atomic editor
Go to Elementor, Settings, Atomic editor and turn it on. The templates are built with Elementor’s V4 (atomic) elements, so they need it.
3. Set the link format
Go to Settings, Permalinks, choose Post name and save. Without this, page addresses won’t match the template’s links.
4. Import the kit
- Go to Elementor, Tools and open the Website Templates tab.
- Choose Import and upload the kit file, for example
belvista-kit.zip. - Keep everything ticked: content, templates, site settings and the design system. If the import lists plugins, untick everything except Elementor and Elementor Pro.
- Finish the import.
At this point the pages exist, but some parts will look unfinished: images and icons are missing, and the reusable cards are empty. That’s expected. Step 5 fixes it.
5. Finish the import with the Import Helper
This step is needed because of a current limit in Elementor, not a problem with the template. Elementor’s website kit import is still catching up with V4: it doesn’t yet bring across everything a V4 site uses. Today it leaves out:
- the images and icons on V4 elements
- the reusable cards (components) and their settings
- the original page addresses, and a few links that still point at the demo
So every template comes with the Element UI Import Helper, a small free plugin that puts those pieces back from the template’s setup pack:
- Go to Plugins, Add New, Upload Plugin, upload
element-ui-import-helper.zipand activate it. - Go to Tools, Import helper, upload the setup pack (for example
belvista-setup-pack.zip) and click Finish setup. - Wait for it to report that it’s done. It adds the images and icons, reconnects the cards, points every link at your site, sets the page addresses and makes Home the front page. For Smile it also adds the template’s Geist fonts.
- You can then deactivate and delete the helper plugin. Your pages, images and addresses stay.
When Elementor’s import supports everything V4 uses, this step won’t be needed, and we’ll update this guide.
6. Check your site
Open the home page and a few inner pages, a blog or journal post, and a page that doesn’t exist (you should see the template’s 404 page). In the Elementor editor, the Design System panel should show the template’s variables and classes. If they’re missing, open that panel, click ⋯, choose Import and pick the <template>-design-system.zip file from your download.
If the styles look out of date, go to Elementor, Tools and click Regenerate Files & Data.
Customize the template
Every template runs on a design system: colors, fonts, sizes, spacing and corners are set in one place, so a few changes restyle the whole site. The kit also adds a Design System page at your-site.com/design-system/ that shows every color, font, button and card at once. Keep it private or delete it before you launch.
By hand
Open any page in the Elementor editor, open the Design System panel and change the main variables: color-primary (your brand color), color-accent (your accent color), font-heading and font-body. Corners follow radius-sm, radius-md and radius-lg, and buttons follow radius-button. A few parts don’t read the design system yet (for example blog post text, which takes its fonts from Site Settings, Typography): your template’s Start Here PDF lists them.
With a ready-made design system
Each template comes with three design systems. Importing one changes the colors, fonts and corners of the whole site in seconds, and leaves your content and layout alone:
- Open any page in the Elementor editor and open the Design System panel.
- Click ⋯, choose Import and pick a file from the
stylesfolder of your download. - Choose Replace existing values.
To go back, import the Original design system the same way. New design systems may be added later: download them from the template’s page or your account.
With your AI
Your AI edits the site through the Elementor MCP, a connection on your own site:
- In WordPress, open Elementor’s MCP screen, choose your AI tool and click Copy prompt. This creates an application password for the connection.
- Paste the prompt into a chat in your AI tool and send it.
- Give your AI the template’s
AGENT-GUIDE.md(attach it to the chat, or open your tool in the unzipped download folder) and ask it to follow the guide for every edit.
Then ask for changes in plain English, for example “Change the brand color to #1F3A5F and check the Design System page” or “Replace the business details everywhere with ours”. The agent guide tells your AI how the template is built, so its edits use the design system and stay consistent.
Keep the copied prompt private: it contains the password that lets your AI edit your site. You can revoke it any time under Users, Profile, Application Passwords.
Before you launch
Each template is built for a fictional business. Replace or remove every invented detail: names and contact details, team members, testimonials, prices, figures, photos and the sample posts. The full list is under “Replace before launch” in AGENT-GUIDE.md. Also:
- Set each form’s email action to your own inbox (edit the form in Elementor, Actions) and send a test.
- Have your privacy policy and terms written for your business.
Troubleshooting
- The import fails straight away: check you uploaded the kit file (
<template>-kit.zip), not the whole download. - Images, icons or cards are missing: run step 5, the Import Helper, with the setup pack from the same download.
- Pages show a “page not found” error: set Permalinks to Post name (step 3) and save again.
- The Design System panel is empty: import
<template>-design-system.zipin that panel (step 6). - Fonts look wrong after switching design systems: update the places your Start Here PDF lists under “By hand”.
Still stuck? Email hello@elementuikit.com and include your template’s name.