Image

Description and Code

The Image shortcode will let you to style your images with an unique look and also do other things if you like, such as animate the image. Here's an example of the shortcode in code view:

[image_component style_type="none" border_color="" border_size="0px" align="none" image_parallax="no" parallax_direction="left" animation_type="0" animation_direction="down" animation_speed="0.1" class="" id=""]<img src="http://example.com/wp-content/uploads/image.jpg" />[/image_component]

Parameters

• style_type
  • set the predefined style of the image
  • Possible values - none, border, shadow or border-shadow

• border_color
  • defines the border color of the image
  • Possible values - hex code #000000, or color name black or rgba values like rgba(0,0,0,0.4)

• border_size
  • defines the border width of the image
  • Possible values - use unit with pixels like 1px

• align
  • sets the alignment of the image
  • Possible values - none, left, right or center

• image_parallax
  • defines if image will be shown with the parallax effect
  • Possible values - yes or no

• parallax_direction
  • when parallax effect is enabled, defines the effect direction
  • Possible values - left or right

• animation_type
  • set the animation type of the component
  • Possible values - none, bounce, fade, flash, shake, slide

• animation_direction
  • set the animation direction of the component
  • Possible values - down, left, right, up

• animation_speed
  • set the animation speed of the component
  • Possible values - in seconds like 0.1, 1, 5.3 etc.

• class
  • custom class for CSS of component
  • Possible values - string - like custom-element-class

• id
  • custom ID for CSS of component
  • Possible values - string - like custom-element-id

Basic Examples

Border

Shadow

Border With Shadow

Animated Examples