Create a Custom Header & Footer with Divi’s Theme Builder

Page Last Updated:
Published by: Alex Dibben

How to create a custom header and footer with Divi’s theme builder

Divi is a popular and powerful WordPress theme that allows you to create and customise your own website with ease. One of the features that makes Divi stand out is the theme builder, which lets you design and edit your entire website using a visual drag-and-drop interface.

The theme builder allows you to create custom templates for different parts of your website, such as the header, the footer, the body, the post, the product, the archive, the 404 page, and more. You can also assign different templates to different pages, posts, categories, or conditions, giving you full control over the layout and appearance of your website.

In this blog post, we will show you how to create a custom header and footer with Divi’s theme builder. A custom header and footer can help you improve the user experience, navigation, branding, and functionality of your website. You can add your logo, menu, social icons, search bar, contact details, newsletter sign-up, and more to your header and footer, and style them according to your preferences.

How to create a custom header with Divi’s theme builder

To create a custom header with Divi’s theme builder, follow these steps:

– Log in to your WordPress dashboard and go to Divi > Theme Builder.

– Click on the Add Global Header button and select Build Global Header.

– You will be redirected to the Divi Builder, where you can design your custom header using the available modules, rows, columns, and settings.

– To add a logo to your header, you can use the Image module. Drag and drop the Image module to your desired location and upload your logo image. You can also adjust the size, alignment, link, and other settings of your logo image.

– To add a menu to your header, you can use the Menu module. Drag and drop the Menu module to your desired location and select your menu from the drop-down list. You can also customise the style, layout, animation, and other settings of your menu.

– To add social icons to your header, you can use the Social Media Follow module. Drag and drop the Social Media Follow module to your desired location and add your social media links. You can also customise the shape, size, colour, alignment, and other settings of your social icons.

– To add a search bar to your header, you can use the Search module. Drag and drop the Search module to your desired location and choose your search style from the drop-down list. You can also customise the placeholder text, button text, background, border, and other settings of your search bar.

– To add any other elements to your header, you can use the other modules that Divi offers, such as the Text module, the Button module, the Contact Form module, the Countdown Timer module, and more. You can also use the Code module to add your own custom code to your header, such as HTML, CSS, or JavaScript.

– Once you are happy with your custom header design, you can save and exit the Divi Builder. You will see your custom header template in the theme builder, and you can assign it to your entire website or to specific pages, posts, categories, or conditions.

– Click on the Save Changes button to apply your custom header to your website.

 

How to create a custom footer with Divi’s theme builder

To create a custom footer with Divi’s theme builder, follow these steps:

– Log in to your WordPress dashboard and go to Divi > Theme Builder.

– Click on the Add Global Footer button and select Build Global Footer.

– You will be redirected to the Divi Builder, where you can design your custom footer using the available modules, rows, columns, and settings.

– To add a menu to your footer, you can use the Menu module. Drag and drop the Menu module to your desired location and select your menu from the drop-down list. You can also customise the style, layout, animation, and other settings of your menu.

– To add a newsletter sign-up to your footer, you can use the Email Optin module. Drag and drop the Email Optin module to your desired location and connect it to your email marketing service. You can also customise the title, text, fields, button, layout, and other settings of your email optin.

– To add contact details to your footer, you can use the Text module. Drag and drop the Text module to your desired location and enter your contact details, such as your address, phone number, email, or website. You can also use the Blurb module to add icons to your contact details, and use the Text module settings to style your contact details.

– To add social icons to your footer, you can use the Social Media Follow module. Drag and drop the Social Media Follow module to your desired location and add your social media links. You can also customise the shape, size, colour, alignment, and other settings of your social icons.

– To add any other elements to your footer, you can use the other modules that Divi offers, such as the Image module, the Button module, the Divider module, the Testimonial module, and more. You can also use the Code module to add your own custom code to your footer, such as HTML, CSS, or JavaScript.

– To add a footer credits to your footer, you can use the Footer module. Drag and drop the Footer module to your desired location and enter your footer credits text. You can also customise the font, colour, alignment, and other settings of your footer credits.

– Once you are happy with your custom footer design, you can save and exit the Divi Builder. You will see your custom footer template in the theme builder, and you can assign it to your entire website or to specific pages, posts, categories, or conditions.

– Click on the Save Changes button to apply your custom footer to your website.

Conclusion

Divi’s theme builder is a powerful and versatile tool that allows you to create and customise your own header and footer for your WordPress website. By creating a custom header and footer, you can improve the user experience, navigation, branding, and functionality of your website. You can also add your own code snippets and CSS code to your header and footer to further enhance and personalise them.

We hope that this blog post has given you some useful tips and insights on how to create a custom header and footer with Divi’s theme builder. If you need any help or guidance with your WordPress and Divi website, feel free to contact us. We are a professional web design and SEO agency that can help you create and optimise your WordPress and Divi website for your business.

Written byAlex Dibben
Alex Dibben

Alex Dibben

Alex Dibben, holds a degree in Software Development and Business from the University of Portsmouth. He serves as the Director of Expect Best Ltd and has 20+ years experience in Web Design & Digital Marketing. Expect Best Ltd expertly manages more than 400+ client accounts, showcasing their proficiency in Digital Marketing & Web Design. Visit Linkedin Profile

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

Speak to Expect Best

Speak to Expect Best about your website design & digital marketing requirements

Call us on 01202 237027

Or Contact Us

Recent Blogs