Elementor is the most popular page builder plugin for WordPress, with over 5 million active installs. This comprehensive guide teaches total beginners with no coding skills how to create beautiful, professional WordPress websites with Elementor.
What is Elementor?
Elementor is a visual page builder plugin developed by Elementor Ltd., an Israeli company founded in 2016. In just 4 years, it has exploded to achieve widespread adoption.
The key advantage of Elementor is enabling website building by dragging-and-dropping pre-made content blocks. This allows creating functional, aesthetically-pleasing sites without writing any code. The intuitive, visual interface greatly speeds up web design.
Elementor is offered in both free and paid versions:
- The free version contains basic building blocks like text, images, videos etc. This is quite capable for many simple sites.
- Elementor Pro provides additional dynamic blocks for things like posts, portfolios, sliders etc. as well as support and updates. Pricing starts at $49 per year for one site. I highly recommend Elementor Pro for taking professional design further.
Benefits of Using Elementor
Why has Elementor become so popular? What can it do for you?
Easy to Learn – The visual drag-and-drop builder is very intuitive even for total beginners.
Fast Site Building – Eliminates needing separate web designers and developers.
Design Flexibility – Creates practically any type of website.
Responsive Design – Easily optimize mobile vs desktop layouts.
Clean Code – No messy shortcodes left behind if you deactivate Elementor later.
Massive User Base – Over 5 million sites use Elementor, with fantastic community support if issues arise.
Robust Plugin Ecosystem – Many developers create complementary Elementor plugins, enabling advanced functionality.
In February 2020, Elementor raised $15 million USD in funding to expand their team and community for even faster innovation and growth.
How to Use Elementor
Let’s walk through a real-world example of using Elementor to design a homepage. We will apply Elementor on top of the lightweight Astra WordPress theme, one of the most popular combinations.
Time Estimate: 15 minutes
Install Elementor
Search for “Elementor” in Plugins and activate the official plugin by Elementor LTD. Over 5 million installs.
Disable Default Styles
To ensure consistency with your theme, go to Elementor > Settings and check “Disable Default Colors” and “Disable Default Fonts”. Then save changes.
Create New Page with Elementor
Add a new page and click “Edit with Elementor” up top. This will open Elementor’s editing mode.
Build Your Layout
Now unleash your creativity! Drag-and-drop content blocks from the left panel into the page. Customize each element’s spacing, styling, colors etc.
It’s easy to shape your vision without touching code. But learning the basics behind Elementor’s design will clarify exactly how everything works.
View Your Creation
Visit the page just created to see your new website in action!
Elementor Concept Basics
Some beginners feel overwhelmed by Elementor’s complexity. But Elementor interfaces with standard web languages – HTML, CSS, JavaScript:
HTML is the structure and content – text, images, buttons etc.
CSS is presentation styling – colors, spacing, sizing etc.
JavaScript handles interactive elements and dynamic effects.
Correspondingly, each Elementor content block has 3 areas to control its:
- Content (HTML)
- Style (CSS)
- Advanced (CSS + JavaScript)
Let’s walk through examples of editing a Header block:
Content: Change text, add logo image etc.
Style: Customize colors, fonts etc.
Advanced: Animate the header sliding in.
Grasping these foundations clarifies what everything does in Elementor. From here, the learning curve gets much easier!
Best Themes for Elementor
Elementor works with any WordPress theme. But some complimentary themes enhance the design experience. I recommend:
Astra
Astra is a lightweight, customizable theme perfectly optimized for Elementor. Popular with freelancers.
Good For: Business sites, blogs, online stores.
Soledad
A beautiful blog and media theme with custom Elementor widgets. Great for beginners.
Good For: Blogs, business sites.
WoodMart
A modern ecommerce theme with deep WooCommerce integration. Full Elementor store customization.
Good For: Online stores.
Extending Functionality with Addons
While Elementor itself empowers all kinds of website building, additional plugins can augment functionality even further. I utilize these daily:
Essential Addons
Adds 60+ new Elementor widgets spanning tables, forms, sliders and more. Over 1 million installs.
Ultimate Addons
Created specifically for Astra + Elementor sites. Contains unique innovations like content toggles.
Custom Skin
This brilliant plugin customizes the styling of dynamic Elementor content like blog posts and portfolios. Easily change their visual appearance.
Learning Resources
The capabilities of Elementor run vast and deep. Here are top online resources with tutorials going far beyond this intro guide:
Ferdy Korpershoek
A Dutch YouTuber creating fantastic, comprehensive video tutorials explaining how to master Elementor.
Living With Pixels
Focuses more on designing in Elementor from scratch. Produces incredibly sleek, modern website designs.
FAQs
Can I use Elementor to write blog posts?
Technically yes, but not advisable. Elementor page structure relies heavily on <div> tags, which can slow page loads with lengthier content. Best to utilize on quality over quantity articles.
Does Elementor impact site speed?
Yes, all that capability comes with a cost of increased resources. But proper hosting can minimize this, and it’s a worthwhile tradeoff for the design freedom.
Conclusion
Learning Elementor does involve an initial time investment to grasp the foundations. But the payoff enables building sophisticated sites at lightning speeds!
For further questions, feel free to leave comments or join our Webesrnphia community. Let’s continue raising the bar of WordPress site design with Elementor.