How to Build Any Header Design in Multi WordPress Theme?
With probably the richest customization methods out there, Multi allows you to create literally any header design you can imagine.
You can design the whole header layout from scratch, customize colors, animation, menus and call to action button. And since Multi’s header customization is so detailed, it doesn’t require any coding skills to create tons of diverse designs.
To maximize the ease of use, we divided Multi Header options into several categories. This way you can focus on specific header area at the time and make your work simple and super effective. In this article, we’ll briefly describe each Multi Header options category, so you can get a feel for it.
Let’s dive in!
Layout
In this panel, you develop the header layout and set the main style type. You can choose a standard header style or a hidden header panel with just an expandable toggle. You can also choose a modern, full screen overlay menu, and a super cool menu with diagonal background. The last one pops out in the page’s top corner. In the Layout panel, you also decide the header height and add other elements. Throw in a call to action button, a search bar, a converting ad, social links, or… an additional menu!
Appereance
Another one of cool Multi Header features is allowing you to create two separate panels within one header. You can set each panel’s height and contents in Header > Layout options. Then, in Header > Appereance, set their look, colors, shadow, and background. You can add custom horizontal separators and select their width and colors. You can also design a header with a semi-translucent background color, using a dedicated color picker.
Sticky header settings
Setting up a sticky header in Multi Theme is super easy. Help your viewers navigate your page by offering a handy menu and logo panel that follows them while they scroll. Sticky header also ensures a constant access to your call to action button to improve conversion rates. With Multi, you can select different sticky header animations, different height for each of two panels, logo resizing and much more.
Menu settings
A clear, accessible and eye-catching navigation is the key to a prospering website. Multi Theme provides you with countless possibilities, from simple minimalistic menu bars, to complex, multi-level layouts! Within the two header panels, you can create megamenus that are fully customizable. Design its every color, add separators, set menu items padding and spacing. For a cool, sleek effect, use one of the many menu hover animations available or add a cursor follow effect. Then, customize the menu even further by choosing link underline vertical and horizontal position, offset, thickness and more.
Hamburger icon
Make your interface clean and readible. With Multi’s menu hamburger toggle icon, you can adjust every single color – icon, background, and hover colors. This way it will suit your website’s design and grab your viewer’s attention!
Mobile settings
We are aware that mobile web design is at least as important as desktop design. With that in mind, we equipped the Header settings with a panel full of options dedicated to responsive mobile projects. You can set a different mobile height for the header and logo. What’s more, you can customize the hamburger menu toggle and set its look and animation, or show a menu caption. This way your header and menu will look pixel perfect on any device.
Button
Use your website’s header to boost the conversion rates with a beautiful call to action button. In Multi’s dedicated panel full of options, you can design a custom button from scratch. Set a style type, size, padding and each border width. Select colors for text, borders and background, or use color gradients for extra effect. Multi’s call to action button not only looks good, but it’s super functional. You can add custom attributes, additional CSS class and rel parameter.
Summary
A header plays a key role in your website’s style and usability. It helps your viewers with navigating your website, improves conversions, and adds an overall professional look. As you can see, Multi gives you endless design possibilities to create beautiful, functional, fully responsive headers. It’s super intuitive and simple, even for complex, multi-level layouts.
Leave a Comment