Borders

```mediawiki Navigation: Main_Page > Pages > Page Blocks > Borders

How to use borders with page blocks

Introduction

In ActiveCampaign, the Borders feature allows users to enhance the visual appeal of their landing pages by framing page blocks with defined borders. This feature is particularly useful for emphasizing important content and improving overall layout aesthetics. With the ability to customize border style, color, and radius, you can quickly create engaging and professional-looking pages that align with your brand's identity. It is essential for users to understand how to effectively use this feature to optimize the visual presentation of their content.

How to access this feature

To access the Borders feature, you need to open the page editor in ActiveCampaign. Once in the page editor:

1. Navigate to the block you wish to customize. 2. Click on the selected block to reveal the details on the right pane, where you can find options to add and modify borders.

Step-by-step instructions

Follow these steps to add and customize borders for your selected page blocks:

1. **Select a block**: Click on the desired block in the page editor to make it active. The right pane will display various customization options for the selected block.
2. **Activate sides**: You will see four sides (top, right, bottom, left) that you can activate for borders. When each side is active, it turns blue.
3. **Set border width**: Adjust the border width using pixels as the unit. This width dictates how thick the border will appear.
4. **Choose border color and opacity**: Click on the blue tile corresponding to the active side(s) to access the color options. The available colors are derived from your theme's color palette, allowing you to maintain consistency with your branding.
5. **Select border style**: You can choose from three border styles:

  - **Solid** (default)
  - **Striped**
  - **Dotted**

1. **Activate corners**: Similar to the sides, you can activate the corners (top-left, top-right, bottom-left, bottom-right) by clicking them. When active, corners will also turn blue.
2. **Adjust corner radius**: Use the Radius input field to set the curvature of the corners. This initial setting uses relative units (%), but you can switch to pixels (px) by clicking on the "%" label in the input field and selecting "px."
3. **Manual adjustments**: Both the border and radius input fields allow for adjustments. You can click on them and drag the mouse left or right to increase or decrease values, or manually enter your desired values in the fields.

Configuration options and settings

When customizing borders for page blocks, consider the following configuration options:

- **Border Width**: Measured in pixels, controlling the thickness of the border. - **Border Color and Opacity**: Select from theme colors to maintain consistency; opacity settings will affect the clarity of the color. - **Border Style**: Choose between solid, striped, or dotted styles for varied visual effects. - **Corner Radius**: Modify how rounded the corners of the block appear, with adjustable values in both percentage and pixel units.

Best practices and tips

To make the most of the Borders feature, consider the following best practices:

- Select border styles that complement the overall design of your page, ensuring that the choice enhances readability and visual hierarchy. - Use contrast judiciously; opt for border colors that stand out against the background but still align with your theme. - Keep the corner radius consistent across elements to ensure a cohesive look. - Regularly preview your changes to see how borders affect the overall layout before publishing the page.

Common use cases with examples

Here are some common scenarios in which the Borders feature can be utilized effectively:

- **Highlighting Calls to Action (CTAs)**: Use a thick, colorful border around buttons or CTA blocks to draw user attention and encourage clicks. - **Creating Separation**: Frame different content sections (like testimonials, service offerings, or contact information) with borders to visually separate them for better user understanding. - **Branding Elements**: Use customized border styles that reflect your branding, such as specific colors or types, for a consistent look across all pages.

Troubleshooting

Here are some common issues users might encounter when using the Borders feature and suggested solutions:

- **Borders not appearing**: Ensure that you have activated at least one side or corner of the block. If no sides or corners are active, no border will be visible. - **Color not applying correctly**: Verify that the color selected is compatible with the block’s background. Choose colors that provide good contrast for visibility. - **Radius adjustments not taking effect**: Make sure you are clicking on the appropriate corner area and that the radius value is set within the expected range.

FAQ

1. What plans include the Borders feature?

The Borders feature is available for users on the Plus, Pro, and Enterprise plans.

2. Can I use images or patterns as borders?

Currently, borders can only be customized using colors and styles (solid, striped, dotted) from the theme's palette. Images or patterns as borders are not supported.

3. Is it possible to change border settings after saving?

Yes, you can revisit the page editor at any time to modify border settings for any selected block.

4. What happens if I deactivate a side of the border?

If you deactivate a side, it will no longer display, effectively removing that segment of the border from the selected block.

5. Can I apply different border styles to different sides of the same block?

Yes, you can customize each side of the block individually, allowing for a unique look by selecting different styles and settings.

6. How do I reset the border settings to default?

You can manually reset each border property to its original state by re-selecting the defaults; however, there isn’t a single “reset” button for all settings.

7. Are there any limitations to border width and radius?

While you can set both border width and corner radius values, they should be reasonable for the visual design; extremely large or small values may not render as expected on all devices.

For further information on how to enhance your page design using ActiveCampaign features, check out the related documentation in the Pages and Page Blocks categories. ```