How to Use Elementor for WordPress

Some posts contain affiliate links, which means I make a small commission if you click my affiliate links and make a purchase. To learn more, click here. Thank you for supporting Reroute Lifestyle!

How much time do you spend customizing your WordPress blog theme? The best theme for WordPress blogs and website actually comes in a plugin form - Elementor Pro! Read this step-by-step Elementor Pro tutorial to design your first page on your website. | Design beautiful websites with RerouteLifestyle.comI’ve designed WordPress websites with the Elementor Pro plugin for over one year now. And what I love most about Elementor is that it creates beautiful web layouts with little or no coding knowledge necessary.

This tutorial was actually the first blog post I built using Elementor (normally I just design pages and the general design of blog pages). After this experience of adding boxes and buttons into this post, I’m genuinely so excited to build more blog posts using the Elementor page builder!

This post will walk you through some of Elementor’s basic features, with some protips I’ve learned along the way! I’ve used other page builders and talked with others about their experience with Elementor. I can confidently say that Elementor is the most intuitive and advanced option!

You can follow this guide to create your very first page using Elementor (:

What is Elementor?

Elementor is a freemium WordPress plugin with a customizable, drag-and-drop interface. I’ve used it to design and build landing pages, virtual summits, thank you pages, full websites.

With the Elementor Pro version, you can also customize things like your individual blog page design. With all the customization options available, this plugin turns WordPress into your oyster (is that how the phrase goes?).

Incredible elementor features

  • Intuitive drag-and-drop pagebuilder
  • Create a Table of Contents within a post
  • Add FAQ to your pages
  • Optimize pages for tablet and mobile
  • Create social icon sets
  • Use custom fonts!

Because this is a freemium plugin, that means there is a free and paid version of Elementor. The free version is great to start with when you need to build a quick landing page. And, the customization options of the paid version, Elementor Pro, allow you to build full websites.

Pssst. You do need to have a self-hosted WordPress website to use Elementor. If you don’t have one, click here to claim an exclusive offer I have from Bluehost!

Difference between Elementor Free and Elementor Pro

You can easily use the free Elementor plugin to build a landing page. Because Elementor Pro is so advanced, I recommend upgrading to the pro version! You can use Elementor Pro to design the full theme for your website and its various features allow you to easily maintain a custom, branded look. 

Plus, using Elementor reduces the need for many plugins which declutters your website!

Free Version

  • Page Builder
  • 30 widgets

Pro Version

  • 50+ widgets
  • Popup builder
  • Visual form builder
  • WooCommerce plugins
  • Theme builder

Resources Mentioned in this Tutorial

Before we get started, here are some resources I mentioned in this tutorial you might want to reference later: 

How to Start

Step 1: Download & install essentials

Decide which theme you will use! I use the free version of GeneratePress because it is lightweight. But you can also use the Hello theme, which was a lightweight theme built specifically for Elementor. Because Elementor Pro is such an advanced tool, you don’t need a theme with extra frills.

Next, download and install the Elementor plugin. 

Step 2: Customize the backend of your website

The next step will be to customize your website settings. 

  • Set any typography and display settings  from your WordPress Dashboard “Appearance > Customize”
  • Open the first page you will be building with Elementor. Click the “General Style Settings” icon in the top left corner of the page.
  • Click “set default colors” to customize the color palette you will be working from!
  • From the same “General Style Settings” menu, set your default fonts. 

Step 3: Build your first page!

Yay! Once you’re all ready to build your first page, set your page settings! Click the “Settings” gear in the bottom left corner. 

  1. Title your page
  2. Set its status (Draft, Private, Published)
  3. Add the featured image
  4. Decide if you want to hide or display the Page Title
  5. Choose the page layout (Elementor Canvas or Elementor Full-Width)

Elementor Full-Width displays the page with your navigation bar/header and footer. 

Elementor Canvas creates a completely blank page for you to build from. It automatically hides your navigation bar and footer. 

How to Build Your First Page

Page Structure

The basic foundation of Elementor pages rely on sections, columns and widgets. You start by creating your first section.

  • Section: Sections are the parents of columns. You can save section templates! To create a new section, you normally click a “+” sign on the page.
  • Column: Columns live within a section. You can have one, or more, columns in a section. To add a new column, hover over your column and right click the icon. From there, you can either “Duplicate” the current column or “Add New Column.”
  • Widget: These are the functional applications from the Elementor plugin. Each widget performs in a different way on your website. For example, there are text widgets, image widget, testimonial widgets, social icon widgets, etc. You can tell something is a widget on your page because when you hover over it, the top right corner shows a blue pencil icon .

Elementor is a drag-and-drop plugin, so from the Elementor page builder you can just drag a widget into a section or column on the page!

Customize Sections, Columns and Widgets

As you move through customizing pages on Elementor, you’ll notice that there are 2-3 customization columns: Layout/Content, Style, Advanced.

Elementor Tutorial - WordPress Section Settings 1
Elementor Tutorial WordPress - Section Settings 2
Elementor Tutorial WordPress - Section Settings 3
  • Content: Your widget content will go here! For image widgets, this is where you would add the image. For text widgets, this is where you would add text. And so on and so forth.
  • Style: Customize how the section, column or widget will look, e.g. typography, background, spacing. This is how you change the background of a section, column or widget!
  • Advanced: Customize margins/padding, device responsiveness, motion effects, and custom CSS.

I also love how you can adjust the margins and padding for everything in the Advanced column. They seem like they do similar things, but I drew something to help you understand the difference between margins and padding.

Global Widgets

Global Widgets are widgets displayed on multiple parts of your site. A single global widget can be displayed across multiple pages. So when you update that single global widget, all linked widgets across your website are also updated!

This is great for newsletter opt-ins, repeating text boxes (like for an event or webinar), or buttons you frequently use.

Global widgets are a Pro feature.

To save a global widget, right click the widget ​ and select “Save as Global”.

Then, the widget will appear in your “Global Widgets” section.

When you’re in the Elementor Page Builder, you can access your Global Widgets section and drag a global widget like a normal widget onto your page!

Protip: To avoid customizing typography styles over and over again, save your website typography settings as global widgets.

When you’re ready to make a new text box, drag your global “text widget” onto the page.

Then, right click the global widget and press the red “UNLINK” button to edit the widget. This saves some extra time when you need to make a quick text box!

Different Types of Widgets

Again, widgets are functional applications within the Elementor plugin. Each widget performs in a different way on your website.

Free Elementor Widgets

Since Elementor is a freemium plugin, they offer a lot of options for you to use! Here are some of my favorite free widgets:

You can use Heading widgets to display your custom heading typography!

The text editor is a separate widget where you add text. There is both a WYSIWYG editor and a bare text editor.

Inner sections allow you to build sections within a section (this menu is built in a two-column inner section). 

Display videos from YouTube or Vimeo using this widget!

Display custom social icons with this widget! This makes it easy to add social icons to a page without needing to rely on another plugin to do the job.

Easily add custom-coded buttons to your website! In the past, I’ve used CSS to create and customize buttons. I love how Elementor empowers the no-coding approach (:

Create a simple but sophisticated image gallery! This is great because you can customize the look of the gallery (image size, columns, border radius, etc).

An anchor is a page jump, so when someone clicks your anchor they are led to a specific part on your page (that you set). You can set anchor links, code-free, using Elementor! 

This is a “Toggle” widget using Elementor! It makes it easy to set up FAQs, or areas where you have a lot of information but do not want to clutter a page.

Elementor Pro Widgets

I obviously love Elementor Pro. Its paid features allow for that extra level of customization and sophistication. Here are some of my favorite Pro widgets:

Add a fun, personalized level of sophistication to your pages with an animated headline!

Have you ever felt frustrated by the limited ways your theme displays blog posts? The “Posts” widget allows you to customize how the feed of your blog posts will be displayed… without have to worrying about custom code or CSS.

This is one of my favorite Pro widgets and it’s such a simple concept. The custom forms widget allows you to customize any form – contact form, email optin form, login form – on the page. 

Have you ever felt frustrated trying to build a pricing table for your website? Elementor actually makes this so simple – plus you have the option to add a ribbon to the top of your price tables!

The Countdown widget is great for when you need to display a countdown on your website (like for an event).

Other notable Pro plugins: Navigation Menu, Testimonial Carousel, Share Buttons, Media Carousel, Facebook Embed

How to Build Forms Using Elementor Pro

Again, the forms widget is one of my favorite features, even though it’s simple and a small touch. They are also very easy to create.

Forms are a Pro feature.

Two of the most common examples for forms would be to build a contact form or email opt-in form. The modern, branded forms look much more professional than the generic default forms. 

To build both forms, drag the “Forms” widget onto your page.

Build a Contact Form Using Elementor

For every item on your form, you can select the type of display (text, email, URL, file upload, checkbox, etc. – there are many different options!) for each form field.

After you build the form fields, you decide if you want to display the labels (the labels appear above each form field). You can also make edits to the “Submit” button.

Then, go to “Actions After Submit”. This dictates what you want to happen after someone successfully completes your form and presses “Submit”.

For Contact forms, make sure the “Email” action is selected.

You can also set up this form to send information via Discord or Slack. This is a neat feature that could declutter your inbox or help your team stay on the same page regarding contact inquiries you receive.

Then, click the “Email” section and confirm accurate information is completed. You can style your form to totally match your brand!

Build an Email Opt-in Form Using Elementor

Elementor’s form builder comes with some CRM integration. If you use a CRM like Convertkit, ​you can integrate it with Elementor by installing the Mailoptin plugin and integrating it with your CRM.

Building an email opt-in form is similar to the contact form above except instead of “Email” being an Action after someone inputs their information, you would choose an action like “Mailchimp” or “Mailoptin.”

From there, a new section will pop up (e.g. “Mailoptin”) for you to confirm which List you want people to be linked to when they enter their information!

This is an example email opt-in section built using Elementor:

Do you want an email opt-in section done for you like the one above? Click the button below!

Elementor Pro Templates

As a branding supernerd, I love how you can save templates for use with Elementor Pro! The idea is you build something once, save it as a template, and reuse the template to build your next pages in the future!

  • Build an entire Homepage or landing page, save it as a template, and reuse elements again on other pages!
  • Save a single section and use it again as a template.
  • Download someone else’s template and customize it with your own copy, images and branding.

This saves so much time in the long run because you are only designing or building something once. This also helps ensure your website maintains a consistent look across all pages. 

To customize your templates, go to your WordPress dashboard and find the “Templates.”

Here, you can upload templates, create new templates, and modify templates.

Protip: Before saving something as a template, check to make sure it’s coded for tablet and mobile!

Elementor Pro Theme Builder

The Elementor Pro Theme Builder is incredible! You can basically design your own navigation menu, footer, blog archives pages, and blog post pages. 

  • Set a custom navigation bar or footer across your entire website.
  • Use “Display Conditions” to customize the look of each blog category.
  • Totally customize the look of your blog page (add an email opt-in form!).

This feature alone makes Elementor as more than a plugin… it basically acts as a fully customizable WordPress theme. 

Elementor Pro Pop-Ups

Another incredible Elementor Pro feature are Elementor Popups. These are another great way to capture your visitors’ email addresses. You can customize the popups to display after a certain period of time, as they’re exiting the page, etc.

Do you want an email opt-in section done for you like the one above? Click the button below!

Ready to get started?

I remember the frustrated feeling of feeling limited by my own blog theme. Or going into the back end of a client’s website trying to navigate their own theme!

Elementor Pro paves the way for the future of customization. And they keep adding more features.

I highly recommend using Elementor Pro to build your website!

“I want to switch to Elementor, but moving and customizing everything is a lot of work.

I totally understand the pain and anxiety around switching from one website solution to another. Is it even a good fit? 

I’ve helped others in the same boat switch over from Divi, Blogger, and Visual Composer! This switch means a less clunky website backend (which improves site speed, yay!) and an easy-to-edit front-end (you can actually feel empowered to make your own changes… without the fear of messing anything up!).

Do you want help transitioning your website to Elementor? Click here to get in touch so we can see if this would be a good fit!

What’s your Elementor experience?

Did you learn anything from this tutorial? What has been your experience with Elementor so far? 

I am so passionate about this plugin (I use it EVERY day), so let me know in the comments below what other questions you have about Elementor!

access the google sheets bundle for Online Biz!

Leave your email below to get free access to the Google Sheets Bundle for Online Biz!

  • Freelancer Income & Expense Tracker
  • Master Content + Reference Tracker
  • Pinterest Board Tracker 

Like this article?

Share on facebook
Share on Facebook
Share on twitter
Share on Twitter
Share on linkedin
Share on LinkedIn
Share on pinterest
Share on Pinterest

COMMENTS