It's the first thing you notice when visiting a website, right? A page header provides a lasting impression to your website visitors, it reflects your site’s unique branding.
Designing a professional header in Breakdance is very easy. Over the next few minutes, you'll be guided through the step-by-step process of creating different headers to fit your needs no matter what type of website you're building.
What Should All Headers Include?
An effective header contains a few essential elements, and these are:
- Your company’s logo: This element is the first thing visitors will see when they visit your site. In a nutshell, it provides an instant recognition factor that differentiates your business from your competitors.
- Primary navigation: Navigation links guide your site visitors to quickly get where they want to go.
- CTA buttons: ‘Call-to-action’ buttons are designed to encourage your visitors to take a specific action while on your website. Their main goal is to drive conversions.
- Search bar: A search bar helps visitors quickly find that they’re looking for on your website.
- Shopping cart (for eCommerce): Shopping carts strategically placed on the header allows shoppers to easily find and purchase items in your shop.
Making Headers in Breakdance Builder
In this tutorial, I’ve made three different types of headers tailored for different businesses.
Follow these general steps whenever you need to create a new header in your page.
- Navigate to your WordPress dashboard.
- Select Breakdance > Headers. Click 'Add Header'.
- Provide a name for your header template. Ensure you set it to apply everywhere and give it a higher priority. Then, click ‘Save.’
- To edit, click ‘Edit in Breakdance’ beneath your header name.
- Sometimes, you might encounter a 404 error in Breakdance when adding a new header. This often happens when the permalink structure of your WordPress website has changed.
To solve this issue, navigate to Settings > Permalinks and click ‘Save Changes.’ Then, go back to your breakdance editor and refresh the page. The error message should now be gone.
Header Style 1: Best For Portfolio Website
If you’re planning to showcase your work, skills, and achievements to potential clients, then this header design is optimal.
The goal of creating a portfolio header is to:
- Easily engage visitors with your work
- Allow visitors to connect with you on various social media platforms
In this example, we are going to add a branding logo, easy navigation menu, and social media icons.
Here are the steps to create a header for your portfolio website:
1. Start by adding a new section. You can also opt for the dedicated ‘Header Builder.’
2. Design a layout with three distinct columns in proportions 20% - 55% - 25%.
3. Place your logo in the first column. Click ‘Add’ and choose ‘Image.’
3. In the middle column, add the ‘Menu Builder’ for intuitive navigation.
4. The third column is reserved for your social media icons. Go ahead and add ‘Social Icons.’
5. Adjust the size of your logo so it doesn’t look too large or too small for your header. Here, I’ve changed the image width to 100 px.
6. Edit the layout of your menu builder. Make sure to update the menu links as well.
7. Customize the appearance of your social icons. Include only the platforms that you want to share. In this example, I’ve added Facebook, Twitter, LinkedIn, and Youtube. Feel free to add more icons as you see fit.
8. Enhance the aesthetic appeal of your header. Change the background color, style, and font style that suits your branding.
Here, I’ve changed the background color of the header to black. You can do so by clicking the section element. Then go to the Style tab, click ‘Background,’ and choose your color.
I’ve also changed the color of the menu texts to white. Again, click ‘Menu Builder’ and go to the Style tab. Click Text Colors > Link and choose your color.
You can also edit the hover style by clicking the small icon beside ‘Link.’ Here, you can choose the hover color and even add effects.
9. Embed links within your header elements. For example, you can embed the link of your home page to your logo. Do the same for your menu links and social media icons.
10. Make your header responsive to different screen sizes. You want your portfolio website to look good no matter what device your visitors are using. Click the screen icon at the top of the editor. Choose a screen size and adjust the placements or sizes of your header elements.
11. Once satisfied, preview your final design on a desktop by clicking exit to frontend. Here’s the final result of the header we’ve just designed.
Header Style 2: Best For E-Commerce Businesses
E-commerce websites need an effective header for various reasons:
- A header is often the first thing that visitors see.
- An intuitive header provides shoppers a hassle-free experience while navigating your site.
- A header can be used to highlight promotions and display call-to-action texts like ‘Sign In’ or ‘Check Out.’
Here are the steps to create a header for your e-commerce website:
1. First, make sure that you’ve installed the Woocommerce plugin. Go to Plugins > Add New and search for Woocommerce. Then, install and activate the plugin.
2. Head over to your Breakdance editor. First, let’s add a header builder.
3. Upload your company’s logo. Click Add > Image.
4. Add a Div element and inside, a Menu Builder.
5. Modify the Wrapper Link element to contain a user icon and 'account' text. Adjust the layout. Here, I’ve added a 5px gap. Under the ‘Horizontal’ section, I’ve also set the ‘Align’ option to ‘Space Between’ and ‘Vertical Align’ to ‘Middle.’
6. Within the parent Div, add the ‘Mini Cart’ element. Then, go to Layout > Horizontal and set the alignments to ‘Space Between’ and ‘Middle.’
7. Within the ‘Header Builder’ element, adjust the alignments, background color, icon colors, and font sizes that fits your brand.
8. Update the texts on your menu links. To edit the content of the Products dropdown menu, click columns and edit the title and links.
9. Add links to your logo and account icons. Click element > Link to add the link of a page. For example, I linked my logo to my home page.
10. This step is optional but highly recommended. Add a promotion banner on top of your header. To do this, simply add Section > Text. Style the text, add font size, font color to your liking.
10. Adjust your header on different screen sizes.
11. Lastly, preview the final desktop version.
Header Style 3: Best For Real-Estate Business
A header in real-estate websites often contains contact information, company logo, and menu for property listings.
So, let’s build a real-estate website header with all these elements.
1. On your Breakdance editor, start by adding a ‘Header Builder.’
2. Let’s structure our layout. First, we’re going to need two Divs within our header section. The first div will be for the logo. The second div will contain the contact number, user login, search bar, and menu builder.
3. On the first Div, add your company logo. To adjust the image width, go to Style tab > Image and enter the width value.
4. On the second div, let’s add another div to house the contact information, login/register button, and search bar.
5. We want the elements to be separated nicely on the top bar. So what I did is I added a div for each element.
Then, I added a button for the contact information. I also changed the text with a contact number, but feel free to add any contact information you want. Then, you can style this section by adding a telephone icon beside this button.
Tip: Make sure to set the Div layout to: Align = Left, Vertical Align = Middle.
6. Add another div to house the Login/ Registration button and search form. Your header should now look like this.
7. Let’s now add a menu. First, add another Div within the parent Div. Then, add the ‘Menu Builder’ element. Your header should look like this.
8. Change the style of the top navigation bar of the header. Edit the style of the buttons, icon, and search form. Simply click the element and choose your background color, font size, etc. You can also adjust the gap size, padding, and the container width.
9. Click the Menu Builder to update the menu link texts. Adjust the width, alignment, and font size.
You can also add effects when you hover over the menu. Here, I’v added the underline effect on the menu links. To do this, go to Style tab > Links > Effect. Choose ‘Underline’ for the ‘Effect Type’ and ‘Center’ for the ‘Effect Direction.’
10. Make your header responsive for different screen sizes. Edit the container width, gap, horizontal alignment, and padding size to enhance the placement of your header elements.
11. Finally, link your logo, button elements, and menu links to the appropriate pages of your website.
12. Here’s the final look of our real-estate website header.
And there you have it! You’ve just created three different page headers in Breakdance.
Of course, there are many other ways you can style your own header. You can also use the design library to take elements of an already-created header and customize them to your liking.
Your next step is to design a footer that complements the header. After that you can start designing the inner content of your site!
Hopefully, you’ve found this guide helpful. Have any questions? Feel free to drop your comments below!