Header Layout

The header is a crucial aspect of your website's appearance. DecoNetwork's Website Builder allows you to effortlessly change the layout of your website header independently of the theme with the click of a button. In this guide, we'll walk you through the steps to customize the header layout using the Website Editor.

In this article

• Prerequisites
• Why change your header layout?
• How to change the header layout
• Customize header elements further
• Best-practice tips
• Troubleshooting
• FAQs
• Additional resources

Prerequisites

Why change your header layout?

Your website header is one of the most visible and frequently used areas of your storefront. Adjusting the layout allows you to better align your site with your brand and improve the customer experience.

• Improve navigation clarity: Make it easier for customers to find products and key pages
• Match your branding: Position your logo and navigation in a way that fits your design
• Optimize usability: Highlight important actions like search, login, and cart access
• Test different layouts quickly: Switch layouts instantly without changing your theme

How to change the header layout

1. In your website’s Admin, go to Edit Website → Website Pages.

   

   Access Website Pages from the Edit Website menu

   The Website Editor will load, displaying your current website layout.

   

   The Website Editor is where you control layout and design

   Click the image to enlarge.

2. Click on the DESIGNS button in the Website Editor Toolbar.

   The DESIGNS tab is displayed.

   

   The Designs tab contains layout and styling options

3. Select HEADER LAYOUT.

   The HEADER LAYOUT tab is displayed, containing thumbnails of the header layout options available.

   

   The currently selected header layout is highlighted.

4. Click on any header layout thumbnail.

   The header layout is changed immediately to the layout depicted in the selected thumbnail.

   

   The header updates instantly when a new layout is selected

   Click the image to enlarge.

   You can adjust the properties of the elements in the header using the Style Editor. (Click on the Design tab and select STYLE EDITOR from the menu). See the Style Editor article for details about configuring the header properties.

5. Click on the Save button in the Page Settings Bar to apply the changes.
6. Click Publish when you are ready to make the changes live.

Best-practice tips

• Keep navigation simple and easy to scan
• Ensure your logo is clearly visible and appropriately sized
• Position key actions (search, cart, login) where users expect them
• Test layouts on both desktop and mobile views

Troubleshooting

• Header changes not visible: Make sure you clicked Publish after saving
• Layout looks different on live site: Check if another user has unpublished changes
• Styling not applying: Confirm changes in the Style Editor are saved

FAQs

Does changing the header layout affect my theme?

No. Header layouts can be changed independently of your theme.

Can I preview changes before publishing?

Yes. The Website Editor updates instantly so you can preview changes before saving or publishing.

Can I customize individual elements in the header?

Yes. Use the Style Editor to adjust the appearance and behavior of header elements.

Additional resources

• Style Editor
• Design Tab – Website Editor
• Website Page Settings
• How to Edit What Information Is Displayed in the Header