Welcome back to our series on creating your first WordPress Website. As you’ll see below, this post is all about how to start designing your website using Elementor Pro.
Although there is a free version of Elementor, in order to use the Theme Build functionality and be able to create your header, footer and blog pages, you will need to have Elementor Pro installed.
So with that being said, stick with us below and we’ll show you how to do just that!
Also, if you’re wondering why we choose Elementor / Elementor Pro to build our website, you can check out this article that compares Elementor to Divi and Beaver Website Builder
- Website Hosting (Where your website lives).
- WordPress Installation (So you can create your site)
- WordPress Website Themes (Our Top Picks)!
- After Installing WordPress (update these settings)!
- WordPress Basics for Beginners.
- Elementor Basics (So your website looks amazing)!
- Your Main Website Pages.
- Writing Your First Blog Post
Step 1. Purchase and Install Elementor Pro.
Purchasing Elementor Pro
Like we mentioned above, although there is a free version of Elementor, in order to have a properly working theme and functional builder you will need to install Elementor Pro.
To find the pricing plan for elementor, you can go here.
It is likely that the one you are going to choose is the plan for 1 website at $50 USD per year. However, if you are doing sites for clients or other businesses, that price does increase – the more websites you need to create.
Once you choose the site plan that suits you, you can click “buy now” which will take you to the checkout page.
You’ll input all of your details and choose your method of payment. Once processed, you will receive an email that will have your login details plus an API key. These are the two elements that you will need in order to get Elementor Pro installed on your website.
Installing Elementor Pro
Okay, amazing!
You now have Elementor Pro and you’re all set to get it plugged in to your website.
So, where do you start? You’re going to want to login to Elementor Pro, in order to grab some of your account details (i.e., API Key / License), to help the along the process of getting it plugged into your website.
Once you’re logged in, the initial screen will give you all of your account details.
This includes your license key (API key), payment plan, renewal date, and how many active installs you have for your website. Under your plan, there will be a direct link to download your plugin.
You can hit the download link, adding it to your computer downloads. Please keep in mind, you will need your license key for your website.
Once you’ve downloaded your plugin, you can navigate back to your website.
Now you’re back on your WordPress Dashboard! You’ll navigate down to “Plugins” on the side, and hit “add new”.
Plugin
I just want to note, that before you can install the pro version of Elementor, you’ll have to install the free version.
In order to do that, you’ll need to search Elementor within the Plugins area.
You’ll hit “Install Now”, once installed, it’ll ask you to activate. You can go ahead and activate the page builder.
Voilà, the free version of the Elementor Page Builder is plugged in and ready to go.
Now, you’ll navigate back to the plugins area and go to “Add new” at the top. You’re going to go ahead and choose the Elementor file you downloaded initially.
Your download will have likely have gone to your downloads folder on your computer. Or if you’re like me and use Google Chrome, you’ll be able to see it there at the bottom.
Connect & Activate
Don’t be alarmed if it takes a few minutes for it to upload onto your website!
Once the upload is finished, you can hit “Activate Plugin”!
This will take you back to your plugins page, where it’ll show you the free version of Elementor, and then Elementor Pro right underneath it. At this point, you will hit “Connect & Activate”.
It’ll then take you to an area where you will want to login with your WordPress details for the website. At this point, after you have logged in successfully, you will need your License / API Key!
Perfect! Now, this is where you will need to navigate back to your Elementor Account Page.
Grab that license key number and under “Elementor” > “License”, you will be able to input it!
You did it! How exciting?
Elementor pro is officially set up on your website and ready to be used / set-up!
Step 2. Basic Elementor Settings.
Basic Backend Elementor General Settings
Okay! Soo we’ve got Elementor Pro set-up now and ready to go. The next step is to go through some basic backend & frontend settings that you are definitely going to need to know!
You will be able to see the Elementor backend settings by going to the WordPress Dashboard and navigating down on the left to “Elementor” – like you did when installing.
This will be your base for all settings regarding your Elementor Plugin.
There are 4 main tabs when on this page:
- General
- Style
- Integrations
- Advanced
Starting with the general tab, you will want to make sure “posts” & “pages” is checked off. As this will allow you to edit those types of posts with Elementor. The more things you add to your website, the more you are going to need to allow Elementor to have that functionality on those types of items.
Custom Fonts
All the fonts that are available through Google Fonts will be available within the Front end of Elementor, when you’re editing your pages & posts, etc.
You do, however, have the ability to add your own custom fonts into Elementor.
This is good if you have a brand font or cursive font you wanted to add in order to use on your website. The area that you would add this, is in the backend of Elementor.
There is a bit of a “but” when going to upload a font to use with Elementor. In order for other people visiting your site to also see those custom fonts, they need to be added to your site in web format (A.K.A.,.WOFF).
Elementor makes this incredibly easy, but the trick is finding fonts that are offered in web format. Not all are available in that format!
My go-to font marketplace is Creative Market!
To help you understand the types of fonts that are out there, because we know it can be really overwhelming, we have linked an article straight from Elementor’s blog.
You can check it out here, “How to Add Custom Fonts To Your WordPress Website”.
Ideally you want to choose a font that has as many of these different formats available as possible so you’re covering all of your bases!
Additional Backend Support
In the backend of WordPress > Elementor, I highly recommend checking out the tabs, “Getting Started” & “Get Help”.
The “Getting Started” tab basically is an additional tutorial straight from Elementor, where they run you through all the essentials you will need to know!
If you use Elementor Pro, and you pay the yearly fee, you get priority for support.
So, when you go to the “Get Help” tab and you have any questions for them they treat you as a VIP client as you can enjoy premium 24/7 support!
Basic Front End Elementor Settings
In order to make the necessary changes to settings on the front end of Elementor, you must pop into a page or post in order to do this!
When you first create a page in WordPress, it will not initially make it so it can be edited with Elementor! There’s a couple things you need to do in order to make this happen.
- Go to Pages > All Pages
- Select a page you want to edit with Elementor on the front end
- Select Page > Edit, It’ll bring you to the page on the back end of WordPress
- Edit with Elementor
Okay! You’re now on the front end of Elementor! Woo, and you’re almost ready to learn how to use Elementor.
We just want to set up some default settings for you, so that it will make it so much easier to get you creating your pages!
Default Colors
Go ahead and select the hamburger icon at the top left, and under style you will see “default colors”.
This is where you will set up your default colors to create with.
Updating your color palette to fit your branding will make it easier when you are adding text and icons or widgets to your website.
Elementor will default right to these colors and it’s a great starting point! Keep in mind these are just the default colors
Every single element and design is still fully editable to fit the creative vision you are trying to achieve.
Here is a quick chart from Elementor to help you out when choosing your default colors, remember, these can all be changed on a per-page and per-section/text box basis as well.
These are the general color settings that will automatically populate depending on the type of widget you are working within.
You can also go back at any time and update these to better suit your needs, they won’t be set in stone!
Once you have chosen and set your default colors / type settings, you are ready to move on to using Elementor!
Step 3. How to use Elementor.
In order to make learning how to use Elementor as easy as possible, I’m including one of the videos from within our Profitable Website Academy.
This video help turn you into an Elementor wizard in no time!
Step 4. How to use the Theme Builder.
In this last part we have grabbed a blog article straight from Elementor to walk you through it.
The post can be found here, “Create a Complete Website Using Elementor Kits and Theme Builder.”
And, pssst., just to let you know, we walk you through this part fully in our Profitable Website Academy. So, definitely check it out!
Phew, that was a lot to get through!
But, the good news is.. you’re fully set up and know how to start designing your website! How exciting is that!
Don’t forget, we offer our Profitable Website Academy course. Where we take you through the process to get you from install, all the way to finish!
The series continues, with the main pages you are going to need for your website! Make sure to check it out.
