Adding multiple sections to your landing page is a great way to structure and organize your page content. In the Unbounce Builder, you can add background images to your entire page sections, adjust their size and positioning, add background videos, and more!
This article describes how to:
- Add sections
- Edit section properties & styles
The Section Widget is the foundation for your landing page.
It’s the first item that must be added to a landing page. The Unbounce Builder won’t let you add any content outside of a page section, so ensure that you add or expand your page section before you add content to a specific area.
To add a page section to your landing page, drag and drop the Section widget to the center of the Unbounce Builder.
Expand and contract the Section borders by using the guides positioned at every corner.
Once you’ve added a page section to your landing page, you can proceed to add new elements to your page.
Editing Your Page Section Properties
Once you've added or selected (single clicked) a page section, you can edit your page section’s appearance by using the Properties tab on the right side of the Builder.
The GEOMETRY Section
- Use the Size fields to manually adjust the Width and Height of your page section.
- Use Gap Below to adjust the space beneath the page section.
The BORDER Section
- Use the Border fields to determine the type, color, thickness and location of your border, and where around the frame you’d like to apply it.
- The Corner Radius slider allows you round the corners of your section frame - click the + button to expand and round only certain corners, and/or select Ensure maximum curvature! to apply the roundest corners possible for the size of your page section.
The BACKGROUND Section
Use the Style drop-down menu to determine what type of background you’d like to apply to the section. Each different style will have its own unique modifiers. Select from the following options:
- Solid Color: allows you to choose the color and opacity of your background.
- Image: allows you to upload & create a background image. The Builder provides you with extra options to select: add a parallax effect, stretch the image to the page edges, or fit the image to the container.
- Pattern: allows you to upload an image that will repeat and created a patterned effect for your background. You can also change the position and tiling of your pattern by expanding the Advanced Settings.
- Gradient: allows you to choose colors to create a gradient effect on your background. Choose the base, top and bottom colors to create your effect.
- Video: allows you to select a video source and play that video in the background of your page. Follow our documentation for more info on adding video backgrounds.
Some information on extra options:
- A Parallax effect affixes the background on the page and keeps the image in place while the rest of your page scrolls past the image.
- Fitting the image to the container will constrain the image to within the dimensions of your page section.
- Stretch the image to the page edges will adjust your background image to fit the entire width of your page.
- Color Overlay/Underlay and Opacity 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.
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. This feature is not currently available in mobile view.