The Image Widget in 10Web Website Builder enhances your site's visual appeal by allowing you to effortlessly add and customize images. Whether you're adjusting sizes, and alignments, applying captivating hover effects and filters, or linking images to specific destinations, this widget is your go-to for visual content creation.
Adding the Image widget
- Add the Icon Image widget by finding it on the widgets panel and dragging it to the page canvas.
- Click on the added widget and customize the settings available for it from the left-hand menu.
Content tab
- Choose Image: Add your image or select dynamic tags to use options like the post's featured image, site logo, or author profile picture. You also have the option to generate widget images using AI. Simply click on Generate Image above the image section, and the AI prompt menu will open, allowing you to describe the image you wish to generate. For further details, please refer to the in-depth article on AI image generation with 10Web Builder.
- Image Resolution: Specify the image size.
- Caption: Add a caption below the image, either custom or pulled from the WordPress Media Library.
- Link: Set the image link to media files, custom URLs, or none.
Style tab
- Alignment: Decide how the image is aligned.
- Width: Adjust the width using a slider.
- Max Width: Define the maximum width of the image.
- Height: Set the height of the image and select the fitting style:
-
Normal: Configure the image's default appearance:
Opacity: Control transparency.
CSS Filters: Apply effects like blur, brightness, and contrast. -
Hover: Define appearance when hovered over:
Opacity: Control transparency.
CSS Filters: Apply effects like blur, brightness, and contrast.
Transition Duration: Set hover animation speed.
Hover Animation: Choose effects to activate on hover. - Border Type: Select border styles like solid, dotted, or dashed.
- Border Radius: Adjust corner roundness.
- Box Shadow: Add shadow effects using a shadow tool.
Advanced tab
You can customize the widget further using the settings available in the Advanced tab. These options provide additional styling and functionality adjustments, allowing you to tailor the widget to better fit your design needs.