Build A Website With Elementor Drag and Drop Page Builder

Google+ Pinterest LinkedIn Tumblr +

Last updated on September 14th, 2017 at 10:39 pm

elementor-page-builderSo you want to build a website for your new business, turn your very popular Instagram page into a blog, or create an online experience for your loyal Facebook fans. You hop onto, create an account, register a cheeky domain name, and voila! You quickly realize that with zero coding knowledge or web design and no idea how to actually use WordPress, you’re officially up the creek without a paddle. Sound familiar?

This was me in January of 2017. I chose a simple theme and started to work on my first task: formatting the website with my brand colors. This turned out to be a huge roadblock for me. I watched countless Youtube tutorials, searched inside the WordPress community forums, and still could not get this done. I thought to myself, if I can’t even do this first step, how the heck am I going to build this website. I then stumbled around my WordPress dashboard with zero progress for about 2 months. One day I got so frustrated that I started looking for alternatives. The wide world of Google brought me to this article, which lists the best editing tools for creating a website with WordPress. I decided to try out the free Elementor page builder. I instantly fell in love with the simplicity of this free tool, and my website was up and running within a few weeks.

Here is how you can use the Elementor page builder to easily build the website you’ve always dreamed of.

1. Download Elementor Page Builder for Free

There are actually two ways to start using Elementor: search for it in the plugins section of WordPress or download it straight from their website and upload the zip file as a new plugin. Watch the quick tutorial video here.
Now what? Simply start creating your web pages (in the page section of your dashboard) and instead of editing right in WordPress, click on the “edit with Elementor” option. You’ll be able to drag and drop your way to a beautiful website design in no time.
elementor page builder

2. Use Predesigned Templates

Elementor drag and drop has amazing free templates that give you great structure for each page of your website. You can absolutely start from scratch and build your own template, but I highly suggest starting out with one of theirs. Here’s how you can navigate to the templates library. From your WordPress dashboard, click on the pages tab, create a new page (Home, About, Blog, etc), and choose the option to “edit with Elementor” instead of editing it right there in the WordPress editor. This will bring you to the drag and drop tool where you’ll design your page. In the bottom left hand corner, you’ll see a folder icon, where you can then open the template library. It will automatically open to the predesigned template options. Scroll through and pick one that you like. You can move elements around in any order, insert your own elements to change it up, and of course, change the colors, images, and fonts to match your brand. One of my favorites is the Home page – Restaurant template. If you need help, watch this quick tutorial.
Note: you can delete templates at any time, so play around with which templates best fit your website.

elementor page builder
3. Use Sections, Columns, and Elements

Editing your web pages in Elementor is incredibly simple once you grasp this next idea. Each element on your page is either in a section or a column. Elements are individual pieces of content: image, title, icon, spacer, etc.

elementor page builder
Columns refer to one area of design on your page. You can place one or several elements inside of a column, duplicate columns, put them side by side, and edit their settings like margins, padding, and typography. Sections refer to a group of columns, have their own layout settings, and can be duplicated for speedy work. Each time you’d like to add an element to the page, choose add new section, and select how you’d like to structure the columns. Then drag elements from editing panel, into the columns.
Note: when editing your page, hover over the top left corner of the content. You’ll see two options: section and column. Make sure to click to edit the column unless you would like to change something about the entire section of content, or delete an entire section.

elementor page builderelementor page builder


4. Utilize the Facebook Community for Support

One of the coolest things about the Elementor page builder is you can get support quickly right from the Facebook group. It’s called Elementor’s Community. The first time I had a question about font colors, Elementor users helped me figure it out very quickly. I also continuously use the group for feedback on what I have created. If you want speedy, accurate help, post in this group.

Use these steps to start building your website today. Let us know how it’s going in the comments below. Check out Elementor’s Youtube channel for more tips and tricks.

Get started on How To Setup and Install WordPress On Siteground


About Author


Leave A Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.