How to hook Elementor headers and footers in GeneratePress

Web & Digital design and development

Specializing in custom WordPress site development and graphic design

GeneratePress and Elementor is a great combo for fast website building by combining the power, flexibility and speed of both tools.

Even though it’s perfectly possible to have great looking headers and footers in GP, some users, specially non-coders might get intimidated by the fact they might need to write some CSS to be able to have their headers and footers exactly as they have envisioned.

With the advent of GenerateBlocks, which is coming along very nicely and it’s currently on beta, GP will gradually give the user the ability to design headers and footers more visually.

For existing Elementor users that want to stay in the GeneratePress ecosystem and take advantage of the speed and lightweight nature of the theme, there are a few solution.

GeneratePress Premium and Elementor Premium

This method assumes you have GP Premium and Elementor Pro. Create a header and footer template in Elementor by going to Templates -> Add New. Select, either Header or Footer, name your template and click the CREATE TEMPLATE button to start editing the template.

Elementor template creation popup image
Elementor template creation popup

You can then assign logo and menu elements to your header, add a hero image, etc. For the footer, you are free to create columns as widgets and also create a footer bar. After creating your templates in Elementor and saving them, do not assign them anywhere in the PUBLISH SETTINGS. Basically, don’t add any conditions. Just hit SAVE & CLOSE.

Elementor template creation - Publish Settings image
Elementor template Pubish Settings

Exit back to the WordPress admin and go view your Elementor templates by selecting Templates -> Theme Builder. You will see a shortcode entry at the right of the template entry. Take note of that.

Now the magic of GeneratePress happens!

Create a layout element by going to Appearance -> Elements. Click Add New and select a Layout element. Name your element and go to the Disable Elements tab. Put a checkmark on Site Header, Primary Navigation and Footer. Now, go to the Display Rules tab and select Entire Site from the Location section’s dropdown. Click Save to save your layout element. We are effectively creating a custom layout where the checked GeneratePress items are going to be disabled on the theme for the entire site. That will allow us to hook the Elementor templates through a Hook element!

GeneratePress Layout element - Disable Element image
GeneratePress Layout element – Disable Element
GeneratePress Layout element - Display Rules
GeneratePress Layout element – Display Rules

Go to Appearance -> Elements. Click Add New and select a Hook element. Give it a descriptive name, copy the shortcode from the Elementor theme builder template list next to your header template and paste it inside the content area. In the Settings underneath, select header from the Hook dropdown and put a checkmark on Execute Shortcodes. On the Display Rules tab select Entire Site from the Location section’s dropdown, then save the element.

GeneratePress Header hook element
GeneratePress header hook element

If you view your site now, you will see that the Elementor header template has been inserted in place of the normal GP header. Great!

Similarly for the footer, create a layout element by going to Appearance -> Elements. Click Add New and select a Hook element. Give it a descriptive name, copy the shortcode from the Elementor theme builder template list next to your footer template and paste it inside the content area. In the Settings underneath, select footer from the Hook dropdown and put a checkmark on Execute Shortcodes. On the Display Rules tab select Entire Site from the Location section’s dropdown, then save the element.

GeneratePress footer hook element
GeneratePress footer hook element

Your Elementor footer template will automagically appear at the bottom of your site!

This method completely replaces the theme’s header and footer sections. This means that any header and footer schema markup added by the theme will also be removed. The absence of schema won’t stop the page from being indexed. You just won’t have the additional information or influence over your SERP output, and would not have a good SEO impact. For me personally, it’s one of the main reasons I keep my headers and footer “in-house” using theme functionality apart from the whole performance gain of only using GeneratePress.

There is a way to counteract the issue, though. Read on!

GeneratePress Free and Elementor Free

The following method will also work with GeneratePress Premium and Elementor Pro. Also, the plugin supports a wide range of themes that are written according to WordPress standards. You must have no doubt in your mind that GeneratePress is such a theme!

Install the Elementor – Header, Footer & Blocks plugin and activate it. Go to Appearance -> Header Footer Builder and adjust Elementor Header Footer options accordingly. In the screenshot below, I selected Header as a template type and set it to display on the entire site. You can also select Before Footer and Footer as template types. The Custom Block type allows you to insert the template anywhere on your site through the use of a shortcode.

Elementor header footer and blocks template image
Elementor header footer and blocks template

Hit Publish (or Save Draft) and click the Edit with Elementor button. Go crazy with your design and Publish when you are done.

Check your site to see your custom Elementor template appear on you theme’s header! That was too easy!

This method requires no additional GP elements to be created and as mentioned above, it can work with both the free and premium GP version as well as the free and Pro version of Elementor.

The added benefit of this method is that your header and footer schema markup from the theme IS being retained and that’s a big plus on my book!

That will be all for today, let me know if you have any questions/comments in the form below!

I am an experienced web and graphic designer and expert in the GeneratePress theme. Get in touch if you want to discuss how I can help you with your next project!

3 thoughts on “How to hook Elementor headers and footers in GeneratePress”

Leave a comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Ready to get started?

Contact me today to learn how I can help grow your business.