In the digital era, the visual component of a website is key to grabbing visitor attention. 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 Image widget
Place the Image Widget onto your canvas. Refer to the Add Elements to a page article for more information.
Navigate to the Content tab, and click on Choose Image under the Image section to either upload a new image from your computer or select one from your Media Library.
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.
Quick tip:
Utilize the Alt Text option for your images in the Media Library to enhance SEO and site accessibility.
Image Resolution: Choose image size from the drop-down menu or choose custom to set a custom size.
Caption: Click the drop-down menu to choose whether the image displays the attached caption, a custom caption, or none.
Link: To make the image interactive, use the Link field to attach it to media files, insert custom URLs, or opt for no link at all. For Custom URL links, click the settings icon to open links in a new tab or apply "nofollow" attributes. Use Custom Attributes for additional link customization.
Quick tip:
Selecting Media Files gives an option to display the image in a Lightbox.
Image widget settings
To customize your Image Widget further, explore the settings across three tabs:
Content Tab: Options to choose or upload images, set Alt Text, adjust image resolution, and alignment, and set links and captions.
Style Tab: Styling options such as width, height, and alignment adjustments for the widget.
Advanced Tab: Advanced settings for further customization, including margins, padding, motion effects, and custom CSS.
By mastering the Image Widget, you unlock a world of possibilities for enhancing your website's visual impact and user engagement.
Advanced
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.
What's next?
Now that you've mastered adding and customizing images with the Image Widget, take your webpage to the next level by exploring the Text Editor Widget. Dive into our guide on the Text Editor Widget to discover how to integrate text with your visuals. Learn to style text, create compelling content, and further enhance your website's appeal.