Nested Columns

26/03/2019

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.

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 Options

Location: The edit screen within each Element. At first glance, the Nested Columns Element does not have any Element Options. This is because they are in the individual columns of the Nested Columns Element, rather than the parent element itself.

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.

General Tab

  • Column Spacing - Controls the margin added to the column. Enter value including any valid CSS unit, ex: 4%.
  • Center Content - Allows you to center content vertically. This option only works if the 'Equal Heights' option is enabled in the Parent Container. Choose between Yes or No.
  • Hover Type - Select the hover effect type. This will disable links and hover effects on elements inside the column. Choose from None, Zoom In, Zoom Out, and Lift Up.
  • Link URL - Allows you to add the URL the column will link to when clicked. Note: This will disable links on elements inside the column.
  • Link Target - Choose whether to open the link in the same browser tab or in a new tab: _self = opens in the same browser tab, _blank = opens in a new browser tab.
  • Ignore Equal Heights - Allows you to ignore equal heights on this column if equal heights is enabled on the surrounding container. Choose between Yes or No.
  • Column Visibility - Choose to show or hide the column 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 Fusion Builder Elements tab in the Theme Options. Options are Small Screen, Medium Screen, or Large Screen.
  • CSS Class - Allows you to add a class for the Element.
  • CSS ID - Allows you to add an ID for the Element.
View The Options Screen

Design Tab

  • Background Color - Controls the background color of the column.
  • Background Image - Allows you to upload an image as the column's background.
  • Background Position - Controls the position of the background image. Choose between Left Top, Left Center, Left Bottom, Right Top, Right Center, Right Bottom, Center Top, Center Center, or Center Bottom.
  • Background Repeat - Controls how the background image repeats. Choose between No Repeat, Repeat Vertically and Horizontally, Repeat Horizontally, or Repeat Vertically.
  • Border Size - Accepts a pixel value that sets the size of the column's border.
  • Border Color - Allows you to set the color of the column's border.
  • Border Style - Allows you to set the style of the column's border. Choose between Solid, Dashed, or Dotted.
  • Border Position - Choose the position of the border. Options are All, Top, Right, Bottom, and Left.
  • Border Radius - Enter values including any valid CSS unit, ex: 10px. IMPORTANT: In order to make border radius work in browsers, the overflow CSS rule of the column needs set to hidden. Thus, depending on the setup, some contents might get clipped.
  • Box Shadow - Set to "Yes" to enable box shadows.
  • Box Shadow Position - Set 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 Radius - Set the blur radius of the box shadow. In pixels.
  • Box Shadow Spread Radius - Set 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 Color - Controls the color of the box shadow.
  • Box Shadow Style - Set the style of the box shadow to either be an outer or inner shadow.
  • Padding - Accepts a pixel value that sets the column's top, right, bottom, and left padding. For example, 25px.
  • Margin - Spacing above and below the column. In px, em or %, e.g. 10px. Leave empty for the default value
View The Options Screen

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

There are no Global options for the Nested Columns Element.

Nested Column Element 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
  • 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.
  • 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, http://www.example.com/.
  • target - Choose from _self or _blank. _self = open in same browser tab, _blank = open in new browser. Tab. Sets how you want the link to open.
  • 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, http://www.sample.com/image.jpg.
  • 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.
  • border_position - Choose from all, top, right, bottom or left. Sets which side of the column will have a border.
  • border_radius_top_left - Enter values including any valid CSS unit, ex: 10px.
  • border_radius_top_right - Enter values including any valid CSS unit, ex: 10px.
  • border_radius_bottom_left - Enter values including any valid CSS unit, ex: 10px.
  • border_radius_bottom_right - Enter values including any valid CSS unit, ex: 10px.
  • box_shadow - Enables a box shadow. Values are yes, or no.
  • box_shadow_vertical - Set the vertical position of the box shadow. Positive values put the shadow below the box, negative values put it above the box. In pixels, ex. 5px.
  • box_shadow_horizontal - Set the horizontal position of the box shadow. Positive values put the shadow to the right of the box, negative values put it to the left of the box. In pixels, ex. 5px.
  • box_shadow_blur - Set the blur radius of the box shadow. In pixels.
  • box_shadow_spread - Set 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_color - Controls the color of the box shadow.
  • box_shadow_style - Set the style of the box shadow. Values are outer or inner.
  • padding_top - Enter values including any valid CSS unit, ex: 4%.
  • padding_right - Enter values including any valid CSS unit, ex: 4%.
  • padding_bottom - Enter values including any valid CSS unit, ex: 4%.
  • padding_left - Enter values including any valid CSS unit, ex: 4%.
  • margin_top - Accepts a pixel value. For example, 5px. Sets the bottom margin.
  • margin_bottom - Accepts a pixel value. For example, 5px. Sets the bottom margin.
  • 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.