Editing Image & Caption (section)

= Add an Image & Caption block to your ActiveCampaign page =

== Introduction ==
The '''Image & Caption''' block is a key feature within ActiveCampaign's page editing interface that allows users to enhance their landing pages with visual elements. By adding an image alongside a descriptive caption, marketers can create more engaging and informative content that captures the attention of their audience. This feature is particularly valuable for creating visually appealing pages that convey messages effectively. The ability to customize their layout strengthens a brand’s identity and enhances user experience.

== How to Access This Feature ==
To access the '''Image & Caption''' block, navigate to the page editor within ActiveCampaign. The block is located in the right pane of the page editor, where you can easily drag and drop it into your desired layout.

== Step-by-Step Instructions ==
Follow these detailed steps to add an '''Image & Caption''' block to your page:

1. **Drag the block**: From the page editor, locate the '''Image & Caption''' block in the right pane. Click and drag it to your preferred location within your page layout.

2. **Select an image**: Upon placing the block, a modal window will appear prompting you to select the image you wish to use. To proceed:
   - Click on the desired image.
   - Click the '''Use Image''' button to confirm your selection.

   If you need to upload a new image, click the '''Upload''' option within the modal.

3. **Add a caption**: Once the image appears in the block:
   - Double-click the text area beside the image where a default caption is displayed.
   - Type in your desired caption. You can utilize the modal toolbar that appears to apply different styling options to your caption.

4. **Save your changes**: Don’t forget to click the checkmark button in the top right corner of the page editor to save your progress.

== Configuration Options and Settings ==
The '''Image & Caption''' block offers several configuration options that enhance its functionality:

* '''Width''' - You can set the width of the image using pixels (px) or percentages (%).
* '''Replace, Edit, and Alt Text''' - Options to change the image, edit it, and add alternative text (alt text) are available for accessibility and when images fail to load.
* '''Caption Position''' - Choose to position the caption either to the left or right of the image.
* '''Image On Click''' - Set actions that occur when the image is clicked. The default setting is '''None''', but you can select from options like Open Link, Jump to Section, Download File, Print Image, Call Phone, or Send Email.
* '''Background''' - You can add a background color, gradient, image, or video to your image. Multiple backgrounds can be stacked and reordered by dragging them.
* '''Border''' - Set borders using pixels for specific sides and choose from solid, dashed, or dotted styles. Color options for borders are also available.
* '''Corners''' - Adjust the corner radius using px or %. You can modify one, some, or all corners.
* '''Drop Shadow''' - Apply drop shadows to the image with customizable Offset, Blur, and Spread settings. You can add multiple drop shadows by selecting the plus (+) sign.
* '''Inner Shadow''' - Similar to drop shadows, inner shadows can also be applied with adjustable settings.
* '''Opacity''' - Adjust the opacity of the entire block by moving the grey "O" slider left for more transparency or right for full opacity.

== Best Practices and Tips ==
When utilizing the '''Image & Caption''' block, consider these best practices:

* Optimize Image Size: Ensure that the images used are optimally sized to prevent slow loading times, which can negatively impact user experience.
* Maintain Consistency: Use consistent styles, fonts, and colors for captions and images to align with your overall branding.
* Use Descriptive Captions: Craft captions that effectively describe the imagery and enhance understanding. Clear and informative captions improve engagement.
* Test Responsiveness: Preview your page across various devices to ensure that the images and captions render well and maintain their intended layout.

== Common Use Cases with Examples ==
The '''Image & Caption''' block can be particularly useful in numerous scenarios, such as:

* **Product Descriptions**: Showcase products with an accompanying image and a brief, appealing caption that highlights features or benefits.
* **Testimonials**: Add images of customers with text capturing their reviews to build trust and social proof.
* **Blog Visuels**: Incorporate images related to blog topics with captions summarizing key points, enhancing the reader's understanding and engagement.

== Troubleshooting ==
If you encounter issues while using the '''Image & Caption''' block, consider the following:

* **Loading Issues**: If images are not loading, ensure your image file format is supported (jpg, png, gif) and that the maximum size does not exceed 5 MB.
* **Editing Not Working**: Double-check you are in the page editor with the correct block selected. Refreshing the page may resolve temporary glitches.
* **Appearance Problems**: If captions do not appear as intended, revisit the configuration settings, particularly the caption positioning and styling options.

== Related Features ==
For further enhancement of your pages, explore these related features:
* [[Pages]]
* [[Text & Media]]
* [[Background & Borders]]

== FAQ ==
=== 1. What types of image files can I use in the '''Image & Caption''' block? ===
You can use jpg, png, and gif image files, with a maximum file size of 5 MB.

=== 2. How can I change the size of my image? ===
The size can be adjusted in the '''Width''' settings using either pixels or percentages.

=== 3. Can I add multiple '''Image & Caption''' blocks to a single page? ===
Yes, you can add as many '''Image & Caption''' blocks as you’d like, but keep in mind that they may increase memory usage and affect loading speed.

=== 4. What should I do if my image does not appear when the page is loaded? ===
Make sure the image is in the correct format and does not exceed the size limit. Check your internet connection and refresh the page.

=== 5. How do captions affect SEO? ===
Using descriptive captions can improve SEO by providing context for the images and offering relevant keywords, which search engines may index.

=== 6. Can I style captions differently? ===
Yes, you can use the modal toolbar to apply various formatting options such as font size and color to your captions.

=== 7. Is it possible to make the image clickable? ===
Yes, you can set an action on click through the '''Image On Click''' setting, such as opening a link or sending an email.

By following the guidelines and utilizing the features of the '''Image & Caption''' block effectively, you can significantly enhance the visual appeal and functionality of your ActiveCampaign pages.
```