Image
The Image widget is a versatile tool that allows you to seamlessly incorporate images into your web design. Whether you’re creating a page or a template, this widget lets you add both static and dynamic images. The Image widget is a fundamental element for enhancing visual appeal and conveying information effectively on your website.
Content Tab
Content
- Image: Upload or select the desired image from the WordPress media library.
- Caption: Enter text for the image's caption, which can provide context or additional information.
- Link to: Choose where the image should link to when clicked. Options include:
- None: No link will be applied to the image.
- Media File: The image will link to the full-size media file.
- Custom URL: Define a custom URL for the image to link to.
- Switch on Hover: Toggle whether a secondary image will be shown when the user hovers over the image.
- If "Show" is toggled on, you'll be prompted to upload or select the secondary image to display on hover.
Settings
- Image Resolution: Select the resolution quality for the image, such as thumbnail, medium, large, or full size.
Style Tab
Image
- Max Width: Set the maximum width of the image as a percentage of its container element.
- Width: Define the width of the image, also as a percentage of its container element.
- Opacity (%): Adjust the opacity of the image, with 1 being fully opaque and 0 being fully transparent.
- Parallax Scroll: Enable a parallax effect as the viewer scrolls.
- Alignment: Align the image within its column or section. Options include left, center, or right.
- Border Type: Select a border type for the image, such as solid, dotted, dashed, etc.
- Border Radius: Define the border radius to create rounded corners for the image.
- Box Shadow: Add a shadow effect to the image, with options to customize the horizontal and vertical position, blur radius, spread, and color.
The style settings also include the ability to set different styles for the "Normal" and "Hover" states of the image. You might configure a change in the border or box shadow when a user hovers over the image to create visual feedback or highlight an interactive element.