Editing 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.
```