How to make any WordPress theme compatible with Elementor in 2021?

WordPress theme compatible with Elementor

Do you want to make your WordPress theme compatible with Elementor? Here, you are in the right way.

As you know, most people love to use Elementor on their websites. And the reason behind this is its elegant features and user-friendly layout. It is able to become one of the most popular and powerful page builders for WordPress.

The very thing you should know about its compatibility is the construction. To make the theme compatible, it has to be well constructed according to WordPress guidelines. 

Today in this article, we are going to discuss how a user can make any WordPress theme compatible with Elementor.

Let’s get started:

A. Elementor Page Builder (Introduction)

WordPress theme compatible with Elementor

Elementor is a powerful website builder which comes with different attractive features. It is the best tool for a web designer who is looking for a way to achieve pixel-perfect websites. With this, you can get a fast-running website with expanded capabilities. 

Elementor comes with drag and drop builder, thus customization is easier and faster. The reason behind its popularity is its attractive features. It is packed with Box Shadows, Background Overlays, Hover Effects, Headline Effects, Animations, Shape Dividers, Gradient Backgrounds, and much more.

Features:

  • Live Drag & Drop Editor
  • 90+ Widgets
  • Pixel-Perfect Design
  • Global settings for colors & typographies
  • Advanced animations, custom CSS, separate responsive designs
  • Custom templates library
  • Eliminate the need for multiple plugins

To make your theme compatible with the Elementor page builder plugin, you need to take care of few things. Here, we will discuss everything related to it.

B. How To Develop WordPress Theme Compatible With Elementor?

If you want to develop a theme that is compatible with Elementor, you need to consider few things first. If you want to make a new theme, you can use a starter theme for it. Underscores is one of the best starter themes. You can also make your existing theme that is compatible with Elementor.

If you are a developer, then you can edit your theme as described below. For non-developers, we recommend using Elementor compatible themes.

i) Remove Container from Theme Code

As we know most of the WordPress themes use container class on their code. But if you want to make it compatible with Elementor, you need to remove it from a container inside the main content of a theme.

Generally, the container class use to give the width of the website. As there is direct option to make the container width in Elementor, it needs to be removed.

If you want to see the actual example, then we would like to recommend checking Refined Magazine WordPress theme. If you check this theme header.php file, you will get the similar code that we described below.

Normally, you will find it like this.

<div id="content" class="site-content">
    <div class="container">

Now, remove the container class as shown below. The below code will check if Elementor plugin is activated or not. If Elementor is installed and activated, the container class will be removed.

<?php  
if( !is_page_template('elementor_header_footer')) ){ ?>
    <div class="container">
    <?php 
} ?>

The above code is for the template which is not an Elementor template. Now, add the same condition to a closing tag of container div. After we removed the container class, we need to remove the closing div as well. The below code will do that.

<?php
if( !is_page_template('elementor_header_footer')) ){ ?>
    </div>
    <?php 
} ?>

ii) Remove Space With Custom CSS

Content padding is available in most of the themes, just remove content padding if the page is an Elementor template. Instead of a style.css file, add CSS for the Elementor template.

.elementor-template-full-width #content{
    padding: 0;
}

iii) Overridable Design

To make your theme compatible with elementor, styles of your main theme easily overridable by styles of Elementor. There is an example of the code, you can add it in style.css file of theme.

#content p{
    font-size: 16px !important;
}
#page #content .widget-area .widget .title{
color: #ff000;
}

Avoid using !important or long style selector. You can style above-mentioned elements like shown below:

p{
    font-size: 16px ;
}
.widget .title{
   color: #ff000;
}

iv) Check and Use Elementor Templates and Elements

At last, you need to create a new page and assign it Elementor Canvas or Elementor Full-Width template, default page template of Elementor. Go to the edit page section and click on the ‘Edit with Elementor’ button.

You have completed all your steps, now you need to check test the element properly. You can find them on the left side of your page edit window. To make sure whether your WordPress theme is compatible with Elementor or not, you need to check and test all these elements one by one.


C. Themes Compatible with Elementor (Recommended)

If you are still not able to make your own theme Elementor compatible, then we recommend you to use one of the below listed themes. They are fully compatible with Elementor and very easy to use.

1. Astra

Astra Vs OceanWP Comparison

Astra is a fast and fully customizable Elementor compatible theme. The theme is perfect for blog, personal portfolio, business website, and WooCommerce storefront. Being a lightweight theme, your site runs faster.

It is built with SEO in mind which means a site created with Astra will get top SEO rank. Astra comes with several elegant templates, just get any of them and customize your site beautifully.

The reason behind its popularity is its attractive features like RTL ready, WooCommerce compatible, responsive design, etc. Moreover, it can be extendible with premium addons as well.

Features:

  • Pixel perfect ready to use website demos
  • No coding knowledge necessary
  • Ability to turn off the page title & sidebar.
  • Most lightweight theme available in the market
  • Set fonts & colors that integrate with your brand
  • Simply drag and drop elements 
  • Translation & RTL Ready

2. Zarka

zakra elementor themes

Zarka is one of the strong and free WordPress multipurpose themes. It is compatible with Elementor. It is a versatile theme and comes with a strong tool for your site customization.

You can implement this theme to create a site for business, blog, agency, and even an eCommerce site. Also, here, you will get some beautiful and professional pre-built demos. Pick the one and import it for your site with a single click. Zakra is available in both free and premium versions. 

Features:

  • 65+ Innovative Starter Templates
  • Easy Customization​
  • Very lightweight framework 
  • Seamless WooCommerce Integration
  • Looks beautiful on all devices
  • AMP Ready
  • Translation ready theme
  • SEO optimized theme

3. OceanWP

Astra Vs OceanWP Comparison

Likewise, OceanWP is a free WordPress theme that is also an Elementor compatible theme. It is incredibly fast which can attract more audience.

It is built with different features like fast page load times, attractive demos, element templates, WooCommerce integration, and many more. OceanWP is an SEO-optimized theme, now you can easily get the top SEO rank for your site.

Features:

  • Lightweight and faster
  • Compatible with eCommerce 
  • Comes with a responsive design
  • Able to control the content
  • Hook integration
  • Available in both free and premium version
  • Well detailed documentatiion

Wrapping Up

On a final note, if you want to make your WordPress theme compatible with Elementor, you can follow the above steps. If you look after these steps carefully, for no doubt even a layman can deal with it very well. 

If you have any suggestions or feedback, then please feel free to comment below.

You may also like, how to make online learning website using WordPress.

For more, you can also get in touch with us on Facebook and Twitter.

Dokan - Multivendor Marketplace Platform