The reason Weebly is popular among the webmaster community is not only because of its easy to use drag and drop editor but also the flexibility to modify the core HTML and CSS files. Especially you can create any type of content by using your own page layouts in Weebly code editor. The page layouts are referred as header types in Weebly since it indicates the type of header used on the page. In this article we will discuss more about the page layouts or header types and explain step by step process of how to create a custom page layout in Weebly site.
Default Header Types in Weebly
For non-responsive themes, Weebly offers the following header types mainly based on the height of the header image used.
- Landing page
- Tall header page
- Short header page
- No header page
- Title page
- Splash page
For responsive themes, you will have only few layouts:
- Header
- No Header
- Splash
Splash and title pages are available only on particular themes and other types are available on all themes by default. You can choose the layout whenever creating a new page as well as modify the layout any point of time later.
Creating a Custom Header Type or Page Layout
Let us take an example – you want to create a blank page so that you can add your content using drag and drop elements.
- Navigate to “Theme > Edit HTML/CSS” section and click on the + icon showing against the “Header Type”.
- Choose “New Header Type” option from the dropdown for creating a blank template. If you already have your template file, then just upload it by choosing “Upload Header Type(s)…” option.
- Name the page as you need with .html extension and save your theme.
- Now that your page layout is created which you can see when creating a new page under “Header Type” section. Below is an example of how custom page layout is shown in Weebly editor (sidebar is the custom template we have created to add custom sidebar in Weebly pages).
Note that if you have done any changes in the source code of existing page layout, you need to do the same change again in all your page layouts. For example, let’s say you opted for header page and edited its HTML source to hide free footer message. Later changing the page layout to no header page will display free footer message again and you need to edit HTML of no header page also to disable the footer message.
Adding Content in Custom Header Type
When a new header type is created, Weebly by default add the below mandatory tags to your blank page.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
{title}
{menu}
{content}
{footer}
</body>
</html>
You can add your own code but the problem is that you will lose the site’s look and the drag and drop feature if you do not use Weebly tags like used in default header types. The task is simple if you want to create a new layout completely different from other existing layouts with your own code. Use the following custom tags to enable the drag and feature wherever you want along with your code.
| {area-name:text} | Placeholder for text |
| {area-name:content} | Placeholder for all types of content elements |
| {area-name:image} | Placeholder for image |
The new page layout is required only when you do not want to disturb the default page layouts at the same time want to add additional features. For example, default landing page layout offers a call to action button. Say if you want to have two types of landing pages one with button and one without button. In this scenario, the only way is to copy the complete landingpage.html to a new header type “landingpage-no-button.html” and only remove the call to action button code from new header type. So, you can choose any of the page layouts with or without button under “Pages” tab.
Best and Easy Way
The best and easy way to create a new header type is to copy the entire HTML content from one of the default header types and then modify the code as per your need. This will ensure many things like the site’s navigation, responsiveness, mobile menus, etc. are retained and only the needed elements are added or modified.
If you intend to modify the existing style of an element throughout the site then there is no need of creating a new page layout. For example, you like theme A and only wanted to change the block quote element’s style as per theme B. in this case just replace the style of block quote element in theme A with the code from theme B in “main_style.css” or “main.less” file.
Note: Do not confuse the Page Layout or Header Type with the header, footer and Section element layouts. On responsive themes, you can change the header, footer and Section element layouts by selecting from one of the default items and customize with the settings.
What the code to add a 2nd button to a landing page header type?
I want to create a new page header type based on the landing type already there but with a 2nd call to action button that links to another page..how can i do that?
I coppied the button code and pasted it in the new page header type that i created so now i have two buttons showing up but they seem to have the same link? And whenever i try to change one button’s link the other changes to the same link automatically.
Please help!
Thanks!
Check out the article – https://www.webnots.com/add-two-buttons-or-remove-button-in-weebly-landing-page/.