Adding and Editing Page Sections in the Classic Builder

Adding multiple sections to your landing page is a great way to structure and organize your page content.

In the Classic Builder, you can add background images to your entire page sections, adjust their size and positioning, add background videos, and more!

This article will explain how to:

• Add a Page Section in the Classic Builder
• Editing Your Section Properties

Add a Page Section in the Classic Builder

The Section widget is the foundation for your landing page. To add a page section to your landing page,

1. Drag and drop the Section  widget to the center of the Classic Builder:
   

After adding a section, you can proceed to add new elements within that section.

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 Classic Builder:

The Geometry Section

• Use the Size fields to adjust the Width and Height of your page section manually.
• 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 the section's border.

The Corner Radius slider allows you to round the corners of your section frame - click the + button to expand and round only certain corners, 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.

From the drop-down, select any of the following options:

1. Solid Color: Choose the color and opacity for the section's background.  
2. Pattern: Upload an image that will repeat and create a patterned effect for the section of the background.
   • You can also change the position and tiling of your pattern by expanding the Advanced Settings.
3. Gradient: Select three colors to create a gradient effect for your section.
   • Choose the base, top, and bottom colors to create your effect.
4. Video: Select a video source and play that video in the background of the page section.
5. Image: Upload an image you'd like to use as the background image for that section. 

Advanced Settings within the Background Section

For some background styles, the Classic Builder provides extra options to select by clicking the Advanced Settings option:

For example, 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 within the dimensions of your page section.

Color Overlay/Underlay and Opacity allows you to add a 'tint' effect to your background section's image/video, using a color of your choice. A color overlay of 100 will thoroughly saturate the page section with your selected color.