Add Section blocks

```mediawiki Navigation: Main_Page > Pages > Design > Add Section blocks

Add Section Blocks to Your ActiveCampaign Page

Introduction

The Section block is a powerful feature in ActiveCampaign that allows users to enhance their page layouts by adding various types of content blocks, such as navigation bars and buttons. By utilizing the Section block, users can create a structured and visually appealing page that caters to their audience's needs. This feature is crucial for optimizing user engagement and navigation, ensuring your content is presented in a user-friendly manner.

This article will guide you through the steps to access and utilize the Section block effectively on your ActiveCampaign pages, along with configuration options, best practices, and troubleshooting tips.

How to Access This Feature

To begin using the Section block, navigate to the Pages section of your ActiveCampaign account. Once there, you can open an existing page or create a new one. The page builder interface will allow you to drag and drop the Section block into your desired layout.

Step-by-Step Instructions

Adding the Section Block

1. Go to the Pages section and select the page you wish to edit or create a new page. 2. Drag the Section block from the left pane into your page layout.

Styling and Editing the Section Block

Once you have added the Section block, you can customize its appearance using three different tabs: Column, Row, and Section.

Column Styling

- **Width**: Set the content block width in either pixels (px) or percentage (%). - **Background**: Choose from various options including Color, Gradient, Image, and Video. - **Inner Spacing**: Adjust the spacing between the inner blocks and the section borders. - **Border**: Customize using pixels, with options for solid, dashed, or dotted styles. - **Corners**: Modify the corner radius in pixels or percentages. - **Drop Shadow**: Apply a drop shadow effect by selecting its position and configuring the Offset, Blur, and Spread. - **Inner Shadow**: Similar to drop shadows, but applied inside the section.

Row Styling

- The Row styling helps control the horizontal arrangement of content blocks in relation to mobile views. Configure how your content stacks on mobile or appears full-width. Additionally, you can adjust visibility settings, background colors, and spacing.

Section Styling

- In the Section settings, you can add an ID for navigation purposes, choose visibility, and apply backgrounds, spacings, borders, and shadows. To encourage better user interaction:

 1. Click on the Section block.
 2. Click on the Sec tab at the top.
 3. Enter an ID in the provided field.
 4. Click the blue checkmark to save your changes.

Duplicating and Deleting a Section =

To manage your blocks efficiently: - **Duplicate a Section**: Click on the desired block and select the duplicate icon in the top right bar. - **Delete a Section**: Click on the block and select the trash icon in the top right bar.

Jumping to a Section =

Enable users to navigate through sections by using buttons, hyperlinked text, or images: 1. Click on the item for navigation. 2. In the right pane, select the dropdown menu for On Click. 3. Choose Jump to Section. 4. Select the section ID from the dropdown. 5. Click the blue checkmark to save your settings.

Ensure your sections have assigned IDs to facilitate this functionality.

Configuration Options and Settings

The following features are critical when utilizing the Section block: - **Width** - **Background** - **Inner Spacing** - **Border** - **Corners** - **Drop Shadow** - **Inner Shadow** - **ID Assignment**

Each of these features plays a significant role in designing an effective layout that caters to both desktop and mobile users.

Best Practices and Tips

- Always assign a unique ID to each section for better navigation options. - Use contrasting backgrounds and spacing to make different sections stand out. - Preview your changes frequently to ensure that the layout looks good on both desktop and mobile devices. - Consider the flow of content when stacking multiple Section blocks to maintain user engagement.

Common Use Cases with Examples

- **Multi-section Landing Pages**: Use multiple Section blocks to create a visually segmented landing page that guides users through different offerings. - **Product Showcases**: Combine Image & Caption, Text, and Button blocks within a Section to effectively display product details. - **Event Announcements**: Create a Section for each event with relevant information, allowing users to jump to different sections quickly for specific details.

Troubleshooting Section

If you encounter issues while using the Section block: - Confirm that you have correctly assigned IDs to each section to enable the Jump to Section feature. - If the section isn't displaying as intended, check the configuration settings for Background, Inner Spacing, and Border.

FAQ

Q1: How many Section blocks can I add to a page? A1: There is no limit to the number of Section blocks you can add; however, your page must have at least one section.

Q2: Can I add a Section block inside another section? A2: No, you cannot add a Section block within another section.

Q3: What types of content can I place within a Section block? A3: You can place various content types, including Text, Button, Image & Caption, and many others.

Q4: How do I ensure my section looks good on mobile? A4: Use the Row styling options to adjust the layout for mobile devices.

Q5: Is there a requirement for the ID of a Section? A5: Yes, assigning an ID to a section is best practice for navigation purposes.

Q6: What if I can’t select a section for the Jump to Section functionality? A6: Make sure that all sections have an assigned ID. If the dropdown does not appear, check your section configurations.

Q7: How can I duplicate a Section block? A7: Click on the block you wish to duplicate, then select the duplicate icon in the top right corner.

By following the guidelines and tips provided in this article, you can effectively utilize the Section block to enhance your ActiveCampaign pages, creating a more engaging experience for your users. ```