How to Add and Style Images in the components?
Questions:
- How do I add an image?
- How do I apply filters to images?
- Where do I enter image descriptions?
Description:
This guide explains how to upload standard images to your multi-slide banner and apply visual enhancements. You can customize each image with filters, shadows, and overlays to match your brand design.
We'll show you, step by step, how to:
- Upload Media: Access the library to select your graphic.
- Apply Filters: Adjust brightness or add color overlays.
- Add Accessibility Text: Ensure your images are readable by screen readers.
Solution:
-
Select the Image Format - Click the camera icon at the top of the media settings panel to choose the standard image format.
-
Open the Media Library
Click the "Open media library" placeholder area to browse and upload your image file.
-
Apply Image Filters
Choose from six filter options, such as reducing brightness and increasing brightness.You can also enable an interactive undo-on-hover effect.
-
Configure Image Shadows and Overlays
Add a box shadow to your image if desired. You can also apply a single-color linear gradient overlay or a two-color radial gradient overlay.
-
Enter Alternative Text
Scroll down to the Alternative Text section and type a clear description of the image for screen readers.
Tips and Tricks:
Pro-Tips:
- Use the device icons (mobile, tablet, laptop, desktop) at the top of the settings panel to preview how your image scales across different screen sizes.
- Add alternative text to every image to improve both accessibility and your multi-language translation capabilities.
Warnings:
- Avoid applying overly dark gradient overlays if your slide includes dark body text.
- Do not skip the alternative text, as it is crucial for users relying on screen readers.