Sliding Bar Section For Widgets

This is the sliding section that can be enabled or disabled on any demo. You can insert anywhere from 1-6 columns along with any widget that comes with Avada, WordPress or additional 3rd party plugins. It's perfect for placing additional information on your site.

Recent Works

Contact Info

12345 North Street, New York City, NY 555555

Phone: 1-800-555-5555

Mobile: 1-234-567-8910

Fax: 1-234-879-5641

Web: http://yourwebsite.com

Loading...
Content Boxes 2017-07-21T18:13:45+00:00

Content Box Element

Avada includes 6 pre-design content box layouts and a plethora of options that allow you to take the design so much further. Each layout has been carefully designed and crafted with customization options in mind. They work with our entire column framework, font awesome icons and the set of options we include so you can easily set them up as you desire are simply mind blowing.

6 Pre-Design Layouts to Start With

The Content Box Element has 6 pre-designed layouts to choose from that allow you to use as made, or customize further via easy to use option settings for colors, size, backgrounds, icons and much more.

Column Sizes From 1-6 Columns

Avada’s framework offers up to 6 column layouts, giving you incredible creative freedom to build pages the exact way you need them to be.

Hover Effects

Each Content Box Element has the ability to select a different hover effect that displays when your mouse hovers. This is a perfect way to grab the viewers eye. The hover animation effects can utilize different colors and each content box has it’s own set of custom link settings.

Icon Options Galore

Each Content Box Element can utilize any of the font awesome icons. Yet the amazing flexibility of power comes in the customizations we offer for icons. You can choose colors, icon size, icon flip, icon rotation, icon spin and much more including full background control which we display in the next section.

Icon Background & Border Options

Each Content Box Element can have a background, and have 1 or 2 borders. You can choose colors, background, background shape, background inner border, background outer border, border sizes and more.

Customization Settings

The plethora of easy to use options and pre-designed layouts the Content Box Element offers are incredibly amazing. The possible combinations are virtually endless and allow you to create so many unique setups. Below are just a few examples.

Complete Set of Options

Every option and description included with the content boxes shortcode is listed below.

  • settings_lvl – Can be one of these values: child, which controls each box style individually or parent, which control all box styles together. Sets the Settings Level of the Content Boxes. View complete documentation here.
  • layout – Can be one of these values: icon-with-title, icon-on-top, icon-on-side, icon-boxed, clean-vertical, clean-horizontal, timeline-vertical, or timeline-horizontal. Sets the layout of the box.
  • columns – Can be one of these values: 1, 2, 3, 4, 5, or 6. Sets the number of columns per row.
  • icon_align – Can be one of these options: left, or right. Sets the content’s alignment. This parameter is for icon-with-title and icon-on-side layouts only.
  • title_size – Accepts a pixel value that controls the size of the title. For example, 5px. Leave blank for Theme Option selection.
  • title_color – Accepts a hexcode ( #000000 ). This controls the color of the title font. Leave blank for Theme Option selection.
  • body_color – Accepts a hexcode ( #000000 ). This controls the color of the body font. Leave blank for Theme Option selection.
  • backgroundcolor – Accepts a hexcode ( #000000 ). This sets the content box’s background color. Leave blank for Theme Option selection.
  • icon_circle – Can be one of these values: default, yes, or no. Sets if the icon is circular or not. Choose default for Theme Option selection.
  • icon_circle_radius – Accepts a pixel value that controls the border radius of the icon background. For example, 1px.
  • iconcolor – Accepts a hexcode ( #000000 ). Sets the icon’s color. Leave blank for Theme Option selection.
  • circlecolor – Accepts a hexcode ( #000000 ). Sets the icon’s background color. Leave blank for Theme Option selection.
  • circlebordercolor – Accepts a hexcode ( #000000 ). Sets the icon’s background inner border color for all list items. Leave blank for Theme Option selection.
  • circlebordersize – Accepts a pixel value that controls the inner border size of the icon background. For example, 1px.
  • outercirclebordercolor – Accepts a hexcode ( #000000 ). Sets the icon’s background outer border color for all list items. Leave blank for Theme Option selection.
  • outercirclebordersize – Accepts a pixel value that controls the outer border size of the icon background. For example, 1px.
  • icon_size – Accepts a pixel value that controls the size of the icon. For example, 5px. Leave blank for Theme Option selection.
  • icon_hover_type – Can be one of these values: default, none, fade, slide, or pulsate. Sets the animation type for icon on hover.
  • hover_accent_color – Accepts a hexcode ( #000000 ). Sets an accent color for the hover animation. Leave blank for Theme Option selection.
  • link_type – Can be one of these values: default, text, button-bar, or button. Sets the link type that is displayed in the content box.
  • link_area – Can be one of these values: link-icon, or box. Sets which area the link will be assigned to.
  • link_target – Can be one of these values: _blank for new window, or _self for same window.
  • animation_delay – Accepts a millisecond value that controls the delay of animation between each element in a set. For example, 1000 is 1 second.
  • animation_offset – Can be one of these values: default, top-into-view, top-mid-of-view, or bottom-in-view. Sets when the animation starts.
  • animation_type – Can be one of these values: none, bounce, fade, flash, rubberBand, shake, slide, or zoom. Sets the animation to use on the shortcode.
  • animation_direction – Can be one of these values: down, right, left, up, or static. Sets the incoming direction for the animation.

  • animation_speed – Accepts a numerical value from .1, which is the slowest, to 1, which is the fastest.
  • margin_top – Accepts a pixel value that controls the top margin. For example, 5px.
  • margin_bottom – Accepts a pixel value that controls the bottom margin. For example, 5px.
  • title – Your custom title text.
  • icon – A font awesome icon value. For example, fa-glass.
  • backgroundcolor – Accepts a hexcode ( #000000 ). This should be transparent for all layouts except for the icon-boxed layout. Leave blank for Theme Option selection.
  • iconcolor – Accepts a hexcode ( #000000 ). Sets the icon’s color. Leave blank for Theme Option selection.
  • circlecolor – Accepts a hexcode ( #000000 ). Sets the icon’s background color. Leave blank for Theme Option selection.
  • circlebordercolor – Accepts a hexcode ( #000000 ). Sets the icon’s background inner border color for this particular list item. Leave blank for Theme Option selection.
  • circlebordersize – Accepts a pixel value that controls the inner border size of the icon background. For example, 1px.
  • outercirclebordercolor – Accepts a hexcode ( #000000 ). Sets the icon’s background outer border color for all list items. Leave blank for Theme Option selection.
  • outercirclebordersize – Accepts a pixel value that controls the outer border size of the icon background. For example, 1px.
  • iconrotate – Can be one of these values: 90, 180, 270,or nonw. Sets the angle of the icon’s rotation.
  • iconspin – Can be one of these values: yes, or no. This will enable or disable the icon’s spinning feature.
  • image – The URL path of your custom icon image, starting with http:// and usually ending on .jpg, .png or .gif. Make sure there is no “icon=” value.
  • image_width – This parameter is for custom icon images. Accepts a numerical value to set a custom width in pixels. For example, 35.
  • image_height – This parameter is for custom icon images. Accepts a numerical value to set a custom height in pixels. For example, 35.
  • link – The link you want the Read More text to go to, including http://. For example, http://www.example.com/.
  • linktext – Your custom link text. For example, Learn More.
  • link_target – Can be one of these values: _blank for new window, or _self for same window.
  • animation_type – Can be one of these values: none, bounce, fade, flash, rubberBand, shake, slide, or zoom. Sets the animation to use on the shortcode.
  • animation_direction – Can be one of these values: down, right, left, up, or static. Sets the incoming direction for the animation.
  • animation_speed – Accepts a numerical value from .1, which is the slowest, to 1, which is the fastest.
  • element visibility – Choose to show or hide the element on small, medium or large screens. Show them on all, or just some, givine you full control over all screen sizes. Each screen size also has a custom width setting in Fusion Theme Options.
  • class – Add a custom class to the wrapping HTML element for further css customization. Please refer to this documentation section.
  • id – Add a custom id to the wrapping HTML element for further css customization. Please refer to this documentation section.

Join The 350,000+ Satisfied Avada Users!

BUY AVADA NOW!