This guide is available as a video:
All of our WordPress Themes support the most popular page builder plugin for WordPress, Elementor.
About Elementor
Elementor is a free page builder plugin available for WordPress that allows you to build and customize content using easy to use tools and a well designed UI instead of editing HTML or shortcode. This plugin allows you to build high quality pages for your website without any experience.
Elementor Support Explained
Our themes by default use the WordPress block based pages (Gutenberg) with shortcode (similar to HTML). As such Elementor is not a requirement to use our themes. However, Elementor support was highly requested as a way to more easily build and customize content so we have added support.
You do not need to pick one or the other, both have advantages and disadvantages. You could leave utilize the original WordPress pages using shortcodes and convert/create others of your choice to use Elementor.
Elementor VS Shortcode
| Elementor | Shortcode |
|---|---|
| Create and edit pages using a UI based editor without editing code | Editing content requires editing shortcode. No experience needed but a learning curve is required |
| Plugin required - will make your website slower (unlikely to be noticeable) and reliant on the plugin | No plugin required - shortcode built-in to the theme. Faster. |
| Your Company reference is hard coded within Elementor content so manually updated for each page | Your Company reference is pulled via Wizard Panel so is applied to all pages automatically |
| No way to import all pages setup as Elementor. Requires one by one setup (see importing templates) | All pages imported instantly following our demo content import guide |
Using Elementor
In this section we will show you how to install and make use of Elementor.
Ensure Up To Date Theme
Before using Elementor you must make sure your theme supports it. Support was added in v2.4. Your theme must be running this version or higher.
Finding My Theme Version How To Update WordPress Theme
We have added as much support for Elementor as possible. To make this feature as accessible as possible we have used the free version of the plugin. We have not used Elementor for the header or footer of the theme as this would lead to compatibility/speed issues with our exclusive software integration process. It was also not possible to use Elementor to replace our banners or plans display which remains as shortcode blocks within Elementor pages. This is due to the complex functions and display of these features so there was no way to achieve the same using Elementor.
Installing Elementor
The first step is to install the Elementor plugin.
Login to your WordPress Admin panel and navigate to:
Plugins > Add New Plugin
In the top right search box search for Elementor.
You should see the plugin named "Elementor Website Builder – More than Just a Page Builder". Click on the Install Now button and Activate.
You will now see some Elementor page steps. Follow the steps on screen or click on the skip button to complete the process.
Elementor is now installed and ready to use.
Elementor Settings
Within the left menu of your WordPress Admin panel navigate to:
Elementor > Settings > Features
Set the Grid Container & Flexbox Container settings to Active and save.
Click on the Elementor button on the left menu.
Within the Jumpstart your web-creation section click on the Customize link below Site Settings.
Click on the Layout settings.
Scroll down to Default Page Layout and select Elementor Full Width.
Head back to the Site Settings page and visit Global Colors.
If you are using a custom color scheme set your colors as needed. If you are using and wish to match the default colors set the following:
| Template | Type/Hex Color |
|---|---|
| Stellar | Primary: #F09546 Secondary: #525252 Text: #696969 Accent: #525252 |
| Mono | Primary: #df3626 Secondary: #797979 Text: #696969 Accent: #797979 |
| Glaze | Primary: #2ab867 Secondary: #6ca1e1 Text: #696969 Accent: #6ca1e1 |
| Prosper | Primary: #ef8f21 Secondary: #0a8fc8 Text: #777777 Accent: #0a8fc8 |
Import Elementor Templates
Templates are pre-made Elementor content made up of pages and sections. Sections are individual blocks of content which can be used within pages as many times and in whichever order you like. Pages are complete ready-made pages made up of multiple sections. We have replicated the default pages of the theme (Shared Hosting, Company etc) When editing a WordPress page with Elementor enabled you can import both sections and pages to instantly create or convert existing pages to Elementor.
We have created the Templates for you including all sections (Gridboxes1, Gridboxes2, Gridboxes7, Why Choose Us, Testimonials, FAQS etc) and most pages of the theme (Shared Hosting, Reseller Hosting, VPS Hosting, Company, Affiliate Program etc).
Download the latest version of your WordPress Theme and open the content import directory. The elementor-templates.zip file contains all of the Elementor templates for your theme.
Login to your WordPress Admin panel and click on the Templates button within the left menu under Elementor.
At the top of this page click on Import Templates.
Browse and select the elementor-templates.zip file and click on the Import Now button.
You should now see all of the templates imported.
Changing An Existing Page To Elementor
By default all of the pages of the theme will use default WordPress block based pages using shortcode. You may choose to convert a page to use Elementor so you can customize it using the Visual editor without having to edit shortcode.
To convert a page to Elementor login to your WordPress Admin panel and click on Pages within the left menu.
Click on the Edit button below the page you would like to customize.
You will see the default WordPress shortcode blocks containing all of the shortcode used to generate the page.
If you have customized your plans copy and save the shortcode of your plans. You can re-use this for the Elementor page as the plans remain as shortcode.
Scroll down to the bottom of the page to the Custom Fields section. If you see a custom field named banner you can also copy and save this if you have customized it so it can be re-used with Elementor. Click on the Delete button to remove it.
Next click on the blue Edit With Elementor button at the top of the page. This will convert the page from a normal WordPress page to a Elementor page, allowing you to build and customize the page using Elementor.
You will now see the Elementor page with the preview on the right and tools on the left. Delete any content blocks on the right, there will likely be a text box containing the shortcode from the old page.
You are now ready to import the template of the page you are editing. For example let's say you are editing the Shared Hosting page.
Within the content section you will see a box with the text "Drag widget here". Click on the folder icon. This will open the Elementor Library. Click on My Templates at the top and find the template page you would like to import. In this case find Shared Hosting and click on the Insert link.
Elementor will now import the pre-made Shared Hosting page which we have created to match the demo page as closely as possible.
Click on the Settings icon on the bottom left and set the Page Layout to Elementor Full Width. Click on the pink Update button and then refresh the page. You will now see the page displayed the exact preview.
At the top of the Shared Hosting page you will see the banner. Click on the banner and you will see the customizable shortcode block. You can customize this as normal following our shortcodes guide, if you took a backup of your old banner replace the shortcode with your saved one. Scroll down slightly and you will see the plans which is also displayed using a Shortcode block. You can customize this as normal or select and replace the shortcode with your backup to restore your plans. Everything else on the page is customized using Elementor's visual tools, this includes all headings, features, why choose us, testimonials and FAQ sections.
You can repeat the above steps to convert any of the default pages to Elementor to make them even easier to customize.
Creating A Custom Page With Elementor
To create a new Elementor page login to your WordPress Admin panel and click on Pages within the left menu.
Click on the Add New Page button.
Add a page title and click on the Publish button on the right side.
Next click on the blue Edit With Elementor button at the top to convert the page to Elementor.
You will now see a blank Elementor page containing your themes header and footer.
Click on the settings icon at the bottom left of the page. Set the Page Layout to Elementor Full Width. Click on the pink update button and refresh the page. Your page is now ready to begin building.
On the right side you will see a preview of your website and on the left side you will see the Elementor elements you can use to build your page.
You can drag the elements from the left side to the right to begin building your page. If you are unsure how to use Elementor you will find hundreds of tutorials on Youtube.
You can also make use of the themes Templates which we imported earlier.
Within the content section you will see a box with the text "Drag widget here". Click on the folder icon. This will open the Elementor Library. Click on My Templates at the top and find the template page you would like to import.
You can import a full page and customize that or import a section of content. You can import as many sections you like to build your page.
Request Support
We hope you found this documentation useful. If you run into any issues we will be happy to assist you.