Learn about the different blocks you can use to build and customize a landing page using ActiveCampaign.
Pages is available on the following plans:
You can use drag-and-drop blocks to customize any page you create in ActiveCampaign. Doing so will allow you to add and edit text, display images and videos, collect contact information, and more.
In this article, you'll learn about the different blocks available in the Page builder.
Types of blocks
You can choose from any of the blocks below to create and customize your landing page.
||Add a section to your page and add other content blocks to it.|
||Add a row to your page and add other blocks to it.
||Add a column to your page and add other blocks to it.|
||Add navigation to your page and guide visitors around.|
||Add, edit, and style text.|
||Add an attention-getting headline to your page.|
||Add a button that lets visitors download files or redirect them to your website.|
||Add a form to your page that collects contact information.|
||Add a subscription form to your page.|
||Add an image to your page.|
Image & Caption
||Add an image with a caption.|
||Add a horizontal line to your page.|
||Add social icons to your page so visitors can follow you on social media sites.|
|Countdown||Add a countdown clock to your page to create a sense of urgency.|
||Add a bulleted list to your page.|
||Add your ActiveCampaign form or other custom code to your page.|
||Add a video to your page.|
|PayPal||Add a PayPal button to your page so visitors can make purchases.|
Add, move, and delete page blocks
To add a component to your page, drag it to your page layout.
Once you add a content block to your page, you can easily move it. To do so, hover your mouse over the block you wish to move. Then drag the component to your desired spot on the layout.
You can duplicate any block you add to your layout. To do so, click the component you wish to create a copy of then click the "Duplicate" button in the top right bar.
Copy and paste blocks
You can copy and paste content blocks by using the keyboard shortcuts ⌘C and ⌘V on Mac and Ctrl-C and Ctrl-V on PC.
To remove a component from your design, click the block to select it, then click the trash icon in the top right bar.
Edit page blocks
Many blocks have functions and settings unique to them, but all blocks contain a similar set of styles you can edit in the right pane of the page editor when selected.
|1. Visibility||Make the block visible only on mobile view, on desktop view, or both. Click the icon to enable or disable its visibility on the device. Switch your Viewing Mode to see what your block will look like on a mobile device.
|2. Width||Width is either relative (a percentage) or absolute (to the pixel). By default, it's set to percentage. Click the "%" in the input field if you want to change it to “PX."
||Add as many backgrounds to your block as you please. Backgrounds stack in the order in which you add them. You can change their order by dragging-and-dropping them.
4. Inner Spacing
||Increase or decrease the amount of inner spacing by typing the number or dragging the input field left or right.
||Borders are set as a pixel value. You can choose which sides have borders. You can pick one of the three types of border styles: solid, dashed and dotted.
||You can round the corners of components by setting px or %.
7. Drop Shadow
||Add as many drop shadows as you please - they stack in the order in which you add them. You can change their order by dragging-and-dropping them.
8. Inner Shadow
||Add as many inner shadows to your block as you please. They stack in the order in which you add them. You can change their order by dragging-and-dropping them.
||Drag the slider left or right to change opacity.