It’s a bit crazy to consider I started building WordPress websites using Elementor in 2018.
Elementor is a WordPress plugin that empowers you to create beautiful, custom web layouts with little or no coding knowledge necessary.
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!
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?).
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!
1. Get Started
Step 1: Download & install essentials
Decide which theme you will use! I 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!
3. 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!
4. 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!
5. 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.
I remember the frustrated feeling of feeling limited by my own website 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!