Loading...
Content Boxes2018-10-24T22:48:18+00:00

Content Boxes Element

Avada includes 8 pre-designed 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, SEO optimized titles and our advanced options network so you can easily set them up as you desire. The options to use are simply mind blowing.

8 Pre-Designed Layouts to Start With

The Content Box Element has 8 pre-designed layouts to choose from that allow you to use as-is or customize further via our easy to use option settings.

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, and what’s better is that the Content Box Element integrates with them beautifully.

SEO Optimized Titles

Content Boxes are SEO Optimized and give you the choice of what heading tag (from h1, to h6) you’d like the title to adopt.

Hover Effects

Each Content Box Element has the ability to utilize a different hover effect. This is the perfect way to grab the attention of your audience. The hover animation effects can utilize different colors and each content box has it’s own set of custom link settings.

Icon Options Galore

The Content Box Element can utilize any of the Font Awesome Icons. The amazing flexibility of power comes in the customizations we offer for icons. You can choose colors, 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 array of easy to use options and pre-designed layouts the Content Box Element offers are purely amazing. The possible combinations are virtually endless and allow you to create so many unique setups. Below are just a few examples.

Mobile Visibility Settings

Our mobile visibility system gives you full control over what displays based on 3 customizable screen sizes. Every Fusion Builder Element has these settings and they allow you to show or hide elements on various screen sizes. In addition, you can choose what those screen sizes are! This gives you maximum control to set the exact point when an element should show or hide. Resize the page to see the elements appear or disappear based on what we set.

Only Show on Desktop

Only Show on Tablet

Only Show on Mobile

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 450,000+ Satisfied Avada Users!

BUY AVADA NOW!

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