my affiliate links and make a purchase. To learn more, click here. Thank you for supporting Reroute Lifestyle!
I’ve designed WordPress websites with the Elementor Pro plugin for over two years 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!
Elementor empowers you with so many code-free ways to showcase information. You can use features like colorblocking and buttons to show information on your website or blog.
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!
- Page Builder
- 30 widgets
- 50+ widgets
- Popup builder
- Visual form builder
- WooCommerce plugins
- Theme builder
1. Get Started
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 design of your website
The next step will be to customize your website settings.
- Open the first page you will be building with Elementor. Click the “General Style Settings” hamburger icon in the top left corner of the page.
- Next, click “Site Settings”.
- This is where you will be able to customize your design system (the default colors and fonts) for your website!
Set Global Colors
- From the “General Style Settings” section, you can set your primary, secondary, accent, and text colors.
- Your primary color can be the primary font that will be used on your website. You can set Headings, buttons and links to be this color.
- Your secondary color can be the default color for things like subheadings and section backgrounds.
- An accent color is typically a color in your palette that you use less often, like on buttons or section dividers.
- Your text color will easily be the color for your body font!
If you plan to use more than 4 colors, you can add them to your global color palette as well.
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.
- Title your page
- Set its status (Draft, Private, Published)
- Add the featured image
- Decide if you want to hide or display the Page Title
- 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.
2. How to Build Your First Page
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.
- 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 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: Use the Elementor “Site Settings” feature to customize your default typography and color settings!
3. Types of Elementor 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
4. 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 integrations, including Convertkit, Mailchimp and ActiveCampaign.
If you use a CRM that doesn’t have the integration set up within the plugin, you can integrate it with Elementor by installing the Mailoptin plugin and connecting 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:
5. Use 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!
6. 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!).
Theme Builder Templates
You can build the following templates for your website using the ELementor Pro theme builder:
- Navigation Bar
- Blog Archive Page
- Blog Post Template
- Category Archive Page
- Author Page
- 404 Page
- Search Results Page
- WooCommerce Pages (Shop, Products)
This feature alone makes Elementor as more than a plugin… it basically acts as a fully customizable WordPress theme.
7. 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.
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.
As someone who has built over 20 websites using Elementor Pro (including this one!), I highly recommend using Elementor Pro to build your website!
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!