Nested Columns Element

21/11/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.
For privacy reasons YouTube needs your permission to be loaded. For more details, please see our Privacy Policy.
I Accept
View Element Demo Page!

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

  • 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 – Allows you to set the position of the column’s border. Choose between All, Top, Right, Bottom, or 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 to be 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.

  • Box Shadow Blur Radius – Set the blur radius of the box shadow. In pixels. From 0 – 100.

  • 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, from 0- 100.

  • 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 – Accepts a pixel value that sets the column’s top and bottom margin. For example, 25px.

View The Options Screen

BG (Background) Tab

Color Tab

  • Background Color – Controls the background color of the nested column.

Gradient Tab

  • Gradient Start Color – Select the start color for the gradient.

  • Gradient End Color – Select the end color for the gradient.

  • Gradient Start Position – Select the start position for the gradient.

  • Gradient End Position – Select the end position for the gradient.

  • Gradient Type – Select the type of gradient. Choose from Linear or Radial.

  • Radial Direction – Select direction for radial gradient.

  • Gradient Angle – Controls the gradient angle. In degrees.

Image Tab

  • Background Image –Upload an image to display in the background.

  • Background Position – Choose the postion of the background image.

  • Background Repeat – Choose how the background image repeats.

  • Background Blend ModeChoose how blending should work when using multiple background layers; for example, a background image and a background color or gradient with opacity acting as a color overlay.

Color Options Screen
Gradient Options Screen
Image Options Screen

Extras 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.

  • Filter Type (both regular & hover state options)

  • Hue – This filter controls the hue (color) of the contents of the nested column.

  • Saturation – This filter controls the color saturation of the contents of the nested column.

  • Brightness – This filter controls the brightness of the contents of the nested column.

  • Contrast – This filter controls the contrast of the contents of the nested column.

  • Invert – This filter inverts the colors of the contents of the nested column.

  • Sepia – This filter adds a sepia filter on the contents of the nested column.

  • Opacity – This filter controls the opacity of the contents of the nested column.

  • Blur – This filter adds a blur filter to the contents of the nested column.

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.

  • 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_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.
  • background_type – The background type. Options are single, or image.

  • background_color – Accepts a hexcode ( #000000 ). Sets the background color of the column.
  • gradient_start_color – Set the start color for the gradient.

  • gradient_end_color – Set the end color for the gradient.

  • gradient_start_position – Set the start position for the gradient. From 0-100.

  • gradient_end_position – Set the end position for the gradient. From 0-100.

  • gradient_type – Set the type of gradient. Options are linear or radial.

  • radial_direction – Set the direction of the radial gradient. Options are bottom, bottom center, center, center left, left top, right, rigth top, and top.

  • linear_angle – Set the angle of the linear gradient. In degrees. 

  • 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.
  • background_blend_mode – Select the blend mode for the background image and any other background layer, like color or gradient. Choose from multiply, screen, overlay, darken, lighten, color dodge, color burn, hard light, soft light, difference, exclusion, hue, saturation, color, and luminosity. 

  • 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.
  • filter_hue – The hue filter for the column. From 0-359.

  • filter_saturation – The saturation filter for the column. From 0-200.  100 is the midway point, with no reduction or addition of saturation.

  • filter_brightness – The brightness filter for the column. From 0-200.  100 is the midway point, with no reduction or addition of brightness.

  • filter_contrast – The contrast filter for the column. From 0-200.  100 is the midway point, with no reduction or addition of contrast.

  • filter_invert – The inversion filter for the column. From 0-100.  100 is full inversion.

  • filter_sepia – The sepia filter for the column. From 0-100.  100 is full sepia.

  • filter_opacity – The opacity filter for the column. From 0-100.  0 is fully transparent.

  • filter_blur – The blur filter for the column. From 0-50.  50 is fully blurred.

  • filter_hue_hover – The hover state hue filter for the column. From 0-359.

  • filter_saturation_hover – The hover state saturation filter for the column. From 0-200.  100 is the midway point, with no reduction or addition of saturation.

  • filter_brightness_hover – The hover state brightness filter for the column. From 0-200.  100 is the midway point, with no reduction or addition of brightness.

  • filter_contrast_hover – The hover state contrast filter for the column. From 0-200.  100 is the midway point, with no reduction or addition of contrast.

  • filter_invert_hover – The hover state inversion filter for the column. From 0-100.  100 is full inversion.

  • filter_sepia_hover – The hover state sepia filter for the column. From 0-100.  100 is full sepia.

  • filter_opacity_hover – The hover state opacity filter for the column. From 0-100.  0 is fully transparent.

  • filter_blur_hover – The hover state blur filter for the column. From 0-50.  50 is fully blurred.