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

在社交網絡上分享它

今天開始使用Elemenor

加入數百萬專業人士,使用Elementor更快、更好地構建WordPress網站

本頁內容