Nested Columns Element

Last Update: March 5, 2024

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 from Avada 7 onwards, Nested Columns also have Flex features. Read on to find out about this useful design tool in the Avada Builder, and watch the video for a visual overview.

For privacy reasons YouTube needs your permission to be loaded.

View Element Demo Page!

How To Add Nested Columns

To start, select the column you’d like to add nested columns to, and then click the Add Element button. Navigate to the nested Columns tab along the top. Then choose your desired layout for your nested columns.

At this point, the columns you have chosen are added to the layout, and you can edit the nested columns and add elements to them.

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

Heading		Description
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. 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.
Content Vertical Alignment		Defines how the column content should vertically align.
Content Wrap		Defines whether elements are forced onto one line or can wrap onto multiple lines.
Column Spacing		Controls the column spacing between one column to the next. Enter value including any valid CSS unit, ex: 4%.
Center Content		Set to "Yes" to center the content vertically. Equal heights on the parent container must be turned on.
Column HTML Tag		Choose column HTML tag, default is div.
Link URL		Add the URL the column will link to, ex: http://example.com. IMPORTANT: This will disable links on elements inside the column.
Link Target		_self = open in same browser tab, _blank = open in new browser tab.
Link Description		Add descriptive text to the link to make it easier accessible.
Ignore Equal Heights		Choose to ignore equal heights on this column if you are using equal heights on the surrounding container.
Column Visibility		Choose to show or hide the column on small, medium or large screens. You can choose more than one at a time.
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		Add a class to the wrapping HTML element.
CSS ID		Add an ID to the wrapping HTML element.

Design

Heading		Description
Width		Column width on respective display size. Enter values including any valid CSS unit, ex: 4%.
Flex Grow		Flex grow with in the container.
Flex Shrink		Flex shrink with in the container.
Order		Column order on respective display size.
Column Spacing		Enter values including any valid CSS unit, ex: 4%. Leave empty to inherit from container or Global Option.
Margin		Enter values including any valid CSS unit, ex: 4%.
Padding		Enter values including any valid CSS unit, ex: 4%.
Column Border Size		Controls the border size of the column element.
Column Border Color		Controls the border color of the column element.
Border Style		Controls the border style.
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.
Z Index		Value for the z-index CSS property of the column, can be both positive or negative.
Overflow		Value for column's overflow CSS property.

Background

Heading		Description
Color
Background Color		Controls the background color.
Gradient
Gradient Start Color		Select start color for gradient.
Gradient End Color		Select end color for gradient.
Gradient Start Position		Select start position for gradient.
Gradient End Position		Select end position for gradient.
Gradient Type		Controls gradient type.
Radial Direction		Select direction for radial gradient.
Gradient Angle		Controls the gradient angle. In degrees.
Image
Background Image		Upload an image to display in the background.
Skip Lazy Loading		Select whether you want to skip lazy loading on this image or not.
Background Position		Choose the position of the background image.
Background Repeat		Choose how the background image repeats.
Background Size		Choose the size of the background image or set a custom size.
Background Custom Size		Set the custom size of the background image.
Background Blend Mode		Choose how blending should work for each background layer.
Slider
Slider Images		Upload background slider Images.
Background Position		Choose the position of the background slider images.
Skip Lazy Loading		Select whether you want to skip lazy loading on background slider images or not.
Loop		Enable background slider Loop.
Pause On Hover		Enable to pause background slider on hover.
Slideshow Speed		Controls the speed of the slideshow. 1000 = 1 second.
Animation		Select background slider animation.
Slider Direction		Select slide animation direction.
Animation Speed		Controls the speed of slide transition from slide to slide. 1000 = 1 second.
Blend Mode		Choose how blending should work for background slider.

Extras

Heading		Description
Rendering Logic		Add conditional rendering logic for the element. The element will only be part of the post / page contents, if the set conditions are met. NOTE: Server cache can interfere with results.
Position Sticky		Turn on to have the column stick inside its parent container on scroll. NOTE: this feature uses the browser native sticky positioning. Depending on the browser and specific setup the feature may not be available.
Responsive Position Sticky		Choose at which screen sizes the container should be sticky.
Sticky Column Offset		Controls how far the top of the column is offset from top of viewport when sticky. Use either a unit of measurement, or a CSS selector.
Position Absolute		Turn on to have the column in absolute position.
Absolute Offset		Enter values including any valid CSS unit, ex: 4%.
Filter Type
Hover Element		Select which element should be hovered to apply the filter hover options.
Hue		Filter hue.
Saturation		Filter saturation.
Brightness		Filter brightness.
Contrast		Filter contrast.
Invert		Filter invert.
Sepia		Filter sepia.
Opacity		Filter opacity.
Blur		Filter blur.
Transform
Hover Element		Select which element should be hovered to apply the transform hover options.
Scale X		Set the scale in the horizontal direction.
Scale Y		Set the scale in the vertical direction.
Translate X		Set the translate in the horizontal direction. in pixels.
Translate Y		Set the translate in the vertical direction. in pixels.
Rotate		Set the rotation of the element.
Skew X		Set the skew in the horizontal direction.
Skew Y		Set the skew in the vertical direction.
Transform Origin		Set the location of origin point for transform.
Transition Duration		Set transition duration in milliseconds.
Transition Easing		Select transition easing.
Transition Custom Easing		Set transition custom easing, use this website to create custom easing.
Motion Effects		Add Motion Effects for the element.
Apply Motion Scroll Effects On		Choose which devices the scroll effects will be applied to.
Animation Type		Select the type of animation to use on the element.
Direction of Animation		Select the incoming direction for the animation.
Animation Color		Select the color of the animation
Speed of Animation		Type in speed of animation in seconds (0.1 - 5).
Animation Delay		Select the delay time after the animation starts(0 - 5).
Offset of Animation		Controls when the animation should start.

How To Add Nested Columns
Element Options