How to create a very pretty WordPress website with Elementor

Thanks to Elementor anyone can transform Wordpress into a stunning drag and drop website builder. We'll show you how.

May 15, 2020 • 14 minute read

Updated on Dec 11, 2020 by Product Knowledge T.

Product Knowledge T.

@ProductKnowledge

Product Knowledge Team Lead at Freelancer.com

Copy to clipboard failed, please try again after adjusting your permissions.

Copied to clipboard.

Elementor makes stunning web design stupidly easy

Only a few short years ago It took hours to create a Wordpress website and for it to look decent you needed to know a fair chunk of CSS HTML and even some Javascript.

Then Elementor happened and everything changed.

In this post we'll walk you through the step-by-step process of creating a stunning Wordpress website with Elementor.

Why is Elementor so great?

Elementor is a Wordpress plugin that transforms your Wordpress website in a dynamic drag and drop website builder.

Elementor completely replaces the clunky Wordpress editor with a real time frontend editor so you can watch your website design progress as you build it without having to constantly refresh your website in a seperate tab.

But what makes Elementor so magnificent is the fact that it's absolutely free! Just install and activate the plugin and start dragging and dropping away.

Elementor pricing

Elementor does also offer professional paid plans that add a whole heap of features to your tool kit. Upgrading to a pro plan isn't necessary, you can totally build a stunning stunning website with the free plan alone.

Here's comparison of all the different Elementor packaged:

Elementor free plan

The free plan comes with the entire website builder and 30 widgets.

Each widget is a single building block, to create a website you drag widgets and drop them into place. Now 30 may not sound like a large variety but it's more than enough as you'll notice shortly when we build our website.

Elementor pro plan

Each package of Elementor's pro plans offer the same features, the difference between them is the number of sites that can be built.

The personal plan is priced at $49 per year and allows you to build 1 website.

The plus plan is priced at $99 per year and allows you to build 3 websites.

The expert plan is priced at $199 per year and allows you to build 1000 websites.

Here's a list of all the features offered in each Elementor pro plan:

More than 50 pro widgets including a vast range of ecommerce widgets

300+ professional templates

A pop up builder for efficient lead generation

3rd party integrations with popular solutions including Mailchimp, Zapier, Hubspot, ConvertKit, Slack and many more.

24/7 support.

Getting started

To use Elementor you need Wordpress and to use Wordpress you need hosting and a domain name.

There are many different hosting providers to choose from but here is a list of options that also offer Wordpress:

Godaddy

Bluehost

HostGator

Some of these providers also offer free domain name registration when you sign up to a hosting plan

Once you've signed up to host you may need to manually install Wordpress onto your hosting environment via your CPanel. This is a bit of a technical process but the helpful staff of your selected host can walk you through it over the phone.

Some hosts also offer dedicated Wordpress hosting plans that come with Wordpress pre-installed. This is a good option if you want to avoid the whole manual installation process, but it's not necessary. A Wordpress website does not require a dedicated Wordpress hosting solution. Wordpress is designed to run on any regular Linux based host that supports PHP and mySQL

WIth your domain name registered, your hosting plan sorted and Wordpress installed, you're ready to start building your website.

To ensure this tutorial is as palatable as possible, we'll walk you through the process of building a fresh new website from scratch. If you're not very technical, there's nothing to worry about, building an Elementor website is as simple as...putting on a toupee.

How to build a website with Elementor

We'll build a website with the free elementor plan to demonstrate the incredible capabilities of its features. The initial process involves a series of steps that will prepare the Wordpress platform for our Elementor design work.

Installing the Elementor plugin

The first thing we will need to do is install the free Elementor plugin.

Head over to "Plugins" in the left hand menu of your Wordpress dashboard and click "Add new"

Search for "Elementor" and install and activate it.

Activate the OceanWP theme

Think of a Wordpress theme as a canvas, this is Elementor's design area. There are many different free Wordpress themes available, but the best one to use with Elementor is called "OceanWP"

To locate and activate this theme, head over to "Appearance" in the left hand menu and then click "Themes".

When the page loads click on "Add New" and search for the theme "OceanWP". Install and activate it.

Once the theme is activated, head over to the "Pages" menu on the left hand menu and delete all of the existing pages, we want to work with a nice blank canvas and remove all existing designs.

With all the pages deleted, let's now add all of the new blank pages of our website. We'll start by creating a new home page.

Simply click on "Add New" at the top to generate a new page. We'll need to do two things here, give the page a title and change the template to "Elementor full width" under "Page Attributes" this will ensure our Elementor design covers the full width of the page.

Once that's done hit the blue "Publish" button in the top right. You need to hit publish in order for your changes to be saved and pushed to the live site, so make a habit of regularly smashing that to keep your hard work preserved.

We'll follow the same process and create two more pages, "Services" and "Contact". You are of course free to create as many or as little pages as you like.

To return to the main Wordpress dashboard, click in the Wordpress icon in the top left:

Setting the homepage

If you load your website in a seperate tab at this point you'll likely see a "recent posts page", we want to get rid of that and also set our new home page as the website home page.

To do this, click "customize" in the new tab with your website URL loaded:

The first thing we'll do is remove the site title that appears on the top bar. You may wish to keep it there but without it the website design looks more spacious and clean. To do this click "Site identity" and then uncheck the "Display site title and tagline" box.

While you're here you should upload your site icon, which is your logo. If you don't do this the Wordpress logo will be displayed in the tab with your loaded webpage, so it's a necessary step to demonstrate professionalism and your

cemented brand identity

If you don't have a logo,

get a freelancer

to design one for you.

Once that's done, smash that blue publish button and then click on the back button next to the "Customizing - Site Identity" title in the top left.

Let's now make sure our new home page loads when our site is loaded.

Click on homepage settings > static posts and we'll select our intendedhomepage from the drop down menu:

As soon as you do that you'll see that ugly blog page content disappear. Congratulations you have successfully set your new home page!

If you hit the blue publish button and load your website in a new tab you will see a nice blank canvas with the addition of a black footer and the "home" title at the top.

Yes, we know what you're thinking, it's pretty ugly having the title of each page at the top like that, let's get rid of it for all pages.

On that same tab with your website loaded click "customize" at the top again and this time navigate to General Options > Page Title.

Under "style" drop down menu select "hidden" and voila, all page titles are now hidden for good!

Now that our foundation is set and ready to support our dazzling web design efforts, let's get designing.

Designing a homepage with Elementor

Navigate to the "pages" menu in your Wordpress dashboard and under your home page select "edit".

When the new page loads click the blue "Edit with Elementor" button at the top and that will take you to the Elementor design dashboard.

All of the design Widgets are located on the left. With Elementor's free plan you get 30 free widgets. All of the widgets associated with the pro plan will have an image of a padlock on them, if you upgrade, they'll all be unlocked for you.

The white area on the right is our design canvas. As you drag each widget into the white area you will see your web page design developing.

Now let's start sculpting our homepage.

The most impressive homepage designs start with a captivating banner image, so let's lay the groundwork for that.

Clicking on the pink icon with a plus sign will reveal different structure options. We want our website headline to be located on the right of the banner image so we'll select a two column structure.

Even though we've selected a two column design we can still have a nice clean banner image span over both segments without interruption. To achieve this we will edit the background of this entire section.

Right click on the 6 dots of the newly added section and select "edit section"

Let's adjust the setting options that appear on the left.

Change the content width to "full width" so that your image covers the entire width of the web page.

Change the height to "min height". This will give our banner a nice display height which we can fine tune to our liking after the image is inserted.

Click the green "update" button on the bottom left. This saves your changes so make sure you keep smashing it.

Now let's insert our wonderful banner.

Click "style" in the top menu of the left panel.

Under background type select the first option "classic" and then click the plus icon under image and upload your banner image.

Large images slow down your page load speeds which negatively affects SEO so make sure you compress all of your images before uploading them.

The image doesn't seem to be positioned correctly so let's fix that. Change the following settings:

Position > center center

Size > cover

Click update.

Ahh, much better isn't it?

Now let's overlay the banner image with a title and tagline. Click the rubix cube like icon above the "advanced" menu on the left to return to all the widgets.

Click on the "Heading" widget and drag it into the right dotted rectangle. Once that's done, we'll edit the text in the editor on the left. Let's also change the alignment to centered.

Smash that green update button.

Hmmm, we don't want the title in that blue color and we don't like that font style, so let's make those changes.

Select "style" in the top left menu.

We'll select white as the text color.

Under topography we'll select the font "roboto" and we'll move the sizing slider until we achieve our desired font size.

Let's check what our design looks like on mobile and tablets. Elementor makes such visual reference readily available in the bottom left when you click on "responsive mode"

Now simply click on mobile or tablet to see what your design will look like on these devices. It's always a good idea to check what your design looks like on different platforms to ensure all of your intended website features are visible and accessible across all devices.

Here is what our design looks like on mobile:

Pretty schmick!

Let's select the desktop view again and continue sculpting our design.

We'll follow the same process outlined above to insert a tag line under the heading. To position the tagline correctly, we'll drag the headline widget below our current headline until we see a blue line appear, then we'll let go of the widget to place it there.

This blue line indicates the prospective placement of any widget so as you drag your widgets in place, take note of the position of the blue line to ensure your placing your widgets in their intended posts.

It's looking good isn't it?

To give the headline text more prominence, let's overlay the banner image in a dark tone.

RIght click on the 6 dots of the banner structure and click "edit section"

Navigate to style > background overlay > color

Moving the transparency slider will adjust the intensity of the overlay, once you're satisfied with the level hit the green update button.

Let's also increase the size of our banner image. To do this right click on the 6 dots of its section, click on edit section and the follow this navigation sequence:

Layout > min height slider.

We'll adjust the minimum height slider until our banner image is the size we want. If you want to cover the entire screen select height > fit to screen.

Let insert a button below the tagline, You should be acquainted with the general flow by now, select the button widget and drag it under the tagline.

Once our button widget is dragged into place we'll center it and edit the title in the left hand editor.

You can also select the button size and change the font and colors under the style tab.

We won't add a link to the button yet.

Now let's start building out the remaining sections of the home page. To add a new section, scroll down and click on the pink icon. This time we'll select the first option, an undivided structure.

Lets drag a title widget over to this new section and a text editor widget below the title widget. When editing text, always try to use the text editor field in the left hand menu and not the main canvas, the changes are a lot more responsive that way.

To edit the text styling always follow the same process outlined above, click the "style"" tab, select your color, and set your font style and size under topography.

The gap between the base of the banner and the title "why you need us" is a bit small don't you think?

Dragging the spacer widget above the title and adjusting the space slider will fix that up.

Customer testimonials are a very compelling addition to a homepage, so lets add that.

To begin we need to insert a new structure. We want to add three testimonials so we'll add a three column structure.

You remember how to do this right? Click the pink plus icon and select a 3 column structure.

Now we'll drag a testimonial widget into each of the columns. To find the widget type in "testimonial" in the widget search bar. Two results will populate but we can only use one of them, the carousel widget is only available with the pro version of Elementor. But not to worry, we can create some very professional looking testimonials with the free testimonial widget.

Play around will all of the available testimonial widget settings under the "style" and "content" tab until you achieve your desired design.

To make the testimonials stand apart we'll change the background color of their 3 column structure to black. To do this we'll right click on the 6 dots of the structure, click "edit section" and then follow this navigational sequence:

Style > background > color > black.

Everything's coming together nicely.

Let's now add an embedded map underneath. We'll create a new 2-column structure and drag the google map widget over to the left column. As soon as you do that you'll see the option of inputting your address in the left menu. You can also adjust the zoom of the embedded map display which is pretty neat.

How to add an anchor link with Elementor

We haven't added a link to our button yet. Let's add an anchor link. An anchor link will scroll the page down to our intended location when the button is clicked. We want the page to scroll down to the "why you need us" section.

To do this, search for the widget "anchor" and then drag it just above the intended location.

We need to give this anchor an ID so that we can reference it in our button link. Let's be super creative and call it whyyouneedus.

Now we'll head over to our button. Clicking on it will reveal its edit options on the left widget menu. In the link field we'll type the ID of our anchor. The hashtag identifies an anchor link so we'll leave it in place.

Click "update" and that's it! Now when the button is clicked, the web page will autonomously scroll down to the "why you need us" section.

How to create a nav menu with Elementor

Adding a menu bar with Elementor takes a few short steps. If all of your pages are already created the process is much easier. Here's how you do it.

With your website loaded in a new tab, click the "customize" option in the top bar and follow this navigation sequence:

Menus > Primary menu.

You might see some invalid items in pink. That's because we deleted the original pages. Hit the drop down arrow for each of these invalida pages and select 'remove'.

Now click "add items" and click the plus sign for all of the pages you want linked in the menu. Also check the 'top bar' box to make sure your top menu is visible across all pages.

If you want to create a sub menu, simply drag a menu item onto your intended parent page until you see a step sequence like so:

Your menu navigation options shouldn't just be a random collection of pages, you should follow a

logical sitemap plan

to optimize your website structure for Google ranking.

A common problem Elementor users have is the annoying presence of the white top bar. This is especially visible if you set your menu bar to transparent. To get rid of it, head to customize > top bar and then uncheck the 'enable top bar' check box.

How to add a contact form with Elementor

To add a contact form we need to install a new Wordpress plugin. Click on the 3 line hamburger menu in the top left hand corner of Elementor and then hit the blue "exit to dashboard" button. Then, on the new page that loads, click on the Wordpress logo in the top left corner to finally get to the main Wordpress dashboard.

Navigate to Plugins > Add new

Search for the plugin "WPForms" and install and activate it.

You'll now see a WPForms option in your Wordpress menu. Click on it and then click "add new"

You can either create a new form from scratch or use the prebuilt contact form. We don't have much time on our hands so we'll just use the prebuilt contact form. Click on "simple contact form"

You can edit it if you want, but if you're happy with it just click save in the top right corner.

To insert this form we will need to copy its code. Click on "embed" and copy the form code.

Now let's get this baby live!

Even though, we've created a separate page called "contact", we'll add this contact form to the bottom of our wonderful homepage.

Let's follow our familiar design protocol:

We'll press the plus icon to add a new structure and select a single structure.

We'll drag the title widget into it and edit our title. If we want to create more space between the title and the preceding structure, we'll drag a spacer widget between them.

We will need to paste our contact form code into a text editor field, so beneath the headline widget we'll drop in a text editor widget.

To insert the contact form code, you need to paste under the "text" option of the editor widget:

You won't see the form appear on the design canvas, but if you hit update and load your page in a new window, you'll behold it's beauty.

That's basically all there is to it when it comes to building a Wordpress website with Elementor, just drag your intended design widgets in place, edit their styling and you're done. To display the editing options of any widget you've dragged in to place, simply click on it. If that doesn't work, right click on it and select "edit".

When designing a website, it's important that you follow a

solid website design plan

rather than just dragging random widgets into any place. At the very least you should reference an existing website design you want to emulate.

Taking your Elementor website to an elite level with freelancers

If you really want to blind your competitors with the glorious glare of your new website, consider working with professional freelancers at every stage of your web creation process:

content writer

will write compelling content for your website that will entertain your visitors and establish their trust before plunging them deep into your sales funnel.