Image

Overview #

The Image Section is a versatile component designed to display images with a variety of customization options. It allows users to adjust the alignment, style, and dimensions of images, as well as add overlays and captions. This section is ideal for showcasing visual content in a dynamic and visually appealing manner.

Key components and functionality #

Alignment settings

Control the alignment of content within the section to ensure it fits seamlessly with the overall page layout. This setting is crucial for maintaining a consistent and professional appearance across different devices.

• Alignment - Desktop: Adjusts the horizontal alignment of the image on desktop devices.
• Alignment - Mobile: Adjusts the horizontal alignment of the image on mobile devices.

Image settings

This group of settings allows you to select and style the image displayed in the section. It provides flexibility in how images are presented, enhancing the visual appeal of your site.

• Image: Choose an image to display using the image picker.
• Image style: Select the style of the image. Options include default, rounded corners, and circle.
• Max image width: Set the maximum width of the image in pixels, ranging from 0 to 1600, with a default of 0.

Aspect ratio

Define the aspect ratio of the image to ensure it displays correctly across different devices. This setting helps maintain the integrity of the image's appearance.

• Aspect ratio: Choose from options like default, landscape, portrait, square, ultrawide, and widescreen. The default is default.
• Aspect ratio - Mobile: Similar options as above, specifically for mobile devices, with a default of default.

Caption settings

Add captions to your images to provide context or additional information. Captions can enhance the user's understanding of the image content.

• Caption: Use inline rich text to add a caption to the image or video.
• Text alignment: Adjust the alignment of the caption text.
• Caption position: Choose whether the caption appears at the top or bottom of the image.

Overlay settings

Enhance your images with overlays to improve visibility or add stylistic effects. Overlays can help highlight important aspects of the image.

• Overlay color: Select a color for the overlay.
• Overlay gradient: Choose a gradient for the overlay.
• Overlay opacity: Set the opacity of the overlay, ranging from 0% to 100%, with a default of 48%.

Usage examples #

1. Product Highlight: Use the Image Section to showcase a product with a high-quality image. Add a caption to describe the product and use an overlay to make the text stand out.

2. Event Promotion: Display an image from a recent event with a caption detailing the event's highlights. Use the rounded corners style for a softer look.

3. Portfolio Display: Create a gallery of images using multiple Image Sections, each with different aspect ratios to maintain a cohesive and professional appearance.

These examples demonstrate the versatility of the Image Section in enhancing visual content on your site.