Are you currently thinking to yourself, “I need to build an amazing website” but find it a bit challenging to get started?
Have no fear, Elementor is here!
Elementor is a versatile and easy-to-use WordPress page builder that is well-suited for beginners. The Elementor plugin is highly accessible with a simple download, has drag-and-drop features that require no coding, and it’s totally free to get started!
In our Elementor definitive beginner’s guide, you will learn:
- What is Elementor used for?
- Elementor Free vs. Pro versions.
- Elementor Features.
- Elementor pricing.
- Elementor Site Settings.
- How to use Elementor.
Let’s get started!
What Is Elementor Used For?
Elementor is a fully-fledged, all-in-one WordPress plugin page builder that allows beginners to build vivid and operational websites with a few clicks of a button.
The Elementor page builder grants you control over the visuals and colors, page formatting, and layout, along with various widgets that add functionality to your website by using the simple drag-and-drop interface.
Thankfully, since this plugin was developed in 2015, coding with HTML or PHP is not necessary to make this plugin work; just click, download, and build!
Elementor can be used for building websites in industries like:
- Business and Services
- eCommerce
- Media and Blogs
- Landing pages
- Portfolio and CV
Although more than five million developers have used Elementor for these types of businesses, there are many other domains that Elementor flourishes in.
What is The Difference Between Elementor Free and Elementor Pro?
What’s cool about Elementor is that with either the free version or the pro version, your website will receive full features that will help you build and design a capable website.
Both versions are extremely comprehensive and provide responsive editing for a customized website. Custom professional add-ons are also available for both versions.
However, Elementor pro does have more desirable features than the Elementor free version that can speed up your web pages and productivity, while granting you further control of development.
The major differences between the Elementor free and pro versions are the amount and quality of widgets you receive, the number of theme builders you can use, and, of course, the pricing.
What Are the Features of Elementor?
Let’s start by saying that all the Elementor features that are included in the free version are standard in the pro version. Additionally, Elementor Pro has more than double the online attributes when compared to the free version.
Keep reading to see the details of both plans.
Elementor Free Features
The most essential feature that Elementor Free offers is the drag-and-drop editor. It makes your developing experience easier by enabling live editing with a responsive design on any PC, computer, or mobile device.
You’ll be able to adjust your margins, padding, and place images anywhere on the page with custom positioning. Elementor free also provides more than 300+ designer templates to help create a stunning website.
Let’s not forget the color and font codes that create consistency across all your website pages. When it comes to elements, there are 90+ widgets that are available that you can use to create buttons, document forms, or even headlines with a simple click, drag, and drop.
Navigator is a great feature that helps you move from page to page easily with the click of a button and makes the user experience more efficient for your website viewers.
Graphics and overlays are available that make your website more exciting by adding videos and custom designs on any page that you create.
You should know that 24/7 customer support is not available on the free version of Elementor, so there may be a learning curve if this is your first time building a website.
Elementor Pro Features
In addition to the free version features, Elementor Pro offers Theme Builder, which is a comprehensive set of tools that helps you to build your WordPress website.
It includes visual guides for reviewing and editing, headers and footers, blog templates, page search results for easy research, 404 error pop up, and much more.
Elementor Pro also offers eCommerce through WooCommerce Builder so that you can sell your product or service right from your web page. With this feature, you can also collect customer data to create or add to your email list.
Dynamic Content permits you to create specialized content for your niche or field, while Pro Templates and Blocks creates pre-formatted pages that you can alter to your liking.
One of Elementor Pro’s greatest features is the Integrations. These widgets help with marketing your website and keeping track of your clients and customers via email marketing platforms such as MailChimp, Active Campaigns, and Convertkit.
Elementor Pricing
Elementor has six different plans: one free and five pro plans. The price of each plan is determined by the number of websites you need. All plans also come standard with a 30-day money-back guarantee.
- Free: $0
Pro
- Essential: $49/year
- Advanced: $99/year
- Expert: $199/year
- Studio: $499/year
- Agency: $999/year
The free version grants a one-page website with limited, yet functional fixings.
The Essential plan provides you with one website, while the Advanced gives you three. The Expert plan expands your services with 25 websites, Studio supplies 100 websites, while Elementor’s latest plan, Agency, grants you 1,000 websites.
With the pro plans, they all come with pro features and premium support including up to one day response time, except for the Studio and Agency plans, which provide VIP Support of immediate response and live chats with representatives.
The major difference between all the pro plans is the number of licenses that you purchase at one time.
You can determine which plan is best for you based on the size of your team. If the plan you choose isn’t big enough or is too much, you can always upgrade, or downgrade and it will take effect on the next billing cycle.
For payment methods, Elementor accepts Stripe, PayPal, and all major credit and debit cards.
What Are Elementor Site Settings?
Elementor site settings are meant to help you structure and solidify your site’s details and elements to create an organized and responsive website.
These top-tier settings are located directly in the plugin and grant you operator permission to set the default font, colors, and spacing, among other factors.
Usage of data sharing is available if you are considering allowing another developer to contribute to your website. Another aspect of Elementor Site Settings is the Role Manager function.
As the Role Manager, you will be able to decide which types of users have access to Elementor editing. We’ll inform you now that this premium feature is only available on the Elementor Pro plans.
Elementor Widgets
A widget – also known as an “element” – is simply an individual element or category of content that helps you to customize your web page. Widgets are available on both the free and pro versions of Elementor.
Check out this list of standard widgets:
- Divider
- Button
- Video
- Heading
- Icon
- Image
These widgets make constructing and designing a website simple for beginners because it only requires you to click the icon, drag it to your desired location, and drop it in place – easy!
You may need more widgets for selling products, promoting your service, or collecting professional information from your patrons, and these samples Elementor Pro widgets can help:
- Call to action
- Form
- Portfolio
- Blockquote
- Price table
Use these elements to create a more professional version of your site and support your eCommerce endeavors. You can obtain a full list of premium widgets from the Elementor website.
Here’s a bonus: if you can’t find the element you’re looking for through the premium widgets, you can use third-party Elementor add-ons to scale your websites.
The majority of these third-party widgets are compatible with Elementor and your chosen WordPress theme, with many of them being free!
How To Use WordPress Elementor
Customizing and building your website is the fun part of working with Elementor, but before we jump into how to use WordPress Elementor, you should know the difference between a Theme and a Page Builder.
A Theme is a predetermined template that has already been designed based on a specific industry. Themes are created by professionals and purchased by Elementor to allow you to personalize the one you choose the way you want.
Using a Theme also saves you energy from having to build it from scratch.
On the other hand, Page Builder allows beginners to create their own Theme from the ground up. Page Builder starts with a blank page and gives you the total creative freedom to design your made-to-order web page.
If you want to save time, use a Theme. If you want to showcase your development and creative skills, start with Page Builder.
Now, it’s time to learn the step-by-step instructions for how to use WordPress Elementor with a Theme and with Page Builder.
How To Use Elementor Theme Builder
1. Install Elementor
Remember, Elementor is a plugin, so it must be downloaded then installed. From your WordPress dashboard, click on Plugins, then Add New, followed by typing Elementor in the search bar.
After it pops up, click the Install button, and then the Activate Plugin button.
2. Add new or import template
Go to Pages, then Add New. Then, click the Edit with Elementor button. This will take you inside the Elementor Editor.
3. Insert an Elementor Template
Click Add Template and select your choice from either the free or paid templates. Give your new template a name then, click Create Template to begin.
4. Make the template full width
Click “Section” then Layout and click the tab to change the Stretch Section to Yes.
5. Select a widget
To the left, you will see a tools box filled with widgets. Search for the button widget you would like and simply drag and drop it into the area that you want.
6. Change the background image
From the settings icon at the bottom left panel, find the Style tab in the middle and click on the background image. Choose from an array of included templates or upload your own images. Press insert media and watch it upload.
7. Change background color
Click the Style icon then click on the Classic option for background type. Choose Color which will reveal the color palette. From there, the background will change to whichever color you choose.
8. Change fonts
Click the heading widget from the left panel to open the heading settings. Click the Style tab, then click Typography. You can also change the size that best fits your color scheme, background, and mobile device.
9. Add images or videos
From the left panel, click the Image or Video widget and drag it to your desired location on the web page. You can choose a pre-made commercial image or video from the Elementor Library or upload your own.
10. Structure & save
Use the gridlines to organize your content to ensure that your sections, columns, and widgets are legible and structured. Once you have completed your page design, click Save.
There are different widgets depending on whether you have the Free or Pro version. With the Pro version, there are more to offer that grant you access to further develop your web page on a more technical level.
You can also create a duplicate of an individual page in the Essential Addons Settings by “Duplicator” and saving it.
The most efficient part of the Elementor Theme Builder is the history task, which memorizes your previous operations so that you could undo them if you made a mistake.
Let’s move on to the instructions for building a web page from Page Builder.
How To Use Elementor Page Builder
1. Install Elementor
From your dashboard, visit Plugins, then Add New and search for Elementor.
2. Edit the page
Click on the Pages menus and begin with a clean page. Click the Edit with Elementor button, then the blue edit button, which will take you to the Elementor editor.
3. Add a Heading
From the left panel, drag and drop the Heading element to the page and give it a title. By clicking the heading, you can alter the heading by using the Content, Style, and Advanced section. Click Style to change your text visual.
4. Create page layout
Click the red button with the white plus sign in it to create a new page structure. You will have 12 structures to choose from. After clicking the red plus button, your sections and columns will be created directly on the page.
Click the handle at the top of the page section to see the new design options.
5. Create a background
Inside the Style tab, browse through various background types, images, gradients, and colors to create your background.
You can also use videos or slideshows as your background on any page section.
6. Fix the layout
Visit the Editor area and open the Page Attributes section, and then choose between:
- Elementor Canvas for full width with no footer or header
- Elementor Full Width for full width including header and footer
7. Add pre-made blocks
Click the folder tab next to the red plus sign to add a new block. Choose from different pre-designed page sections by clicking one of the blocks to place them into your web page.
To choose a specific text design, from the left panel, click the Category dropdown menu and choose your new block.
8. Add a pre-made page (optional)
You can either continue building your page from scratch or choose from pre-made pages from the Elementor library. If you choose this option, from the popup window, click the Pages tab to reveal the pages.
9. Re-use blocks and pages as a template
Once you have completed your design, click the green Update button to save your changes. Then, click the arrow next to it and choose the Save as Template option.
You can now re-use your new template for your own website pages or for your patron’s website.
Phew! That’s it!
Now you have a beautifully designed web page template.
Known Plugin Conflicts of Elementor
Everything about Elementor seems – almost – perfect, right? Yet, there are a few bugs with Elementor that you should know about.
Luckily, we also have the solutions to fix these issues for you.
- Some third-party plugins may not be compatible with Elementor including:
- SG Optimizer by SiteGround
- Ele Custom Skin
- ElementKit
- JetElements
- Users have received a “Go Pro” message even if they already have Elementor Pro installed.
To fix this, simply update Elementor to the latest version by going to Elementor, then Tools, then General to integrate your library to receive the “update Elementor” invitation.
- Developers may receive an “Elementor Widgets not Loading” notification. This could arise because there are too many widgets being used on your page.
If you receive this notification, check for plugin conflicts, and disable any unused widgets by deactivating them.
Conclusion
Congratulations, you made it through our How to Use Elementor Definitive Beginner’s Guide!
You now know how the Elementor WordPress plugin can help you develop your latest website and the steps to take to ensure that it is visually pleasing and functional for an easy user experience.
Whether you start from scratch or a template, Elementor has proven to help you create efficient sales pages and build custom websites for you or your customers by using web design without code.
Which design will you choose for your next project? Use our complete guide to help you decide.
Enjoy your new website!
