Content Boxes Element

26/05/2019

The Content Box Element is perhaps the most versatile Element of all. Avada includes 6 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.

View more examples!

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.

Step 1 – Create a new page or edit an existing one.

Step 2 – Add a container then select your desired column layout.

Step 3 – Click the ‘+ Element’ button to bring up the Elements window. Locate the ‘Content Boxes’ element and click it to bring up its options window.

Step 4 – The options on the right hand side are Parent Options, and affect the whole series of 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.

Step 5 – Once you have chosen your layout, you can slowly move down the Parent Options, deciding how to style the Content Boxes. Note that the second option is Number of Columns. 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.

Step 6 – Once you have set all your Parent Options, you add Child Items on the left. Click the pencil icon to edit the existing item. The Child Item Options Panel appears. 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.

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

Step 8 – Once you have completed adding your content boxes, click Save. You will be returned to the edit page. You can preview the page to view your content boxes, and you can always edit the element again to make changes.

Read below for a detailed description of all element options.

Element Options

Location: The edit screen within each Element.

You can deploy as many individual Elements in pages and posts as you need, there is no limit. Within each of the Elements you will see a tab or tabs that house an array of options that make it possible for you to configure each Element independently, and greatly enhance your flexibility and creative options.

Note: The Default setting will use the global settings assigned for this element in your Theme Options > Fusion Builder Elements > Content Box Element section. 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.

Parent Options

  • Box Layout – Select the layout for the content box. Choose from Classic Icon With Title, Classic Icon On Top, Classic Icon On Side, Classic Icon Boxed, Clean Layout Vertical, Clean Layout Horizontal, Timeline Vertical, and Timeline Horizontal.

  • Number of Columns – Set the number of columns per row. Choose from 1 – 6.

  • Title Size – This controls the size of the title. In pixels ex.: 18px

  • Heading Size – Choose the title size, from H1-H6.

  • Title Font Color – Controls the color of the title font. ex: #000.

  • Body Font Color – Controls the color of the body font. ex: #000.

  • Content Box Background Color – Select the background color of the content boxes. Leave empty for default value.

  • Icon – Global setting for all content boxes, this can be overridden individually. Click an icon to select, click again to deselect.

  • Flip Icon – Choose to flip the icon. Options are None, Horizontal, and Vertical.

  • Rotate Icon – Choose to rotate the icon. Options are 90, 180, 270 (degrees), or None.

  • Spinning Icon – Choose to make the icon spin. Options are Yes, or No.

  • Icon Color – Select the color for the icon. Leave empty for the default value.

  • Icon Background – Choose to show a background behind the icon. Options are Yes, No, and Default. Select Default for theme options selection.

  • Icon Background Radius – Choose the border radius of the icon background. In pixels (px), ex: 1px, or “round”.

  • Icon Background Color – Choose the icon background color. ex: #000.

  • Icon Background Inner Border Size – Controls the icon background inner border. From 0 to 20.

  • Icon Background Inner Border Color – Controls the icon background inner border color.

  • Icon Background Outer Border Size – Controls the icon background outer border size. From 0 to 20.

  • Icon Background Outer Border Color – Controls the icon background outer border color.

  • Icon Size – Controls the size of the icon. In pixels. Up to 250px.

  • Icon Hover Animation Type – Select the animation type for icon on hover. Choose from Default, None, Fade, Slide, or Pulsate.

  • Hover Accent Color – Controls the accent color on hover.

  • Icon Image – To upload your own icon image, deselect the icon above and then upload your icon image.

  • Icon Image Max Width – Set the icon image max width. Leave empty to use image’s native width. In pixels, ex: 35.

  • Link Type – Select the type of link that should show in the content box. Choose from Default, Text, Button bar, or Button.

  • Button Span – Choose to have the button span the full width. Choose from Default, Yes, or No.

  • Link Area – Select which area the link will be assigned to. Choose from Link+Icon, or Entire Content Box.

  • Link Target – Select if the link opens in the same browser tab (_self) or in a new tab (_blank).

  • Content Alignment – This only works with “Classic Icon With Title” and “Classic Icon On Side” layout options. Choose from Left, or Right.

  • Animation Type – Select the type of animation to use on the element. Choose from None, Bounce, Fade, Flash, Rubberband, Shake, Slide, or Zoom.

  • Animation Delay – Controls the delay of animation between each element in a set. In milliseconds, 1000 = 1 second.

  • Offset of Animation – Controls when the animation should start. Choose from Default, Top of element hits bottom of Viewport, Top of element hits middle of Viewport, or  Bottom of element enters Viewport.

  • Direction of Animation – Select the incoming direction for the animation. Choose from Top, Right, Bottom, Left, or Static.

  • Speed of Animation – Type in speed of animation in seconds (0.1 – 1).

  • Margin – Controls the spacing above and below the content boxes. In px, em or %, e.g. 10px.

  • Element Visibility –  Allows you to control the element’s visibility. Choose one or more between Small Screen, Medium Screen, or Large Screen.

  • CSS Class – Add a custom class to the wrapping HTML element for further css customization. Learn more here.

  • CSS ID – Add a custom id to the wrapping HTML element for further css customization. Learn more here.

Add / Edit Settings

  • Add / Edit Items – This is where all your child element’s items are found. Each will be numbered to better keep track of how many you currently have. You can reorder elements by dragging them and dropping them into place.

  • Edit Item Icon – Allows you to edit an item.

  • Clone Item Icon – Allows you to clone an item. Cloned items will automatically be added to the bottom of the items list.

  • Delete Item Icon –  Allows you to delete an item.

  • Re-order Feature –  Allows you to drag and drop the item to your desired order to rearrange them.

  • Add New Content Box Button –  Allows you to add a new Content Box.

View The Options Screen

Child Options

Content Box General Tab

  • Title – Enter the content box title.

  • Content Box Background Color – Choose the color for the content box background. Leave empty for the theme options default.

  • Icon – Choose an icon for the content box. Click a Font Awesome icon to select, click again to deselect.

  • Flip Icon – Choose to flip the icon. Options are None, Horizontal, and Vertical.

  • Rotate Icon – Choose to rotate the icon. Options are 90, 180, 270 (degrees), or None.

  • Spinning Icon – Choose to make the icon spin. Options are Yes, or No.

  • Icon Color – Select the color for the icon. Leave empty for the default value.

  • Icon Background Color – Choose the icon background color. ex: #000.

  • Icon Background Inner Border Size – Controls the icon background inner border. From 0 to 20.

  • Icon Background Inner Border Color – Controls the icon background inner border color.

  • Icon Background Outer Border Size – Controls the icon background outer border size. From 0 to 20.

  • Icon Background Outer Border Color – Controls the icon background outer border color.

  • Icon Image – To upload your own icon image, deselect the icon above and then upload your icon image.

  • Icon Image Max Width – Set 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 URL – Add the link’s url ex: http://example.com.

  • Read More Link Text – Insert the text to display as the link.

  • Read More Link Target – Select if the link opens in the same browser tab (_self) or in a new tab (_blank). Choose from Default, Same Window, or New Window/Tab.

  • Content Box Content – Add content for content box.

View The Options Screen

Content Box Animation Tab

  • Animation Type – Controls the column’s animation type. Choose between None, Bounce, Fade, Flash, Rubberband, Shake, Slide, or Zoom.

  • Direction of Animation – Controls the direction of animation on the column. Choose between Top, Right, Bottom, Left, or Static.

  • Speed of Animation – Controls the speed of animation on the column. Choose between 0.1 to 1.

  • Offset of Animation – Controls when the animation will start. Choose between Default, Top of element hits bottom of viewport, Top of element hits middle of viewport, or Bottom of element enters viewport.

View The Options Screen

Global Options

Location: WordPress Dashboard > Avada > Theme Options > Fusion Builder Elements > Content Box Element

The Avada Advanced Options Network gives you amazing flexibility with additional Global Element Options that allows you to control individual Element default settings.

View The Options Screen

Content Box Element Parameters

Copy to Clipboard

Raw Parent Options

  • layout – Choose from icon-with-title, icon-on-top, icon-on-side, icon-boxed, clean-vertical, clean-horizontal, timeline-vertical, or timeline-horizontal. Sets the layout.
  • columns – Choose from 1 – 6. Sets the number of columns per row.
  • title_size – Accepts a pixel value. For example, 5px. Sets the title’s font size.
  • heading_size – Choose from 1, 2, 3, 4, 5, or 6. Sets the title size, H1-H6.
  • title_color – Accepts a hexcode ( #000000 ). Sets the title’s font color.
  • body_color – Accepts a hexcode ( #000000 ). Sets the body’s font color.
  • backgroundcolor – Accepts a hexcode ( #000000 ). Sets the background color.
  • icon – A font awesome icon value. For example, fa-glass.
  • iconflip – Choose from none, horizontal,or vertical. Sets how the icon is flipped.
  • iconrotate – Choose from 90, 180, 270,or none. Sets the icon’s rotation angle.
  • iconspin – Choose from yes, or no. Enable or disable the icon’s spinning animation.
  • iconcolor – Accepts a hexcode ( #000000 ). Sets the icon’s color.
  • icon_circle – Choose from default, yes, or no. Enable or disable icon’s background.
  • icon_circle_radius – Accepts a pixel or percentage value. For example, 1px or 50%. Sets the icon background’s radius.
  • circlecolor – Accepts a hexcode ( #000000 ). Sets the icon’s background color.
  • circlebordersize – Accepts a pixel value. For example, 1px. Sets icon background’s inner border size.
  • circlebordercolor – Accepts a hexcode ( #000000 ). Sets the icon background’s inner border color.
  • outercirclebordersize – Accepts a pixel value. For example, 1px. Sets the icon background’s outer border size.
  • outercirclebordercolor – Accepts a hexcode ( #000000 ). Sets the icon background’s outer border color.
  • icon_size – Accepts a pixel value. For example, 5px. Sets the icon’s size.
  • icon_hover_type – Choose from default, none, fade, slide, or pulsate. Sets the icon’s animation type on hover.
  • hover_accent_color – Accepts a hexcode ( #000000 ). Sets the hover animation’s accent color.
  • image – The URL path of your custom icon image. For example, http://www.sample.com/image.jpg.

  • image_id – The WordPress generated image ID.

  • image_max_width – Accepts a numerical value. For example, 35. Set the image’s max width.

  • link_type – Choose from default, text, button-bar, or button. Sets the link type displayed on the content box.
  • button_span – Choose from default, yes, or no. Set to have the button span the full width.

  • link_area – Choose from default, link-icon, or box. Sets which area the link will be assigned to.
  • link_target – Choose from _blank or _self. Choose _blank to open the link in a new window, or _self to open it in the same window.
  • icon_align – Choose from left, or right. Sets the content’s alignment. This parameter is for icon-with-title and icon-on-side layouts only.
  • animation_type – Choose from none, bounce, fade, flash, rubberBand, shake, slide, or zoom. Sets the animation to use on the element.
  • animation_delay – Accepts a numerical value. For example, 1 for 1 second, or 0.6 for 600 miliseconds. Sets the delay between transitions.
  • animation_offset – Choose from default, top-into-view, top-mid-of-view, or bottom-in-view. Sets when the animation starts.
  • animation_direction – Choose from down, right, left, up, or static. Sets the animation’s incoming direction.
  • animation_speed – Accepts a numerical value from .1 (fastest), to 1, (slowest).
  • margin_top – Accepts a pixel value. For example, 5px. Sets the top margin.
  • margin_bottom – Accepts a pixel value. For example, 5px. Sets the bottom margin.
  • hide_on_mobile – Choose from small-visibility, medium-visibility or large-visibility. You can select more than one setting. This will show the element on the selected visibility options, and will hide them on the deselected ones.
  • class – Add a custom class to the wrapping HTML element for further css customization.
  • id – Add a custom id to the wrapping HTML element for further css customization.

Raw Child Options

  • title – The content box’s title.
  • backgroundcolor – Accepts a hexcode ( #000000 ). Sets the background color.
  • icon – A font awesome icon value. For example, fa-glass.
  • iconflip – Choose from none, horizontal,or vertical. Sets how the icon is flipped.
  • iconrotate – Choose from 90, 180, 270,or none. Sets the icon’s rotation angle.
  • iconspin – Choose from yes, or no. Enable or disable the icon’s spinning animation.
  • iconcolor – Accepts a hexcode ( #000000 ). Sets the icon’s color.
  • circlecolor – Accepts a hexcode ( #000000 ). Sets the icon’s background color.
  • circlebordersize – Accepts a pixel value. For example, 1px. Sets icon background’s inner border size.
  • circlebordercolor – Accepts a hexcode ( #000000 ). Sets the icon background’s inner border color.
  • outercirclebordersize – Accepts a pixel value. For example, 1px. Sets the icon background’s outer border size.
  • outercirclebordercolor – Accepts a hexcode ( #000000 ). Sets the icon background’s outer border color.
  • image – The URL path of your custom icon image. For example, http://www.sample.com/image.jpg. icon must not be set.
  • image_ID – The WordPress generated image ID.

  • image_max_width – Accepts a numerical value. For example, 35. Set the image’s max width.

  • link – The URL you want the custom link text to direct to. For example, http://www.example.com/.
  • linktext – The custom link text. For example, Learn More.
  • link_target – Choose from _blank or _self. Choose _blank to open the link in a new window, or _self to open it in the same window.
  • animation_type – Choose from none, bounce, fade, flash, rubberBand, shake, slide, or zoom. Sets the animation to use on the element.
  • animation_direction – Choose from down, right, left, up, or static. Sets the animation’s incoming direction.
  • animation_speed – Accepts a numerical value from .1 (fastest), to 1, (slowest).
  • animation_offset – Choose from default, top-into-view, top-mid-of-view, or bottom-in-view. Sets when the animation starts.
  • custom content – Insert the content boxes’ content between the

    Copy to Clipboard
    tags.