Home / , , , , / How to create custom Header & Footer with WpResidence Header & Footer Builder

How to create custom Header & Footer with WpResidence Header & Footer Builder

1919 views
Learn about WPResidence Design Studio plugin and how you can use it to design custom headers and footers for your website. Watch Video on Youtube

Here’s how to create a custom header and footer with Elementor Free version in WpResidence theme

Install the WpResidence Elementor Design Studio plugin

Activate the plugin

Access the Header and Footer Builder from WpResidence Studio Templates or Theme Options

From WordPress admin panel find the WpResidence Elementor Design Studio
Click on Add New WpResidence Studio Template 

We have a direct interface you can access in WpResidence Theme Options

Steps to create a New Header / Footer

Add the Template Name

Select Template Type

The Header template creates a header and replaces the default WpResidence Header based on the Display Location Settings.

Available Templates are listed below.

They automatically replace the theme default Header / Footer sections.

  • Before Header: Adds content before the custom Elementor header
  • After Header: Adds content after the custom Elementor header
  • Footer: Replaces WpResidence Default Footer with the custom footer you design in this tool
  • Before Footer: Adds content before the custom Elementor footer
  • After Footer: Adds content after the custom Elementor footer

Set Display Locations

You can choose to display the custom header and footer templates on posts, pages and categories

 

Display options are:

  • Entire Website: The custom header / footer shows on all pages.
  • Front Page: The custom header / footer shows only on homepage.
  • 404 Page: The custom header / footer shows only on 404 Page Template
  • Specific posts: You show different headers / footers for Posts, Pages, Agents, Agencies, Developers, Properties.
  • Specific Taxonomies (categories):  You can show different headers / footers for specific categories.

Design Header / Footer

Use the Edit With Elementor button to design your custom header / footer

Elementor offers a drag-and-drop interface featuring a variety of widgets and settings, allowing you to customize your header’s layout, content, and style.