Elementor Header Footer Setup

### Step 1: Install Elementor
1. **Log in to your WordPress admin panel.**
2. Go to **Plugins > Add New** and search for "Elementor."
3. Click **Install Now** and then **Activate** the plugin.

### Step 2: Create a New Header and Footer
Since the free version of Elementor does not include a theme builder, you can use a free plugin to create custom headers and footers.

#### Install the **"Elementor Header & Footer Builder"** Plugin:
1. Go to **Plugins > Add New** and search for "Elementor Header & Footer Builder."
2. Click **Install Now** and then **Activate** the plugin.

#### Create a Custom Header:
1. Go to **Appearance > Header Footer Builder.**
2. Click **Add New.**
3. Enter a name like "Header."
4. Under **Type of Template**, select **Header.**
5. Under **Display On**, select **Entire Website** to apply the header globally.
6. Click **Edit with Elementor** to design the header:
– Use Elementor widgets like "Site Logo," "Nav Menu," and "Search."
– Style it as per your requirements.
7. Click **Publish** when you're done.

#### Create a Custom Footer:
1. Repeat the steps above, but this time select **Footer** as the template type.
2. Use widgets like "Text Editor," "Icon List," or "Social Icons" to build your footer.
3. Style it and click **Publish.**

### Step 3: Remove Theme’s Default Header and Footer
To ensure your custom header and footer display properly:
1. **Go to Appearance > Customize** and check if there’s an option to disable the default header and footer in your theme. If available, disable them.
2. If not, you may need to edit your theme’s `header.php` and `footer.php` files:
– Replace the header/footer code with a blank placeholder like “.
3. Save the changes.

### Step 4: Test the Changes
1. Visit your website and check if the custom header and footer are applied globally.
2. Test on multiple pages, including blog posts, WooCommerce pages (if applicable), and archives.

### Optional: Style the Rest of the Website
– Use Elementor to create templates for pages, posts, or sections where your theme does not look right with the new header/footer.
– Use the free version to create reusable blocks and apply them across pages.

Let me know if you need help with specific steps or styling suggestions!

—

### **Step 1: Verify Your Theme's Compatibility**
Ensure your theme supports Elementor. If it doesn't, you may need to modify it or switch to a compatible theme (e.g., Elementor's **Hello Theme**).

—

### **Step 2: Check the Theme Template Files**
1. Open your theme’s folder in a code editor or via cPanel/File Manager.
2. Locate the file responsible for rendering pages, usually `page.php`, `single.php`, or a custom page template.
3. Ensure it includes the following line inside the “ or equivalent content wrapper:

<?php the_content(); ?>

– If this function is missing, Elementor won’t be able to inject its content into the page.

4. Save the file and upload it back to your server (if editing locally).

—

### **Step 3: Add a Full-Width Template (Optional)**
If your theme doesn’t provide a full-width template for Elementor:
1. Create a new file in your theme’s directory and name it `template-elementor-fullwidth.php`.
2. Add the following code:

<?php
   /* Template Name: Elementor Full Width */
   get_header(); ?>
   <main id="primary" class="site-main">
       <?php
       while (have_posts()) : the_post();
           the_content();
       endwhile;
       ?>
   </main>
   <?php get_footer(); ?>

3. Save the file and upload it to your theme folder.

4. In WordPress, edit the page where you want to use Elementor:
– Go to the **Page Attributes** section in the sidebar.
– Select **Elementor Full Width** as the template.
– Update the page and try editing with Elementor again.

—

### **Step 4: Regenerate Elementor CSS**
1. Go to **Elementor > Tools > Regenerate CSS.**
2. Clear your website cache (if any) and refresh the page.

—

### **Step 5: Switch to a Compatible Theme (if Necessary)**
If the above fixes don’t work or seem too complex, consider switching to a lightweight, Elementor-compatible theme like:
– **Hello Elementor**
– **GeneratePress**
– **Astra**

These themes are optimized for Elementor and won’t cause such issues.

—

Let me know if the issue persists or if you need help editing the files!

—

### **Step 1: Add Elementor Theme Support**
1. Open your theme's `functions.php` file.
2. Add the following code to declare Elementor support:

function my_theme_add_elementor_support() {
       // Add theme support for Elementor
       add_theme_support('elementor');

       // Optional: Set a default container width for Elementor
       if (!isset($GLOBALS['content_width'])) {
           $GLOBALS['content_width'] = 1140;
       }
   }
   add_action('after_setup_theme', 'my_theme_add_elementor_support');

—

### **Step 2: Add Compatibility for Elementor’s Content Area**
Ensure that your theme templates (like `page.php` or `single.php`) include the `the_content()` function. This is where Elementor injects its content.

For example, your `page.php` should look like this:

<?php get_header(); ?>

<main id="primary" class="site-main">
    <?php
    while (have_posts()) :
        the_post();
        the_content(); // This is required for Elementor content
    endwhile;
    ?>
</main>

<?php get_footer(); ?>

—

### **Step 3: Add Full-Width Template for Elementor**
1. Create a new file in your theme folder, e.g., `template-fullwidth.php`.
2. Add this code to create a full-width layout:

<?php
   /* Template Name: Full Width for Elementor */
   get_header(); ?>
   <main id="primary" class="site-main">
       <?php
       while (have_posts()) : the_post();
           the_content(); // Elementor content is rendered here
       endwhile;
       ?>
   </main>
   <?php get_footer(); ?>

3. Save the file.
4. In WordPress, assign the new **Full Width for Elementor** template to pages.

—

### **Step 4: Disable Theme Styling (Optional)**
To give Elementor more control over the design:
1. Disable your theme’s default styles in `functions.php` (optional but recommended for Elementor-specific designs):

function my_theme_remove_default_styles() {
       wp_dequeue_style('your-theme-style-handle');
   }
   add_action('wp_enqueue_scripts', 'my_theme_remove_default_styles', 20);

2. Or use Elementor’s **Default Colors** and **Default Fonts** settings under **Elementor > Settings > Style**.

—

### **Step 5: Test Your Theme**
1. Go to **Pages > Add New** and edit with Elementor.
2. Check if Elementor is working without issues.
3. Test with different templates (e.g., Full Width).

—

### **Recommended: Use Official Elementor Development Resources**
Refer to [Elementor's Theme Development Documentation](https://developers.elementor.com/theme-integration/) for detailed guidance and best practices.

Let me know if you encounter any issues!