Add columns

```mediawiki Navigation: Main_Page > Pages > Landing Pages > Add columns

Add columns to your ActiveCampaign page

Introduction

The ability to add columns to your landing pages in ActiveCampaign is a powerful feature that allows you to create dynamic and visually appealing layouts. This feature is especially essential for marketers looking to optimize their landing pages for better engagement and conversions. By using the Column block, you can organize various content blocks, maximizing the utility of the page's real estate.

This article will guide you through the process of adding columns to your landing pages, how to access the feature, and best practices for designing effective columns.

How to Access This Feature

To start using the column feature, you need to navigate to the landing page editor within ActiveCampaign.

1. Log in to your ActiveCampaign account. 2. Go to the Pages section. 3. Select Landing Pages. 4. Open or create the landing page where you wish to add a column.

Once in the page editor, you will be able to access the Column block from the right pane.

Step-by-Step Instructions

Follow these steps to add a column to your landing page:

1. **Drag the "Column" block** from the right pane into your desired position on the page layout. 2. **Click the block** in the layout. This will open the editing options in the right pane for further customization.

Styling and Editing the "Column" Block

Once you have added a column, you can customize its appearance using the following tabs in the editing pane:

- **Column**: This tab allows you to adjust vertical spacing and appearance, including:

 - Width - Set the size in pixels or percentage.
 - Background - Add a background color, gradient, image, or video.
 - Inner spacing - Specify spacing between the content blocks and the column border.
 - Border - Set borders using pixels, with options for solid, dashed, or dotted styles.
 - Corners - Customize the border radius of your column corners.
 - Drop shadow - Add drop shadows and configure their appearance by setting offset, blur, and spread.
 - Inner shadow - Similar to drop shadow but applied inside the column.

- **Row**: This tab manages how the column appears when viewed on mobile devices. You can set whether it will stack or display as full-width.

 - Other options include visibility settings, backgrounds, inner spacing, borders, and shadows.

- **Section**: This tab focuses on the enclosing section around your column. You can add an ID for easy reference, control visibility, backgrounds, and borders just as you would for the column.

Duplicating and Deleting a Column

- **To duplicate a column**: Click on the desired column and select the duplicate icon in the top right corner. This will create a copy of the column in the same position. - **To delete a column**: Click on the column you wish to remove and click the trash icon in the top right corner.

Configuration Options and Settings

When adding and customizing columns, consider the following configuration options:

- **Column Width**: Adjustable by pixels or percentage. - **Background Options**: Customizability of backgrounds, including color, gradient, image, and video. - **Inner Spacing**: Control spacing around the various blocks within the column. - **Borders and Shadows**: Customize the visual appeal with borders and shadows.

No limitations exist on the number of columns you can create, allowing for flexible page designs.

Best Practices and Tips

- **Utilize spacing effectively**: Effective use of inner spacing will help in creating a clear distinction between different content blocks in the column. - **Use backgrounds strategically**: Backgrounds should enhance readability while avoiding distractions. Choose contrast wisely. - **Design for mobile**: Always check how columns stack on mobile devices to ensure optimal user experience. - **Group relevant content**: Keep similar content within the same column to help direct user attention and engagement.

Common Use Cases with Examples

- **Promotional sections**: Use columns to showcase different offers side by side. For example, one column for a product video and another for testimonials. - **Newsletter sign-ups**: One column could feature a compelling call-to-action with a Subscribe Form, while another could display enticing benefits for signing up. - **Event showcases**: Use multiple columns to detail event information like date, location, and registration options.

Troubleshooting

Here are some common issues you may encounter: - **Column does not display correctly**: Ensure that the layout view is set up properly. Check mobile and desktop visibility settings. - **Backgrounds not appearing as expected**: Verify that you've added background options correctly and that they are not obscured by other elements. - **Duplicated columns displaying incorrectly**: After duplicating, check the settings of the new column as it may carry over unwanted styles from the original.

FAQ

1. Can I add multiple columns on a landing page?

Yes, there is no limit to the number of columns you can add to a landing page.

2. What types of content can I add inside a column?

You can add various content blocks such as text, images, videos, buttons, forms, and more.

3. Are there any blocks I cannot use in a column?

You cannot add Section, Row, or another Column block inside a column.

4. How do I change the background of a column?

Click on the column and adjust the Background settings in the right pane.

5. What should I do if my column does not appear?

Check that the column is properly placed in the layout and that visibility settings are configured correctly.

6. Can I customize the column borders?

Yes, you can set borders using pixels, choosing between solid, dashed, or dotted styles.

7. How do I preview my changes on mobile?

Use the mobile view option within the page editor to see how your columns appear on mobile devices.

By following this guide, you should be well-equipped to effectively utilize the Column block in your ActiveCampaign landing pages, enhancing visitor experiences and improving conversion rates. ```