Overview

Image widget is very useful and important to beautify and to depict with complex concepts in an easy manner. You can use PNG, JPEG image file based on your comfort, but make sure you specify correct image file name in src attribute. The image name is always case sensitive.

Options

Content

• Image : Select the image you want on your web page.
• Size : Select the size of the image to be displayed
  • Full: Set the original size of the image.
  • Large: Set the full space of the widget.
  • Medium: Set the average space of the widget.
  • Thumbnail: Set the small size of the image.
  • Custom size: As per User-defined size.
• Alignment : Set the alignment of the image eg. Left, Center, Right.
  • Left: Set the widget to left.
  • Center: Set the widget to center.
  • Right: Set the widget to right.
• Max width : Set the maximum width to the image in percentage(%).
• CSS Filters : Set CSS Filters: Blur, Brightness, Contrast, Opacity, and Hue, etc.
• Shadow : Set the Shadow: Horizontal, Vertical, Blur, Spread, Shadow color and Shadow style (Outside or Inside).
• Rotate : To rotate the image from 0 to 360 degrees.

Link

• Link : Set link to the image displayed
  • Custom URL : Set the custom url to the image.
  • Media File : Set the media file to the image.
  • Lightbox : Set the lightbox to the image.

Caption

• Show image Caption : Set the caption to the image.
• Caption Color : Set the color of the caption provided.
• Typography : Set the typography of the caption provided.

Overlay

• Hover effect : For providing overlay effect you need to on the toggle button for viewing effects.
• Icon : Set the icon as an overlay to the image.
• Icon Color : Set the color of the icon.
• Icon Size : Set the size of the icon in pixels.
• Content : To type some text to be displayed on the overlay. CLICK HERE to see the styling of text in this widget.
• Background Type : Set the background type of the overlay image.
  • Color : Set the color to the overlay image.
  • Gradient : Set the gradient to the overlay image.
• Overlay Content Position : Set the position of Content displayed on overlay image.
  • Top : Set the content on top of the overlay image.
  • Middle : Set the content in the middle of the overlay image.
  • Bottom : Set the content on the bottom of the overlay image.
• Always Show : To set the overlay effect always you need to on this toggle.