Content Boxes

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

Content boxes come in various types. This component is great if you want to show for example some special features of your services, display images of your choice with an unique card style etc. Here's an example of the shortcode in code view:

[content_boxes_component layout="icon-with-title" columns="4" class="" id=""] [content_box_component title="" background_color="" icon="" icon_color="" circle="no" circle_color="" circle_border_color="" icon_flip="" icon_rotate="" icon_spin="no" image="" image_width="35" image_height="35" link="" link_target="_self" link_text="" animation_type="0" animation_direction="down" animation_speed="0.1"]Your Content Goes Here[/content_box_component] [/content_boxes_component]

Parameters

Content boxes container - [ content_boxes_component ]

layout
- set the predefined layout of the content boxes
- Possible values - icon-with-title, icon-on-top, icon-on-side, icon-boxed

columns
- defines the maximum number of content boxes columns to display
- Possible values - number - like 1, 4 etc. - max. 12

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

Content box - [ content_box_component ]

title
- defines the title text of content box
- Possible values - string - like Standard, Featured etc.

background_color
- defines the content box background color
- Possible values - hex code #000000, or color name black or rgba values like rgba(0,0,0,0.4)

icon
- set the icon for the content box
- Possible values - use Font Awesome like fas fa-tag

icon_color
- defines the content box icon color
- Possible values - hex code #000000, or color name black or rgba values like rgba(0,0,0,0.4)

circle
- set the icon to have circle style
- Possible values - yes or no

circle_color
- defines the content box icon circle background color
- Possible values - hex code #000000, or color name black or rgba values like rgba(0,0,0,0.4)

circle_border_color
- defines the content box icon circle border color
- Possible values - hex code #000000, or color name black or rgba values like rgba(0,0,0,0.4)

icon_flip
- sets if the icon will be flipped
- Possible values - horizontal, vertical or none

icon_rotate
- sets if the icon will be rotated
- Possible values - 90, 180, 270 or none

icon_spin
- defines if the icon will be shown with a spin animation
- Possible values - yes or no

image
- defines the path for the image that you want to show as icon, which always overwrites the Font Awesome icon field, if set
- Possible values - string - like http://example.com/wp-content/uploads/image.jpg

image_width
- controls the width of the image
- Possible values - values without an unit 35, 50 or percents 50%, 100% etc.

image_height
- controls the height of the image
- Possible values - values without an unit 35, 50 or percents 50%, 100% etc.

link
- sets the content box button, title and icon link
- Possible values - string - like http://example.com

link_target
- sets the content box button link target
- Possible values - _self or _blank

link_text
- sets the content box button text
- Possible values - string - like Learn more, Buy now etc.

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.