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:

  • Type of Page Layouts available
  • Choosing the Page Template
  • Selecting and Changing a Page Layout
  • Adding your own Page Layout

How Can I Choose a Page Layout in Weebly?

There are two easy ways to choose any of the default page layouts available.

  • Choose “Header Type” under “Pages” tab.
  • Click on the “Choose a Layout” button on the content area of a page under “Build” tab.

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:

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
Weebly Landing Page Layout

Adding slider in the header is only available for Weebly pro users, learn more here.

Free users can however add a header slideshow by modifying the source HTML/CSS, learn more here.

  • Tall Header Page:

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
Weebly Tall Header Page Layout

  • Short Header Page:

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
Weebly Short Header Page Layout

  • No Header Page:

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

Weebly No Header Page Layout
Weebly No Header Page Layout

  • Splash Page:

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
Weebly Splash Page Layout

  • Title Page:

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
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
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
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
Preview the Chosen Page Template in Weebly

Page 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.

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
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
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.

Uploading or Adding New Header Type in Weebly
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
Weebly Page Layout Selection

All header types and page templates can be chosen only for standard pages. Blog posts don’t have options to choose neither header types nor different templates.

Starter, Pro and Business plans have additional footer layouts selectable directly from the content area of the page editor.

Editorial Staff at WebNots are team members who love to build websites and share the learning with webmasters community. Follow us on Facebook and Twitter.

1 thought on “How to Select Page Layout in Weebly Site?”

Leave your response.

  1. Hello, I love some of your new web designs and I’m doing a mockup of the site before implementing in my main site. In your ‘clean lines’ template it shows an image with words over the image, and more content below. I am having problems replicating that combination.

    Of course, I’m able to put together the image with title and text below, but not able to put the wording OVER TOP of the image; I’m also able to create a splash page with text over top of the image, but then I’m not able to add content below that.

    I’ve searched for tutorials on how to do this, but haven’t seen anything so far and getting frustrated that I can’t set it up like in the sample. Can you help with this? Is there something I’m missing?

    Thank you,
    Virginia

    Reply

Leave a Comment