Chat on WhatsApp

Step 3: Structure navigation with header and footer

Now that your text and visuals have been customized inStep 2, it's time to structure your site with a professional header and footer.

These two elements appear on every page of your website. They enable your visitors to navigate more easily, contact you easily, and strengthen your brand image. A well-designed header and footer inspire confidence and facilitate conversion.

In this step, you will learn how to customize these strategic areas to create a consistent and professional user experience.

Summary

The header is the first thing your visitors see when they arrive on your site. It should be clear, professional, and make navigation easy.

Access the header editor

In your site editor, click on the header area at the top of the page. This area will then become editable, and you can modify all of its elements.

The typical header contains: your logo or brand name, the main navigation menu, and sometimes an action button (Contact, Quote, etc.).

Add or change your logo

The logo is the most important visual identity element in your header:

  • Click on the logo area to upload your own logo
  • Use a PNG format with a transparent background for a professional look.
  • Adjust the size so that it is visible without dominating the header.
  • Check that it remains readable on mobile devices.

If you do not have a logo: You can simply display your company name in text using a distinctive font.

Configure the navigation menu

The navigation menu is essential for allowing your visitors to easily access your various pages:

Add links to the menu

  • Click on "Add an item" in the menu.
  • Select the page you want to link to
  • The link will automatically appear in your menu.

Rename links

  • Click on a menu item to change its text
  • Use short, descriptive names (Home, Services, About, Contact).
  • Avoid overly long names that clutter up the menu.

Reorganize links

  • Drag and drop items to change their order
  • Put the most important pages first
  • The typical order: Home, Services/Products, About, Blog, Contact

Remove links

  • Click on a menu item
  • Select "Delete" or click on the delete icon.
  • The link disappears from the menu (the page still exists).

Add a call-to-action button

A clearly visible CTA (Call To Action) button in your header can significantly improve your conversions:

  • Add a button that is distinct from the standard menu links
  • Use action-oriented text: "Free quote," "Contact us," "Try it," "Book now."
  • Choose a contrasting color to make it stand out.
  • Link it to your contact page or form

Check visual consistency

Ensure that the header is consistent with the rest of the site:

  • Colors: Follow your color scheme
  • Font: Use the same font as the website.
  • Style: Modern, classic, or minimalist, depending on your identity
  • Spacing: Give elements room to breathe; avoid clutter.

Test the mobile version

Over 60% of visitors access websites from their smartphones. Make sure your header adapts correctly:

  • Preview your site in mobile mode
  • The menu should change to a hamburger menu (three bars).
  • The logo remains visible and proportionate.
  • All links are accessible

The footer is the last thing your visitors see after browsing your content. It's the ideal place to summarize your essential information and offer additional contact options.

Access the footer editor

Scroll down to the bottom of the page and click on the footer area. This area becomes editable and you can customize its content.

Add your contact information

The footer is the ideal place for your full contact details:

  • Physical address: If you have premises or an office
  • Phone number: Recommended international format
  • Contact email: Business address with your domain
  • Opening hours: If relevant to your business

Integrate your social networks

Add links to your social profiles to grow your community:

  • Use recognizable icons (Facebook, Instagram, LinkedIn, etc.)
  • Ensure that links open in a new tab
  • Only add networks that you actively use.
  • Check that the links are working correctly.

Add the mandatory legal notices

According to Moroccan and international law, certain legal pages are mandatory:

  • Legal notices: Information about the website publisher
  • Privacy Policy: How you handle personal data
  • Terms and conditions: If you sell online
  • Cookies: Cookie usage policy

You can create these pages inStep 4 and link to them from the footer.

Add a newsletter or form

The footer is an excellent place for a newsletter sign-up form:

  • Provide a simple email field
  • Add a catchy title: "Stay up to date with our news"
  • Indicate the frequency of delivery (weekly, monthly)
  • Reassure them about data confidentiality

Structure the footer into columns

For a professional footer, organize the information into thematic columns:

  • Column 1: About, short description, logo
  • Column 2: Quick navigation (links to main pages)
  • Column 3: Contact information
  • Column 4: Social media and newsletter

This organization makes it easier to read and helps visitors quickly find the information they are looking for.

Add the copyright

At the bottom of the footer, add a copyright line:

  • Format: "© 2026 [Your company name]. All rights reserved."
  • You can add "Site created with Nindohost" if you wish.
  • Use a discreet, small font.

Best practices for headers and footers

Follow these recommendations to optimize your browsing efficiency.

Consistency between header and footer

Your two navigation areas should be visually consistent:

  • Use the same color palette
  • Maintain the same spacing
  • Maintain a consistent style
  • The information must not contradict itself.

Simplicity and clarity

Avoid information overload:

  • Header menu: Maximum 7 main links
  • Footer: Organize into clear sections
  • Hierarchy: Highlight important elements
  • White space: Let the elements breathe

Optimization for conversion

Your navigation should guide you toward your goals:

  • CTA button visible in the header
  • Links to conversion pages (contact, quote, purchase)
  • Social media to grow your community
  • Newsletter to build visitor loyalty

Accessibility and responsiveness

Ensure that your navigation works for everyone:

  • Mobile-friendly: Functional hamburger menu on smartphones
  • Descriptive links: Clear text, avoid "click here"
  • Contrast: Text legible against background
  • Click size: Buttons large enough to be clicked easily

Important tip

Your header and footer are the first and last things your visitors see. Take advantage of this to inspire confidence: add a catchy slogan in the header, a visible "Contact" button, or customer testimonials in the footer.

These strategic areas should reinforce your credibility and facilitate the action you want your visitors to take.

Next step

Congratulations! Your website now has a consistent and professional navigation structure.

Proceed toStep 4 to learn how to add additional pages to your site or remove those you do not need:

→ Step 4: Add pages to your site

Overview of the 7 steps

  1. Create your site with AI
  2. Edit text and images
  3. Structure navigation (header/footer) (you are here)
  4. Add pages to your site
  5. Launch an online store (optional)
  6. Optimize your site settings
  7. Publish your website online

For more information:

Guide updated: February 2026