Logo
Logo

Creating A Header

Creating a Website Header in Breakdance

In this tutorial, learn how to add a website header using Breakdance.

Creating a Header

Accessing the Header Section

  1. Navigate to the WordPress admin panel.
  2. Go to Breakdance > Headers.
  3. Click “Add Header”.

Header Configuration

  1. Provide a title for your header. In this demonstration, it’s named “Main Header”.
  2. Select a location for your header. The “Everywhere” option applies the header to all pages on your site. However, Breakdance offers flexibility in displaying different headers for different sections or user statuses.
  3. Optional: Add conditions if you want to display varied headers for specific scenarios statuses, like logged in or logged out users.
  4. After setting the desired conditions, click “Add Header”.

Additional Notes

When choosing the location for your header, you have the flexibility to apply it globally or to specific areas of your site. You can also set conditions based on user status to customize the user experience further.

Designing the Header

Utilizing the Header Builder element

  1. Open the newly created header in Breakdance.
  2. Add the “Header Builder” element. This built-in tool in Breakdance allows easy creation of headers without the need for columns or additional plugins.

The Header Builder in Breakdance offers advanced features like overlay, sticky, and responsive functionality. It simplifies the process of building headers compared to other visual builders. There’s no need for columns to align items horizontally, making it easier to use.

Once you’ve added the Header Builder to your design, simply drag and drop other elements into the Header Builder to populate it as needed for your site. You can insert things like your site logo, a menu, social media links, and more.

Adding Logo and Elements to Header

  1. Add an image element for your site’s logo.
  2. Select your previously uploaded logo from the media library.
  3. Add the “Menu Builder” to your header. This offers more flexibility compared to the default WordPress menu, especially with drop-down functionalities.
  4. Add a button to the header for any desired action or link.

Finalizing and Viewing the Header

Previewing the Header

  1. Save the your changes.
  2. Go to the frontend of your website and refresh the page. Your new header should now be visible across the site.