Nested Columns Element

24/08/2020

Nested Columns are simply columns within columns. For example, you could add two 1/4 column inside a 1/2 column, which would mean the nested columns will be 1/4 of the 1/2 column they are in, and 1/8 of the entire page width. And with the release of Avada 7, Nested Columns also have Flex features. Read on to find out about this intriguing addition to the Avada Builder.

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

  • Alignment – Defines how the column should align itself within the container. Overrides what is set on the container.

  • Content Layout – Defines how the column content should be positioned. Choose from Column, Row, or Block. If block is selected it will not use flex positioning and will instead allow floated elements.

  • Content Alignment – Defines how the column content should align. Works only with full height columns.

  • Column Spacing – Controls the column spacing between one column to the next. 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.

  • 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 – Allows you to choose to open the link in same browser tab, in new browser tab or in a lightbox. Choose between _self, _blank or Lightbox. _self = open in same browser tab, _blank = open in new browser tab.

  • Ignore Equal Heights – Choose to ignore equal heights on this column if you are using equal heights on the surrounding container.

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

  • Element Sticky Visibility – Choose to show or hide the element, based on the current mode (normal or sticky) of its parent container. You can choose more than one at a time.

  • 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

  • Width – Column width on respective display size. Choose from Large, Medium or Small and then set width. Width can be Preset, Auto, or Custom. For more info, please see the How To Set The Display Order And Size Of Columns In Responsive Layouts document.

  • Order – This option only applies for medium or small layouts, so you won’t see this when using the Desktop Layout. This controls the column order on respective display size. You can set the specific order of a column with this option, also for different size screens.

  • Column Spacing – Enter values including any valid CSS unit, ex: 4%. Leave empty to inherit from container or theme option. You can set overall Column Spacing on the parent Container, but you can override it here, on an individual column basis.

  • Margin – Enter values including any valid CSS unit, ex: 4%. Leave empty for default value.

  • Padding – Enter padding values for the Column. Enter values including any valid CSS unit, ex: 4%.

  • Hover Type – Controls the hover effect type. Choose between None, Zoom In, Zoom Out, or Lift Up. IMPORTANT: For the effect to be noticeable, you’ll need a background color/image, and/or a border enabled. This will disable links and hover effects on elements inside the column.

  • Column Border Size – Accepts a pixel value that sets the size of each of the column’s four borders.

  • Column 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 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.

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

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