Image Box

Overview

The Image Box Widget lets you add an image box that combines an image with a headline and text.

You can now, with the help of Image Box Element, include a small biography for the image on your website. With several customization options to utilize you have the power to display images with style and ease.

Change the picture size, shape, text background color and more with the customization settings included in the Image Box Widget.

Options

Image : Select the image you want to display.

Size : Choose the size of the image to be displayed eg. Full, Thumbnail or Custom size.

Full : The size of the image will be set as full.

Thumbnail : The size of the image will be set as thumbnail.

Custom Size : The size of the image will be set as User-defined size.

URL : Set the URL to the image you want to display.

Animation : Select the type of animation you want to display to the image. CLICK HERE to see animation in action.

Image Style

Image Alignment : Select the alignment of the image eg. Left, Top, Right.

Left : Set the image to the left. You can even set the image to top, middle, bottom in it.

Top : Set the image on the top.

Right : Set the image to the right. You can even set the image to top, middle, bottom in it.

Height : Set the height of the Image in pixels.

Object Fit : Select the object Fit from the list of objects viz. None (No Changes), Contain (To set image as Contain according to its height and width), Cover (To set image as Cover according to its height and width), Fill (To fill image according to its height and width), Scale Down (To set image as Scale Down according to its height and width), accordingly you can set Object position to left, right, top, bottom or center.

Horizontal Position : Set the horizontal position of the image to left,right or center.

Spacing Around : Set the exact spacing around image i.e Top, Right, Bottom, Left respectively.

State : Select the state to edit viz. Normal or Hover.

CSS Filter : Filter the image with its functionalities eg. Blur, Brightness, Contrast, Grayscale, etc.

Border : Select the border type to display. CLICK HERE to see the border types in details.

Color : Select the color of the border to be displayed.

Width : Set the width of the border in pixel(px) unit.

Radius : Set the border curve around corners i.e Top, Right, Bottom, Left respectively.

Heading

Heading : Type the text you want to display.

URL : Set the URL you want to specify with the heading text.

Heading Alignment : Set the alignment of the heading text to left, right, center respectively.

Spacing : Set the space between the title and description.

State : Select the state to edit viz. Normal or Hover.

Delay : Set the time it takes to appear. This time is in milliseconds, so 1000 ms is equal to 1 second

Color : Choose the color for your text.

Typography : Choose the Font-name, size, boldness, text-decoration, letter-spacing.

Content

Content Alignment : Set the alignment of the content text to left, right, center, justify respectively.

Spacing : Set the space between the title and bottom.

Content : Type here some text to display on hover effect. CLICK HERE to see the styling of text in this widget.

Button

Enable the toggle to set button in your Image box or vice versa. CLICK HERE to see about button.

Button Border Style

State : Select the state to edit.

Border Type : Type here some text to display on hover effect. CLICK HERE to see the border types in details.