With the launch of Weebly 4, one of the new features Weebly released for all account types is the customizable header. The customizable header allows you to easily change your banner image like before, but now you can easily add effects such as parallax (banner image remains static), reveal (banner content fades in), and a video background (paid accounts only).
With the addition of customizable headers, you can now easily change the height of the banner itself by simply clicking on it, grabbing the blue, circular height adjustment tool at the bottom of the banner, and moving it up and down. This features allow for precise banner height as you're not stuck with the predetermined heights of page layouts.
And finally, what would a customizable header be without a drag & drop area? Just like Weebly's new 'Section' element, customizable headers allow you to drag & drop any Weebly element you want from the Weebly toolbar into your banner.
The new customizable header comes standard with Weebly 4's new default themes, but not previous Weebly generation themes, or some modified or third-party Weebly themes.
If you have a modified, previous generation, or third-party Weebly theme, you can add a customizable header to your Weebly theme, and for this tutorial, we'll be using Weebly Carbon's (Weebly 3) 'BIRDSEYE' theme to show you how.
Step 1. Open The HTML/CSS Editor
Clickon "THEME" at the top, then click on "Edit HTML/CSS" on the left.
Step 2. Choose Your Page Layout
On the left, you'll need to choose the page layouts you want the new customizable header to appear on.
Example: If you only apply the HTML code for the customizable header to the short header page layout, pages on your site that are using the short header page layout will be only pages that can use the new customizable header.
Note: Repeat this step for every page layout you want the new customizable header to appear on.
Step 3. Add HTML code
Once you've chosen your page layout, on the right,scroll downto where your banner code is located. Now you're going to add the customizable header's HTML code directly after the banner's opening div and directly before the banner's closing div as shown inorange in the code below.
In order for the customizable header to activate and be a drag & drop area, we need to remove all of the HTML code in the banner div that currently allows you to easily type in a banner headline, sub-headline, and call-to-action button, if your page layout has all of these codes.
For this specific page layout, we only have one code that needs to be removed from the banner div and it's shown in orange below.
"I write a review very infrequently, but Weeblytricks deserves one. Chris went above and beyond to make sure he understood the scope of what we wanted and provided a great product in a very timely manner. Will use again and would recommend!" - Arthur, 8/17/17
Weebly Tricks is a third-party Weebly 'after market' site providing tutorials, apps, and widgets for Weebly sites. Weebly Tricks is not affiliated with Weebly, Inc in any manner. Not all tutorials work for every site and may require additional customizing. Always save your files before editing.