In this post, we show you the different design options available in the free Elementor page builder for WordPress. This plugin can transform how you create websites in WordPress, giving you a wider range of options as well as speeding up your design process.

If you are looking to build pages without going through the hassle of coding, and without relying on outside designers, then I really recommend taking a look at Elementor. Elementor is the perfect drag and drop page builder that will help you build all the pages of your website in no time.

Elementor is one of the most popular page builders out there, and it will allow you to build pages live and in a visual way, while viewing your actual site.

If you’ve never used elementor before, then you are at the right place. We will go over all the main features available on this page builder. Elementor has multiple features that come in handy when you are building your website. We will share all the steps that will help you build your website pages with the help of this drag and drop page builder plugin.

Let’s go through the process that will help you build stunning pages and websites.

Firstly, go ahead and install this plugin. Get ready to build awesome web pages for your website!

Adding a new page

The first step is to add a new page.

Go to the WordPress dashboard, then go to Pages, and add a new page.

Now, give it the title you want.

When you have added the page, you will see the option that says ‘Edit with Elementor’. if you click on that option the Elementor editor will open. Then, you can start building your page with Elementor page builder. The editor will be the place where you will be able to choose from multiple layout options and sections.

Adding sections and background

Your first step is to add sections to your page.

When you are editing with Elementor, you will see a button ‘Add New Section’. You can click on the button to add the section you want. When you are adding a new section, it will give you the option of choosing the right layout or structure of the section. You can choose one column, two column, etc.

Adding sections.png

Another important thing that you can do is to add a background to a specific section. You can set a specific background color, image, color gradient or video.

You can then go on to style the rest of the section and change color, background type, and much more.

Multiple Elementor widgets to work with

After adding the section, you should check out the Elementor widgets on the right side.

You will find an unlimited array of widgets that you can add to the sections. Make sure that you are exploring all the widgets so you can get a clear idea of what can be achieved in Elementor. Basically, there shouldn’t be any goal that you can’t have. From buttons, images, text boxes, headlines… The list goes on and on.  

You can use any widget in any section when you are building a new page. If you need a text editor or an image widget, you can simply drag and drop them into the columns that you have created.

Elementor page elements.png

The multiple Elementor widgets will be your tools for creating your amazing website pages.

You can use elements like text editor to change the text that you are adding in the specific column. Moreover, you will be able to widgets like images, video, divider, icon box, image box, counter, social icons, shortcode, accordion, tabs, and much more.

You should also know that it will also display the built-in WordPress widgets, and you can use those widgets as well when editing your pages. It will provide you all the elements that you would like to use when creating WordPress site.

You should also be aware that the Elementor page builder plugin also has a pro version. If you are using pro version, then you can easily enhance the functionality of your WordPress site, and it will give you a lot more customization options.

These options include widgets like posts, portfolio, flip box, price tables, counters, and much more. If you are running an online WooCommerce store, then you will be able to use dedicated WooCommerce widgets inside the Elementor editor. Moreover, you can create animated boxes with the help of the flip box. The Form widget will allow you to quickly add a form and work on it on the frontend, and the Posts widget will let you customize your blog design in minutes.

Adjusting the complete design

The next thing that you will have to do is to adjust the complete design of the page. You will have multiple options while using Elementor to take care of the design and adjust it properly. First of all, let’s have a look at how you can adjust the columns.

Adjusting column design according to your requirements

Another important thing that you must be aware of is to adjust the design of your web page. You can simply make adjustments by editing the layouts of the columns you are adding. You can adjust the size of the column that you are inserting.

If you need a small sized image, then you can adjust the size of the column to make it look good on the page. Whenever you are adding a section, you can always control the design by adjusting its width and height.

Positioning content in the columns

Build your website pages is by positioning all the content of each column where you want it. You can easily align them to center, top or bottom of the column. It will give you a better way to design your website pages, and you will be able to position multiple widgets in the right place inside the column.

Positioning content in the columns.png

Resizing columns

If you need to increase or decrease the size of the column, then it can also be done as the elementor page builder provides you with the option of resizing the columns. You can drag the columns to resize by grabbing it from one end. It is the easiest way of resizing the columns without going through any hassle.

Resizing columns.png

Setting margins and padding

One of the most useful options available to edit columns is to give them the padding and margin values. You can go to the advanced settings where you will be able to edit the padding and margin settings of every single column. It will allow you to adjust the columns and give them the values where they seem fit.

Setting margins and padding.png

Column gaps

If you are looking to have a professional design with some extra features, then column gaps can help you in the right way. You can use options including no gap, extended wide, wider, or narrow to change the column gaps. By increasing the column gaps, you will be able to shape up the content inside the columns.

Plus, there are multiple other settings that you can play with when editing your pages. You can use the shape dividers as well, and they will provide you with multiple options to give your columns a creative shape. You can use features like box shadows, entrance animation, and hover settings.

 

Mobile responsive options

Everyone cares about the responsiveness of the site these days. We all know that more than 60% visits come from mobile or tablets. To fix all the responsive issues of your website, you can simply visit the responsive mobile design options that will help you take care of the responsiveness of your website. When you are editing the page, you can simply use the responsive settings to make things easier and better for yourself.

Responsive options.png

You can always select from multiple font sizes per device, and to reverse the column order. You will also have the options of hiding specific widgets on a tablet, PC or mobile devices. It will allow you to check the responsiveness of your website so you can create a perfect web page without any glitches.

Choose from the template library

The elementor gives you a lot of benefits when you are designing your website with it. It surely has some catchy features when you are building your web pages with this specific page builder. However, it also provides you multiple templates that you can use to create pages. Starting from a blank page can be hard. If you are looking for the perfect solution, then you can always visit the template library where you will be able to find multiple options that will help you in the best way possible.

Choose from the template library.png

When you are purchasing a premium WordPress theme, it gives you multiple demos to work with. In the same way, elementor page builder provides you multiple templates to choose from the template library that you can edit and create your own website. If you are creating a law firm website, then you can use the template law firm, and then you can edit all the sections according to your requirements.

By selecting the perfect template, it will become easier for you to edit the pages and you can easily create a homepage, contact page, landing page, services, or multiple other pages using the templates from the library.

Pros and cons

There are multiple drag and drop page builders, and each plugin has its pros and cons. When you are using Elementor, then it will provide you full responsive mobile design options, and it is compatible with most of the themes and plugins. Moreover, you can create full-width pages with any WordPress theme using this plugin.

However, when you are using pro widgets, you will also have to integrate with other services as well. Currently, the form widget is only integrated with MailChimp and MailPoet, so you can’t use other for now.

 

I invite you to download the free Elementor page builder, and see for yourself how useful it is.