How to Select Page Layout in Weebly Site?

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 template for your services of contact page instead of building it from the scratch. Here we discuss the following three topics in detail:

What are the Page Layouts Available?

There are six basic Page Layouts available under “Pages” tab to suit your site based on the requirements.

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 a home page of a website.

Weebly Landing Page Layout

This page layout consists of an image spreading to the full width of your site and the content area below it. There is no place to add any text in the header area.

Weebly Tall Header Page Layout

This is as same as Tall Header Page with a different that the image height is smaller. You can’t add text in your header area.

Weebly Short Header Page Layout

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

Weebly No Header Page Layout

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.

Weebly Splash Page Layout

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

Weebly Title Page Layout

Default Page Templates

In addition to the Page Layouts under “Pages” tab, Weebly offers the following page templates which you can choose right from the content area of the page by clicking on the “Choose a Layout” button.

• Home
• About
• Services
• Contact
• Menu
• Portfolio

Choose a Layout in Weebly

There are different types of templates available under each category and you can choose the one you like.

Choose Page Templates in Weebly

Once the template is selected, you will be shown the preview of the same and have an option to keep the template or cancel it.

Preview the Chosen Page Template in Weebly

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 for that particular page. Any time later you can come back and change your page layout here. Note if you have done any changes in a particular page layout, you need to do the same change again in your new page layout. For example – if you opted for tall header page and edited the  HTML 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 to disable the footer message.

Weebly Page Layout Selection – Pages Tab

You also have an option to change the page layout instantly by clicking the settings button in the Page Layout image as shown below. If you have selected no header page then there is no option other than changing the Page Layout under “Pages” tab as explained above.

Change Page Layout in Weebly

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.

Adding New Header Type in Weebly

The new header type will be created with the name as “untitled.html” and with minimum HTML codes for body, head and footer like a blank template. You can rename the header type, add the desired code and preview your layout below the code editor.

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” is showing during new page creation as in the below picture.

Weebly Page Layout Selection