Adding and Editing Page Sections in the Classic Builder

Follow

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 describes how to:

Add a Page Section in the Classic Builder

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

  1. Drag and drop the Section sectionbutton.png widget to the center of the Classic Builder.
  2. Expand and contract the Section borders 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 Classic Builder:

properties.png

(Not to be confused with the Page Properties tab).

The Geometry Section

geometry.png

  • 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

border.png

Use the Border fields to determine the type, color, thickness, and location of the section's border.

The Corner Radius slider allows you 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

background_menu.png

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:

background.png

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.

Note:

When selecting the parallax feature, you will not notice a change in the Classic Builder. You can view the parallax effect in the Preview mode once the page is published. This feature is not currently available in mobile view.