Add Section blocks to your ActiveCampaign page

A "Section" block enables you to add various types of content blocks to your page, including navigation bars, buttons, and more. Once a section is added, you can adjust its size, background, border, corners, and more. Like other blocks, you can add, edit, duplicate, and remove a "Section" block to any page or page template.

About the "Section" block

A "Section" block houses other content blocks; any of the blocks (see below) you wish to use on your page must be placed within a section. Clicking on each link takes you to more information about that block. 

• Row (can also house content blocks)
• Column (can also house content blocks)
• Text (paragraph)
• Button
• Subscribe Form
• Image & Caption
• Follow Links
• Bulleted List
• Video
• Navigation
• Headline
• Form
• Image
• Divider
• Countdown
• Embed

Note that you cannot add a "Section" block to a section.

There is no limit to the number of sections that can be added to a page. However, your page must have at least one. If you start from a blank page template, we've added the required section for you.

Add the "Section" block to your page

To add a section to your page layout, drag the "Section" block to your page layout.

Style and edit the "Section" block

You can edit the size and look of any section on your page. There are three tabs you can use to style and edit the "Section" block: Column, Row, and Section. To access these options, click the section block you wish to update. 

Column styling

The "Column" is the vertical space of the "Section" block. You can adjust the width of a section. Doing so is especially helpful when you have multiple sections side by side on a page. 

When you click on a content block in your section, the Column styling area appears on the right pane. It contains the following options:

1. Width
   Content block width in a section can be set by either px or %.
2. Background
   You can add the following to a background: Color, Gradient, Image, and Video. Add as many backgrounds to your section as you like.
3. Inner Spacing
   Type a number into the field provided to add spacing between the blocks you add into the section and the section border. Increasing inner spacing will make your section bigger on the page. You can choose which sides have inner spacing.
4. Border
   Borders can be set using pixels. You can choose which sides have borders. You can pick one of three types of borders: solid, dashed, or dotted. Initially, it's set to solid. Note that you can also add color to your border by using the color tile.
5. Corners
   Corners are set by either px or %. You can apply a new radius to one, some, or all corners of your section.
6. Drop Shadow
   Access drop shadows on the selected section. Here you can choose where the drop shadow should appear and set the Offset, Blur, and Spread fields. You can add as many drop shadows as you want by clicking the plus (+) sign in the Right Bar in the "Drop Shadow" section.  
7. Inner Shadow
   Access inner shadows on the selected section. Here you can choose where the inner shadow should appear and set the Offset, Blur, and Spread fields. You can add as many inner shadows as you want by clicking the plus (+) sign in the Right Bar in the "Inner Shadow" section.  

Row styling

The "Row" is the horizontal space of the "Section" block. With this option, you can choose how your content block(s) in a section will appear when viewed on mobile devices. For example, you can choose for content blocks to stack on mobile or appear full-width.

Here, you can also select visibility (desktop view and mobile view), add a background, adjust inner spacing, border color, size, and corners, as well as add drop and inner shadows.

To access this styling option, click the section block on the page builder. The column styling option will appear on the right pane by default. Click "Row" located at the top of the right pane to view styling options. 

Section styling

The "Section" area (Sec) looks at the Section block as a whole. Here, you can add an ID to your section, choose visibility (desktop view and mobile view), add a background, adjust inner spacing, border color, size, and corners, as well as add drop and inner shadows.

Once you add a section to your account, it's best practice to assign an ID to it. This allows you to leverage the "Jump to Section" action, which enables contacts to navigate your page by clicking on a specific section. To do so:

1. Click the "Section" block you want to update.
2. Click "Sec" at the top right of the pane.
3. Enter the ID into the field provided.
4. Click the blue checkmark at the top to save your changes. 

Duplicate a section

You can duplicate any block on your page. To do so, click the block you wish to duplicate then click the duplicate icon in the top right bar.

Delete a section

You can delete any block from a page. To do so, click the block you wish to remove then click the trash icon in the top right bar.

Jump to a section

You can enable contacts to jump to different sections within a page when they click on a piece of content. This includes buttons, hyperlinked text, images, and the "Navigation" block. To use the "Jump to a section" action:

1. Click on the item (button, hyperlinked text, or image) that a contact will click to prompt the jump.
2. The right pane will open and display a list of options. Click the dropdown menu for "On Click."
3. Click the "Jump to Section" menu item. 
   
    
4. A second dropdown menu will appear.
5. Open the "On Click" dropdown menu, then select "Jump to Section."
6. The "Select a Section" submenu will open, listing all section IDs for your page. Click the section you want to use as your destination.
7. Click the blue checkmark at the top to save your updates. 

If the "Select a section" dropdown does not open, you'll need to check your page sections to ensure they have a value for their "ID" field. Learn more by reading the I cannot "Select a section" under "Jump to a section" in my Pages designer help article.