Tutorial Stats
How To Add Weebly 4's Customizable Header To Your Modified, Older, Or Third-party Weebly Theme
Tutorial Description
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.
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.
SHOW MORE
Tutorial
Step 1. Open The HTML/CSS Editor
Click on "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.
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 down to 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 in orange in the code below.
<div class="banner-wrap wsite-background">
{{#header}}
<div class="container">
<div class="banner">
<h2>{headline:text global="false"}</h2>
</div>
</div>
{{/header}}
</div>
<div class="banner-wrap wsite-background">
{{#header}}
<div class="container">
<div class="banner">
<h2>{headline:text global="false"}</h2>
</div>
</div>
{{/header}}
</div>
Step 4. Remove and replace HTML Code
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.
<div class="banner-wrap wsite-background">
{{#header}}
<div class="container">
<div class="banner">
<h2>{headline:text global="false"}</h2>
</div>
</div>
{{/header}}
</div>
Now we're going to replace that code with an HTML code that will allow it to become a drag & drop area as shown in orange below.
<div class="banner-wrap wsite-background">
{{#header}}
<div class="container">
<div class="banner">
{content}
</div>
</div>
{{/header}}
</div>
Note: Your banner image may automatically change after completing this step.
Click save.
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.
<div class="banner-wrap wsite-background">
{{#header}}
<div class="container">
<div class="banner">
<h2>{headline:text global="false"}</h2>
</div>
</div>
{{/header}}
</div>
Now we're going to replace that code with an HTML code that will allow it to become a drag & drop area as shown in orange below.
<div class="banner-wrap wsite-background">
{{#header}}
<div class="container">
<div class="banner">
{content}
</div>
</div>
{{/header}}
</div>
Note: Your banner image may automatically change after completing this step.
Click save.
Step 5. Customize Header
Once you're back in the frontend of the Weebly editor, you'll see a drag & drop area has appeared on the banner image. You can now drag & drop elements from the Weebly toolbar here.
Click on the banner to gain access to other customization features such as changing the banner image, background color, and applying banner effects.
Click on the banner to gain access to other customization features such as changing the banner image, background color, and applying banner effects.
You're done! Publish your site to see your new customizable header!
Need Help Installing This Tutorial?
Editor Tricks Web Design Services
Open
· Closes 5 PM
Closed
· Opens 7 AM
Recent Tutorial Comments
