skip to Main Content
Build Awesome Looking Website For Free: Elementor Page Builder In Action

Build Awesome Looking Website For Free: Elementor Page Builder in Action

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:)

Wow, really?

Let me introduce Elementor page builder plugin:

 

Build Sites Like Never Before Using Elementor

Elementor page builder plugin

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.

Let’s begin:

 

How to Install Elementor Page Builder

Firstly, let me show you how to install this page builder plugin.

You can either download the plugin from the official website: Elementor.com or from WordPress.org repository using this link here: Elementor 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:

Elementor page builder plugin 1

After the successful installation, activate the plugin:

Elementor page builder plugin 2

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:

Elementor page builder plugin 4

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:

Elementor page builder plugin 5

Here is how your page is going to look:

Elementor page builder plugin 6

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:

Elementor page builder plugin 3

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:

Elementor page builder plugin 7

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:

Elementor page builder plugin 8

Style section allows you to change the text color, size, font, weight, style and more:

Elementor page builder plugin 9

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:

Elementor page builder plugin 10

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:

Elementor page builder plugin 11

Select your structure and add modules:

Elementor page builder plugin 12

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:

Elementor page builder plugin 13

Let’s add a cool button.

Find the button element and adjust the size to fit your section:

Elementor page builder plugin 14

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:

Elementor page builder plugin 15

The content section will allow you to change the icon of this element and also add appropriate text:

Elementor page builder plugin 16

 

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:

Elementor page builder plugin 17

 

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:

Elementor page builder plugin 18

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:

Elementor page builder plugin 19

What else?

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.

 

Elementor Settings

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:

Elementor page builder plugin 20

  • 1) This will load all of the available elements.
  • 2) Will allow you to change the default settings.

Elementor page builder plugin 21

  • 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:

Elementor page builder plugin 22

 

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:

Elementor page builder plugin 23

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:

Elementor page builder plugin 25

And this is how my landing a page build with Elemenor looks like:

Elementor page builder plugin 24

I am sure you can make it even better. The plugin has all necessary options for you to make the perfect page.

 

Final Thoughts

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:

This Post Has 8 Comments
  1. I absolutely love Elementor but the is one thing im trying to work out. Im using GeneratePress theme and i want to change the colour of the navigation bar. Can i do this within Elementor or will i have to buy the addons for the GeneratePress theme itself

    1. Hello John,
      Thank you for commenting! I am a huge fan of both of the services: Elementor and GeneratePress. In regards your questions – yes, you can change the navigation bar only if you get the GeneratePress paid addons.

  2. Elementor looks great, and seems easy to work with, but it does not work on my website – I can not pull the various elements to the page – The icons turn red when I pull on them, and when I release them on the page, they just vend back to the panel on the left side, otherwise nothing happens.
    I use Vantage Premium theme, but have tried several of the recommended themes –
    What am I doing wrong

    1. Hey Keld,
      Thanks for commenting! Once you get the element from the left side until it shows a place to drop it on the right, don’t drop it. It will show you a place to drop the element. I believe this is the issue.

    2. You can wait before dropping the widget until the “blue line” appears on the right side in the section or column. Only then it will settle itself into place

  3. How do I remove the “Landing page with elementor” title ( as shown in your visuals) from the page. I have been having difficulties in that area. I wanna have total control of the whole page

    Also, How do I move the section “This IS HEADING ELEMENT” (as shown in the visuals) up so it can be close to the header…

    Thanks

    1. Hey Fola,
      You can remove the “Landing page with elementor” title by choosing the Landing Page template from inside the WordPress dashboard. It’s located on the right side while you are inside the editing mode.

      In regards the second questions – I don’t think this is possible with this page builder.

      Hope this helps.

      Regards,

Leave a Reply

Your email address will not be published. Required fields are marked *