How to Select Page and Section Layouts in Weebly ?

Weebly offers variety of page layouts to choose and the interesting part is that you can choose different page layouts for different pages on your site. In addition you can also choose a readymade section and header templates for your team or contact page instead of building it from the scratch. The available options are completely different for old non-responsive themes and the latest responsive themes. In this article, we will discuss how to select page layouts in Weebly and customize header and section layouts.

Layout Options in Weebly

Here we discuss the following three topics in detail:

• Type of pages you can create
• Type of page layouts available
• Choosing the Page Template
• Selecting and Changing a Page Layout
• Adding your own Page Layout

Since everything depends upon the theme you use, we recommend you to read the article on using responsive themes in Weebly for better understanding.

Type of Pages in Weebly

You can create a new page in Weebly by navigating to “Pages” tab in the editor. Simply click on the + icon and select one of the following page type for your site.

How to Choose Page Layout in Weebly?

Weebly decides the layout of your page based on the header section. After selecting the page type, you have the following two options to choose one of the default page layouts available for your theme.

• Choose “Header Type” under “Pages” tab.
• Click on the “Add Section” button on the content area of a page under “Build” tab or use “Section” element.

What are the Page Layouts Available?

Depending upon the theme you use, you can find different layouts are available under “Pages” tab to suit your requirements. Most responsive themes offer header, no-header and splash page layouts while non-responsive themes offer variety of different layouts.

1. Landing Page (Non-responsive Themes)

Landing page consists of three basic elements – a text, an image and a button. Text area is the place for adding content essentially the purpose of your website along with an attractive title or caption of your site. Adding an image or a slideshow about your site offers visitors the quick extract of your site which you can do it the image area by just dragging and dropping elements. The final element is a button which is meant for adding call to actions like click to call service or else simply you can use it connect to your blog or forum. Landing page layout is more suitable for the home page of your website.

Note: On non-responsive themes, you can add slider in the header as part of Weebly Pro plan. Free users can however add a header slideshow by modifying the source HTML/CSS, learn more on how to add header slide show in free Weebly site.

2. Tall Header Page on Non-responsive Themes (Header Page on Responsive Themes)

This page layout consists of an image spreading to the full width of your site and the content area will show below the header image. While there is no place to add any text in the header area on non-responsive themes, you can drag/drop elements from the sidebar on responsive themes.

3. Short Header Page (Non-responsive Themes)

This is as same as Tall Header Page with a different that the image height is smaller. In this case also you can’t add text in your header area in non-responsive themes while it is possible to drag elements in responsive theme’s header section.

4. No Header Page (Available in Both Responsive and Non-responsive Themes)

This page layout has neither image nor text and provides more space for your content.

5. Splash Page (Available Only in Selected Themes)

Splash page is an ideal option for attracting attention of the visitor. The content of a splash page is focused in center of a page which can be used for newsletter subscription, welcome page, thank you page or introduction page.

6. Title Page (Available on Selected Non-responsive Themes)

Title page has a title element below the navigation bar where you can enter your title and a small description of the page.

How to Select or Change a Page Layout or Header Type?

When you create a new page under “Pages” tab you have an option to choose the desired layout (header type) for that particular page. Earlier time, Weebly was offering a visual option to select the layout as shown below.

However, it was changed and now you need to select your page and click “Header Type” dropdown to choose the page header layout you want. Any time later you can come back and change your page layout here. As you can see in the below screenshot, the theme only offers two page header types – header and no header.

If you are using non-responsive theme, you also have an option to change the page layout instantly by clicking the settings button in the header image as shown below. If you have selected no header page or using responsive themes then there is no option other than changing the page layout under “Pages” tab as explained above.

Things are much easier when you use header layout with one of Weebly’s responsive themes. You can click on the header and select “Replace Header Layout” button. This will prompt you to delete the current layout and click “Delete” button to proceed further. You will see a list of all available header layouts and choose the one you like. Weebly editor will instantly show the preview, after checking you can save the layout to apply on all pages with header type as “Header”. You can also edit the background to customize the header appearance and add new elements.

How to Add Your Custom Page Layout?

It is possible to add your custom Page Layout to your Weebly site. This can be done by editing source HTML/CSS option under “Design” tab. Click on the “+” icon next to “Header Type” and choose “New Header Type” option from the dropdown. If you already have designed layout file then just upload it by choosing “Upload Header Type(s)…” option.

The new header type will be created with the name as “untitled.html” and with minimum HTML codes for body, header and footer like a blank template. You can rename the header type, add the desired code and preview your layout below the code editor. The best option is to copy the content from header or no-header.html templates and paste in your newly created template. Now, you can change the parameters you want to create your custom template easily instead of creating from scratch.

Save your changes and the newly created page layout will be displayed during the page layout selection under “Pages” tab. For example a new layout added with the name “No Button Landing Page” will show during new page creation as in the below picture in old Weebly editor.

Currently, Weebly editor will show the custom templates like below (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.

Warning: All header types and page templates can be chosen for standard and blog pages. Individual blog posts don’t have the option to choose neither header types nor section templates. Weebly premium plans have additional footer section for inserting section layouts.

Default Section Templates

In addition to the page layouts under “Pages” tab, Weebly also offers the following page templates. You can choose the layout right from the content area of the page by clicking on the “Add Section” button or by adding “Section” element.

• Gallery
• Contact
• Menu
• Featured
• Team

Earlier, Weebly was offering full page sectional layouts available under different categories and you can choose the one you like.

However, this has been completely changed now to select the layout from the “Section” element. Drag and drop the “Section” element in content area and click on the “Add Section” button. This will show the list of available templates for you to select and choose the one you want to insert. Once the template is selected, you will be shown the preview and have an option to save the template or cancel it and choose different layout.

Note: Section templates save considerable time without the need of building your own templates. Default templates can be reused easily on many pages thus improving the reusability.