How to use the Divi Theme builder to create custom headers and footers

How to use the Divi theme builder to create custom headers and footers

WordPress Elegant Themes Divi

The Divi theme builder by Elegant Themes is a tool that makes creating custom headers and footers for a WordPress website simple. With its easy-to-use interface, web designers can customise these important parts of the site to match the brand’s style, providing a consistent experience for visitors. This guide explains how to use the Divi theme builder to create custom headers and footers.

Getting started with Divi theme builder

Before starting to create custom headers and footers, make sure the Divi theme is installed and activated on the WordPress site. The theme builder is part of Divi, so it is accessible directly from the WordPress dashboard.

To access the Divi theme builder, follow these steps:

1. Log in to the WordPress dashboard.
2. Navigate to Divi > Theme Builder.

Here, there is a blank canvas ready for customisation, where web designers can build headers and footers for the entire website or just for specific pages.

Creating a custom header

Headers are important as they guide visitors to different parts of the website. A good header is simple, engaging, and easy to navigate. To create a custom header:

1. In the Divi theme builder, click on Add Global Header or Add Custom Header for a specific page.
2. Choose to Build from Scratch, Use a Premade Layout, or Clone an Existing Header. Choose whichever option best fits your needs. For this guide, Build from Scratch is used.
3. Once inside the builder, use Divi’s drag-and-drop module options to add elements to the header, such as:
   • Logo Module to showcase the brand logo.
   • Menu Module for navigation links.
   • Button Module to include a call-to-action (e.g., “Get in Touch”).

To make the header responsive, use Divi’s responsive design options. Click on any element, and then use the Responsive Settings to adjust its appearance on desktop, tablet, and mobile.

WordPress Divi Theme

Designing a custom footer

A well-crafted footer provides easy access to important links and contact information. To create a custom footer:

1. In the theme builder, click on Add Global Footer or Add Custom Footer for a particular page.
2. Again, choose Build from Scratch to get started.
3. Add modules like:
   • Text Module for a copyright statement or short brand description.
   • Social Media Follow Module for social links.
   • Menu Module for additional navigation.
   • Contact Form Module if visitors need to get in touch directly from the footer.

Divide the footer into multiple rows and columns to organise content clearly, making sure visitors can find relevant information easily.

Elegant Themes Divi

20 most important elements of header and footer design

1. Logo: The logo helps visitors quickly identify the brand.
2. Navigation Menu: A clear and simple menu makes it easy for visitors to navigate the site.
3. Call-to-Action Button: Encourage visitors to take an action, such as contacting or signing up.
4. Contact Information: Include phone numbers or email addresses for easy communication.
5. Social Media Links: Allow visitors to connect on different social platforms.
6. Search Bar: A search feature helps visitors find content quickly.
7. Sticky Header: Keep the header visible as users scroll for easier navigation.
8. Opening Hours: Display opening hours for businesses where relevant.
9. Newsletter Signup: Add a signup form to encourage visitors to join a mailing list.
10. Breadcrumb Navigation: Show visitors where they are on the website and improve usability.
11. Copyright Information: Provide legal information at the bottom of the footer.
12. Privacy Policy Link: Include a link to the privacy policy for transparency.
13. Footer Navigation: Provide additional navigation links in the footer for convenience.
14. Quick Links: Highlight important pages for easy access.
15. Address: Physical address information for businesses, if applicable.
16. Testimonials: Include short testimonials in the footer for social proof.
17. Language Selector: If the site is multilingual, add a language switcher.
18. Icons: Use icons for visual interest and to make navigation easier.
19. Back to Top Button: A button to quickly return to the top of the page.
20. Legal Disclaimers: Include any required legal disclaimers in the footer.

Divi WordPress Theme

20 different types of design styles you can use

1. Minimalist Design: Simple and clean with lots of white space.
2. Modern Design: Sleek with contemporary elements like flat icons and bold fonts.
3. Classic Design: Traditional and timeless, with serif fonts and a balanced layout.
4. Vintage Design: Nostalgic elements with retro fonts and muted colours.
5. Bold and Colourful: Bright colours and large typography to grab attention.
6. Dark Theme: Dark backgrounds with contrasting text and images.
7. Nature Inspired: Natural colours and elements like leaves or wood textures.
8. Geometric Design: Use of shapes like triangles, circles, and rectangles for a structured look.
9. Monochrome: Black and white or variations of a single colour.
10. Playful Design: Fun elements, bright colours, and creative typography.
11. Corporate Style: Professional with a focus on clear navigation and neutral colours.
12. Typography Focused: Creative use of different fonts as the main visual element.
13. Elegant and Sophisticated: Soft colours, elegant fonts, and a refined layout.
14. Hand-Drawn Elements: Use of illustrations and hand-drawn graphics for a personal touch.
15. Asymmetrical Layout: Non-traditional placement of elements for a modern feel.
16. Grunge Design: Distressed textures, rough edges, and darker tones.
17. Photography Heavy: Large images used as backgrounds or main elements.
18. Flat Design: Simplified elements without gradients or textures.
19. 3D Elements: Use of shadows and highlights to create depth.
20. Art Deco: Bold lines, geometric shapes, and a vintage luxury feel.

Divi Themes

Saving and assigning custom headers and footers

After finishing the custom header or footer, save the work by clicking the Save button in the bottom right corner of the theme builder. Assign the custom header or footer globally—meaning it will apply across the entire site—or create unique versions for specific pages or posts.

To assign the header or footer to specific areas:

1. Click on the Settings icon next to the header or footer that has just been created.
2. Use Display Conditions to decide where the header or footer will appear (e.g., on the homepage, on all blog posts, etc.).

Tips for effective header and footer design

• Keep it simple: Don’t clutter the header or footer. Make sure links are relevant and easy to find.
• Make it visual: Adding brand visuals, such as the logo and icons, can make the header and footer more appealing.
• Be consistent: The header and footer should match the overall website design. Make sure colours, fonts, and styles align.
• Optimise for mobile: Use Divi’s responsive settings to adjust the design so it looks good on any device.

Conclusion

The Divi theme builder provides a simple way to create custom headers and footers that improve the website’s look and feel. With a few steps, web designers can take control of the site’s navigation and branding, giving visitors a consistent experience.

Try experimenting with different modules and layouts until you find the perfect combination. The header and footer are often the first and last things a visitor will see, so make them count!

If further help or inspiration is needed for custom headers and footers, Elegant Themes offers many helpful tutorials and premade templates to get started. Are there any specific questions about using the Divi theme builder? Feel free to ask!