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.
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.
- 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.
- No Header Page:
This page layout has neither image nor text and provides more space for your content.
- 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.
- 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.
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
There are different types of templates available under each category and you can choose the one you like.
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.
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.
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.
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, 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.
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.
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