If you are wondering about how to create your Header, Please follow this article.

 

In Madrid, We designed the header to be flexible enough to cover most of header layouts out there and give you the options to tweak it to your style and look to reflect your unique implementation of Madrid.

 

Creating a new Header templateCreating a new Header template

  • In Your Admin Panel, Go to Headers Templates-> Add New Template
  • Add the Header template Name

The following options is divided in 5 sections:

  • Background Section
  • Logo Section
  • Content Area Beside Logo
  • Top Bar Section
  • Below Logo Bar Section
  • Floating Bar Section

1-Background Section1-Background Section

  • Use custom Background: This will Enable/Disable this feature
  • Header Background: In case you choose the previous to yes, upload your background.
  • Background Style: Choose the light/drak to automatically adjust the colours for your header.

2-Logo Section2-Logo Section

  • Use Default Logo Settings: The Default is Yes,
  • If No You will Upload the Logo in the settings below

3-Content Area Beside Logo3-Content Area Beside Logo

  • Content Beside Main Logo: Add the shortcode or html for what you want to appear beside the logo
  • You can use[menu location="main-menu"] and [social_bar] for the main elements you might want to show

4-Top Bar Section4-Top Bar Section

  •  Top Bar Enable: Enable/Disable Top Bar
  • Top Bar style: Color Style Light/Colored/Dark
  • Top Bar content: Add the shortcode or html for what you want to appear in the top bar
  • You can use [float_left]Content[/float_left] and [float_right]Content[/float_right] to float your content right or left

5-Below Logo Bar Section5-Below Logo Bar Section

  • Below Logo Bar Enable: Enable/Disable Top Bar
  • Below Logo Bar style: Color Style Light/Colored/Dark
  • Below Logo Bar content: Add the shortcode or html for what you want to appear in the top bar
  • You can use [float_left]Content[/float_left] and [float_right]Content[/float_right] to float your content right or left

6-Floating Bar Section6-Floating Bar Section

  • Floating Bar Enable: Enable/Disable Top Bar
  • Floating Bar style: Color Style Light/Colored/Dark
  • Floating Bar Logo: Add Logo to the floating bar, leave it blank and it will be disabled.
  • Floating Bar content: Add the shortcode or html for what you want to appear in the top bar
  • You can use [float_left]Content[/float_left] and [float_right]Content[/float_right] to float your content right or left

 

After You choose your options, click Publish/Update and Go to Skins Section to know how to use your created header.