This feature is available only for Premium members

NOTE: You can access all the shortcodes via the shortcodes icon on your visual editor. See this document if you need more information


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="" />[/image_component]




  • 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 valuesnone, 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 valuesleft or right
  • animation_type
    • set the animation type of the component
    • Possible valuesnone, bounce, fade, flash, shake, slide
  • animation_direction
    • set the animation direction of the component
    • Possible valuesdown, 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 With Shadow



Animated Examples