Backgrounds

```mediawiki Navigation: Main_Page > Pages > Backgrounds

How to Add Backgrounds to Your ActiveCampaign Pages

ActiveCampaign allows you to customize your pages effectively by adding various types of backgrounds to enhance visual appeal and engagement. Understanding how to utilize the Backgrounds feature can significantly improve the aesthetics of your pages. This feature is particularly valuable for creating distinct sections within a page or for utilizing eye-catching designs in your overall layout.

This article outlines the steps you need to follow to add backgrounds to your ActiveCampaign pages, the types of backgrounds available, and best practices for using them effectively.

How to Access This Feature

To access the Backgrounds feature, follow these steps:

1. Navigate to the page you want to edit in the ActiveCampaign page editor. 2. Select the block in which you wish to add a background. The editing options for this block will appear on the right pane.

Step-by-Step Instructions

To add a background to a block, follow these steps:

1. **Select the Block:**

  From the page editor, click on the block you wish to add a background to.

2. **Open Background Options:**

  In the right pane, find and click the grey + symbol next to the Background section.

3. **Choose Background Type:**

  A modal window will appear with four background options: 
  - Color
  - Gradient
  - Image
  - Video

  Click the background option you wish to apply.

More editing options will then be presented depending on the selected background type.

Background Types

ActiveCampaign supports four types of backgrounds for your page blocks:

Color

- Color backgrounds utilize the colors defined in your page's theme. The default color is the first color in the theme's palette. - Click the square color selector on the left to alter the color, gradient, and opacity.

 - To select a new color, click the desired color tile.
 - Adjust the gradient by dragging the handle left or right.
 - Change the opacity similarly by dragging the appropriate handle.

Gradient

- You can create gradient backgrounds that begin with two color stops, represented by two handles.

 - To add a color stop, click on the horizontal gradient bar; a new handle will appear.
 - Remove a color stop by clicking its handle and dragging it away.
 - Modify a color stop by selecting a handle and picking a new color, and adjusting its gradient and opacity.
 - Dragging handles alters their position. 
 - Use the circular widget to change the gradient direction or switch to radial.

Image

- Image backgrounds can utilize any uploaded image from the file manager. - You can configure the image background by:

 - Replacing the current image.
 - Adjusting its position (center, top, bottom, left, right).
 - Setting it to repeat vertically and horizontally.
 - Modifying its size to ensure proper display without white space.
 - Applying parallax effects and adjusting opacity.

Note: Upload images that are below 5MB to use them as backgrounds.

Video

- You can use a looping YouTube video as a background:

 1. Select Video in the dropdown.
 2. Paste the YouTube video URL in the provided URL field.
 

- Adjust the parallax speed and opacity using the respective sliders.

Background Order

Backgrounds are layered based on the order in which they are added, with the most recent background displayed on top. You can reorganize backgrounds by dragging the handle on the left of any background and moving it up or down to the desired position.

Best Practices and Tips

- Utilize visually appealing backgrounds that align with your brand's theme to create a coherent design. - Avoid overly busy backgrounds that may detract from the main content; instead, aim for backgrounds that enhance readability. - Regularly review and update backgrounds to keep your pages fresh and engaging.

Common Use Cases

1. **Sales Landing Pages:** Use a gradient or video background to create a compelling initial impression that captures visitors' attention. 2. **Event Registration Pages:** Use a cohesive color background that matches your event's branding, ensuring clarity and visibility of registration forms. 3. **Product Showcase Pages:** Implement image backgrounds featuring your products to create an enticing visual experience.

Troubleshooting

If you encounter issues when adding backgrounds, consider the following:

- Ensure that images do not exceed the 5MB limit. - If a video background does not display, confirm that the URL is correctly entered and that it links to a public YouTube video. - If changes do not appear, try refreshing the page editor or clearing your browser cache.

FAQ

Q1: Can I use any type of image for the background? A1: No, you must use images uploaded to the file manager, with a maximum size of 5MB.

Q2: How many backgrounds can I add to a single block? A2: You can add multiple backgrounds to a block, stacking them in any preferred order.

Q3: What should I do if my video background does not play? A3: Ensure that the video URL is from a public YouTube video and is entered correctly.

Q4: Can I adjust the speed of a video background? A4: Yes, you can adjust the parallax speed of the video using the designated slider.

Q5: Are there any background types I cannot add? A5: Currently, you can choose from color, gradient, image, and video backgrounds only.

Q6: How do I change the positioning of an image background? A6: You can position an image by selecting its alignment (center, top, bottom, left, right) within the editing options.

Q7: Does using a video background affect page load time? A7: Yes, video backgrounds can impact load times, so it’s essential to ensure your video is optimized for web usage.

For more information on using backgrounds in ActiveCampaign, refer to other related features within the Pages category. ```