Image Box Widget

The Image Box widget lets you combine images with text and display visual and textual content together. You can customize the image and text size, alignment, and spacing, add overlays, hover effects, and animations for more interactivity.

Adding Image Box widget

1. Open the page where you want to add the widget.
2. Find the widget in the widget panel and drag it in the desired section.

Content tab

• Choose Image: Click the default image to select one from the media library or upload a new one.
• 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.
  Image Resolution: Set the size of your image. You can set it from the dropdown menu prefilled options or add a custom size.
• Title: Add a title for the image box.
• Description: Enter a personalized caption for the box.

• Link: Set the URL for the image box’s link. Click the Settings icon ⚙️ to choose to open the link in a separate window and enable ‘Add nofollow’ to prevent search engines from associating your site with the linked site.
• Title HTML Tag: Choose the HTML tag for your title from the dropdown menu.

Style tab

Box

• Image Position: Set the image position to the left, top, or right. On mobile devices, the image will stay centered.
• Alignment: Align the image box to the left, right, center, or justified.
• Image Spacing: Adjust the slider to set the distance between the image and the title.
• Content Spacing: Adjust the slider to set the distance between the title and the description.

Image

• Width: Adjust the slider to set the image width between 0% and 100%.
• Border Type: Select the type of border to apply around the image. You can choose from Default, None, Solid, Double, Dotted, Dashed, and Groove. When setting one of these border types, you can also adjust the following:
  
  Border Width: Adjust the thickness of the border surrounding the image.
  Border Color: Choose the color of the border surrounding the image.
  Border Radius: Increase the border radius to create rounded corners.

• CSS Filters: Alter the image appearance using filters such as Blur, Brightness, Contrast, Saturation, and Hue. These can be applied for both normal and hover modes.
• Opacity: Control the transparency of the image for both normal and hover states.
• Transition Duration: Specify the duration for each image transition in milliseconds.
• Hover Animation: Set the animation effect that occurs when the mouse hovers over the image.

Content

Title

• Color: Set the color of the title.
• Typography: Select the font and adjust the size of the title.
• Text Stroke: Click the 🖋️ icon to apply a stroke effect to the title.
• Text Shadow: Click the 🖋️ icon to add a shadow to the title.

Description

• Color: Change the color of the description text.
• Typography: Customize the font and adjust the size of the description.
• Text Shadow: Click the 🖋️ icon to apply a shadow effect to the description.

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.