Blog

How to Design a Custom Header with the Themify Builder

featured image

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.

Note: This tutorial is only applicable with the Ultra or Shoppe theme.

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.

Requirements:

  • Ultra or Shoppe theme activated on user site

Now let's get started!

Step 1:

  • 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

step 1

Step 2:

  • Go to your Themify Settings > Theme Settings >Theme Appearance
  • Select "No Header"

step 2

Step 3:

  • 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.

step 3

That's it! 3 simple steps to create your own custom header!

Step 4 (Optional): Sticky Header

You can also make your header design sticky by adding CSS class "sticky-header" on the row options. The row that you add this CSS class too will only appear when you scroll through your site. Recommended way to add this:

  1. Go to Themify > Settings > General, add the following code in Header Code:

    
    <style>
    body:not(.themify_builder_active) .themify_builder_row.sticky-header {
    	position: fixed;
    	top: -100%;
    	opacity: 0;
    	transition: all 1s;
    	z-index: 9999;
    }
    body:not(.themify_builder_active).builder_sticky_header .themify_builder_row.sticky-header {
    	opacity: 1;
    	top: 0;
    }
    </style>
    <script>
    jQuery(function($){
    	var body = $( 'body' ),
    		header = $( '.themify_builder_row.regular-header' );
    	$(window).on( 'scroll touchstart.touchScroll touchmove.touchScroll', function(){
    		if ( $(window).scrollTop() <= header.outerHeight() ) {
    			body.removeClass( 'builder_sticky_header' );
    		} else {
    			body.addClass( 'builder_sticky_header' );
    		}
    	} ).trigger( 'scroll' );
    });
    </script>
    
  2. Edit the Builder layout part
  3. Create a new sticky header row and add "sticky-header" on the Additional CSS Class field

Optional step 4

Free Header Designs

You can import these header designs by clicking on the Import icon and select "Import from File" (screenshot)

19 Comments

  1. rup
    Jul 11, 2017 @ 23:15

    This is so great – I would have never thought of using hook content like that. Would love to see you guys post more examples.

    Also, do you think you guys could incorporate a feature of making custom headers an option in the Appearance panel? So that you can build one, then toggle it on and off on specific pages via the header options in the appearance panel.

    Reply

    • Kurt @ Themify
      Jul 13, 2017 @ 14:59

      Thank you for your suggestion :) We’ll discuss this with our team and see what we can do with our future enhancements.

      Reply

  2. Denis Hoffmann
    Jul 12, 2017 @ 07:12

    Hello,
    how do I import the pre designed downloaded “Builder Layout Part”?

    Reply

    • Kurt @ Themify
      Jul 13, 2017 @ 15:02

      Hi Denis,

      You can import the Builder Layout Part by downloading the .zip file on the header that you’d like. Then import it by going to your Wp Admin > Themify theme > Builder Layout Part > Then create a new one and import it from the downloaded file.

      Reply

    • kyle
      Jul 13, 2017 @ 15:36

      I would also like to know how to import?

      Reply

      • Kurt @ Themify
        Jul 13, 2017 @ 23:23

        Hey Kyle,

        You can import the pre-made Header Designs by following the steps below:
        1. Scroll down on the Free Header Design and download the file to the pre-made header design that you’d like
        2. Then go to your Wp Admin > Themify theme > Builder Layout Part
        3. Create a new Builder Layout Part
        4. Then import the file. Here’s a screenshot – https://themify.me/wp-content/uploads/2017/06/import-file.jpg.

        Reply

  3. joseph thiery
    Jul 12, 2017 @ 13:49

    Can’t find a way to import it as well. The import function is only showing what’s already down there and not allowing to import the header file I downloaded from here.

    Reply

    • Kurt @ Themify
      Jul 13, 2017 @ 15:03

      Please allow us to help. Do you mind emailing us with your site URL here – https://themify.me/contact? For now, please make sure you’re using the latest theme version. This will allow us to better provide you support.

      Reply

  4. Jonatan Maia
    Jul 14, 2017 @ 12:40

    Very interesting! Do more tutorials like this, please. :)

    Reply

    • Kurt @ Themify
      Jul 18, 2017 @ 17:41

      You got it ;)

      Reply

  5. Stephanie
    Jul 14, 2017 @ 13:50

    I tried it but failed. Can you get in there and help me, Kurt?

    Reply

    • Kurt @ Themify
      Jul 18, 2017 @ 17:43

      We can definitely help you with this. Do you mind contacting us here – https://themify.me/contact ? Please outline details where you find difficulty and I’ll provide you with some additional support :)

      Reply

  6. syuhada
    Jul 15, 2017 @ 02:33

    where i can find another unique code and the function for this setting?

    Reply

    • Kurt @ Themify
      Jul 18, 2017 @ 17:45

      Not quite sure what you mean. What other unique code are you referring too?

      Reply

  7. laercio civali
    Jul 15, 2017 @ 12:51

    What actually are these header design? These examples seems to be a one page website, is it that? Tks.

    Reply

    • Kurt @ Themify
      Jul 18, 2017 @ 17:45

      The header designs are the top part of the site where you showcase your logo and menu. The one page design is just to show how it’ll look when used on an actually page layout.

      Reply

  8. rumahulin
    Jul 18, 2017 @ 13:41

    how do I import the pre designed downloaded “Builder Layout Part”?

    Reply

    • Kurt @ Themify
      Jul 18, 2017 @ 17:48

      You can do this by downloading first the header design that you’d like to replicate from this post. After doing this go your Wp Admin > Themify Theme > Builder Layout Part > Create new and then scroll down too the Themify Builder option panel and then click import. Import the header file you’ve downloaded here.

      Reply

  9. Raphaël C. Cusson
    Jul 18, 2017 @ 16:30

    You guys just solved a problem I’ve been having for several websites I’ve been working on with custom header layout parts! ❤️

    Reply

Reply

LAST DAY: Get up to 30% off code: SUMMERSALE & $100 off Lifetime Club with code: SUMMERLIFE