Install and activated Required Plugins #
- Elementor : https://wordpress.org/plugins/elementor/
- Elementor Pro : https://elementor.com/?ref=22323&campaign=templategum
Import Elementor Templates #
Step 1: Finding Your Page #
Of course, the very first thing you have to do is to immediately go to the page you want to apply the Elementor templates that you’ve downloaded. Go to your WordPress dashboard, click ‘Pages’ and then click ‘All Pages’.
Scroll down to the page that you want to apply the Elementor template and then click ‘edit’.
Step 2: Elementor Visual Editor #
Upon opening, you would immediately notice a large blue button titled ‘Edit With Elemetor’. Clicking that would lead you to the Elementor Visual Editor.
The alternative method of doing that is to directly go to the page you want to edit (if it’s already existing and assuming you’re logged in to your WordPress admin), and find the same ‘Edit With Elemetor’ link at the top navigation bar.
Or if you’re paying attention, you can see the same button on Step 1.
Step 3: Elementor Template Library #
Now that you’re already on the Elementor Visual Editor, you’ll see a section with a plus icon and a folder icon on your page. Click the folder icon.
An interface will popup where you would see a ton of ‘Blocks’ and ‘Page’ templates already available to you. You didn’t even need to download one in the first place!
Step 4: Importing Your Template #
But of course, you’re here because you want to upload your desired and preferred template! On the interface of your template library, find the upload icon at the top (the up arrow icon) and click it.
This will prompt you to the import template panel.
If your using Windows, go the folder of your downloaded Template file and drag it to this section. Always note that your file must be either a JSON or a ZIP file. Nothing more, nothing less.
Or you can click the ‘Select File’ instead for a much more direct way.
NOTE: In case the zip file you downloaded produces an error, you can try extracting it and upload the JSON (.json) files each, especially if the contents of the zip file are in a folder or contain non-JSON files (like .doc, .txt, .css, fonts, etc).
Note : an error during the import template kit #
When you import the template, you experience an error as shown below. Don’t worry, this is not because the template you downloaded has a problem. But because there are some elementor default settings that you need to change.
The first step you need to do is to open the Elementor settings page by:
Click Elementor > settings
Please go to the Advanced tab
In the “Enable Unfiltered File Uploads” section, select Enable.
Save all the changes you made.
Repeat in the previous step to upload elementor template kits
Step 5: Final Steps #
Wait for a few seconds (depending on your Internet speed of course), and after the loading has finished, go to the ‘My Templates’ tab and now scroll to the very bottom to see the Elementor templates you’ve just uploaded. Their names should be obvious!
Click ‘Insert’ button and that template will immediately be imported to your Elementor Visual Editor.
Your page is ready to be displayed
Customize the Elementor Template #
It’s time to make this template your own. The great thing about Elementor templates is that every element can be customized to your liking.
To get started, click on an element you’d like to edit. From there, you can edit content directly within the element itself. Or, to make style and layout changes, use the toolbar on the left side of the screen.
Change the Layout #
We’re using Hello Elementor WordPress theme (you can also use any wordpres theme). And, when importing our template, I noticed that the content width isn’t what we’d like it to be. Luckily, this is easy to change with Elementor.
By clicking on the dotted Edit Section icon at the top of the template, we can enable a full-width layout. Note that this process will need to be repeated for each imported section of the page.
Editing Colors #
The black background overlay in the section isn’t the best fit for our theme. But it only takes a few clicks to change that into something more palatable.
Customize All the Things #
There’s really no limit as to what you can customize when it comes to Elementor templates. Clicking on an element allows you to edit the content, look and layout. You can also drag new elements onto your page as well.
Save Your Changes #
Once you’re happy with the results of your work, click on the green Update button on the lower left portion of the screen. This will save your custom-built page.
