How to Create Drag and Drop Header for Old Weebly Themes?

Weebly offers very limited number of themes with little variations thus making users to either look for custom themes or modify default ones to enhance the features. Since none of the custom themes can offer similar drag and drop experience like Weebly’s default themes, the best available way is to edit the source HTML / CSS to modify default theme. One of the highly required feature by Weebly users is to have a drag and drop header so that any type of content can be added. In this article we will explain how to create drag and drop header for a landing page on a Weebly site.

Note: After our article, Weebly introduced a flexible header concept for default responsive themes. Hence we have modified the title of this article to creating drag and drop header for custom and old themes. This article is applicable if you are using custom theme or modified default responsive theme or using non-responsive theme.

Understanding Default Layout Header

Login to your Weebly site and navigate to “Theme > Edit HTML / CSS > Header Type” section. In this example we will use “Dusk – Business” theme and create a drag and drop landing page by modifying the default “landing.html” template. You can follow the same method for creating tall header and short header layouts with drag and drop header for any other themes.

Generally all landing page layouts contain a headline, a title and a button on the header area. Under “landing.html” you will see similar content like below:

<div class="banner">
<h2>{headline:text global="false"}</h2>
<p>{headline-paragraph:text global="false"}</p>
<div class="button-wrap">{action:button global="false"}</div>
</div>

There are three placeholder elements used on landing page:

• The h2 tag is used to create a placeholder for headline.
• The p tag is used to create a placeholder for title (short description).
• The button tag is used to create a placeholder for button.

Note: On some themes you may also see a logo on the header area.

Since placeholders are used Weebly will only allow you to modify the headline, title and button text without the possibility of adding any other elements. The default landing page of “Dusk – Business” theme will look like below:

Creating Drag & Drop Header Area

We will leave the headline and title placeholders as it is and modify the button placeholder to make it a drag and drop area. In order to do that add replace the above lines of code with the below code:

<div class="banner">
<h2>{headline:text global="false"}</h2>
<p>{headline-paragraph:text global="false"}</p>
<div class="button-wrap">{button:content global="false"}</div>
</div>

Save the changes and go back to Weebly site editor. You may need to provide a new theme name if this is the first time you are modifying the theme.

Now you can notice there are two buttons on the header area as shown below:

You can delete the two buttons and drag and drop any other elements like social icons, newsletter form, etc.

The published site will look stunning like below:

You can view live demo on Weebly site to check how the header looks.

Note: You can also create a custom header type and choose between the default landing page layout and the custom layout with drag and drop header.