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
Since everything depends upon the theme you use, we recommend you to read the article on using responsive themes in Weebly for better understanding. You can go to “Themes > Change Theme” section and choose one of the responsive themes. Scroll down on the same page and click “Show Old Themes” button to view and select a non-responsive theme.
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.
- Standard Page
- Blog Page
- Category Page
- Product Page
- External Page
- Non-clickable Menu
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.
Offer: Get 10% discount on all Weebly plans.
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.
It is also possible to add custom Page Layout to your Weebly site. This can be done by editing source HTML/CSS option under “Theme” tab as explained in this article. Newly created page layout will be available for selection under “Header Type” dropdown in responsive themes and under “Page Layout” selection in non-responsive themes.
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 option to edit footer layout.
Using Section Templates in Weebly Responsive Themes
In addition to the page layouts under “Pages” tab, Weebly also offers the following page templates. You can choose these layouts 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.
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.
Note: Section element is only available in responsive themes. When you switch a theme with sections to a non-responsive themes, Weebly will show a warning and merge the section elements together.
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