Home / , , , / How to create custom Header & Footer with WpResidence Studio + Elementor Free

How to create custom Header & Footer with WpResidence Studio + Elementor Free

4094 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

  • Go to WP Admin > Appearance > Install Plugins

  • Or go to WpResidence > Site Settings > Plugins

  • Install and activate WpResidence Studio

Activate the plugin from Appearance -> Install plugins or from WpResidence Site Settings – Plugins

Once active, you’ll see a new menu item:
WpResidence Studio Templates

Create Header / Footer templates

From WordPress admin panel find the WpResidence Studio Templates

Click on Add New WpResidence Studio Template 

Select Header Template for Header custom designs

 

 

Select Footer template to create a custom footer

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

The relevant templates for Header and Footer 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 Location Options grouped by category:

Standard Options

  • Entire Website (default)

  • All Singulars (individual post/page/custom post type views)

  • All Archives (category/tag/custom taxonomy archives)

Special Pages

  • 404 Page

  •  Front Page

Post Types

  •  All Blog Posts

  • All Properties

  •  All Agents

  • All Agencies

  • All Developers

Taxonomies (Archives)

Post Taxonomies

  • All Categories (Posts)

  • All Tags (Posts)

  • All Post Formats

Property Taxonomies

  • Property Categories

  • Property Type (e.g. For Rent/Sale)

  • Property Cities

  • Property Neighborhoods

  • Property Counties/States

  • Features & Amenities

  • Property Status (e.g. Completed, Off-Plan)

Agent Taxonomies

  • Agent Categories

  •  Agent Action Categories

  • Agent Cities

  • Agent Neighborhoods

  • Agent Counties/States

Agency Taxonomies

  • Agency Categories

  • Agency Action Categories

  • Agency Cities

  • Agency Neighborhoods

  • Agency Counties/States

Developer Taxonomies

  • Developer Categories

  • Developer Actions

  • Developer Cities

  • Developer Neighborhoods

  • Developer Counties/States

Other

  • Review Categories

Extra (Term-specific Assignments)

In addition to selecting a taxonomy like property city , you can also assign the header/footer to a specific term (e.g., just for property city – Dubai), using the second dropdown.

“Disabled” Option

  • Used to deactivate the custom header/footer for a specific row.

You can assign multiple rules:

Each “location row” allows setting:

  • A display condition (e.g., show on “All Properties”)

  • Optionally a term (e.g., only on “property_category:Apartments”)

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.