Using Page Sections

Page sections are where all of the content on your page lives. For any content to exist on your page, it has to be placed within a page section. Think of page sections as a basic way to organize the flow of your landing page.

This article will help you out with:

  • Creating page sections to host content on your landing page
  • Managing the properties (design) of your page sections

Adding and Editing Page Sections

Drag and drop the Page Section Widget from the Widget Panel on the left to add a new one.

Use the guides at the Page Section borders to expand or contact. (You can change page width from your Page Properties.)

Note: you can only add content to a Page Section.  If you try to add content outside a page section the Page Builder won't let you - just add or expand a page section where you want to add the content and place it there.


Page Section Properties

Once you've added or selected (single clicked) a page section you'll see its Properties Pane on the right of the Unbounce Landing Page Builder:

Geometry

You can manually adjust the height of and gap below a page section.  Width is set from your Page Properties.

Border Properties

Select a border type, color, and location and apply it to all or part of your page section.  Add a corner radius - click the plus to round only certain corners - and select "Ensure maximum curvature" to apply the roundest corners possible for the size of your page section.

Background Properties

Indicate whether you'd like the background of your page section to stretch to the edge of the page section, or to the edge of the total page.  The background fill options are solid color, image, or gradient.

Color and gradient backgrounds

Choose your colors (for gradient this includes base, top, and bottom)

Choose the opacity of the background

Position and tiling

If you’ve selected an image for your background that is much smaller than the container area, you can opt to set the background as a "Pattern", then select the position and tiling.

Image backgrounds

These features will be particularly useful to Themeforest designers or those working with Themeforest templates, as well as users less familiar with custom code who would like to include advanced functions such as parallax. 

Scale to fit container

Our background image formatting options allow you to scale the image to fit its container (in this case a page section), and then adjust it to the width of the container, or to the width of the total page. You can also use this feature to create an image background within a box.
 

There are several other background options that you should know about

Fixed background as you scroll (parallax)

Fixing an image background during scrolling (also called parallax), is a visual style that creates a ‘sticky’ background image while the user moves down the page. Parallax is an increasingly popular design element which typically requires custom code. With Unbounce, you can activate parallax at the click of a button.

When you select the parallax feature, you will not notice a change in the page builder canvas. You can view the parallax effect through the page preview, and once the page is published.

The parallax feature is not currently available in mobile view

Color overlay and opacity

Color overlay allows you to add a ‘tint’ effect to your background image using a color of your choice. A color overlay of 100 will completely saturate the page section with your selected color.


Glossary

Page Sections: where the content on your landing page lives. You can't add an element without first creating a Page Section in the area where you'd like to place the element.

Page Section Properties: where you'll see the properties (geometry, border properties, and background properties) of the page section that you clicked.

 

Back to: Building Your Landing Pages >>

Powered by Zendesk