Module 6.4 Elementor: Designing professional headers and footers

Objective: Learn to create coherent headers and footers that remain consistent across all pages of your website with Elementor.

📋 LESSON 4.1: WHAT ARE HEADERS AND FOOTERS AND WHY ARE THEY IMPORTANT?

🏢 THE BUILDING ANALOGY

Imagine your website as a building:

🏠 Header: It’s like the facade and main entrance. It’s the first thing visitors see, contains the brand identity and the main navigation.
📄 Internal pages: They are the rooms and spaces. Each one has unique content.
🏢 Footer: It’s like the foundation and basement. It contains essential information, important links, and provides stability.

🎯 WHY ARE THEY CRITICAL?

The Header is crucial because:

✅ First impression – Defines the perception of your brand.
✅ Navigation – Guides users through your site.
✅ Consistency – Same look across all pages.
✅ Branding – Reinforces visual identity.

The Footer is essential because:

✅ Key information – Contact, legal, social media.
✅ SEO – Important internal links.
✅ Credibility – Complete professional look.
✅ Conversions – Last chance for actions.

🚨 LESSON 4.2: LIMITATIONS OF ELEMENTOR FREE FOR HEADERS/FOOTERS

📌 INITIAL REALITY:

With Elementor Free, you CANNOT directly create global headers and footers. But there are solutions.

🔧 TWO AVAILABLE OPTIONS:

1️⃣ USE YOUR THEME’S OPTIONS 🌐

Advantages: Easy and native.
Disadvantages: Less customizable.
Ideal for: Projects that don’t require something so custom.

2️⃣ USE A COMPLEMENTARY PLUGIN 🔌

Recommended plugin: “Elementor Header & Footer Builder” by (Turbo Addons) https://es.wordpress.org/plugins/header-footer-builder-for-elementor/.

It is free and officially compatible.
Allows designing headers/footers with Elementor.
Limitation: Fewer options than Elementor Pro.

🎯 OUR RECOMMENDED PATH:

We are going to use Option 2 (complementary plugin) because:

It is free.
It is 100% compatible with Elementor.
It prepares you for when you use Elementor Pro.
It is easy to learn.

🔧 LESSON 4.3: INSTALL ELEMENTOR HEADER & FOOTER BUILDER

STEP-BY-STEP INSTALLATION:

📂 Go to Plugins in your WordPress.
➕ Click “Add New”.
🔍 Search: “Elementor Header & Footer Builder”.
🎯 Identify: Author: Turbo Addons.
⬇️ Install and ▶️ Activate.

✅ VERIFY CORRECT INSTALLATION:

After activating:

👀 Look at the left WordPress menu.
You should see: “Turbo H&F Builder”.

🎨 LESSON 4.4: CREATE YOUR FIRST PROFESSIONAL HEADER

🏗️ BASIC STRUCTURE OF A HEADER:

A typical professional header has 3 zones:

┌──────────────────────────────────────────┐
│            TOP ZONE                      │
│  [Logo]           [Contact info]         │
├──────────────────────────────────────────┤
│            MAIN ZONE                     │
│  [Main menu]      [CTA Button]           │
└──────────────────────────────────────────┘

STEP 1: ACCESS THE BUILDER:

📁 Go to: Turbo H&F Builder.
🖱️ Click on “Header Templates”.
✏️ Name it: “Main Header”.
🎯 Click on “Edit with Elementor”.

STEP 2: INITIAL STRUCTURE:

We create 1 row:

Row 1 – Quick information:

➕ New section: 2 columns (25% | 75%).
Column 1: “Site Logo” widget.
- Your logo is inserted automatically.
- If you don’t have a logo: use the “Image” widget.
Column 2: “Menu” or “Navigation” widget.
- If using “Menu”: select your WordPress menu.
- 🎨 Style: Uniform spacing, no underlines.

STEP 3: SAVE AND ASSIGN:

💾 Save your header.
🚪 Exit the editor.
📍 In Turbo H&F Builder > Header Templates:
- “Edit conditions”.
- Set Display Condition > “Entire site” (the condition to show the menu will be on the entire site).
- Click the “Update” button (saves the changes).

Now when viewing your website, you will see the new menu you have created.

📱 LESSON 4.5: RESPONSIVE HEADER – HAMBURGER MENU

🎯 THE MOBILE PROBLEM:

On small screens, horizontal menus don’t work.

SOLUTION: HAMBURGER MENU 🍔

STEP 1: VIEW IN MOBILE VIEW:

In the header editor.
🖱️ Click on 📱 Mobile (top bar).
👁️ Observe: Your menu probably looks bad or not as you’d like.

STEP 2: CONFIGURE BREAKPOINT:

⚙️ Go to: Elementor > Settings.
📱 Look for: “Preview Devices”.
📏 Tablet Breakpoint: 768px (default).
📏 Mobile Breakpoint: 425px (default).

STEP 3: ADJUST THE HEADER FOR MOBILE:

In 📱 Mobile view, select the menu:
In the left column, edit the “Mobile menu” options:
1. You will be able to edit the hamburger icon size, color, alignment, etc., from the “Content” and “Style” options.

🏢 LESSON 4.6: CREATE A COMPLETE FOOTER

🏗️ PROFESSIONAL FOOTER STRUCTURE:

The best footers have 3 parts:

┌────────────────────────────────────────────┐
│         TOP SECTION                        │
│  [Logo+Description] [Quick links]          │
│                        [Contact]           │
├────────────────────────────────────────────┤
│         MIDDLE SECTION                     │
│   [Social media] [Payment methods]         │
├────────────────────────────────────────────┤
│         BOTTOM SECTION                     │
│  © 2024 YourCompany | Privacy policy       │
└────────────────────────────────────────────┘

STEP 1: CREATE NEW FOOTER:

📁 Go to: Turbo H&F Builder.
🖱️ Click on “Footer Templates”.
✏️ Name it: “Main Footer”.
🎯 Click on “Edit with Elementor”.

STEP 2: TOP SECTION (4 COLUMNS):

➕ New section: 4 columns (25% each).

Column 1 – Logo and description:

Site Logo or Image.
Text Editor below:
- Brief description of your company (1-2 lines).
- 🎨 Style: Small text, light gray.

Column 2 – Quick links:

Heading: “Quick Links” (H4).
Icon List or Text Editor:
- Home.
- Services.
- Portfolio.
- Contact.
- 🎨 Style: Unbulleted list.

Column 3 – Contact:

Heading: “Contact” (H4).
Icon + text (phone).
Icon + text (email).
Icon + text (address).
🎨 Style: Small aligned icons.

Column 4 – Newsletter:

Heading: “Newsletter” (H4).
Text Editor: “Subscribe for updates”.
Form (if you have Elementor Pro).
Or Button “Subscribe” with a link.

STEP 3: SEPARATOR LINE:

➕ New section: 1 column.
🧱 Divider
- 📏 Width: 100%.
- 🎨 Color: Very light gray (#EEEEEE).
- 📏 Weight: 1px.

STEP 4: BOTTOM SECTION (COPYRIGHT):

➕ New section: 2 columns (50% | 50%).

Column 1 – Copyright:

Column 2 – Social media:

🧱 Social Icons (if your theme has them).
Or individual Icons linked.
🎨 Style: Align right.

STEP 5: GENERAL FOOTER STYLE:

Select each footer section.
🎨 Style > Background:
- Dark color (#222222 or #333333).
- 🎨 Text color: Light gray (#CCCCCC).
📏 Adjust paddings:
- Top section: 60px top/bottom.
- Bottom section: 30px top/bottom.

STEP 6: SAVE AND ACTIVATE:

💾 Save your footer.
🚪 Exit the editor.
📍 In Turbo H&F Builder > Footer Templates:
- “Edit conditions”.
- Set Display Condition > “Entire site” (the condition to show the footer will be on the entire site).
- Click the “Update” button (saves the changes).

🏆 PRACTICAL PROJECT: COMPLETE HEADER AND FOOTER

📋 OBJECTIVE:

Create professional header and footer for a digital services website.

🎯 EVALUATION CRITERIA:

FOR THE HEADER:

Logo aligned left.
Main menu with at least 5 links.
CTA Button “Request a quote”.
Sticky activated for the menu (activate in “Edit Conditions”).
Functional on mobile (hamburger or simplified).
Colors consistent with identity.

FOR THE FOOTER:

4 columns on desktop.
Complete contact information.
Legal links (privacy, terms).
Social media.
Updated copyright.
Newsletter or final CTA.

⏳ ESTIMATED TIME:

Header: 30 minutes.
Footer: 30 minutes.
Responsive testing: 10 minutes.
Total: 1 hour 10 minutes.

📝 FINAL CHECKLIST:

✅ Header appears on all pages.
✅ Footer complete and error-free.
✅ Mobile fully functional.
✅ Sticky works correctly.
✅ Links all work.
✅ Colors consistent across both.
✅ Logo crisp and well-dimensioned.
✅ CTA clear and visible.

💡 PROFESSIONAL TIPS

🎨 VISUAL DESIGN:

Keep height of header consistent (80-100px ideal).
Use generous spaces in the footer (don’t crowd).
Hierarchize information: most important at the top/left.
Sufficient contrast for easy reading.

⚡ PERFORMANCE:

Optimize logo for web (compressed PNG).
Don’t use complex widgets in header/footer.
Use SVG icons instead of images (icon widgets are already svg).

✅ SUMMARY OF WHAT YOU HAVE LEARNED

In this module you have learned:

✅ Importance of professional headers and footers.
✅ Solutions for Elementor Free (complementary plugin).
✅ Creation of a complete header with navigation.
✅ Design of a structured and useful footer.
✅ Responsive techniques (hamburger menu).

🎉 EXCELLENT WORK!
Now your website will have the professional foundation it deserves with coherent and functional headers and footers.

Are you ready to design the most important page: the Home?

In Module 5 you will learn to:

🏠 Layout a complete and effective Home Page.
🎯 Hierarchize content for maximum conversion and visits.
📱 Design impactful hero sections.
✨ Implement effective calls to action.