Hey! Are you looking for an easy-to-follow guide on how to use Elementor in WordPress to build and customize your website without having to hire a developer? Do you want your website to be visually stunning, user-friendly, and responsive on all devices?
Then you landed at the right place!
A few years ago, creating a website was like stepping into a coding nightmare. You practically needed a degree in programming languages, frameworks, and database management just to get started on a website.
As you know, WordPress is one of the most popular website platforms where you can easily customize the website. Nowadays, Thanks to WordPress and popular page builders like Elementor, creating a website is no longer reserved for the tech elite. Now, using Elementor to create the website is easier.
In this article, I will talk about the most popular website page builder Elementor, and show you how to use Elementor in WordPress and create the layout pages and many more.
What Is Elementor?
Elementor is a drag-and-drop page builder that helps to create visually aesthetic website pages by using the visual editor. It is specially designed to build a dynamic website effortlessly without any coding skills.
This plugin offers an all-in-one solution that helps you control every corner of the website. You can make a customized website by employing different motion effects, font styles, and background images.
Why Use Elementor?
If your team has different types of professionals, then Elementor is a versatile page builder tool that helps in creating a visually attractive website for your team.
Don’t worry if you’re not a technical geek. With the help of Elementor, you can simply drag and drop more than 90 widgets to tailor the website design, content, and elements.
Moreover, Elementor is the top choice among website developers because of its script optimization, custom attributes, and ability to revert to previous versions, making it a versatile platform for website developers.
Pricing Model
Elementor offers a diverse range of subscription plans. One of their plans is completely free of cost in which you will get the essential features for crafting a compelling user experience on your website.
In this free plan, you get the user-friendly drag-and-drop editor, a collection of more than 40 basic widgets, and access to more than 30 pre-designed templates.
If you want advanced features like the ability to integrate forms and apply custom CSS styling etc., you can buy their pro version. With the help of a pro version, you can enhance your website development skills.
- $59 per year for 1 site.
- $99 per year for 3 sites.
- $199 per year for 25 sites.
- $399 per year for 1,000 sites.
How To Use Elementor In Wordpress
Elementors is the perfect page builder that offers the crafting of a wide range of content. With the help of Elementor, you can create a complete website as well as specific landing pages.
Whether you want to create sales pages, promotional websites, or custom forms, this page builder helps you to create whatever you want. Because of its versatility, you can create a wide range of digital assets that make it a powerful tool for WordPress website developers.
You can effortlessly design sales pages, promotional content, and even personalized forms.
In short, Elementor is the tool that transforms your creative and wild ideas into reality.
How To Install And Activate The Elementor In WordPress
1. Install Elementor Via Dashboard:
Step #1
Go to the WordPress dashboard, find the option labeled Plugin in the dashboard menu, and click on it
Step #2
Now find the Add New option and click on it
Step #3:
After entering the plugin page type the Elementor in the plugin search field. And find the plugin named Elementor Website Builder.
Step #4
Now click on the Install Now button. After completing the installation, click on the Activate option.
After activation, an Elementor will appear in the sidebar menu.
The page builder will automatically pop up in your sidebar. But this sidebar menu is your backstage pass, meant for tweaking Elementor’s settings in the back, instead of making direct edits to your pages.
2. Install Elementor Via Website
Step #1
Go to the Elementor website elementor.com and look for the inviting “Get Started” button.
Step #2:
Now, fill in the email address and password and create and sign up for an Elementor account.
Step #3:
Here, Elementor will ask you questions about who your website is for or how much experience you have building the websites.
Step #4:
Now, the big decision. How do you want to build your website?
You can purchase the Elementor Pro version or bundle in which you will get the plugin as well as WordPress installation, and hosting. If you’re not ready to commit, there are other pro plans or even a basic, free version to explore.
Step #5:
Elementor wants to make sure you have an active WordPress website, so enter the website domain name into their checker. They’ll give it a nod of approval if you’re on the WordPress platform.
Step #6:
After your website compatibility is confirmed. Hit that “Install Elementor” button.
Step #7:
Log in on your website’s admin login page. If you’re already logged in, then Elementor will take you directly to the plugin page. Look for the “Install Now” button in the bottom right-hand corner and tap it. Step No 8:
Here, you’re greeted with a confirmation message. Now, click “Activate Plugin” to officially kickstart your Elementor journey.
How to Use Elementor in WordPress in 2023?
After installing Elementor, let’s talk about how to use Elementor in WordPress.
Launch The Elementor:
For this, you need to create a new page or post and click on the Edit with Elementor button to launch the Elementor editor.
- Go to the Post or Pages option located in the dashboard panel
- After landing on the page and posting, click on the Add new button
- On the next page, click on the Edit with Elementor button.
Moreover, you can use another method like,
- Navigate to the targeted page
- Open it for editing
- Now click on the Edit with Elementor option.
On the left side of WordPress, you will find the sidebar of the Elementor
How To Create A Page By Using Elementor?
Elemetor is one of the most reputable and well-known page builders among website developers because of its ease of use.
With the help of page builder Elementor, you can create your website’s first page without any coding skills.
- Go to the WordPress dashboard,
- Click on the pages option in the panel and then click on the Add New Option,
- After entering the page, click on the Edit with Elementor option
Now you will see the Elementor
4. Now add the widgets like heading, text edit, and image widgets.
5. After dragging each of them in place, you can edit the widget according to your website requirements.
6. Now click on the Save button, and if you want to preview it, then click on the eye icon.
7. After previewing, click on the Publish button.
How To Use Elementor Templates?
Templates are ready-made or pre-designed pages and blocks that help craft your website design. They usually come in two features: Pages and Blocks.
Pages are the full content layout, while the blocks are the pre-built section consisting of particular widgets like, headers, footers, FAQs, etc.
- On the Elementor editor, go to the button of the page, click on the section “add widget here” and click on the white folder.
2. A library of widgets will be opened
3. If you want to preview the template, then click on the magnifying glass icon or simply hover the pointer over the image.
4. Click on the Insert button,
5. If you are not signed up on Elementor, then it will automatically direct you to the website, where you need to register yourself.
6. After you sign in to the Elementor account, your connection will be confirmed.
7. Now, return to the page where you were editing and insert the template.
After inserting a template, you start the editing process. First, you need to understand the fundamental structure of Elementor. It is made up of three parts
- Sections: This part divides the page into horizontal rows.
- Columns: Inside the section, you divide the section into vertical columns
- Widgets: These are used to add content. You can insert a widget inside the column.
How To Add And Customize The Sections And Columns?
Step #1:
Start this by creating the section. Just look for the little “+” icon and click it. Elementor will then prompt you to Select Your Structure.
Step #2:
Now, you’ll need to decide how you want your Section to be structured. You can have one or more columns in there. These columns are like building blocks for organizing your layout.
Step #3:
Once you’ve picked your structure, place widgets in the structure. Elementor will add the section to your layout. If you ever want to move it around, click on the Section and grab the dotted blue handle that shows up.
Step #4:
For Editing a Section, just control-click on this dotted blue handle. A menu will pop up, letting you make simple changes like copying or deleting the Section.
Step #5:
If you want to make more Complex Edits, then Control-click on the blue handle again and select “Edit Section.” This opens up the Elementor sidebar, where you can dive into all the additional details and refine your Section.
How To Add The Widgets?
For adding widgets in WordPress follow the underlying instructions.
Step #1:
In the Elementor sidebar, find the widget you want to use and drag it onto the main canvas. As you drag it, Elementor will highlight all the different Sections and Columns where you can drop that widget.
Step #2:
Dropping the Widget when you’re ready to commit, simply let go of your mouse. Elementor will then add that widget to the Section or Column you’ve chosen.
Elementor’s Form widget is a fantastic tool that can make your life so much easier when it comes to creating forms on your WordPress website. It’s super flexible and versatile, and it might even save you from having to use another separate form plugin.
You can use it to create a contact form, and a lead generation form to connect with your email marketing service.
With the help of Elementor, you don’t need to go anywhere, and right from your WordPress dashboard, you can set up a custom email notification.
How To Use The Advanced Features Of Wordpress
Pop-Up Forms:
The pop-up form helps to capture the email address from leads. And with the help of the Elementor, you can easily create the pop-up builder.
Follow the underlying steps to create your pop-up forms.
- On the WordPress dashboard, go to the templates> Pop up > Add New
2. Name your template and click on the CreateTemplate
3. You can choose the template from the library or create your customized design.
4. Click on the publish button, then the save and close button.
5. Now open the new page in Elementor and drag in a button widget
6. Under the layout heading, click on the Link > Dynamic > Actions > Popup.
7. Go and open the Pop-up and select the pop-up you created.
8. Go to the live page
9. Then click on the button and check whether the pop-up appears or not.
How To Use Elementor Pro Global Settings:
The Elementor also has a global widget. If you want to use the same widgets on different designs, then save it as a Global Widget.
The Pro Setting of Elementor offers a Global setting in which you can create consistent content and efficient design for your website. It is all about making a website design easier and ensuring that your entire website will look consistent and work seamlessly together.
With the help of global settings, you can craft colors, typography, buttons, image preferences, form fields, and more of the website all in one place.
When you create a new design or change the global setting, these changes will automatically apply to the entire site and ensure that every element stays in harmony.
However, you are not restricted to this only, you can also edit the pages individually and craft them as you want.
On the right side, you will find the preview button that will help you to take a glimpse of your work. When you make edits, Elementor will update in real time so you can see your design instantly. It’s a really helpful feature for visualizing your website’s work when you are working on it.
To access the Global setting click on the three horizontal lines (hamburger menu) located in the top-left corner of the Elementor sidebar.
How To Use Elementor Pop-Up Builder:
If you want to enhance your website functionality and user experience, then Pop-up Builder is a great tool. With this feature, you can do multiple tasks like marketing and user experience without the hassle of additional plugins. Moreover, you don’t need an additional popup plugin because Elementor has an in-built pop-up builder.
By using this pop-up feature, you can create different types of popups, such as
- Lightbox popups
- Notification bars
- Full-screen fillers
- Slide-ins
- Using a visual
- And drag-and-drop editor.
In short, you have complete control over the pop-up features and appearance. Moreover, you can use the Elementor widgets to customize it.
Like if you want to create an email capture pop-up, then just add the form widget and connect it to the email marketing service. If you want to create the login form pop-up, then add the login widget.
After finishing designing your popup, use targeting rules to decide when and where it should appear.
To create a popup,
Go to Templates > Popups in your WordPress dashboard. You can also build your popup from scratch, or you can choose from various pre-designed templates. It’s up to you!
Moreover, you can use Elementor for any WordPress website.
Bottom Line:
In short, the sky’s the limit! Elementor empowers you to create a wide range of designs, from simple and elegant to complex and creative. You can build everything from landing pages to entire visually captivating websites.
So don’t limit yourself and try different features to create a website that reflects your brand image.
I’m looking forward to hearing your thoughts on this article. Your feedback is incredibly valuable to me.
Frequently Asked Questions (FAQs):
Is Elementor a free tool?
Elementor is a 100% free plugin that offers powerful features that are present in the paid version of the other page builder. Its versatility makes it most popular among developers. If you want the advanced features, then you need to choose the paid plan that meets your needs and budget.
Is WordPress Elementor easy to use?
Yes, you can say that it is easy to use if you compare it with other page builders. It is designed for all-level website developers. Elementor has a friendly interface that makes it easy for beginners as well as professional-level web creators.
Moreover, technical expertise is not essential while using Elementor. You can create a beautiful website without any technical hindrance. However, if you have some technical knowledge, then it would be a plus point in creating a professional website.
Is Elementor compatible with other WordPress plugins and themes?
Elementor is a highly reputable plugin known for its compatibility with various themes and works well with popular plugins.
Furthermore, you can easily design your website, adding style and functionality. However, there are also some plugins and themes that are not compatible with Elementor.
Are Elementor Templates Customizable?
Elementor offers a library of pre-designed templates that are easily customizable to match your brand voice. Moreover, You can customize every aspect of your website like colors, fonts, and layouts to match your brand’s unique style and make your personalized website with ease.
Can I use Elementor for e-commerce websites?
Because of its versatility, Elementor is perfect for the e-commerce website. You can create an e-commerce website with the help of Elementor, create a website that has attractive product pages, build custom checkout flows, and provide an engaging shopping experience for your customers.
Is Elementor better than coding?
It depends on your technical skills, If you do not have coding skills and also cannot hire a website developer then Elementor is the best option for you. It is a cost-effective and easy-to-use tool that helps to create a small website.
Moreover, you do not need coding skills to operate the Elementor. It offers a wide range of pre-designed templates and widgets that you can use to create a personalized website without any coding skills.
Is Elementor compatible with all Devices?
Yes, Elementor claims that its page builder is compatible with all devices and offers versatile templates and designs that work smoothly on all devices. With the help of Elementor, your website will look stunning and function on any device, from smartphones to desktops effortlessly.
