Skip to Main Content

Making a Weebly Site: Advanced Page Options

Here you'll find exercises, videos, and resources related to creating your own site on the Weebly platform.

Follow Along

Click here to view the different advanced page options: splash pages, headers, and sections.

Advanced Page Options

1. What is a splash page / header?

A splash page is a page that precedes any page on your website.  Typically, a splash page (sometimes also called a "splash screen" or "landing page") is the first thing a user sees when visiting a website.

2. What is the purpose of the splash page?

The purpose of the splash page can vary.  It can be used to: 1) welcome visitors to a website, 2) announce a new feature or update, 3) guide visitors to a tailored website experience (e.g. language preference).

3. What elements are found on a splash page?

Typically, a splash page is highly visual with limited text, as the splash page is meant to convey a quick, important message.

4. Splash page examples

Take a look at this article "11 Killer splash page designs to get you inspired before your launch."

5. How to create a splash page in Weebly

View this YouTube tutorial from Weebly about different header options.

Flexible Headers give you incredible creative control over the look of your pages. You can add and remove elements, customize the background, and adjust the height of the header area.

1. Elements of a header

The header will have a few default elements in place when you add a new page, but you can pick a different layout by clicking on the Header Section and then on Replace Header Layout. You can preview and choose from several customizable layouts, or you can just delete the default elements and manually drag in whatever you prefer.

2. Header background

You can customize the background for your header with an image or solid color, and if you’re a Pro subscriber you can also add a video background. Click on the header and then on Edit Background to add a new background or modify the existing one. To learn more about custom backgrounds, read the in-depth guide here.

To save your header to other pages, click on Edit Background, then Advanced - you can then choose which pages you want to save the image to.

3. Video tutorial

For more information about customizing your headers, view this YouTube tutorial from Weebly.

 

 

The Section element gives you the ability to create engaging pages that will delight your visitors. You can drag other elements into sections, customize the background, and change the height and position on the page.  To add a new section onto a page, drag the Section element from the Build tab onto your page.  (Note: you can't add sections to splash pages.)

1. Section layouts

When working with a selected section, click on any one of the layout styles to see a preview of how it will appear on your page. If you like what you see, go ahead and save. You can then rearrange, add or remove any of the elements in the layout and customize them with your own content.

Don’t see anything you like in the section layouts? No problem - you can add elements manually, too! Just click outside of the layout panel to cancel and start dragging in the elements you want.

Each section on a page can have its own unique background color or image. Click on the section and then on Edit Background.

2. Section height

To make a section taller or shorter, click on it and drag the blue bar at the bottom up or down to adjust the height, which will be displayed in pixels as you move the bar. If the tool tip says “Auto”, that means the section can’t be made any shorter, so you’ll need to remove some elements first.

3. Move or copy a section

You can move or copy your section to other pages.  Click on the section and then on Move. You can move a section up or down in position on the same page, move it from one page to another, or copy it to a different page or to the same page.

4. Video tutorial

For more information about working with sections, view this YouTube tutorial from Weebly.