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 new page layout in Weebly site.
Default Header Types in Weebly
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
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 New Header Type
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 “Design > Edit HTML/CSS > Header Type” and click on the + icon to create a “New Header Type”.
Creating New Header Type in Weebly
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 “Pages” tab.
Choosing Header Type in Weebly
Adding Content in New 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>
Create Header Type in Weebly
You can add your own code but the problem is that you will loose the site’s look and the drag and drop feature if you do not use Weebly tags inline with other 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”.
2 Comments
Leave your reply.