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

The Content Boxes shortcode lets you set up content in a box with an icon, a title, and button. You can put these boxes into 1-5 columns. Here's an example to 2 columns.

Lorem ipsum faucibus feugiat luctus ligula vivamus ac et, etiam egestas et per condimentum volutpat sagittis, porta metus dictum duis nec pretium felis. per tellus quis est gravida vitae massa lobortis bibendum, tempus aenean facilisis litora fringilla bibendum augue donec nulla, per conubia tincidunt ullamcorper nullam leo semper.Read More

Lorem ipsum faucibus feugiat luctus ligula vivamus ac et, etiam egestas et per condimentum volutpat sagittis, porta metus dictum duis nec pretium felis. per tellus quis est gravida vitae massa lobortis bibendum, tempus aenean facilisis litora fringilla bibendum augue donec nulla, per conubia tincidunt ullamcorper nullam leo semper.Read More

Here's a look at the settings page.

content-boxes-settings

Here's a sample shortcode.

These are the properties:

  • layout = choose from these values: icon-with-title, icon-on-top, icon-on-side, icon-boxed
  • columns = a number between 1-5
  • title = Here your custom title text is placed
  • backgroundcolor = hex code #000000, or color name black or rgba values like rgba(0,0,0,0.4)
  • icon = the name of the font awesome icon (tablet), or you may add an image URL for a custom icon that you uploaded. If you do use this, ensure that there is no “image=” value
  • iconcolor = hex code #000000, or color name black or rgba values like rgba(0,0,0,0.4) or “transparent”
  • circlecolor = hex code #000000, or color name black or rgba values like rgba(0,0,0,0.4) or “transparent”
  • circlebordercolor = hex code #000000, or color name black or rgba values like rgba(0,0,0,0.4) or “transparent”
  • iconflip = horizontal, vertical (or nothing)
  • iconrotate = 90, 180, 270
  • iconspin = yes, no
  • image = this is for custom icon images, if you wish to use one then ensure that there is no “icon=” value. It is the URL path of the image that you want to appear, starting with http:// and usually ending on .jpg, .png or .gif
  • image_width = a number of pixels like 35 (but don't add px)
  • image_height =  a number of pixels like 35 (but don't add px)
  • link = a URL for your link, including http://
  • linktarget = use one of these: _blank for new window, _self for same window, _parent for parent frame, _top for full body
  • linktext = Your custom anchor linking text (like “Learn More”)
  • animation_type = bounce, fade, flash, shake, slide
  • animation_direction = down, left, right, up
  • animation_speed = a number between 0.1 and 1