10 Jul 2017
Take full creative control with your site using Themify Builder - starting with your header! We understand the need to create unique sites that showcase your brand. Whether it's with the post/page layouts, color scheme, or even the fonts used - every little detail counts when making your site stand-out from the competition. Which is why we've created this tutorial to showcase how you can create your own custom header design using the Themify Builder.
UPDATE: Now you can build custom header, footer, and post/page templates with Builder Pro. With Builder Pro, you can build custom templates and assign display conditions where the templates should be used.
5 Free Header Designs
We wanted to get you started right away, so in addition to the tutorial, as a special treat, we've created 5 free header designs that you can import. You can view and download these demo layouts below.
- Ultra or Shoppe theme activated on user site
Now let's get started!
- Go to your Themify theme > Builder Layout Part
- Create a new Builder Layout Part or download one of our free header design here
- Copy the layout part shortcode
- Go to your Themify Settings > Theme Settings >Theme Appearance
- Select "No Header"
- Go to your Themify Settings > Hook Content
- Add a new hook content in "body_start"
- Insert the layout part shortcode (the header layout created in step 1). This will insert the header layout part in the header area.
- Optional: Add a condition to set which page you would like to use this header only. You can do this by clicking the "+condition" option.
That's it! 3 simple steps to create your own custom header!
Step 4 (Optional): Sticky Header
The following steps will show you how to create a sticky header using two Builder rows.
- Go to Themify > Settings > General, add the following code in Header Code:
- Edit the Builder Layout Part. Create 2 rows of your desired design (ie. the first row is the regular header and the second row would be the sticky header)
- On the first row, add "regular-header" in the Additional CSS Class field
- On the second row and add "sticky-header" in the Additional CSS Class field
Free Header Designs
You can import these header designs by clicking on the Import icon and select "Import from File" (screenshot)