Looking to enhance your WordPress website with stunning designs and seamless customization? Elementor, one of the most popular drag-and-drop page builders, is the perfect tool to transform your site—without needing to touch a single line of code. In this comprehensive guide, we’ll walk you through a simple, step-by-step process for elementor installation and setting up on WordPress. From plugin installation to performance settings, you’ll learn how to maximize Elementor’s powerful features to create professional-grade pages with ease. Whether you’re new to website building or looking to streamline your design workflow, this guide has everything you need to get started.
Welcome to your complete guide on installing and setting up Elementor for WordPress. This powerful tool simplifies website design, making it easy and enjoyable.
First, log in to your WordPress admin dashboard. Navigate to the “Plugins” section, click “Add New” and search for the plugin. Once you find it, click “Install Now” and follow the prompts to activate it.
With the plugin installed and activated, you can start customizing your site by exploring its various features. This guide will walk you through each step to help you make the most of its capabilities and enhance your website.
What is Elementor?
Elementor is an easy-to-use tool for WordPress that helps you build and customize websites without needing to code. It has a simple drag-and-drop interface and many ready-made templates and widgets. You can create beautiful and functional web pages quickly. Whether you’re making a blog, a business site, or an online store, Elementor gives you the tools to make your ideas come true easily.
Voxfor: Managed WordPress Hosting with One-Click Elementor
After learning about Elementor, we want to take a moment to introduce the powerful hosting solutions we offer at Voxfor, including managed WordPress hosting, which makes it incredibly easy to install and manage Elementor. With our hosting panel, you can install Elementor in just one click, together with many other plugins, ensuring a seamless and hassle-free experience. Our hosting plans are designed for flexibility and scalability, backed by expert support from professionals who specialize in WordPress and Elementor. Additionally, our VPS Lifetime service provides long-term hosting solutions that cater to all your business needs.
If you’re looking to elevate your website’s performance, we also offer a variety of advanced hosting services that allow you to focus on growing your site without the need to worry about technical details. I invite you to visit our WordPress Hosting and Concept pages to explore all the services we offer and find the right fit for your needs. This is your chance to make the most out of your WordPress site with tailored support and powerful tools.
1. Logging into WordPress
To start, open your browser and go to your WordPress admin dashboard by typing: example.com/wp-admin. Replace “example.com” with your actual website address. This will bring you to the login page, where you’ll need to enter your username and password to access the dashboard.
2. Navigating to the Plugins Section
Once logged in, navigate to the Plugins section on the left-side menu and click Add New. This section allows you to search for, install, and manage plugins that extend WordPress functionality.
3. Installing Elementor
In the Add Plugins screen, use the search bar in the top-right corner and type “Elementor.” When Elementor appears in the results, click Install Now. This will begin downloading and installing the plugin on your website. The installation may take a few seconds.
4. Install Elementor
After the installation finishes, the Install Now button will change to Activate. Click this to turn Elementor on for your site. Once activated, Elementor will appear as an option in your WordPress dashboard menu.
5. Activating Elementor
When the installation process is complete, the Install Now button will change to Activate. Click the Activate button to enable Elementor on your website.
Once activated, Elementor will appear in the sidebar of your WordPress dashboard under the “Plugins” section, ready for you to use and start designing your site.
6. Elementor in the Dashboard
You will now see Elementor in your dashboard menu. This means the plugin is installed and active, ready for you to use. From here, you can start building your website using Elementor’s drag-and-drop editor by clicking Create a Page or exploring other settings and customization options.
Once Elementor is fully set up, you can customize your site with global settings like Site Logo, Global Colors, Custom Fonts, and more to ensure consistency across your pages.
7. Accessing Elementor Settings
Locate Elementor in your dashboard menu and click on it. Next, choose Settings to open the configuration options for the plugin.
From here, you can customize various settings such as General, Integrations, Advanced, and Performance to tailor Elementor to your website’s needs. These options help improve functionality and optimize performance based on your preferences.
8. Adjusting General Settings in Elementor
In the Elementor settings, you’ll find different features listed. Click on the General section to view and change the basic settings.
This section allows you to configure:
Post Types:
Choose whether Elementor is enabled for posts, pages, or other types like floating buttons.
Disable Default Colors:
Check this option if you want Elementor to inherit the colors from your WordPress theme instead of using its default palette.
Disable Default Fonts:
Similar to colors, this setting will make Elementor inherit fonts from your theme if selected.
Usage Data Sharing:
Opt-in to contribute usage data to help improve Elementor’s features.
After making changes, don’t forget to click Save Changes to apply the new settings.
9. Configuring Integrations
In the Integrations section, you can manage settings that connect Elementor with other tools and services. For example, you can configure the Google Maps Embed API by entering your API key, allowing you to embed Google Maps directly into your site.
Make sure to enter the correct API key, which you can generate through your Google account. Once the key is entered, click Save Changes to apply the integration.
This section also includes other integration options depending on the tools and services you use with Elementor.
10. Advanced Settings
Go to the Advanced section in the Elementor settings. This section gives you access to detailed options and settings, allowing you to customize Elementor further for your needs.
- Switch Editor Loader Method: Enable this option if you encounter issues with the Elementor editor not loading correctly. This setting is used for troubleshooting server configuration conflicts.
- Enable Unfiltered File Uploads: Be cautious with this option as it allows the upload of any file type, including SVG and JSON, which could pose security risks. Use this setting only if you’re familiar with the potential risks.
- Google Fonts: You can enable or disable the loading of Google Fonts. This option is useful if you prefer using fonts from another source.
- Google Fonts Load: Set how the Google Fonts are loaded by the browser (e.g., auto, swap).
After configuring the advanced settings according to your preferences, click Save Changes.
11. Performance Settings
Click on the Performance section to change settings that affect Elementor’s speed and efficiency. This area helps you optimize how quickly and smoothly Elementor works on your site.
Key settings include:
CSS Print Method:
Choose between External File or Internal Embedding. Using an external file is recommended for better performance, while internal embedding is useful for troubleshooting.
Optimized Image Loading:
Enabling this setting applies techniques like lazy loading to improve performance by loading images only when they are needed, reducing initial page load times.
Optimized Gutenberg Loading:
By enabling this, you reduce unnecessary render-blocking by removing unused Gutenberg block editor scripts and styles.
After configuring these performance settings, make sure to click Save Changes to apply them.
12. Managing Features
Lastly, go to the Features section to see and manage the different tools and capabilities Elementor offers. This is where you can turn on or off specific features to suit your needs.
In this section, you can personalize your Elementor experience by controlling which experiments and features are active on your site. To use a feature or experiment, simply click on the dropdown next to it and switch it to Active. You can always deactivate them later if needed.
Some key features include:
Optimized Control Loading:
Improves site performance by loading controls only when necessary.
Editor Top Bar:
Gives you access to an experimental layout of the top bar, powered by React.
Click Save Changes after making adjustments to the features.
13. Managing User Roles in Elementor
Go to the Elementor menu in your WordPress dashboard. This menu gives you access to all the options and settings related to Elementor.
- Select Role Manager from the menu.
- In this section, you can set and modify access permissions for different user roles on your WordPress site. This feature allows you to control which user roles can use Elementor, edit pages, and access various features.
After adjusting the permissions to your needs, make sure to save the changes.
14. Managing User Permissions in Role Manager
Click on Role Manager to open a new page. Here, you can set and change access permissions for different users.
You can control what each user role can edit in Elementor, such as:
Editor:
The Editor role typically has the ability to manage all content on a WordPress site, including posts, pages, and comments. In Elementor, you can fine-tune these permissions further. For example, you can allow editors to edit all Elementor templates and widgets, giving them full control over design and content. Alternatively, you can limit their access to certain templates or restrict their ability to modify specific settings, ensuring they can only work within predefined design boundaries.
Author:
Authors usually have permission to create and publish their own posts but cannot edit or manage other users’ content. With Elementor, you can control whether an Author can use Elementor to customize the posts they create. You might enable Elementor access only for the pages they create or restrict it entirely, depending on how much design control you want to give them.
Contributor:
Contributors can write and submit their content for review but do not have the ability to publish it. When it comes to Elementor, you might decide to allow them limited editing privileges, such as using basic widgets or adjusting layouts for their draft posts. However, you can restrict them from publishing or editing global design elements to maintain consistency in the website’s appearance.
Subscriber:
Subscribers have the most limited role in WordPress—they can only manage their profiles and view content. In Elementor, subscribers are typically restricted from any editing capabilities. However, you could grant them very limited access to edit their own profiles or specific areas if needed, though this is rare.
This allows you to restrict or grant editing capabilities based on the user’s role on your site. Once you’ve set the permissions according to your needs, click Save Changes to apply the settings.
15. Upgrading Elementor Plan
In Elementor, go to the Editor section and open the drop-down menu. Click on Upgrade to see options for updating your Elementor plan or version.
After clicking Upgrade, you will be redirected to the Elementor.com pricing options. There, you will see four different plans and can choose the one that best fits your needs.
After clicking Upgrade, you will be navigated to Elementor.com’s pricing options. You’ll see four different plans and can choose the one that best fits your needs:
- Essential: $4.92 per month, for 1 site.
- Advanced: $8.25 per month, for up to 3 sites.
- Expert: $16.58 per month, for up to 25 sites.
- Agency: $33.25 per month, for up to 1,000 sites.
Each plan includes different features like premium support, access to more widgets, and advanced tools like the Theme Builder and Form Builder.
Getting Started with Elementor: Building Your First Page
To start building your website with Elementor, follow these steps:
- Go to Elementor in your WordPress dashboard.
- Click on Home from the drop-down menu.
- Select Create Page to begin designing your new page.
From here, you’ll be taken to the Elementor editor, where you can start customizing your page using the drag-and-drop tools to design the layout and structure of your’s
Designing Your Page in Elementor
You are now in the Elementor editor, where you can start designing and customizing your page. This is where you’ll see the tools and options for building your website.
From the Elements panel on the left, you can drag and drop widgets like Heading, Image, and many more into the design area. Customize the layout by using Container or Grid options. You can also adjust settings for each widget to align with your design vision.
Drag and Drop Elements
Use your mouse to drag and drop elements onto the page as needed. Arrange them according to your design preferences to customize your layout.
You can add widgets such as Heading, Image, Text Editor, and Video from the Elements panel on the left. Simply click and drag them onto your design canvas to place them in the desired location.
Saving Your Design as a Template
- Click the drop-down menu next to the Publish button.
- From the options, select Save as Template to save your current design as a reusable template.
After clicking Save as Template:
- Enter a name for your template in the provided field.
- Click the Save button to store your design for future use
Viewing Saved Templates in the Library
You are now in the Library section, where you can view various options. Specifically, you are on the My Templates tab, where your saved templates are displayed.
Here, you can preview or insert the template you created by selecting the appropriate action.
Managing Pages in the Library
In the Pages section, you can create and manage new pages. This area allows you to add and organize additional pages for your website. You can choose from a variety of page templates or create your own to fit the needs of your website.
Customizing Blocks in the Library
To customize your blocks, go to the Block section. While you’ll initially see some pro features, scrolling down will reveal available free options as well. These blocks can help you build and structure your pages efficiently by adding pre-designed sections to your website.
Selecting a Free Block
In the Block section, scroll down slightly and click on one of the free block options. This will allow you to use the free version of the block for your design. Once you select a block, it will be added to your page for further customization.
Selecting a Free Page Template
In the Pages section, scroll down a bit and click on one of the free page templates. This will let you use the free version for creating or customizing your pages. Once selected, the template will be added to your site for you to edit and customize according to your needs.
Viewing and Editing a Page Template
When you click on a specific page template, it will open and display in front of you. This allows you to view and edit the template directly. You can make adjustments to the content, layout, and design as needed. Once you’re satisfied with the changes, click Insert to add the template to your website.
Adding the Page Template to Your Elementor
To add this page to your site, click the Insert button. This will add the selected page template to your design, allowing you to further customize it as needed.
Connecting to the Template Library
After clicking Insert, you’ll be taken to a new page. Click the Get Started button to continue with setting up or customizing your page. This will allow you to access the template and other resources in the Elementor library.
Proceeding After “Get Started”
After you click on Get Started, locate and click on the folder icon displayed in the center of the page. This action will guide you to the next step in the process, allowing you to insert templates or blocks from the Elementor library into your design.
Inserting a Page from the Library
Choose the page you wish to add from the available options in the Pages section. Then, click on the Insert button to add it to your project or document. This will incorporate the selected page into your work, allowing you to continue customizing it as needed.
Editing Text in Your Design
To edit, type the new name in the designated field as demonstrated. This will update the current text with the new name you enter. Use the editing panel on the left to input the desired text, and the changes will reflect instantly on your design.
To add animations, click on the “Advanced” button to access additional editing options. This will allow you to customize and apply animations to your content, offering more dynamic and engaging design elements for your website.
Click on “Motion Effect” to access animation options, then select “Bounce Down” to apply a bouncing effect that moves downward. This will animate the selected element with a bouncing motion, adding dynamic interaction to your page.
After finishing your edits, click the “Publish” button to save and apply your changes. This will update your content or project, making it publicly available with the latest updates.
After clicking “Publish”, click on the “Have a Look” button to preview your changes. This allows you to see how your published content or project appears before finalizing it.
After you’ve finished editing your page and clicked the “Publish” button, you’ll have the option to click the “Have a Look” button. This will allow you to preview the final result of your changes as they will appear to your site’s visitors.
This step is crucial as it gives you the opportunity to ensure everything functions correctly: that all elements are displayed as intended, the content is formatted properly, and there are no issues with your layout or design. If everything looks good, your updates are now live on the site!
In the Pro version of Elementor, you can access additional tools and features that are not available in the free version. For example, with the Pro version, you can upload custom icons, manage custom fonts, and even retrieve form submissions directly into Elementor.
However, these advanced features require an upgrade to Elementor Pro, which consolidates all of these tools in one single place, making it easier to manage customizations for your website. The Upgrade Now button will guide you through the process to access these enhanced features.
Conclusion
By following this step-by-step guide, you’ve successfully installed and set up Elementor for WordPress, unlocking a powerful design tool that allows you to create custom websites with ease. From installing the plugin to configuring performance settings and managing user roles, Elementor offers the flexibility to design a site that fits your needs.
As you continue exploring its features, whether through drag-and-drop elements, integrations, or advanced options, you’ll find that building beautiful, responsive web pages has never been simpler. Whether you’re crafting a blog, business site, or eCommerce platform, Elementor ensures a professional result with minimal effort. Ready to take your WordPress site to the next level? Start creating with Elementor today!
About Author
This article was written by Haider Aftab Abbasi, a skilled technical content writer who specializes in creating detailed and well-researched content. Haider excels at simplifying complex topics, making them accessible to a wide audience while ensuring professional accuracy. Connect with Haider on LinkedIn for more insightful content and professional collaborations.
