Content Boxes Element

Last Update: February 14, 2023

The Content Boxes Element is perhaps the most versatile Element of all. Avada includes 8 pre-designed content box layouts, and a plethora of options, that allow you to take your 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. Read below to discover more about this incredibly versatile element.

For privacy reasons YouTube needs your permission to be loaded.
I Accept

How To Use The Content Boxes Element

The Content Boxes Element allows you to add a wide variety of content boxes anywhere in your content. This is a fully featured element, with many options.

There are both Parent Options, which affect the whole series of content boxes, and Child options for the individual content boxes. This element has a plethora of options, starting with 8 pre-designed layouts to choose from. Make sure to view the Element Demo page, to fully appreciate the different layouts and options on offer.

Once you have chosen your layout, you can slowly move through the Parent Options, deciding how to style the Content Boxes. Note the Number of Columns option. This element can be inserted into any size column, and by choosing how many columns to display will determine how many Content Box items are displayed across the column width. If there are more items than the number of columns chosen, the remaining items will display on a new row below the first. If there are fewer item than the number of columns chosen, the full width of the column will not be used.

For the child items, click the pencil icon to edit the existing item. The Child Item Options Panel opens. Note that you can override a large number of of global options here, customizing the individual content box. At the bottom of the Child Options, you will find the Content Box Content field, where you add the content for the individual content boxes.

You can then duplicate existing, or create new, content boxes by clicking on the Clone Item icon, or the + Content Box button respectively.

Read below for a description of all element options.

Element Options

Note: The Default setting will use the global settings assigned for this element in your Global Options, found at Options > Avada Builder Elements > Content Box. Also, please note that the displayed options screens below show ALL the available options for the element. If you have Avada’s Option Network Dependencies turned on, you will only see options relevant to your selections, and so the options screen may look somewhat different.

Content Boxes Options

General

HeadingDescription
Box LayoutSelect the layout for the content box.
Number of ColumnsSet the number of columns per row.
AlignmentDefines how the content boxes should align within the container.
Link TypeSelect the type of link that should show in the content box. Select default for Global Options selection. Default currently set to Text.
Button SpanChoose to have the button span the full width. Default currently set to No.
Link AreaSelect which area the link will be assigned to. Select default for Global Options selection. Default currently set to Link+Icon.
Link Target_self = open in same window _blank = open in new window Default currently set to Same Window.
Content AlignmentWorks with "Classic Icon With Title" and "Classic Icon On Side" layout options.
Animation TypeSelect the type of animation to use on the element.
Direction of AnimationSelect the incoming direction for the animation.
Animation ColorSelect the color of the animation
Speed of AnimationType in speed of animation in seconds (0.1 - 5).
Animation DelayControls the delay of animation between each element in a set. In seconds (0.0 - 5.0).
Offset of AnimationControls when the animation should start. Default currently set to Top Of Element Hits Bottom Of Viewport.
Element VisibilityChoose to show or hide the element on small, medium or large screens. You can choose more than one at a time. Each of the 3 sizes has a custom width setting on the Responsive tab in the Global Options.
CSS ClassAdd a class to the wrapping HTML element.
CSS IDAdd an ID to the wrapping HTML element.

children

HeadingDescription
Dynamic Content

Design

HeadingDescription
Title SizeControls the size of the title. In pixels ex: 18px. Leave empty for default value of 18.
HTML Heading TagChoose HTML tag of the heading, either div, p or the heading tag, h1-h6.
Title Font ColorControls the color of the title font. ex: #000. Leave empty for default value of Dark. Reset to default.Using default value.
Body Font ColorControls the color of the body font. ex: #000. Leave empty for default value of Gray. Reset to default.Using default value.
Content Box Background ColorLeave empty for default value of White. Reset to default.Using default value.
Border RadiusEnter values including any valid CSS unit, ex: 10px.
Box ShadowSet to "Yes" to enable box shadows.
Box Shadow PositionSet the vertical and horizontal position of the box shadow. Positive values put the shadow below and right of the box, negative values put it above and left of the box. In pixels, ex. 5px.
Box Shadow Blur RadiusSet the blur radius of the box shadow. In pixels.
Box Shadow Spread RadiusSet the spread radius of the box shadow. A positive value increases the size of the shadow, a negative value decreases the size of the shadow. In pixels.
Box Shadow ColorControls the color of the box shadow.
Box Shadow StyleSet the style of the box shadow to either be an outer or inner shadow.
IconGlobal setting for all content boxes, this can be overridden individually. Click an icon to select, click again to deselect.
Flip IconChoose to flip the icon.
Rotate IconChoose to rotate the icon.
Spinning IconChoose to let the icon spin.
Icon ColorLeave empty for default value of White. Reset to default.Using default value.
Icon BackgroundChoose to show a background behind the icon. Select default for Global Options selection. Default currently set to Yes.
Icon Background RadiusChoose the border radius of the icon background. In pixels (px), ex: 1px, or "round". Leave empty for default value of 50%.
Icon Background ColorLeave empty for default value of Avada Green. Reset to default.Using default value.
Icon Background Inner Border SizeDefault currently set to 0. Reset to default.Using default value.
Icon Background Inner Border ColorLeave empty for default value of Avada Green. Reset to default.Using default value.
Icon Background Outer Border SizeDefault currently set to 0. Reset to default.Using default value.
Icon Background Outer Border ColorLeave empty for default value of White. Reset to default.Using default value.
Icon SizeControls the size of the icon. In pixels. Leave empty for default value of 21. Reset to default.Using default value.
Icon Hover Animation TypeSelect the animation type for icon on hover. Select default for Global Options selection. Default currently set to Fade.
Hover Accent ColorControls the accent color on hover. Leave empty for default value of Avada Green. Reset to default.Using default value.
Icon ImageTo upload your own icon image, deselect the icon above and then upload your icon image.
Icon Image Max WidthSet the icon image max width. Leave empty to use image's native width. In pixels, ex: 35.
MarginSpacing above and below the content boxes. In px, em or %, e.g. 10px. Leave empty for default value of 0px, 20px.
Item MarginSpacing above and below each item boxes. In px, em or %, e.g. 10px.

Content Box Options

General

HeadingDescription
TitleThe box title.
Content Box Background ColorLeave empty for value set in parent options. If that is also empty, the Global Options value of White will be used. Reset to default.Using default value.
IconClick an icon to select, click again to deselect.
Flip IconChoose to flip the icon.
Rotate IconChoose to rotate the icon.
Spinning IconChoose to let the icon spin.
Icon ColorControls the color of the icon. Leave empty for value set in parent options. If that is also empty, the Global Options value of White will be used. Reset to default.Using default value.
Icon Background ColorChoose to show a background behind the icon. Leave empty for value set in parent options. If that is also empty, the Global Options value of Avada Green will be used. Reset to default.Using default value.
Icon Background Inner Border SizeLeave empty for value set in parent options. If that is also empty, the Global Options value of 0 will be used. Reset to default.Using default value.
Icon Background Inner Border ColorLeave empty for value set in parent options. If that is also empty, the Global Options value of Avada Green will be used. Reset to default.Using default value.
Icon Background Outer Border SizeLeave empty for value set in parent options. If that is also empty, the Global Options value of 0 will be used. Reset to default.Using default value.
Icon Background Outer Border ColorLeave empty for value set in parent options. If that is also empty, the Global Options value of White will be used. Reset to default.Using default value.
Icon ImageTo upload your own icon image, deselect the icon above and then upload your icon image.
Icon Image Max WidthSet the icon image max width. Leave empty for value set in parent option. Set to -1 to use image's native width. In pixels, ex: 35.
Read More Link UrlAdd the link's url ex: http://example.com.
Read More Link TextInsert the text to display as the link.
Read More Link TargetControls how the link will open.
Content Box ContentAdd content for content box.
Animation ColorSelect the color of the animation

Animation

HeadingDescription
Animation TypeSelect the type of animation to use on the element.
Direction of AnimationSelect the incoming direction for the animation.
Speed of AnimationType in speed of animation in seconds (0.1 - 5).
Offset of AnimationControls when the animation should start. Default currently set to Top Of Element Hits Bottom Of Viewport.

In this article