Creating Menus, Widgets, and Sidebars in Divi: Build a Professional Navigation System

Introduction

A well-designed website isn’t just about good looks — it’s about clarity and easy navigation.

Your visitors should instantly know where to click, how to contact you, and where to find key information like your services or team.

For professionals — whether you’re a lawyer, dentist, accountant, or consultant — intuitive navigation builds trust and ensures clients can find what they need in seconds.

In this guide, we’ll walk through how to create menus, widgets, and sidebars in WordPress using Divi, so your website feels structured, functional, and polished.

Prerequisites: Ensure you’ve completed WordPress installation and are familiar with the WordPress Dashboard before building your navigation.

---

1. Why Navigation Matters for Professionals

Visitors decide within moments whether to stay or leave your site.

A confusing menu or missing contact button can cost you potential clients.

Your navigation should:

• Be simple and predictable.
• Highlight what matters (Services, About, Contact).
• Work perfectly on mobile and desktop.
• Encourage calls or form submissions.

💡 Think of your website navigation as your receptionist — guiding every visitor politely and efficiently.

---

2. Planning Your Site Structure

Before you build menus, take a few minutes to map out your content hierarchy.

Common Pages for Professional Websites

• Home – Overview of your firm or practice.
• About – Credentials, experience, and mission.
• Services – Detailed explanation of offerings.
• Testimonials – Social proof and client feedback.
• Blog / Insights – Educational or informational articles.
• Contact – Phone, email, map, and inquiry form.

💡 Pro Tip: Keep your top menu under 7 items — too many options overwhelm users.

Planning tools: Sitemap Generator

Related reading: Apply insights from our Homepage Design guide to your navigation planning.

---

3. Creating Your Main Menu

Menus are managed through the WordPress dashboard — and styled beautifully through Divi’s Theme Builder.

Step-by-Step:

1. Log in to your dashboard → Go to Appearance → Menus.
2. Click Create a New Menu and name it (e.g., Main Menu).
3. On the left, select the pages you want to include → click Add to Menu.
4. Drag to reorder — Home first, Contact last.
5. Click Save Menu and check Primary Menu.

🎯 Tip: You can also add custom links (e.g., a link to your booking form or WhatsApp chat).

---

4. Styling Menus with Divi Theme Builder

Divi gives you full control over your header and navigation bar design.

How to Customize Your Header:

1. Go to Divi → Theme Builder.
2. Click Add Global Header → Build Global Header.
3. Use the Menu Module — this lets you place your WordPress menu anywhere.
4. In the Design Tab, you can:
   • Adjust font and size.
   • Change background color or transparency.
   • Add hover effects.
   • Set active link color for better UX.

💡 Example:

• For a law firm: Use a navy header with white text.
• For a dental clinic: A clean white header with aqua accents gives a modern feel.

Apply customization principles you learned earlier to create consistent branding.

---

5. Adding a Sticky or Transparent Header

You can make your menu more dynamic using Divi’s visual options.

Sticky Header (Always Visible on Scroll):

1. Open your header in Divi Builder.
2. Go to Section → Advanced → Scroll Effects.
3. Enable Sticky Position → Top.

This keeps your menu visible as users scroll — perfect for long pages.

Transparent Header (Over Hero Banner):

• Use a transparent background for the menu bar.
• Add contrasting text colors (white over dark hero image).

💡 Pro Tip: Divi’s “Global Header” applies across all pages — ensuring your navigation is consistent everywhere.

---

6. Creating Footer Menus (for Quick Links)

Your footer is like the summary section of your website — it’s where visitors go when they’ve scrolled to the end.

To Add a Footer Menu:

1. Go to Appearance → Menus → Create New Menu → Name it “Footer Menu.”
2. Add key pages like Privacy Policy, Terms, Contact, and About.
3. In Divi Theme Builder → Global Footer, add a Menu Module.
4. Style it using the Design Tab to match your brand.

💡 Example: For an accountant’s site, include “Tax Resources” or “Client Portal” links here.

---

7. Using Widgets to Add Functionality

Widgets let you add dynamic content — like contact info, social links, or recent posts — to your site’s footer or sidebar.

Common Widgets for Professionals

• Text Widget: For address and business hours.
• Social Media Follow Widget: For LinkedIn, Facebook, Instagram icons.
• Recent Posts: Perfect for blogs or news updates.
• Search Bar: Helps visitors find articles or pages easily.
• Contact Form (via Divi Module): For quick inquiries.

How to Add Widgets:

1. Go to Appearance → Widgets.
2. Choose your widget area (Footer, Sidebar, etc.).
3. Drag and drop widgets you want to include.
4. Save and preview.

💡 Tip: Divi also supports Widget Modules, so you can insert widget content directly into any Divi layout — ideal for a contact section or quick links column.

---

8. Creating Sidebars That Add Value

Sidebars are optional but powerful — especially for blog and article pages.

They provide visitors with easy access to related information without leaving the page.

Ideas for Sidebar Content:

✅ Contact details or appointment buttons.

✅ Downloadable brochures or guides.

✅ Latest posts or case studies.

✅ Testimonials or reviews.

✅ Legal disclaimers or quick forms.

How to Add a Sidebar in Divi:

1. In your Divi Builder page, add a Row with two columns.
2. In the right column, insert the Sidebar Module.
3. Choose which sidebar to display (default or custom).
4. Style spacing, background, and borders to blend with your content.

💡 Pro Tip: Keep sidebars uncluttered — 3–4 concise blocks of useful info work best.

---

9. Optimizing Navigation for Mobile Users

Divi automatically makes your menus responsive, but you can fine-tune them for a better mobile experience.

Tips for Mobile Navigation:

• Use a hamburger menu (default in Divi).
• Increase menu font size for readability.
• Avoid long menu labels; use concise wording.
• Keep CTAs (like Call Now or Book Appointment) easily tappable.

In Divi → Theme Customizer → Header & Navigation → Mobile Menu, adjust spacing and alignment.

💡 Example: A dentist’s site can keep “Book Appointment” always visible in mobile sticky menu.

---

10. Accessibility and SEO Best Practices

Good navigation helps not only users but also search engines.

Best Practices:

• Use clear page titles in menus (avoid jargon).
• Add alt text for icons and buttons.
• Ensure contrast between text and background.
• Keep your menu hierarchy logical — Google favors structured navigation.

💡 Pro Tip: Add schema (using SEO plugins like Rank Math or Yoast SEO) to improve menu indexing.

---

Conclusion

Navigation is where functionality meets design. A beautiful website means little if visitors can’t find their way around.

By using Divi’s Menu Module, Widget areas, and Sidebar layouts, you can create an experience that feels natural, organized, and professional — perfectly suited to your business.

Building on the foundation of WordPress basics, proper hosting, effective design, and brand customization, professional navigation completes your web presence.

In the next tutorial, we’ll cover Optimizing Images, Fonts, and Media for Faster Websites — ensuring your Divi website not only looks amazing but loads quickly and performs at its best.

---

Your Complete WordPress Journey

Master WordPress step-by-step with our comprehensive tutorial series:

1. What is WordPress – Platform overview
2. Hosting and Domain Setup – Technical foundation
3. Installing WordPress – Setup process
4. WordPress Dashboard Guide – Content management
5. Designing with Divi – Visual design tools
6. Homepage Conversion Design – Layout optimization
7. Customizing with Divi – Brand personalization
8. Navigation & Menus – You are here
9. Performance Optimization – Coming next

---

Additional Resources

Navigation Design & UX

• Nielsen Norman Group – UX research authority
• Usability.gov – Government UX resources
• UI Patterns – Navigation patterns library
• Awwwards Navigation – Award-winning examples

Accessibility & SEO

• WebAIM – Web accessibility resources
• Schema.org – Structured data markup
• Google Search Central – SEO documentation

SEO Plugins

• Rank Math – SEO plugin with schema support
• Yoast SEO – Popular SEO solution
• All in One SEO – Alternative SEO plugin

Design Tools

• Figma – Design and prototyping
• Miro – Sitemap planning
• Whimsical – Flowcharts and sitemaps
• Optimal Workshop – Card sorting for IA

---

💡 Want a Divi Expert to Review Your Website Navigation?
Request a Free Audit