How to Plan a Divi Header and Footer
Create navigation and site-wide elements that stay usable on mobile.
Start with navigation
List the few destinations people need most. Keep the main menu short and give important pages descriptive labels.
Header design
Make the logo link home, keep navigation visible and use a clear menu control on narrow screens. A commercial CTA should not crowd out navigation.
Footer design
Include useful navigation, your contact information where available and required legal or affiliate disclosures.
Test accessibility
Check keyboard navigation, focus indicators, contrast and touch targets. Do not rely only on a visual desktop preview.
Use the theme builder
Consult Elegant Themes’ current Theme Builder documentation for exact interface steps; controls may change between Divi versions.
A useful navigation example
A five-page service site might use Services, Work, About and Contact in the header, with legal notices and supporting resources in the footer. The header CTA should name its destination; avoid multiple competing buttons on a narrow screen.
Mobile and keyboard review
Tab through the menu without a mouse, verify visible focus, expand and collapse mobile navigation, and check that sticky elements do not cover form fields or the final lines of an article.
Before you make a decision
- Read the section on start with navigation and note how it applies to your own website.
- Read the section on header design and note how it applies to your own website.
- Read the section on footer design and note how it applies to your own website.
- Verify current product features and terms with the relevant vendor before making a purchase or changing a live website.
- Test a representative page or workflow on staging and keep a recoverable backup when changes could affect an existing site.