Content Controls
Content
The controls in this section allow you to select and modify the image, including its size, alternative text, caption, and link properties. You can also enable or customize the image’s lazy loading feature for better performance.
- Image – Choose the image you want to display.
- Image Size – Select the display size of the image from predefined options.
- Alt – Configure the alternative text options for the image.
- Alt – Choose between default or custom alternative text for the image.
- Custom Alt – Provide a custom description for the image. Note: This option is available only when ‘Alt’ is set to ‘custom’.
- Caption – Manage the image’s caption settings.
- From Library – Toggle to use the caption stored in the media library.
- Caption – Write a custom caption for your image. Note: This option is available only when ‘From Library’ is not selected.
- Link – Adjust the image’s hyperlink settings.
- Link – Select the type of link to be applied to the image, such as none, media file, or custom URL.
- URL – Specify the hyperlink destination. Note: This option is available only when ‘Link’ is set to ‘url’.
- New Tab – Decide whether the link opens in a new browser tab. Note: This control is only available when ‘Link’ is set to ‘url’ or ‘media’.
- Image Size – Select the display size for the image when opened in a lightbox. Note: This control is only available when ‘Link’ is set to ‘lightbox’.
- Lazy Load – Toggle to delay loading the image until it’s needed, improving page load times.
Design Controls
Image
This section contains controls that affect the image’s dimensions, aspect ratio, fit, zoom level, and focus point, allowing for diverse and responsive design options.
- Width – Set a specific width for the image.
- Max Width – Define the maximum width the image can take up.
- Height – Set a specific height for the image.
- Aspect Ratio – Choose a predefined aspect ratio or set a custom one.
- Custom Ratio – Customize the aspect ratio by defining specific width and height. Note: This control is available only when ‘Aspect Ratio’ is set to ‘custom’.
- Width – Set the width component of your custom aspect ratio.
- Height – Set the height component of your custom aspect ratio.
- Object Fit – Determine how the image should fit within its allocated space. Note: This control is available only when ‘Height’ is set or ‘Aspect Ratio’ is set to ‘custom’.
- Zoom – Adjust the image’s zoom level.
- Focus Point – Choose the area of the image to focus on. Note: This control is available only when ‘Zoom’ is set.
Effects
Enhance your image with various visual effects such as opacity adjustments, filters, transitions, and blend modes. You can also apply a mask to the image for artistic or functional purposes.
- Opacity – Adjust how transparent the image is.
- Filters – Apply and customize different visual filter effects to the image.
- Filter Items – Add one or more filter effects.
- Type – Select the type of filter effect to apply, such as blur, brightness, contrast, etc.
- Blur Amount – Set the intensity of the blur effect. Note: This control is available only when ‘Type’ is set to ‘blur’.
- Amount – Adjust the level of the selected filter effect. Note: This control is available for certain ‘Type’ selections like ‘brightness’, ‘contrast’, ‘grayscale’, ‘invert’, ‘saturate’, and ‘sepia’.
- Rotate – Set the degree of hue rotation for the image. Note: This control is available only when ‘Type’ is set to ‘hue-rotate’.
- Transition Duration – Set the time it takes for filter effects to be applied or removed.
- Mask – Apply a mask shape to the image.
- Shape – Select a predefined mask shape or use a custom one.
- Custom Shape – Upload a custom mask shape. Note: This control is available only when ‘Shape’ is set to ‘custom’.
- Size – Choose a predefined size for the mask or set a custom size.
- Custom Size – Define specific dimensions for the mask. Note: This control is available only when ‘Size’ is set to ‘custom’.
- Position – Decide the position of the mask on the image.
- Blend Mode – Choose how the image should blend with the background or other images.
Borders
The “Borders” section allows you to modify the border aesthetics of your image, offering controls for border radius, styling, and shadow. These controls help create more visually engaging images by allowing detailed border customizations and shadow effects for depth perception.
- Radius – Adjust the border radius to alter the corner curvature of your image’s border.
- Styling – Customize the border’s style, width, and color for your image.
- Shadow – Add or adjust shadow effects to create a sense of depth for your image.
Spacing
The “Spacing” section provides controls for the precise management of the space around your image, allowing for a cleaner and more customized layout. This includes adjustments for both the margin top and margin bottom, enabling better integration of your image with other page elements.
- Margin Top – Control the space above your image by setting the top margin.
- Margin Bottom – Control the space below your image by setting the bottom margin.
Caption
The “Caption” section offers comprehensive controls to customize your image’s caption, including its position, background, typography, borders, and spacing. These controls ensure your caption is not only informative but also aesthetically harmonious with the image and your overall design.
- Position – Set the position of your caption relative to the image.
- Background – Choose a background color for your caption to enhance readability or aesthetic appeal.
- Typography – Customize the font style, size, and other typographic elements of your caption.
- Borders – Refine the caption’s borders with options for radius, styling, and shadow.
- Radius – Adjust the border radius of your caption’s container.
- Styling – Customize the style, width, and color of your caption’s borders.
- Shadow – Add or modify shadow effects for your caption’s container.
- Spacing – Manage the internal spacing of your caption with padding controls.
- Padding – Set the padding around the text within your caption’s container.
Lightbox
The “Lightbox” section provides controls for customizing the lightbox background and the color of its controls. These settings allow you to enhance the viewer’s focus on the image and ensure the lightbox controls are clearly visible, contributing to a more immersive viewing experience.
- Background – Select a color for your lightbox background to complement the displayed image.
- Controls – Customize the color of the lightbox controls for better visibility and aesthetics.
