Ultimate Guide for Beginners
How to Use Elementor in WordPress
Here is our complete guide to learn Elementor.
If you were searching, “what is Elementor”, “how to use Elementor,” you should read this article till the end. In the next 20 minutes, you’ll enjoy learning Elementor most easily.
In this post, you’ll see:
- What Elementor does
- What Elementor can be used for
- Our opinion of Elementor’s page-building features
- Whether Elementor Pro is worth the subscription
- Essential page designing principles
And a whole lot more.
Let’s get started.
Table of Contents
Chapter 1
Introduction to Elementor
In this chapter, we’ll answer the question: “What Is Elementor?”
Is it a free plugin or a paid plugin? How can we download Elementor? And so many questions.
We’ll also see why you should use Elementor and its benefits.
Let’s get started.
What is Elementor?
Elementor is a visual, drag-and-drop page builder plugin.
Let’s break down this definition:
- Elementor is visual, meaning visitors see the same thing you see while designing.
- Drag-and-drop — you get draggable widgets like text, buttons, images, sliders, and more.
With Elementor, you can create stunning web pages without any coding knowledge. Its user-friendly interface and drag-and-drop system make it easy for anyone to design professional-looking websites.
In short, you can build WordPress websites quickly.
Why Use Elementor for WordPress?
WordPress has an editor that allows you to write and add images and other multimedia elements.
But…
- The default WordPress editor is okay for simple posts but lacks design options.
- You also can’t see your design until you hit the preview button.
Elementor solves these issues!
First, it gives you drag-and-drop design freedom with a live visual builder—you don’t need to know HTML or CSS.
Second, you’ll see your design exactly as your visitors will, making it easy to make quick adjustments.
But how does Elementor do that?
As you keep reading, you’ll discover all the great features Elementor offers.
I’ll dive into that in the next section.
So, continue reading…
Key Features and Benefits of Elementor
We’re just beginning to learn Elementor.
Still, we can overview some of the key features of Elementor page builder:
- Building Forms – Elementor offers a Form widget that can help you eliminate the need for a separate form plugin.
- Integrations – Elementor has built-in integrations to connect with third-party tools.
- Popup Builder – Elementor Pro’s popup builder allows you to create popups without using a separate popup plugin.
- Elementor Template Library – Elementor’s template library offers a variety of ready-to-use website pages that can save you a lot of time.
- Theme Builder – The Theme Builder lets you design website elements that are usually managed by a theme.
- WooCommerce Builder – WooCommerce Builder lets you design your WooCommerce pages.
Chapter 2
Getting Started with Elementor
Now, you know what is Elementor.
It’s a free page builder plugin that helps you design your website pages.
No more waiting…
Let’s get your hands on the Elementor plugin.
Installing and Activating Elementor
We assume you already have a basic WordPress setup.
If you need help, click here to learn how to create a website.
Now, let’s move on to installing the Elementor plugin.
Step 1: Go to Plugins > Add New Plugin in your WordPress admin dashboard.
Step 2: Search for “Elementor.”
Step 3: Click Install Now, then click Activate.
Once the plugin is activated, you’ll see a new “Elementor” menu in your dashboard.
Overview of the Elementor Dashboard and Interface
Now that you’ve installed Elementor, let’s talk about how to use it to design your first page.
To begin, create a new post or page.
Next, click the “Edit with Elementor” button to launch the Elementor editor.
You’ll see the Elementor editor like this:
It’s divided into two parts:
- Widgets/Elements – These are the building blocks you’ll use to design your page. At the bottom, you can draft your design and other essential settings.
- Content area – You’ll drag the widgets from the left side and drop on the content area to design your page.
We have now reached a point where we can start designing our first page in Elementor.
Understanding Elementor’s Basic Layout Structure
Now, you’re ready to design your first page or post.
Let’s go over Elementor’s basic design structure.
There are three main parts:
- Sections – These divide the page into horizontal rows.
- Columns – These go inside sections and divide them into vertical columns. You can add multiple columns within a section.
- Widgets – The elements you use to add content inside columns. Each widget has three settings panels: Content, Style, and Advanced.
By now, you should have a general understanding of how Elementor works.
Chapter 3
Creating Your First Page with Elementor
You’ve covered the basics of using the Elementor plugin.
Well Done!
In this chapter, you’ll start designing your first page.
Without any further delay, let’s begin.
Drag and Drop Elementor Widgets: The Basics
Open a page or post and click on “Edit with Elementor.”
Start by clicking the “+” icon on the section.
Select the number of columns to finalize your layout – one, two, or multi-column.
Next, drag widgets like headings from the widget panel in the content area.
While the heading widget is open in the widget panel area, you might have noticed it is divided into three tabs:
- Content – important tab for customizing an element’s content and function.
- Style – change the styling elements like colors, typography
- Advanced – Advanced tab helps you add padding and margins. It also controls advanced styling such as z-index, motion effects, responsive settings, and more.
Start by adding your heading content, such as title, link, and heading tags, and customize the widget in the same sidebar interface.
Next, we’ll move on to styling the heading widget.
Styling the Widgets
Let’s start styling the widgets in the content area.
Here, you will find element editing settings like:
- Alignment,
- Text color,
- Typography options like font size, font weight, uppercase, lowercase, line height,
And so on.
Play around with the settings to get your required design.
It’s time to customize the space around the heading element.
Customizing Layouts: Padding, Margins, and Spacing
To adjust element alignment and positioning, go to the Advanced tab and manually change the margins and padding.
You can set custom margin and padding values to meet your design needs.
The Advanced tab also lets you adjust width, position, and CSS classes.
These are advanced CSS settings, so we recommend reading CSS guides first.
Like the heading element, continue dragging the other widgets on the content area and style them accordingly.
Once you’re done with the changes, click on Save Draft.
Designing Responsive Layouts for
Mobile, Tablet, and Desktop
By default, your Elementor-designed pages are responsive on mobile devices & tablets.
However, you might want to modify the spacing and positioning of your sections.
That’s entirely possible using the Elementor Responsive settings.
While designing, you might notice a bar with some helpful functionality buttons.
One such button opens up the Responsive editor mode.
Clicking this icon opens a top menu with different device options.
Choose one to see a preview of how your page looks on that device. You can select between a desktop, tablet, or mobile phone.
Set the padding and margin values in the respective device mode, then click on Save Draft to save your changes.
You can click on the Preview Changes icon to view your page design in a separate tab.
Chapter 4
Introduction to Elementor Pro
It’s time to learn advanced design features.
This chapter will introduce you to the Elementor Pro plugin, its features and benefits.
No more waiting…
Let the basics begin.
What is Elementor Pro Plugin?
Elementor plugin is free, but it offers limited number of widgets.
In order to get more out of the Elementor plugin, you need to upgrade to Elementor Pro.
Elementor Pro is a paid extension plugin that offers advanced website designing features, like:
1. Theme Builder
2. Popup Builder
3. Premium Widgets
4. Pre Designed Template Library
5. Dynamic Content
6. Priority Support
We’ll explore the basics of Elementor Pro features, so you have a basic idea of what all can be achieved with the Pro plugin.
Let’s start by looking at the Theme Builder feature.
Theme Builder: For Creating Website Headers, Footers, and Custom Layouts
Using the free Elementor plugin, you can design the posts and pages.
You cannot customize your website’s header, footer, design of single posts/pages, or blog page.
This is what Theme Builder does.
With the Elementor Pro plugin’s Theme Builder, you can confidently edit every part of your website, knowing you have comprehensive control.
For example, you can create a template for single posts, pages, and archive pages like categories.
You can take complete control of the header, footer, and sidebar design.
Theme Builder also offers the flexibility to set display conditions. This means you can choose to display elements on specific pages, or based on other WordPress user-role conditions, giving you the adaptability you need.
Popup Builder: Building Popups with Elementor
Popups – marketers love them, visitors hate them.
Popup Builder, just like the theme builder, is a popular feature that gets unlocked with the Elementor Pro plugin.
Building popups is easy in Elementor. You can trigger them as a main popup, header bar, footer bar, and even create exit intent popups.
There is no need of any coding knowledge or need to swirl your head for setting popup display conditions.
Here are the 4 simple steps to create popups in Elementor:
- Step 1: From Elementor > popup builder > customize the popup window
- Step 2: Design your popup from scratch or use pre-built popup designs
- Step 3: Set your popup targeting rules
- Step 4: Connect popup to site and contact forms
And that’s how Elmentor popup builder helps you build beautiful popups.
Premium Widgets: Advanced-level Content Widgets
As we mentioned before, the free Elementor plugin offers a limited number of widgets.
With the Elementor Pro plugin, you unlock premium widgets.
These pro widgets help you create more advanced-level designs. Some of the popular widgets from the Elementor Pro plugin are:
- Posts widget: allows you to display your blog posts in different layouts and match your website design.
- Form: Just drag and drop the widget to create different types of forms, such as lead generation forms, email subscriptions, login forms, customer feedback forms, and more.
- Nav Menu: As the name suggests, you can use the Nav Menu widget to create your website’s navigation menu.
Slides: helps create full-width and full-screen slides and control how they look on responsive devices. - Off-canvas: This widget can show a list of menu items, order total, and other information in a collapsible side panel when a user clicks a button or a link.
- Video Playlist: lets you display a video content list that keeps your audience engaged on your website.
- Hotspot: The Hotspot Widget helps create interactive images to highlight essential info, boost engagement, and increase conversions.
- Mega Menu Widget: Mega Menu allows you to design visually appealing and well-organized menus for your website, including images and links, thereby offering navigation.
- Table of Contents: helps create a dynamic table of contents to enhance readability, accessibility, SEO, and visitor experience.
- Lottie Widget: Lottie widgets are animated elements created from .json files. They make your website more lively and interactive.
- Login form: This widget lets you create a login form for your customers that matches the style of your website rather than using the default WordPress login form.
- Slides: Helps create full-width and full-screen slides and control how they look on responsive devices.
And that’s not all.
You can explore all the advanced widgets with the Elementor Pro plugin.
Pre Designed Template Library
We all understand designing takes time and creativity.
Managing the design time and effort is difficult if you’re running your business.
If you’re not a designer, like most of us, you still needn’t worry.
Elementor Pro offers a library of ready-to-use page templates and pre-designed sections, saving you valuable time and effort. You can import these templates at the required places, relieving you of the burden of designing from scratch.
These templates are built by Elementor designers, so you can play around with the background and colors to match your website branding.
If you’re looking for an ever-growing library of Elementor templates and ready-to-use sections, you should install the Responsive Plus—Starter Templates plugin.
With this free plugin, you get:
- 150+ free and premium Elementor websites.
- 500+ free Elementor-designed pages.
- 100+ ready to import Elementor sections.
- Advanced features for the Cyberchimps Responsive theme.
And much more.
Dynamic Content
With Elementor Pro, you can use a powerful feature called dynamic content.
Dynamic content lets you pull information from your WordPress site and automatically add it to your Elementor designs.
We’ll explore Dynamic Content in the upcoming chapter.
Custom CSS
CSS (Cascading Style Sheets) is a language used to style and format the appearance of a website, controlling things like colors, fonts, and layout.
Although Elementor is a page builder, you might need to add custom CSS to achieve the desired design.
There is no option in the Elementor free version to add CSS.
Elementor Pro unlocks the option to add custom CSS to elementor widgets. You can add your own CSS directly within Elementor layouts. A good setting for those who are comfortable with CSS code.
To add custom CSS, follow these steps:
Step 1: Go to the Advanced tab > scroll down to Custom CSS.
Step 2: Expand the Custom CSS panel and enter the code.
Step 3: Preview changes and Publish the page
That’s all you need to do to add custom CSS to your Elementor pages.
Priority Support
Elementor Pro opens the channel for getting priority support.
Here’s what you get:
- 24/7 support availability because their customer executives are located all around the globe.
- Receive quick and accurate answers from expert agents.
- Priority support continuously keeps improving to provide you with better service.
You can also get help by checking their:
- Elementor Knowledge Base
- Elementor Learning Academy
- Elementor FAQ section
- Elementor Articles
Elementor has recently introduced Platinum Support.
Platinum Support is a premium service built for agency owners who rely on rapid client resolutions and seamless operations.
Here’s what you get in Elementor Platinum Support:
- A Dedicated Customer Success Manager
- Faster Response Times
- No Automated Responses – engage with real customer executives
- Multiple Communication – WhatsApp, email, and live chat options.
Also, you can learn a lot more from YouTube Videos that we keep creating for Elementor
learners.
Chapter 5
Building Dynamic Content
By now, you know there is something called Dynamic Content, which you can get with the Elementor Pro plugin.
We will explore the following question: “What is Dynamic Content in Elementor?”
What are the benefits of using Dynamic Content and what you can achieve with the help of Elementor Pro’s Dynamic Content feature.
Let’s begin with the basics.
Introduction to Dynamic Content in Elementor
Generally, dynamic content changes based on data from your site or user behavior.
For example, you styled a template to display a single product page using Elementor Pro’s theme builder. Still, the content of each product(WooCommerce Product) will be different and be pulled from the site’s database.
You can do a lot by combining dynamic content with theme builder.
Just like the above example, you can create a template and fetch the data for:
- Blog posts
- Archive pages
- Product pages
- Headers
- Footers
- Custom Post types
All this can be further used with something called custom fields.
In conclusion, Dynamic content when used with custom fields opens up a ton of possibilities for building high level dynamic WordPress websites.
Chapter 6
Elementor Addons and Integrations
You have a good understanding of Elementor and the Pro plugin.
But that’s not all.
Elementor’s codebase can be extended. Utilizing the benefits of an extendable codebase, many WordPress companies have developed plugins that further enhance the capabilities of the free Elementor plugin.
In this chapter, we’ll learn about Elementor Add-on plugins and how to use third-party plugins with Elementor.
Let’s begin.
What are Elementor Addon Plugins?
Elementor Pro plugin provides nearly every widget you need to design a fully functional website.
But we know creativity has no limits!
Sometimes, you might have the right widget, but a missing feature restricts your ability to bring your design ideas to life.
No worries!
Elementor offers extendable code, and other companies have used it to create unique widgets through Elementor Addons.
There are many Elementor Addon plugins available on the WordPress.org repository. Many offer free widgets and lock advanced features behind a paywall.
However, some Elementor Addon plugins are free, without any charge, and built to help the Elementor community.
Take Responsive Addons for the Elementor plugin, for example.
It’s free, offers 80+ widgets, and is optimized for fast loading without causing any loading problems on your WordPress website.
Utilizing Third Party Widgets and Extensions
Like Elementor Pro widgets, many third-party companies create widgets and add them to their Elementor-addon plugin.
You will find many of them on the WordPress plugin repository.
Here are a few benefits of using third-party Elementor addon plugins:
- Boosts creativity and opens up new design possibilities.
- Extends integrations other than the default Elementor plugin
- Third-party addons offer more customization settings
- Many addon plugins provide pre-built templates and sections that speed up the design process
With the abundance of Elementor addon plugins available, testing each one is challenging.
However, these tools can save you valuable time in your design process.
We have our plugin – Responsive Addons for Elementor on WordPress.
It’s a free plugin that offers 80+ Elementor widgets and over 500+ ready-to-use template pages.
You also get access to useful Elementor extensions like the Cross-site Copy-Paste feature, Particles background, sticky sections, and more.
Using our plugin, Responsive Addons for Elementor, you can significantly speed up your website-building process and enhance productivity.
Check out more details about the Responsive Addons for the Elementor plugin.
Chapter 7
Building WooCommerce Websites with Elementor
What about creating eCommerce websites using Elementor?
Can you use Elementor to design your eCommerce stores, product pages and WooCommerce shop page?
Is it possible? The answer is Yes!
In this chapter, you’ll see how to use WooCommerce plugin and Elementor Pro to create eCommerce store websites.
Let’s begin.
Elementor + WooCommerce : The Basics
Elementor integrates beautifully with the WooCommerce plugin, so you can use Elementor’s design skills to build beautiful product pages without touching the WooCommerce code.
The WooCommerce plugin adds many pages, such as a product page, product archive page, shop page, cart page, checkout page, and more.
You can redesign all these pages with Elementor to match your website branding. The WooCommerce widgets are available with the Elementor Pro plan.
Here is the list of WooCommerce widgets:
For creating an eCommerce website with Elementor, follow the below steps:
- Step 1: Start by installing the WooCommerce plugin.
- Step 2: Add your business information and set up the payment gateways.
- Step 3: Configure shipping, set any extra options, and wrap up the setup.
You can add your products individually by going into Products.
Set the basic settings for your products and save them.
Once you add some products, you can find your new product in the list under All Products.
To create a new product template for single products, go to Templates > Add New.
Pick Single Product as the type and select a layout from readymade templates.
Now, you can customize the Single Product template by dropping WooCommerce widgets.
Selecting the appropriate widgets is crucial to achieving the desired design output. For example, you have widgets for product images, content, price, and an add-to-cart button.
Save the template and use the preview settings to view your changes.
Once you finalize the design and are ready to hit the publish button, remember to set the display conditions under which your design should appear.
For example, you can set it up for a single product page, a category of products, or a particular tag, and more complex conditions can be achieved.
Designing Your WooCommerce Shop Page with Elementor
Like designing the products, you can design your WooCommerce shop page using the Elementor theme builder.
Note: If you’re using a WooCommerce-compatible theme like Cyberchimps Responsive theme, the theme customizer gives you various options to customize your shop page.
Let’s resume.
To design your WooCommerce shop page, follow the below steps:
Step 1: Using Elementor Theme Builder, add a new template of Product Archive type
Step 2: Start designing your shop page from scratch, or choose one from the readymade templates.
Step 3: Use WooCommerce archive widgets like Archive title, Archive Products, Products, WooCommerce breadcrumbs, custom add to cart, etc to design your shop page
Step 4: Set the display condition to show on the shop page and hit the Publish button.
Likewise, follow the same process to design your:
- WooCommerce Cart page,
- Checkout page,
- Thank you page,
- and Product category pages, etc
Remember to set the correct display conditions on respective pages.
You can do a lot more with Elementor and WooCommerce, but that’s out of the scope of this chapter.
Chapter 8
SEO and Performance Optimization in Elementor
Speed and core web vitals are crucial ranking factors for SEO.
Elementor, a plugin with so many features, may affect your website performance.
However, you can configure settings and aim for the best results.
Let’s see some of the best practices that should be used while building your websites with Elementor.
How to Check the Performance of Elementor Website
Before you start optimizing the speed and performance of your Elementor website, you need a clear idea of its current state.
Start by checking your website speed on page speed analyzer platforms such as:
1. Google page speed insights
2. GtMetrix
Let’s see PageSpeed Insights in action.
Go to https://pagespeed.web.dev/ and enter your website URL.
Hit enter.
You should see something like this:
Scroll down to – Diagnose performance issues section.
Below, you should see the issues.
Open the issues individually to understand the warnings and suggestions for improvement.
Some of the most common performance warnings you’ll find are:
1. Reduce initial server response time
2. Reduce Javascript execution time
3. Minimize main thread work
4. Serve images in next-gen Formats
5. Eliminate render-blocking resources
6. Minify resources
7. Image elements do not have explicit width and height
8. Reduce the impact of third-party code
And so on.
Depending on the technicality of the warnings, you can assign the issues to your website developer or design team.
For example, adding width and height to images will solve your image issues. Besides, it would be best to use good-quality images with a minimum file size.
Optimizing Performance using Elementor Settings
Elementor keeps coming up with new ways to improve your website performance.
Since it’s a plugin with various features, it loads multiple CCS, JS, and font files.
The good thing is that Elementor offers settings that make your website run faster.
These settings aim to make the following changes:
1. Remove the need for unused CSS
2. Reduce duplicate code
3. Apply dynamic asset loading
And so on.
As we said earlier, Elementor keeps improving by doing new experiments.
You can access all the experiment settings by going to Elementor > Settings > Features.
Similarly, you can optimize performance by navigating to Elementor > Settings > Performance.
General Practices for Website Speed Optimization
1. Caching
Use a caching plugin that meets your website needs.
2. Use a CDN
Enhance your website’s performance by utilizing a CDN service, which distributes your content across multiple servers worldwide, reducing server load and improving user experience.
3. Image Optimization
Restrict uploading large image files to your WordPress website.
Additionally, reduce the size of your existing images. Keep image size below 200kb, preferably.
4. Next-gen Image Formats
Upload the images in WebP format. This does not compromise the image quality but greatly reduces the image size.
5. Use a minimal number of Plugins
Do not overload your WordPress website with dozens of plugins.
Use a minimal number of plugins that offer more features instead of a single functionality. A good number of plugins can be in the range of 10-15 active plugins. Deactivate unused plugins from your website.
6. Turn off the plugins that auto-load all the Elementor widgets
You can deactivate the unused plugins if you’re using multiple Elementor Addon plugins.
Plus, if you’re using only a couple of widgets from an addon plugin, disabling or turning off the unused Elementor widgets is a good practice.
Responsive Addons for Elementor provides the option to enable/disable widgets.
Additionally, the plugin loads the required CSS and JS only on used pages, thereby optimizing your website’s loading time.
7. Use custom fonts by uploading your font files instead of the default Google fonts
If you’re using a well-coded theme like Cyberchimps Responsive, you can upload custom fonts.
This means your website does not request Google servers for loading the Google Library Fonts.
The font file will be statically loaded from your server, optimizing your website performance.
8. Configure Hosting Settings
Configuring your hosting settings is more of a technical solution; you may need to contact your hosting provider for help.
Here are a few basic things that will improve your website speed performance:
- Use the higher versions of PHP.
- Ensure you have a reasonable memory limit. Elementor recommends 768 MB for best performance.
- Use caching layers like Nginx caching.
- Use OPcache, which reduces CPU usage and improves PHP performance.
Let’s move to the theme part.
Selecting a Fast Loading Elementor-compatible Theme
When using Elementor on WordPress, picking a suitable theme is essential for how your site works and looks.
Choosing a well-written theme that loads fast, does not add bloated code, and utilizes the required code on demand will reduce the page load time.
The Cyberchimps Responsive theme is a standout choice for Elementor users. It not only works seamlessly with Elementor but also enhances its performance, offering a host of benefits.
Here are a few distinctive features of the Responsive theme that make it a perfect choice for Elementor users:
- Free Elementor Templates: With over 150 Readymade Starter Templates, the Cyberchimps Responsive theme makes website creation a breeze. Its Responsive Plus – Starter Templates plugin offers a library of premium Elementor templates, allowing you to launch your website quickly and easily.
- SEO Optimized: When it comes to SEO, the Responsive theme is the most popular, making it the top contender for fast-loading themes.
- Free Elementor Addons Plugin: Responsive Addons for Elementor comes with Cyberchimps Responsive theme, providing 80+ incredible widgets to create Elementor websites.
- Seamless Integrations: Responsive theme works with all the popular plugins like Mailchimp, WP Legal Pages Pro, WooCommerce, Yoast, Contact Form 7, and more.
- Custom Fonts: With accessible settings to add custom fonts, unlimited color schemes, and multiple header, footer, and sidebar options, you can create your ideal website with unlimited possibilities.
- Priority Support: Responsive theme has a 24×7 dedicated support team.
Chapter 9
Frequently Asked Questions (FAQs)
That’s a lot of learning from a single article.
And we know you might have some questions.
Are you looking for the answers?
Let’s get started with a quick round of questions that we often hear from Elementor Beginners.
Elementor Pricing Plans
Elementor Pro offers different pricing plans based on how many websites you want to use it on. These plans are affordable and give you more tools for professional website building:
- Essential (1 site): $59
- Advanced (3 sites): $99
- Expert (25 sites): $199
- Agency (1000 sites): $399
FAQs
The FAQ section provides quick answers to common questions about the Elementor plugin, covering topics like pricing, features, and support.
Elementor is a page builder plugin for designing websites on WordPress. With over 10 million active installations, it's one of the top plugins.
The free Elementor plugin offers plenty of widgets to create beautiful web pages. However, Elementor Pro provides advanced features like the Theme Builder, modal popups, dynamic content, global widgets, and access to ready-made templates.
It works with any theme that follows the coding standards set by the WordPress Codex. We recommend using the Cyberchimps Responsive Theme because it is free, fast-loading, and fully compatible with the Elementor plugin.
The Responsive theme by Cyberchimps is the best theme for Elementor. It integrates seamlessly with Elementor, offering a smooth experience for building a beautiful website. It's lightweight, fast, and absolutely free, so you don't need to pay for extra features like with other themes.
Elementor Templates are not free. You can unlock premium Elementor templates by purchasing the Elementor Pro plugin, which is worth $49 for a single year.
Another option is to install the Responsive Plus—Starter Templates plugin, which offers 250+ designer-made Elementor Websites and single-page templates. These templates can be used to design your websites much faster without paying extra money.
Elementor Addon plugins are third-party extensions that enhance Elementor's capabilities.
While Elementor already offers many features, addon plugins can add extra elements like widgets, templates, integrations, and customization options.
Elementor Pro plugin is the best Elementor Addon that you can use to add more functionalities to your Elementor website. Alternatively, you can use Responsive Addons for the Elementor plugin, offering 80+ free Elementor widgets to improve your page-building experience.
Elementor offers a variety of features in both the free and premium versions. Since it's an extensive plugin, you might experience some delays in loading pages, which can impact your website's speed. However, Elementor is constantly evolving and working to make the plugin as lightweight as possible.
Elementor is a page builder plugin that helps create beautiful pages faster without any coding knowledge. Gutenberg, aka the WordPress Block editor, is the default editor in WordPress, so it will obviously load faster than Elementor. However, if we discuss it only for design purposes, Elementor has the edge over the WordPress default editor.
Elementor is more evolved, modern, and better than the WPBakery plugin.
Elementor AI is freely available to all users. All you need is an Elementor account to start using AI to improve your design workflow.
Chapter 10
Key Takeaways from Learning Elementor
If you’ve made it this far, congratulations! You’ve achieved something great!
Nobody can say you’re an Elementor beginner.
You’ve mastered Elementor and are fully equipped to build your websites without relying on external help.
Well Done!
This chapter is a final recap of everything you need to know.
Glossary of Elementor Terms
Dynamic Content
Dynamic content is web content that changes based on the user’s preferences, interests, and behavior.
Global Settings
Global settings, like typography and colors, apply changes across all pages using those fonts and colors.
Mega Menu
A Mega Menu is an extensive, expandable menu with multiple navigation options simultaneously. It helps visitors find information quickly and view multi-level pages at a glance.
Nested Columns
Nested columns are within columns, offering more control and flexibility for complex layouts. Like regular columns, they are fully responsive on all devices.
Page Builder
A page builder is a WordPress tool or plugin that simplifies page design. It usually features drag-and-drop elements, allowing users to design quickly without coding knowledge.
Theme Builder
Theme Builder is a premium feature that comes in the Elementor Pro plugin. You can build your website’s header, footer, single pages template, post templates, and archive pages without relying on the theme.
Popup Builder
The Popup Builder in the Elementor Pro plugin lets users create marketing popups, such as opt-ins, floating popups, and exit-intent popups. It eliminates the need for a separate plugin, saving on recurring costs.
Starter Templates
Starter Templates are ready-made WordPress templates that can be imported with just a few clicks. The Cyberchimps Responsive Plus – Starter Templates plugin offers over 150 professionally designed Elementor templates, saving time and money on design.
Template Kits
Template Kits are collections of pre-designed resources created by Elementor that show the website’s structure and layout.
Chapter 11
Elementor Useful Keyboard Shortcuts
If you’ve made it this far, congratulations! You’ve achieved something great!
Nobody can say you’re an Elementor beginner.
You’ve mastered Elementor and are fully equipped to build your websites without relying on external help.
Well Done!
This chapter is a final recap of everything you need to know.
Basic Actions
| Undo | Ctrl / Cmd + Z | Undo any change made on the page |
|---|---|---|
|
Redo |
Ctrl / Cmd + Shift + Z |
Redo any change made on the page |
|
Copy |
Ctrl / Cmd + C |
Copy a section, column or widget |
|
Paste Style |
Ctrl / Cmd + Shift + V |
Paste a section, column or widget’s Style
|
|
Delete |
Delete |
Delete section / column / widget that is edited |
|
Duplicate |
Ctrl / Cmd + D |
Duplicate section / column / widget that is edited |
|
Save |
Ctrl / Cmd + S |
Save your page to the revision history |
Panels
| Finder | Ctrl / Cmd + E | Opens the Finder to search for anything on your website |
|---|---|---|
|
Show/Hide Panel |
Ctrl / Cmd + P |
Toggle to open or hide the side panel |
|
Site Settings |
Ctrl / Cmd + K |
Access site settings |
|
Structure |
Ctrl / Cmd + I |
Opens the Navigator
|
|
Page Settings |
Delete |
Opens the Pages Settings to set page properties |
|
History |
Ctrl / Cmd + Shift + H |
Opens History panel so you can revert to an earlier version of your website |
|
User Preferences |
Ctrl / Cmd + Shift + U |
Opens User Preferences menu where you can customize the Editor |
Chapter 12
How to Use Elementor : The Conclusion
That’s it for our guide to learning Elementor.
Which website are you trying to build today with Elementor?
Or, if you need a ready-to-import website, click the below link:
That’s all you need to learn Elementor.
Go ahead and start building your website. We wish you all the best.
