Build Awesome Looking Website For Free: Elementor Page Builder Plugin in Action
Have you ever wondered what WordPress theme to purchase?
Because I did.
There are thousands of WordPress themes available out there and only a few of them really deserve your attention. Still, the chances of finding what you really want are really small. I don’t why, but most of the developers who are creating these themes are not really thinking from our point of view. You get a theme you start using it and after only a few minutes you realize that there is something missing.
When I was searching for a theme for my first site I took me months before I found what I wanted. Now, I see things differently. Why buy a theme when you can install a page builder plugin?
Drag and drop page builder plugins are quite popular amongst people who are just getting started with WordPress. The main reason? They are really easy to use and configure. You don’t have to learn CSS or HTML to make a unique looking website.
And here I am not talking about a regular plugin. The one I am going to show you is one of the best drag and drop page builder plugins. Aww, and one more thing – and it’s also free:)
Let me introduce Elementor page builder plugin:
Build Sites Like Never Before Using Elementor
Elementor plugin was released on 30.05.2016 and quickly became one of the best WordPress page builders.
Only a few months after it’s official release, the plugin was already downloaded more than 5000 times (now even more). Which is a huge success!
The guys sitting behind the plugin have years of experience with Themes and Plugins. You probably bumped on their site when searching for premium themes, if not, you can see it here: pojo.me
One of the things I really like about the plugin is that it can work all by himself. You no longer need a fancy premium theme to make a good looking website. Elementor has everything you will ever need.
In this guide, I will show you the main features and functionalities of Elementor page builder.
How to Install Elementor Page Builder
Firstly, let me show you how to install this page builder plugin.
Though, I will suggest another much easier way. Installing the plugin from inside your own WordPress dashboard.
Access your WordPress admin area > Go to Plugins > Add New > Search for Elementor > Install the plugin:
After the successful installation, activate the plugin:
The installation is complete. Let’s see what WordPress theme to use with this free WordPress plugin.
What Theme to Use With Elementor Page Builder
Although the plugin can work on its own, you will still need an active WordPress theme.
I will personally suggest using a free WordPress theme with the plugin. You have a free plugin at your disposal, why pay for a premium theme, right?
The plugin itself can work with any available WordPress theme, still, there are a couple of themes that work even better. After extensive tests, I found four that work amazingly good with this drag and drop page builder:
Make sure to comment below or contact me if you have another theme in mind.
Of course, when your site grows and you need even more functions added to it, then you might consider getting a premium WordPress theme. I will personally suggest Total WordPress theme or one of the premium themes provided by the developers of the plugin. See all of them here: pojo.me
In this guide, I am using Sydney theme.
You can install it from Appearance > Themes > Add new on the top > Search for Sydney > Click Install:
Additionally, you can check this detailed WordPress tutorial: How to install WordPress theme.
We’ve covered the basics, now let’s see this plugin in action.
How to create Landing Page with Elementor
The page builder plugin is installed and active.
Now, to create your first landing page with Elementor, click on Pages > Add new > Add title > Under template choose Full-width > Save the draft > Activate the page builder by clicking on Edit with Elementor button:
Here is how your page is going to look:
On the left side of the screen are listed all available elements, and on the right, it’s where you need to place the elements in order to create the desired page.
The process is really straightforward: find an element you want to use > drag and drop in on the left side > configure the module using the available settings.
A short video will start when you first use the plugin and it will walk you through the main settings of the plugin:
Let’s start with adding a Title heading:
Use the mouse to grab the element > move it to the right side > a blue line will appear allowing you to drop the element there:
Each element has its own unique settings. To change the text and the alignment of it, use the first tab from the three available, the Content one:
Style section allows you to change the text color, size, font, weight, style and more:
Advanced section grants you with even more power. You can modify the padding of an element, to add animation, change the background border and more:
Make sure to save your progress when you make changes.
Add New Sections
If you want page with one width, simply add sections under the title we’ve just added, if not, add new section using the button below:
Select your structure and add modules:
I’ve added image and text elements inside my new two sections.
To add an image, click on the element and choose media file from your library. You can also add a link to the picture if needed:
Let’s add a cool button.
Find the button element and adjust the size to fit your section:
After adding a picture and some text, the next best step will be to include icon boxes showing the main features of your product or service. Use the copy function to easily replicate elements:
The content section will allow you to change the icon of this element and also add appropriate text:
Adding Social Media Icons
How better to end a landing page than adding social media icons. With this drag and drop page builder, you can easily add share buttons inside your pages.
Add the element wherever you want inside the page > click on the social channel to add your unique link > include other social media channels:
Customize Your Sections
It’s a good idea to change the color or the size of different sections to make things clearer or if you want to focus on something.
You can change the color of each section and adjust the height.
Simply add new section and hover with the mouse over it and click on the Section button. New options will appear, allowing you to make different modifications:
The options inside the layout tab will allow you to change the width, height, and the content positions. Inside the Style tab you can add background color or picture:
Another really cool feature is to adjust the size of the columns to fit your project. Hover with your mouse over an ending column and move it to the left or the right. Above you will see the percentage:
Well, Elementor comes with a lot of elements that will help you create unique pages very easily. It’s basically up to you to decide how to configure them. My personal advice will be to keep things simple and stylish. Don’t abuse your website with countless buttons, options and pictures. Keep it clean, so your visitors can easily navigate through your site.
As you can see, the plugin has quite a few options available. However, this doesn’t make it hard to work with. After spending only 10 minutes using it, I am sure you will have it all figured it out.
Choose element from the left side > drag it to the right > customize it – that’s basically it.
On the top left, you probably noticed two clickable tabs:
- 1) This will load all of the available elements.
- 2) Will allow you to change the default settings.
- Change colors.
- Choose different font.
- Page settings which are still under development.
- Elementor settings:
There is nothing much under the section Elementor settings. You can disable the plugin for posts if you are not planning to use it there, or change the default font from here:
Revise and Publish
When you are all set or during the development of your page, you can always see how everything will look on a mobile device. Simply click the little monitor on the bottom left and choose a device:
After you are satisfied with the result, click on the little “X” button: you can either view the page live or go back to the dashboard. Make sure to save all the changes before you leave this screen:
And this is how my landing a page build with Elemenor looks like:
I am sure you can make it even better. The plugin has all necessary options for you to make the perfect page.
Who said setting up your site requires technical knowledge or hiring a designer?
Before that was the case, but not now!
Using Elementor page builder you can easily create stunning pages on your WordPress site within minutes. And the best part? This plugin is free. You don’t have to pay hundreds of dollars to an agency or hire a developer.
You get all these amazing features added to your own website for free. Isn’t this amazing?
If you don’t believe me, see for yourself. Access your WordPress admin page and install the plugin. It will take you only a few minutes to realize what you were missing.
Have you used other page builder plugins before? Share with us using the comment section below: