Skip to content
WPBits WPBits WPBits Documentation

Header & Footer Templates

Create professional, fully customized headers and footers for your WordPress site using Elementor and WPBits Theme Builder.

Overview

Section titled “Overview”

Header and footer templates are global templates that appear on every page of your site (unless you create conditional templates). They replace your theme’s default header and footer with your custom designs.

Creating a Header Template

Section titled “Creating a Header Template”

Step 1: Start a New Header

Section titled “Step 1: Start a New Header”
  1. Go to WPBits AFE → Theme Builder
  2. Click Add New Template
  3. Select Header as the location
  4. Name your template (e.g., “Main Header”)
  5. Click Create Template

Step 2: Design Your Header

Section titled “Step 2: Design Your Header”

You’ll be redirected to Elementor editor. Common header elements:

Basic Elements:

  • Site Logo: Use [WPBits] Site Logo widget
  • Navigation Menu: Use [WPBits] Site Navigation widget
  • Search: Add search form
  • Social Icons: Link to social profiles

Layout Tips:

  • Use Elementor’s Container or Section for the header wrapper
  • Set position: fixed for sticky headers
  • Use flexbox or grid for responsive layout
  • Set appropriate padding and background color
Section titled “Step 3: Add Site Logo”
  1. Add [WPBits] Site Logo widget
  2. The logo automatically pulls from Customizer → Site Identity
  3. Or upload a custom logo in the widget settings
  4. Set logo width and alignment

Step 4: Add Navigation

Section titled “Step 4: Add Navigation”
  1. Add [WPBits] Site Navigation widget
  2. Select your WordPress menu
  3. Configure submenu settings
  4. Style the menu (colors, typography, spacing)

Step 5: Make it Sticky (Optional)

Section titled “Step 5: Make it Sticky (Optional)”

For a fixed header:

  1. Select the header section/container
  2. Go to Advanced → Motion Effects
  3. Enable Sticky: Top
  4. Set Sticky On: Desktop, Tablet, Mobile
  5. Configure sticky scroll effects

Step 6: Publish

Section titled “Step 6: Publish”
  1. Click Publish
  2. The header appears on all pages
  3. Test on different page types
Section titled “Creating a Footer Template”
Section titled “Step 1: Start a New Footer”
  1. Go to WPBits AFE → Theme Builder
  2. Click Add New Template
  3. Select Footer as the location
  4. Name your template (e.g., “Main Footer”)
  5. Click Create Template
Section titled “Step 2: Design Your Footer”

Common footer elements:

Widget Areas:

  • Contact information
  • About text
  • Recent posts
  • Social links

Menus:

  • Footer navigation menu
  • Legal links (Privacy, Terms, etc.)

Other:

  • Copyright text
  • Newsletter signup
  • Contact form

Layout Tips:

  • Use columns for multi-column footers
  • Set background color or gradient
  • Add appropriate padding
  • Include dividers between sections

Step 3: Add Footer Content

Section titled “Step 3: Add Footer Content”

Column Layout Example:

Section (Background: Dark)
├── Column 1: About
│   ├── Heading: "About Us"
│   ├── Text: Company description
│   └── Social Icons
├── Column 2: Quick Links
│   ├── Heading: "Quick Links"
│   └── Nav Menu Widget
├── Column 3: Contact
│   ├── Heading: "Contact"
│   └── Text: Address, phone, email
└── Column 4: Newsletter
    ├── Heading: "Newsletter"
    └── Form
Section titled “Step 4: Add Copyright Bar”

Below the main footer:

  1. Add another Section
  2. Single column with centered text
  3. Add copyright text: © 2024 Your Site Name. All rights reserved.
  4. Optionally add footer menu with legal links

Step 5: Publish

Section titled “Step 5: Publish”
  1. Click Publish
  2. Footer appears on all pages
  3. Test responsiveness

Using Pre-Built Templates

Section titled “Using Pre-Built Templates”

Speed up the process with pre-built templates:

  1. In Elementor, click the WPBits logo
  2. Go to Theme Builder category
  3. Browse header or footer templates
  4. Click Insert to import
  5. Customize to match your brand
Section titled “Site Navigation Widget”

The navigation widget is crucial for headers:

Basic Setup

Section titled “Basic Setup”
  1. Add [WPBits] Site Navigation widget
  2. Menu: Select your WordPress menu
  3. Layout: Horizontal or Vertical
  4. Align: Left, Center, or Right
Section titled “Dropdown Menus”

Configure submenu behavior:

  • Dropdown Direction: Down, Up, Left, Right
  • Dropdown Trigger: Hover or Click
  • Animation: Fade, Slide, etc.
  • Width: Auto or Custom

Mega Menus

Section titled “Mega Menus”

Create multi-column dropdowns:

  1. In WordPress, go to Appearance → Menus
  2. Edit a top-level menu item
  3. Check WPBits Mega Menu
  4. Select an Elementor Template to display
  5. Create the template using Elementor

Mega Menu Template Tips:

  • Use columns for multi-column layout
  • Add featured images, text, buttons
  • Include links to important pages
  • Keep height reasonable (not too tall)

Mobile Navigation

Section titled “Mobile Navigation”

Mobile Menu

Section titled “Mobile Menu”

The navigation widget includes a mobile hamburger menu:

  1. Mobile Breakpoint: Set when mobile menu appears (768px default)
  2. Menu Icon: Choose hamburger icon style
  3. Mobile Menu Style: Slide-out, dropdown, or full-screen
  4. Close Button: Customize close icon

Mobile Header Layout

Section titled “Mobile Header Layout”

Consider:

  • Logo Position: Center or left
  • Menu Icon: Right side typically
  • Reduced Padding: Less padding on mobile
  • Simplified Content: Hide some elements on mobile
Section titled “Sticky Header”

Creating a Sticky Header

Section titled “Creating a Sticky Header”
  1. Select header section/container
  2. Advanced → Motion Effects
  3. Enable Sticky: Top
  4. Configure settings:
    • Offset: Space from top before sticking
    • Effects Offset: When effects start
    • Sticky On: Choose devices

Sticky Effects

Section titled “Sticky Effects”

Add effects when scrolling:

  • Background Change: Different background when sticky
  • Logo Change: Smaller logo when scrolling
  • Height Change: Reduce header height
  • Shadow: Add box-shadow when sticky

Use Elementor’s Sticky state in styles tab.

Responsive Design

Section titled “Responsive Design”

Breakpoints to Test

Section titled “Breakpoints to Test”
  • Desktop: 1024px+
  • Tablet: 768px - 1023px
  • Mobile: < 768px

Common Responsive Adjustments

Section titled “Common Responsive Adjustments”

Header:

  • Stack logo and menu on tablet
  • Hamburger menu on mobile
  • Reduce logo size on smaller screens
  • Adjust padding

Footer:

  • 4 columns → 2 columns (tablet)
  • 2 columns → 1 column (mobile)
  • Center-align content on mobile
  • Stack elements vertically

Advanced Techniques

Section titled “Advanced Techniques”

Transparent Header

Section titled “Transparent Header”

For headers over hero sections:

  1. Set header Background: Transparent
  2. Set position: Absolute
  3. Adjust hero section Padding Top for header height
  4. Use Sticky to add background when scrolling

Different Headers for Different Pages

Section titled “Different Headers for Different Pages”

Create conditional templates:

  1. Create multiple header templates
  2. Set Display Conditions for each:
    • Homepage: Special header with hero
    • Blog: Standard header
    • Shop: Header with cart icon
  3. Publish each template

Dynamic Elements

Section titled “Dynamic Elements”

Add dynamic content to headers/footers:

  • Current Page Title: Using dynamic tags
  • User Name: For logged-in users
  • Cart Count: WooCommerce cart item count
  • Search Results Count: On search pages

Common Issues

Section titled “Common Issues”

Header Overlapping Content

Section titled “Header Overlapping Content”
  • Remove theme’s default header via theme settings
  • Or add padding-top to body/content area
  • Use theme hooks to remove theme header
Section titled “Menu Not Displaying”
  • Verify menu is created in Appearance → Menus
  • Check menu location assignment
  • Ensure menu has items

Sticky Header Not Working

Section titled “Sticky Header Not Working”
  • Check that Sticky is enabled on correct element
  • Verify sticky settings (offset, devices)
  • Clear cache
  • Check for theme/plugin conflicts

Mobile Menu Not Opening

Section titled “Mobile Menu Not Opening”
  • Ensure JavaScript is not blocked
  • Check for console errors
  • Verify mobile breakpoint setting
  • Test with default theme to rule out conflicts

Best Practices

Section titled “Best Practices”

Performance

Section titled “Performance”
  1. Optimize Logo: Use SVG or optimized PNG
  2. Minimize Scripts: Avoid heavy animations
  3. Lazy Load: Don’t lazy load header images (above fold)
  4. Cache: These templates are great candidates for caching

Design

Section titled “Design”
  1. Consistent Height: Maintain consistent header height
  2. Clear Navigation: Make menu items easy to read
  3. Mobile-First: Design for mobile, then desktop
  4. Brand Identity: Ensure logo and colors match brand

Accessibility

Section titled “Accessibility”
  1. Keyboard Navigation: Ensure menus work with keyboard
  2. Aria Labels: Add proper labels to menu toggle
  3. Color Contrast: Ensure text is readable
  4. Focus States: Style :focus states for links

Examples

Section titled “Examples”

Simple Header

Section titled “Simple Header”
Container (Flex, Space Between)
├── Site Logo Widget (Width: 150px)
└── Site Navigation Widget (Horizontal, Right aligned)

Advanced Header

Section titled “Advanced Header”
Container (Sticky: Top)
├── Top Bar Section
│   ├── Contact Info (Phone, Email)
│   └── Social Icons
└── Main Header Section
    ├── Site Logo
    ├── Site Navigation (with Mega Menus)
    └── Search Icon
Section titled “Complex Footer”
Section 1: Footer Widgets (4 Columns)
├── About Widget
├── Recent Posts
├── Contact Info
└── Newsletter Form


Section 2: Footer Bottom Bar
├── Copyright Text
└── Legal Menu (Privacy | Terms | Cookies)

Next Steps

Section titled “Next Steps”

Support

Section titled “Support”

Need help with headers/footers?