Elementor Header Footer Issue
March 18, 2025 · AI Conversations
### 1. **Check Template Type**
– Go to **Edit Page** in Elementor.
– In the **Page Attributes** (right sidebar), check the **Template** setting.
– If it's set to **Elementor Canvas**, it will remove the theme header and footer. Change it to:
– **Default Template** (to keep the theme’s header and footer).
– **Elementor Full Width** (if your theme supports it).
### 2. **Check Theme Compatibility**
– Some themes do not fully support Elementor templates. Try switching to a different theme like **Hello Elementor** or **Astra** and see if the issue persists.
### 3. **Assign a Header and Footer in Theme Builder**
– If you're using Elementor **Pro**, ensure that you have assigned a **Header** and **Footer** under:
– **Templates → Theme Builder**.
– If missing, create a new header and footer template.
### 4. **Check if the Header/Footer is Disabled in Theme Settings**
– Some themes like **Astra**, **OceanWP**, and **GeneratePress** allow disabling the header/footer per page.
– Check **Theme Customizer → Layout → Header/Footer** settings.
### 5. **Check for Plugin Conflicts**
– Disable other plugins except for Elementor.
– Reactivate them one by one to see if a conflict is causing the issue.
### 6. **Regenerate Elementor Files & Flush Cache**
– Go to **Elementor → Tools → Regenerate CSS & Data** and click "Regenerate Files".
– Clear your WordPress and browser cache.
### 7. **Check for Missing Hooks in Custom Theme**
– If using a custom theme, ensure `wp_head()` and `wp_footer()` exist in `header.php` and `footer.php`:
<?php wp_head(); ?>
<?php wp_footer(); ?>
Let me know if the issue persists! 🚀
—
### **1. Create a Custom 404 Page in Elementor**
1. Go to **WordPress Dashboard → Templates → Theme Builder**.
2. Click **Add New → Choose "Single" → Select "404 Page"**.
3. Design your **custom 404 page** using Elementor.
4. Click **Publish** and set the **Display Conditions**:
– Choose **"Include → 404 Page"**.
– Click **Save & Close**.
—
### **2. Assign the 404 Page via Theme Settings**
Some themes override Elementor’s 404 page. If yours does:
– Go to **Appearance → Customize → 404 Page Settings**.
– Check if your theme allows setting a custom 404 page and select the Elementor template.
—
### **3. Use Custom Code to Force a 404 Page**
If Elementor’s 404 page is not working, add this to your `functions.php`:
function custom_404_page() {
if (is_404()) {
wp_redirect(site_url('/custom-404-page')); // Change to your actual 404 page slug
exit();
}
}
add_action('template_redirect', 'custom_404_page');
Make sure **"/custom-404-page"** matches your Elementor template’s permalink.
—
### **4. Ensure Permalinks Are Updated**
– Go to **Settings → Permalinks** and click **Save Changes** to refresh rewrite rules.
—
### **5. Check for Plugin Conflicts**
If the custom 404 page doesn’t show:
– Temporarily disable other plugins (especially cache or redirection plugins).
– Test again after re-enabling them one by one.
—
This should make your **Elementor custom 404 page** work properly. Let me know if you need more help! 🚀
—
### **1. Check the Selected Page Template**
– **Go to Edit Page → Page Attributes (Right Sidebar).**
– Check the **Template** setting:
– **Elementor Canvas** → **Removes both the header and footer** (Not recommended if you need them).
– **Elementor Full Width** → **Keeps the header and footer** (Preferred if you want a full-width layout).
– **Default Template** → Uses the theme’s default structure.
**Solution:**
If set to **Elementor Canvas**, change it to **Elementor Full Width** or **Default Template**.
—
### **2. Check Theme Compatibility**
Some themes do not fully support Elementor templates.
– **Recommended Themes**:
– Hello Elementor
– Astra
– GeneratePress
– OceanWP
If using a custom theme, it may lack proper template support.
—
### **3. Enable Header & Footer in Theme Builder (Elementor Pro)**
If you are using **Elementor Pro**, you need to set up a custom header/footer:
– **Go to WordPress Dashboard → Templates → Theme Builder.**
– Click **"Add New" → Choose "Header" or "Footer".**
– Design your header/footer and **set the Display Conditions** to apply to **"Entire Site"**.
– Click **Save & Close**.
—
### **4. Check Theme Header/Footer Settings**
Some themes allow you to disable headers and footers on specific pages.
– **Go to Appearance → Customize → Layout → Header/Footer Settings.**
– Ensure the **header/footer is enabled**.
For themes like **Astra or OceanWP**:
– Edit the page and check **Theme Settings (bottom of the editor)**.
– Ensure the header/footer is not disabled.
—
### **5. Ensure `wp_head()` and `wp_footer()` Exist in Theme Files**
If using a custom theme, make sure your `header.php` and `footer.php` include these:
**`header.php`**
<?php wp_head(); ?>
**`footer.php`**
<?php wp_footer(); ?>
These functions load important WordPress and Elementor scripts.
—
### **6. Check for Plugin Conflicts**
Some plugins might be interfering with Elementor’s templates.
– **Temporarily disable** other plugins except Elementor.
– **Re-enable them one by one** to find the conflicting one.
—
### **7. Clear Cache & Regenerate Elementor Files**
– **Go to Elementor → Tools → Regenerate CSS & Data** and click **Regenerate Files**.
– Clear browser and **plugin cache (e.g., WP Super Cache, W3 Total Cache, Cloudflare, etc.)**.
—
### **8. Re-Save Permalinks**
– Go to **Settings → Permalinks**.
– Click **Save Changes** (without modifying anything).
– This refreshes WordPress rewrite rules.
—
### **Conclusion**
If your Elementor page **does not show the theme header and footer**, the most common fixes are:
✔ Change the page template to **Elementor Full Width** or **Default Template**.
✔ Check if **Theme Builder** has a custom header/footer.
✔ Ensure your **theme settings** do not hide the header/footer.
✔ Verify **wp_head() and wp_footer()** exist in your theme files.
✔ **Disable plugins** causing conflicts and clear cache.
Try these steps and let me know if the issue persists! 🚀