Content Boxes Element

Last Update: March 30, 2024

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.

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.
Button SpanChoose to have the button span the full width.
Link AreaSelect which area the link will be assigned to. Select default for Global Options selection.
Link Target_self = open in same window _blank = open in new 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.
Element VisibilityChoose to show or hide the element on small, medium or large screens. You can choose more than one at a time.
CSS ClassAdd a class to the wrapping HTML element.
CSS IDAdd an ID to the wrapping HTML element.

children

HeadingDescription
Add / Edit ItemsAdd or edit new items for this element. Drag and drop them into the desired order.

Design

HeadingDescription
Title SizeControls the size of the title. In pixels ex: 18px.
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.
Body Font ColorControls the color of the body font. ex: #000.
Content Box Background Color
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 Color
Icon BackgroundChoose to show a background behind the icon. Select default for Global Options selection.
Icon Background RadiusChoose the border radius of the icon background. In pixels (px), ex: 1px, or "round".
Icon Background Color
Icon Background Inner Border Size
Icon Background Inner Border Color
Icon Background Outer Border Size
Icon Background Outer Border Color
Icon SizeControls the size of the icon. In pixels.
Icon Hover Animation TypeSelect the animation type for icon on hover. Select default for Global Options selection.
Hover Accent ColorControls the accent color on hover.
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.
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 Color
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.
Icon Background ColorChoose to show a background behind the icon.
Icon Background Inner Border Size
Icon Background Inner Border Color
Icon Background Outer Border Size
Icon Background Outer Border Color
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.

In this article