Nested Columns


With Fusion Builder, you can now add Nested Columns to the page. Nested columns are simply columns within columns. For example, you can add a 1/4 column inside a 1/2 column, which means the nested column will be 1/4 of the 1/2 column it's in, and 1/8 of the entire page width. Read on to find out about this intriguing addition to Fusion Builder.

Nested Columns

IMPORTANT NOTE: This feature is only available in the Fusion Builder included with Avada version 5.0 and up.
Nested Columns

How To Add Nested Columns

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

Step 2 - Activate the Fusion Builder by clicking the 'Use Fusion Builder' button on top of the page editor.

Step 3 - Insert a Container, then add columns into it. In each column, there'll be a '+ Element' button.

Step 4 - Click the '+ Element' button, then switch to the 'Nested Columns' tab.

Step 5 - Simply click the column layout you'd like to add to the page. Once you added, it'll be displayed as a 'Nested Columns' element.

Step 6 - To add content into nested columns, click the 'Edit' icon on the 'Nested Columns' element. Once you do that, a window with your columns will appear.

Step 7 - On this window, you can edit the nested columns and add elements into them. Once you're finished editing the columns, click 'Done'.

Element & Global Options

There are no element or global options with Nested Columns.

Nested Columns Parameters

Each of these parameters correspond to each individual Element option as shown above, in this document. Likewise, the format illustrated below is what you will see if the Fusion builder is deactivated in your page/post.

Copy to Clipboard
  • spacing - Accepts a percentage or numerical value. For example, 20 or 14%. Sets the margin added to the column.
  • center_content - Choose from yes, or no. This will enable or disable center alignment for column content. The container the column is in must have equal heights enabled.
  • hover_type - Choose from none, zoomin, zoomout, or liftup. Sets the hover type.
  • link - The URL path you want the column to direct to when clicked. For example,
  • min_height - Choose from yes, or no. Disable or enable equal heights on the column if it's inside a container that has equal heights enabled.
  • 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.
  • background_color - Accepts a hexcode ( #000000 ). Sets the background color of the column.
  • background_image - The URL path of your background image. For example,
  • background_position - Choose from left top, left center, left bottom, right top, right center, right bottom, center top, center center, or center bottom.
  • background_repeat - Choose from no-repeat, repeat, repeat-y, or repeat-x. Sets how the background repeats.
  • border_size - Accepts a pixel value. For example, 5px. Sets the border's size.
  • border_color - Accepts a hexcode ( #000000 ). Sets the column border's color.
  • border_style - Choose from solid, dashed, or dotted. Sets the border style.
  • 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.
  • type - Choose from 1_6, 1_5, 1_4, 1_3, 2_5, 1_2, 3_5, 2_3, 3_4, 4_5, 5_6, or 4_4. Sets the size of the column.