You can add rows to any landing page you create in ActiveCampaign with the "Row" block. Once a row is added, you can adjust its size and add other blocks to it, such as text, buttons, or video. Like other blocks, you can add, edit, duplicate, and remove a "Row" block from any page.
About the "Row" block
The "Row" block is located in the right pane of the page editor. It can contain other blocks. For example, you can add the following content blocks to a "Row" block:
- Text (paragraph)
- Button
- Subscribe Form
- Image & Caption
- Follow Links
- Bulleted List
- Video
- Navigation
- Headline
- Form
- Image
- Divider
- Countdown
- Embed
Note that you cannot add the following blocks to a column:
There is no limit to the number of columns that can be added to a page.
Add a row to your page
To add a row to your page layout:
1. From the page editor, drag the "Row" block to your page layout.
2. Click the block in the layout to open styling and editing options in the right pane.
Style and edit the "Row" block
You can edit the size and look of any row on your page. There are three tabs you can use to style and edit the "Row" block: Column, Row, and Section. To access these options, click the row block you wish to update.
Column styling
The "Column" is the vertical space of the "Row" block. You can adjust the width of a row.
To access this styling option, click the row block on the page builder. The column styling option will appear on the right pane and display the following options:
-
Width
Row width can be set by either px or %. -
Background
You can add the following to a background: Color, Gradient, Image, and Video. Add as many backgrounds to your row as you like. Backgrounds stack in the order in which you add them. You can change their order by dragging and dropping them. -
Inner Spacing
Type a number into the field provided to add spacing between the blocks you add to the row. Increasing inner spacing will make your row bigger on the page. You can choose which sides have inner spacing. -
Border
Borders are set with pixels. You can choose which sides have borders. To do so, click the side of the border icon in the right bar you wish to apply a border to. 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 borders. To do so, click the color tile, then click the color you wish to apply to the border. -
Corners
Corners are set by either px or %. You can apply a new radius to one, some, or all corners of your row. To do so, click the corner of the corner icon in the right bar you wish to adjust the radius for. -
Drop Shadow
Access drop shadows on the selected row. 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. -
Inner Shadow
Access inner shadows on the selected row. 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.
By default, rows are set to be mobile responsive. This means that a row's columns will stack on mobile devices.
Row styling
The "Row" is the horizontal space of the "Row" block. With this option, you can choose how your row block will appear when viewed on mobile devices. For example, you can choose for the row block to stack on mobile (recommended) 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 row block on the page builder. The column styling option will appear on the right pane. 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 that contains your row block. 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.
To access this styling option, click the row block on the page builder. The column styling option will appear on the right pane. Click "Sec" located at the top of the right pane to view styling options.
Duplicate a row
You can duplicate any row in your page. To do so, click the row you wish to duplicate, then click the duplicate icon in the top right bar.
Delete a row
You can delete any row from a page. To do so, click the row you wish to remove, then click the trash icon in the top right bar.