Nested Columns Element

Last Update: February 14, 2023

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.
I Accept

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 into 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

HeadingDescription
AlignmentDefines how the column should align itself within the container. Overrides what is set on the container.
Content LayoutDefines how the column content should be positioned. If block is selected it will not use flex positioning and will instead allow floated elements.
Content AlignmentDefines how the column content should align. Works only with full height columns.
Content Vertical AlignmentDefines how the column content should vertically align.
Content WrapDefines whether elements are forced onto one line or can wrap onto multiple lines.
Column SpacingControls the column spacing between one column to the next. Enter value including any valid CSS unit, ex: 4%.
Center ContentSet to "Yes" to center the content vertically. Equal heights on the parent container must be turned on.
Column HTML TagChoose column HTML tag, default is div.
Link URLAdd 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 DescriptionAdd descriptive text to the link to make it easier accessible.
Ignore Equal HeightsChoose to ignore equal heights on this column if you are using equal heights on the surrounding container.
Column VisibilityChoose to show or hide the column on small, medium or large screens. You can choose more than one at a time.
Element Sticky VisibilityChoose 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 ClassAdd a class to the wrapping HTML element.
CSS IDAdd an ID to the wrapping HTML element.

Design

HeadingDescription
WidthColumn width on respective display size. Enter values including any valid CSS unit, ex: 4%.
Flex GrowFlex grow with in the container.
Flex ShrinkFlex shrink with in the container.
OrderColumn order on respective display size.
Column SpacingEnter values including any valid CSS unit, ex: 4%. Leave empty to inherit from container or Global Option.
MarginEnter values including any valid CSS unit, ex: 4%.
PaddingEnter values including any valid CSS unit, ex: 4%.
Column Border SizeControls the border size of the column element.
Column Border ColorControls the border color of the column element.
Border StyleControls the border style.
Border RadiusEnter 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 ShadowSet to "Yes" to enable box shadows.
Box Shadow PositionSet 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 RadiusSet the blur radius of the box shadow. In pixels.
Box Shadow Spread RadiusSet 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 ColorControls the color of the box shadow.
Box Shadow StyleSet the style of the box shadow to either be an outer or inner shadow.
Z IndexValue for the z-index CSS property of the column, can be both positive or negative.
OverflowValue for column's overflow CSS property.

Background

HeadingDescription
Color
Background ColorControls the background color.
Gradient
Gradient Start ColorSelect start color for gradient.
Gradient End ColorSelect end color for gradient.
Gradient Start PositionSelect start position for gradient.
Gradient End PositionSelect end position for gradient.
Gradient TypeControls gradient type.
Radial DirectionSelect direction for radial gradient.
Gradient AngleControls the gradient angle. In degrees.
Image
Background ImageUpload an image to display in the background.
Skip Lazy LoadingSelect whether you want to skip lazy loading on this image or not.
Background PositionChoose the position of the background image.
Background RepeatChoose how the background image repeats.
Background SizeChoose the size of the background image or set a custom size.
Background Custom SizeSet the custom size of the background image.
Background Blend ModeChoose how blending should work for each background layer.
Slider
Slider ImagesUpload background slider Images.
Background PositionChoose the position of the background slider images.
Skip Lazy LoadingSelect whether you want to skip lazy loading on background slider images or not.
LoopEnable background slider Loop.
Pause On HoverEnable to pause background slider on hover.
Slideshow SpeedControls the speed of the slideshow. 1000 = 1 second.
AnimationSelect background slider animation.
Slider DirectionSelect slide animation direction.
Animation SpeedControls the speed of slide transition from slide to slide. 1000 = 1 second.
Blend ModeChoose how blending should work for background slider.

Extras

HeadingDescription
Rendering LogicAdd 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 StickyTurn 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 StickyChoose at which screen sizes the container should be sticky.
Sticky Column OffsetControls 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 AbsoluteTurn on to have the column in absolute position.
Absolute OffsetEnter values including any valid CSS unit, ex: 4%.
Filter Type
Hover ElementSelect which element should be hovered to apply the filter hover options.
HueFilter hue.
SaturationFilter saturation.
BrightnessFilter brightness.
ContrastFilter contrast.
InvertFilter invert.
SepiaFilter sepia.
OpacityFilter opacity.
BlurFilter blur.
Transform
Hover ElementSelect which element should be hovered to apply the transform hover options.
Scale XSet the scale in the horizontal direction.
Scale YSet the scale in the vertical direction.
Translate XSet the translate in the horizontal direction. in pixels.
Translate YSet the translate in the vertical direction. in pixels.
RotateSet the rotation of the element.
Skew XSet the skew in the horizontal direction.
Skew YSet the skew in the vertical direction.
Transform OriginSet the location of origin point for transform.
Transition DurationSet transition duration in milliseconds.
Transition EasingSelect transition easing.
Transition Custom EasingSet transition custom easing, use this website to create custom easing.
Motion EffectsAdd Motion Effects for the element.
Apply Motion Scroll Effects OnChoose which devices the scroll effects will be applied to.
Animation TypeSelect the type of animation to use on the element.
Direction of AnimationSelect the incoming direction for the animation.
Animation ColorSelect the color of the animation
Speed of AnimationType in speed of animation in seconds (0.1 - 5).
Animation DelaySelect the delay time after the animation starts(0 - 5).
Offset of AnimationControls when the animation should start.

In this article