Image Box Widget

The Image Box Widget lets you add an image box that combines an image with a headline and text, which is often used in Features sections, as an alternative to using the Icon Box widget.


Content

  • Choose Image: Select an image from the media library, or upload a new image
  • Image Size: Select the size of the image, from thumbnail to full, or enter a custom size
  • Title & Description: Add the title and description that will appear in the image box
  • Link to: Enter the URL for the item’s link. Click the Link Options cog Link Option to either add rel=nofollow to the link or to open the link in a new window.
  • Title HTML Tag: Set the HTML tag of the title as H1…H6, div, span or paragraph

Style

Box

  • Image Position – Set the position of the icon on the left, top or right side of the box (on Mobile view it will stay centered).
  • Alignment – Left, center, right or justified.

Image

  • Spacing: Set the exact space between the image and the title
  • Width: Scale the image width from 0 to 100%
  • Border Type: Determine what kind of border will surround the images in the box.
  • Border Radius – Round the corners of the borders around the images.
  • Hover Animation: Add a Hover Animation to the image
  • CSS Filters: Adjust the image style by changing the CSS Filter scales for Blur, Brightness, Contrast, Saturation, and Hue settings in Normal and Hover states
  • Opacity: Control the opacity of the image in Normal and Hover states
  • Transition Duration: Set the time it takes for each slide to appear. This time is in milliseconds, so 1000 ms is equal to 1 second

Content

Title
  • Spacing: Set the exact space between the image and the title
  • Color: Change the color of the title
  • Typography: Change the typography, of the title
  • Text Stroke: Color the outline of your text
  • Text Shadow: Add texture to the text by adding shadow
Description
  • Color: Set the color of the description text
  • Typography: Set the typography options for the description
  • Text Shadow: Add texture to the text by adding shadow

Advanced

Set the Advanced options that are applicable to this widget

Share it on social networks

Was this article helpful?

Get Started With Elementor Today

Join millions of professionals who use Elementor to build WordPress websites faster and better than ever before

On this page