Free StuffTutorials

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)

Read More

New Free Stuff Blog Series: Free Form Designs + Contact Builder Addon

We're releasing a new blog series called "Free Stuff"! As the title suggests, we're giving away free stuff for you to download. This could be designs that our team created to share with all of you, or a plugin/theme that we're giving away for a limited time. Each time we publish a post for this series, we're giving something away completely free! So make sure to sign-up for our newsletter, or follow us on our social links to get the latest freebies, as some are only available for a limited time.

Free Contact Form Designs + Contact Builder Addon!

To kick off this series, we're giving away 5 cool new contact form designs to spice up how your users contact you! All these designs were built using our Builder Contact add-on, which means you'll need it in order to copy the design. With that said, in addition to these designs we're also giving away one week of free access to our Contact Builder addon!

Offer ends on June 27, 2017

Get Contact For Free

Import Data Tutorial

Requirement:

  1. Builder plugin or Themify theme installed and activated on your site
  2. Contact Builder add-on installed and activated

You can import the free Contact Form design on any Builder row on your site. Follow the steps below to do this:

Step 1:

  • Click on the download link
  • Copy the import data code

Step 2:

  • Go to the page where you would like to insert the contact form
  • Turn on Builder

Step 3:

  • Hover cursor on the row import icon
  • Paste the code on the Row Data field (screenshot)
  • Click "Save"

Read More

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