Introduction

Overview

Many of our customers here at MemberFix use Elementor as their main page builder on their WordPress websites.

Elementor is a great page builder tool that comes as a plugin (as opposed to a full theme) and has some really great features. One of these features is the ability to have a template for the website header and footer. Elementor also has many other many templates which can be used, of course, but I would like to focus on the header template in this article.

The reason I’m doing this is because many themes are actually not ready for Elementor out of the box. So I would like to show you how can make your theme work smoothly with the templates offered by Elementor.

If I had to pick a question that describes this article, it would be: “Why is my page blank after I have activated the Elementor header?

Video tutorial

php

function threg_elem_locations( $elementor_theme_manager ) {

	$elementor_theme_manager->register_all_core_location();

}
add_action( 'elementor/theme/register_locations', 'threg_elem_locations' );

Add PHP code to header.php file

Then you will need to open your header.php file which can be also found in your WordPress theme folder and where you have the current header code (the part which generates the current header on your website) and embed your current header code inside the following PHP “if” statement:

php

<?php if ( ! function_exists( 'elementor_theme_do_location' ) || ! elementor_theme_do_location( 'header' ) ) { ?>
So, the whole code for your header will look like this:

php

<?php
// Elementor `header` location
if ( ! function_exists( 'elementor_theme_do_location' ) || ! elementor_theme_do_location( 'header' ) ) { ?>

//your current header code here

<?php endif; } ?>

After all the code is added, please reload the page which uses the Elementor header and you will be able to see that the blank space problem is gone.

Please let me know if you have any questions or suggestions.

Share This