This feature is available in the evolve Plus premium theme version

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, 180270 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 3550 or percents 50%, 100% etc.
  • image_height
    • controls the height of the image
    • Possible values - values without an unit 3550 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 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.

 

Basic Examples

 

Icon Beside Title

 


Basic

Sed vulputate maximus lectus, ut vehicula metus vestibulum et. Pellentesque nisl erat, ullamcorper eu justo ut, maximus tincidunt dolor


Advanced

Sed vulputate maximus lectus, ut vehicula metus vestibulum et. Pellentesque nisl erat, ullamcorper eu justo ut, maximus tincidunt dolor


Pro

Sed vulputate maximus lectus, ut vehicula metus vestibulum et. Pellentesque nisl erat, ullamcorper eu justo ut, maximus tincidunt dolor


 

Icon on Top of Title

 


Basic

Sed vulputate maximus lectus, ut vehicula metus vestibulum et. Pellentesque nisl erat, ullamcorper eu justo ut, maximus tincidunt dolor


Advanced

Sed vulputate maximus lectus, ut vehicula metus vestibulum et. Pellentesque nisl erat, ullamcorper eu justo ut, maximus tincidunt dolor


Pro

Sed vulputate maximus lectus, ut vehicula metus vestibulum et. Pellentesque nisl erat, ullamcorper eu justo ut, maximus tincidunt dolor


 

Icon beside Title and Content aligned with Title

 


Basic

Sed vulputate maximus lectus, ut vehicula metus vestibulum et. Pellentesque nisl erat, ullamcorper eu justo ut, maximus tincidunt dolor


Advanced

Sed vulputate maximus lectus, ut vehicula metus vestibulum et. Pellentesque nisl erat, ullamcorper eu justo ut, maximus tincidunt dolor


Pro

Sed vulputate maximus lectus, ut vehicula metus vestibulum et. Pellentesque nisl erat, ullamcorper eu justo ut, maximus tincidunt dolor


 

Icon Boxed

 


Basic

Sed vulputate maximus lectus, ut vehicula metus vestibulum et. Pellentesque nisl erat, ullamcorper eu justo ut, maximus tincidunt dolor


Advanced

Sed vulputate maximus lectus, ut vehicula metus vestibulum et. Pellentesque nisl erat, ullamcorper eu justo ut, maximus tincidunt dolor


Pro

Sed vulputate maximus lectus, ut vehicula metus vestibulum et. Pellentesque nisl erat, ullamcorper eu justo ut, maximus tincidunt dolor


 

Customized Examples

 


Basic

Sed vulputate maximus lectus, ut vehicula metus vestibulum et. Pellentesque nisl erat, ullamcorper eu justo ut, maximus tincidunt dolor


Advanced

Sed vulputate maximus lectus, ut vehicula metus vestibulum et. Pellentesque nisl erat, ullamcorper eu justo ut, maximus tincidunt dolor


Pro

Sed vulputate maximus lectus, ut vehicula metus vestibulum et. Pellentesque nisl erat, ullamcorper eu justo ut, maximus tincidunt dolor



Basic

Sed vulputate maximus lectus, ut vehicula metus vestibulum et. Pellentesque nisl erat, ullamcorper eu justo ut, maximus tincidunt dolor


Advanced

Sed vulputate maximus lectus, ut vehicula metus vestibulum et. Pellentesque nisl erat, ullamcorper eu justo ut, maximus tincidunt dolor



Sed vulputate maximus lectus, ut vehicula metus vestibulum et. Pellentesque nisl erat, ullamcorper eu justo ut, maximus tincidunt dolor


Sed vulputate maximus lectus, ut vehicula metus vestibulum et. Pellentesque nisl erat, ullamcorper eu justo ut, maximus tincidunt dolor


Sed vulputate maximus lectus, ut vehicula metus vestibulum et. Pellentesque nisl erat, ullamcorper eu justo ut, maximus tincidunt dolor


 

Animated Examples

 


Basic

Sed vulputate maximus lectus, ut vehicula metus vestibulum et. Pellentesque nisl erat, ullamcorper eu justo ut, maximus tincidunt dolor


Advanced

Sed vulputate maximus lectus, ut vehicula metus vestibulum et. Pellentesque nisl erat, ullamcorper eu justo ut, maximus tincidunt dolor


Pro

Sed vulputate maximus lectus, ut vehicula metus vestibulum et. Pellentesque nisl erat, ullamcorper eu justo ut, maximus tincidunt dolor



Basic

Sed vulputate maximus lectus, ut vehicula metus vestibulum et. Pellentesque nisl erat, ullamcorper eu justo ut, maximus tincidunt dolor


Advanced

Sed vulputate maximus lectus, ut vehicula metus vestibulum et. Pellentesque nisl erat, ullamcorper eu justo ut, maximus tincidunt dolor


Pro

Sed vulputate maximus lectus, ut vehicula metus vestibulum et. Pellentesque nisl erat, ullamcorper eu justo ut, maximus tincidunt dolor