Add a header and footer

Hello @userweb,

Thanks for reaching out and for using our plugin! It sounds like you’ve successfully created your templates, but you’re not sure how to make them appear on your site. This is a common question, and I’d be happy to guide you through the process. The shortcode is for a different use case, like inserting a custom block in the middle of a page, so you don’t need to worry about that for your header and footer.

The key is to use the Display Rules feature to tell the plugin where to show your header and footer.

Here are the steps to follow:

1. From your WordPress dashboard, navigate to UAE > Header Footer & Blocks.
2. Click on the header template you created.
3. In the right-hand panel, find the “Display Rules” section.
4. Here, you’ll choose where to display your header. For example, you can select “Entire Website” to make it appear on all pages. You can also get more specific by choosing “Specific Pages,” “Posts,” or other options.
5. Click the “Update” button to save your changes.
6. Repeat these steps for your footer template.

That’s it! Your header and footer should now be visible on your website according to the display rules you’ve set.

We also have a video tutorial that walks you through this exact process with Elementor. You can watch it here.

Please check the same out and let me know how it goes. If you need further assistance please let us know. We are here to help!

Best regards,
Dhruv

Hello @userweb,

Thanks for your kind words! I’m glad the header is working for you. Let’s get the rest of your questions answered.

You are correct that you can add both a header and a footer. You just need to create the footer as a separate template and apply its own display rules.

Here’s how to do it:

1. Create your footer template: Navigate to UAE > Header & Footer Builder in your WordPress dashboard and click on “Add New”.
2. Make sure that in the drop down for “Type of Template” you are selecting Footer. Give your template a name (e.g., “My Custom Footer”) and set the Display Rules as per your liking.
3. Edit with Elementor: After creating it, click on the “Edit with Elementor” button to design your footer with your preferred columns and content.
4. Save your changes: Be sure to click the “Update” or “Publish” button.

To customize the content of your header and footer (like adding a menu, a background image, or splitting the footer into columns), you must use the Elementor editor.

To edit your header and footer at any time, just follow these steps:

1. Go to UAE > Header & Footer Builder.
2. Hover over the template you want to change (e.g., “My Custom Header”) and click the “Edit” link.
3. Click the “Edit with Elementor” button to open the editor and make your changes.

You can also refer to this documentation for the same : https://ultimateelementor.com/header-footer-with-elementor/

I hope this clarifies the process for you. Please let us know if you have any more questions!

Best regards,
Dhruv

Hello @userweb,

Glad to hear you’re starting to get the hang of it! Since you’re working with UAE’s Header & Footer Builder (which uses Elementor for editing), let me help answer your remaining questions:

1. Creating a 3-column footer
In Elementor, there isn’t a “3-column widget” instead, you can set the structure of your section:

• Open your footer template in Edit with Elementor.
• Click the “+” button to add a new section.
• When prompted, you can select grid and choose the 3-column layout structure.
• You can then drag any widgets you want into each column (text, menus, social icons, etc.).

2. Adding a video in the header
You can use Elementor’s Video widget:

• Drag the Video widget into your header section.
• For the source, you can either:
  • Use an external link (YouTube, Vimeo, etc.). These are most common for performance reasons.
  • Or choose Self-Hosted to upload a video from your Media Library (note: large video files can affect site loading speed).

3. Displaying a menu above the header
By default, the header template itself is the topmost area. If you want a menu above your current design, you can:

• Add an extra section above your existing header content inside the same template.
• Place a Nav Menu widget there and style it as needed.

You can find more details on using Elementor’s sections, columns, and widgets in Elementor’s official documentation, and there are many helpful community videos on YouTube as well.

I hope this helps you move forward! Let us know if you have any other questions for UAE, we’re happy to assist.

Best regards,
Dhruv

Hello @userweb,

That is excellent news! I’m so glad to hear that you were able to get everything working as you wanted.

Thank you for confirming that your issue is resolved. Feel free to open a new support thread if you have any questions related to our plugin in the future. We’re always here to help.

All the best with your website!

Best regards,
Dhruv