The Featured Image widget in 10Web Website Builder allows you to dynamically display the featured image of the page or post it's added to. It is most used in Single Post Templates, as when a visitor views a particular post on your website, the featured image linked to that post will automatically appear. This guide will walk you through how to add and configure this widget to enhance your website's visual appeal.
Adding Featured Image widget
- Drag the Featured Image widget from the widget panel to the page canvas while editing the page.
- Configure the widget settings according to your preferences.
Content tab
- Choose Image: The Choose Image field dynamically shows the featured image of the current post/page.
- Generate with AI: Generate a new image using AI. Click the button and in the popup window, describe the image you want the AI to create. Include details about the style, aspect ratio, and the number of images you'd like generated for selection. You can find more information here.
- Featured Image: Click to select a Fallback Image in case there is no Featured Image available on the page/post.
- Image Resolution: Set the size of your featured image. You can set it from the dropdown menu prefilled options or add a custom size.
- Caption: Select the text to appear as a caption beneath each featured image. The choices are None, Attachment Caption, or Custom Caption.
- Custom Caption: Add a Custom test or choose from the Dynamic Tags like Post/Page Title, Archive Title/Description, and Site Title.
Note:
If you add a custom text under Custom Caption in a Single Post Template, the same text will appear on every post under the featured image. This is not dynamic.
- Link: Connect the image to None, Media File, or Custom URL:
- If you select Media Files, you have the option to open images in a Lightbox. You can decide whether to display images in a Lightbox. Choosing Yes or No will override the default Lightbox setting.
- When adding a Custom URL, click the ⚙️ icon to set the link to either open in a new window or to Add nofollow to the link. Use the Custom Attributes option to assign custom attributes to the link element. Use the | (pipe) for key-value separation and commas to separate pairs.
Use style and other advanced parameters to personalize the Featured Image widget. You can explore these settings below.
Style tab
Image
- Alignment: Set the alignment of the image relative to the left, center or right.
- Width: Set the width of your image using the slider.
- Max Width: Establish the maximum width of the image as a percentage relative to its container.
- Height: Set the height of your image using the slider.
- Normal: Set the default look of the image:
Opacity: Customize the image opacity.
CSS Filter: Change the look of your image with the option to apply CSS filters. - Hover: Set the look of the image on hover:
Transition Duration: Set the duration of the hover effect.
Hover Animation: Option to choose animation on hover. - Border Type: Select the style of your image border.
- Border Width: Set the thickness or width of the border around the featured image.
- Border Color: Set the border colors.
- Border Radius: Customize the roundness of border edges.
- Box Shadow: Click on the 🖋️ icon to add a shadow for the image.
Caption
Note:
The Caption Style settings are available only if Caption under the Content Tab is set to either Attachment Caption or Custom Caption.
- Alignment: Set the alignment of the image caption to left, center, right, or justified.
- Text Color: Customize the color of the caption text.
- Background Color: Set the background color for the caption.
- Typography: Customize the typographical settings of the caption. You can find more information here.
- Text Shadow: Set and customize the shadow for the caption text.
- Spacing: Adjust the distance between the caption and the image using the slider.
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.