By Elementor is the most popular page builder plugin used by many. The ease of use and customized feature options make elementor a considerable choice for any WordPress designer or developer. However, some beginners would still struggle with its compatibility with the themes. That’s why in today’s guide, we will talk about how many WordPress themes are compatible with elementor.
How to Make Any WordPress Theme Compatible with Elementor?
Although it’s possible to make any WordPress theme compatible with elementor, we highly encourage you to apply the process only if you are a developer. But, if you are not, you must try Elementor-compatible themes only rather than making them compatible.
Before making any WordPress theme compatible with elementor, remember we recommend one of the best starter themes, underscores. WordPress.org largely accepts it, and you can easily get it from themeforest or any other resource.
Let’s dive deeper into it and find out all the considerations you need to take to make any WordPress theme compatible with elementor.
1 Remove containers:
The first and foremost step to initiate the process of making any WordPress theme compatible with elementor is to remove all the container classes used in the theme. It’s because a container class is used to decide the width of a website. But you will have the direct option available in the Elementor to set the class; that’s why you don’t need this additional feature and must remove it.
In any WordPress theme, you will find this code just like this.
<div id="content" class="site-content">
<div class="container">Once you spot this type of container class, then you should remove it. Below is an example of how the code will show up when you remove the container classes but don’t forget to close the tag with the container div.
<?php
if( !is_page_template('elementor_header_footer')) ){ ?>
</div>
<?php
} ?>2 Remove space:
Another change is to remove the space that most WordPress websites must have. It’s known as content padding and is pretty common in each WordPress website theme. You must remove it if your page is an elementor template.
Simply add the below-mentioned code in the CSS rather than the style.css file.
.elementor-template-full-width #content{
padding: 0;
}3 Don’t make an overridable design:
Your WordPress theme style can easily override the elementor styles. That’s why it’s worth mentioning here to not use any kind of long selectors. So, don’t use ! important. Below mentioned are examples of both.
Don’t use:
#content p{
font-size: 16px !important;
}
#page #content .widget-area .widget .title{
color: #ff000;
}
Use this instead:
p{
font-size: 16px ;
}
.widget .title{
color: #ff000;
}4 Use elementor templates:
Using elementor templates or elements is always encouraged. So, whether you use elementor canvas or full width, it’s up to you. Once you click on edit with elementor, a bunch of customizations will appear at the left sidebar to try. It would be best to try each individually for further customizations and to make the WordPress website completely compatible with elementor.
FAQ:
How to check if a WordPress theme is compatible with Elementor or not?
To check the theme compatibility, ideally, you should create the header and footer section with the elementor page builder plugin. But, if you prefer using the theme for the header and elementor for the footer or vice versa, you may have to face issues or difficulty checking. Furthermore, if the closing and opening div tags in elementor are not the same, then it will also be caused to remove or break the page.
Is Elementor compatible with all elementor themes?
Yes, WordPress is compatible with almost all WordPress themes. In short, any theme well constructed by following the WordPress guidelines can be compatible.
Which themes work best with elementor?
However, many themes are available in WordPress that are compatible; among all, Hello elementor works best as it’s specifically designed for elementor. However, Generatepress free or premium, Astra, OceanWP, or Hestia are still the best choices.
Why is elementor not working with my theme?
If elementor is not working with your theme or showing the loading error, then the chances are that you don’t have the updated version of Elementor. Make sure to update the version before giving it any other try.
Up-wrap:
To Up-Wrap today’s discussion on how to make any WordPress theme compatible with elementor, it’s worth mentioning here that using a compatible with is always recommended rather than making it, especially if you are not a web developer or don’t have much now to know about coding. If you still don’t think it is worth trying or find any issues, write in the comment section or contact us using our contact us form.
Till Next!
I am Sure You'll learn Alot..
- Key Benefits of Hiring a Professional Web Designer - April 3, 2024
- WooCommerce Shortcodes List: Use With Examples - March 30, 2024
- How to Rename Images in WordPress (Change After Uploading) - March 29, 2024
