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:

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

🔧 LESSON 4.3: INSTALL ELEMENTOR HEADER & FOOTER BUILDER

STEP-BY-STEP INSTALLATION:

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

✅ VERIFY CORRECT INSTALLATION:

After activating:

1. 👀 Look at the left WordPress menu.
2. 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:

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

STEP 2: INITIAL STRUCTURE:

We create 1 row:

Row 1 – Quick information:

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

STEP 3: SAVE AND ASSIGN:

1. 💾 Save your header.
2. 🚪 Exit the editor.
3. 📍 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:

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

STEP 2: CONFIGURE BREAKPOINT:

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

STEP 3: ADJUST THE HEADER FOR MOBILE:

1. In 📱 Mobile view, select the menu:
2. 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:

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

STEP 2: TOP SECTION (4 COLUMNS):

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

Column 1 – Logo and description:

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

Column 2 – Quick links:

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

Column 3 – Contact:

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

Column 4 – Newsletter:

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

STEP 3: SEPARATOR LINE:

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

STEP 4: BOTTOM SECTION (COPYRIGHT):

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

Column 1 – Copyright:

1. 🧱 Text Editor:
   • “© [Your Company]. All rights reserved.”
   • 🔗 Links: Privacy policy | Terms.
   • 🎨 Style: Small text, gray.

Column 2 – Social media:

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

STEP 5: GENERAL FOOTER STYLE:

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

STEP 6: SAVE AND ACTIVATE:

1. 💾 Save your footer.
2. 🚪 Exit the editor.
3. 📍 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:

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

💡 PROFESSIONAL TIPS

🎨 VISUAL DESIGN:

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

⚡ PERFORMANCE:

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

✅ SUMMARY OF WHAT YOU HAVE LEARNED

In this module you have learned:

1. ✅ Importance of professional headers and footers.
2. ✅ Solutions for Elementor Free (complementary plugin).
3. ✅ Creation of a complete header with navigation.
4. ✅ Design of a structured and useful footer.
5. ✅ 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.