Column Element

Last Update: September 1, 2025

The Column Element goes hand in hand with the Container Element, and is another essential structural component when building your site in Avada.

The Container and Column Elements are based on CSS Flexbox. This means that extremely flexible positioning and spacing are built in. For more information on this, see the Flexbox For Containers and Columns help file. The options below are what you will see for the Flex-based Columns. If you are using the Legacy options, please see the Container and Column Element legacy settings document for a rundown of those options.

Watch the video below for a visual overview of the Element, view the Avada Column Element page for live examples, and read on to see the complete list of options of this foundational Design Element.

For privacy reasons YouTube needs your permission to be loaded.

View Element Page!

View Avada Builder Elements!

IMPORTANT NOTE You must first create a Container Element before you can add a Column Element.

How To Add Columns in Avada Builder

Step 1 – Create a new page, or edit an existing one.
Step 2 – Activate the Avada Visual Live Editor.
Step 3 – Insert a Container Element into the page by clicking the ‘+ Container’ button. Once you insert a Container, you’ll be asked to choose the Column or Column Layout you’d like to use. You can add an empty Container, but usually, it is at this stage that you add Columns to your Container.

Step 4 – To add new Columns to an existing Container, hover over the Container you’d like to add a new column to, and you will see a ‘+ Column’ button, as seen below. Click this button to add a new Column.

Step 5 – To change the size of an existing Column, click on the ‘Resize Column’ icon in the upper left corner of the Column. It will appear as the size your column currently is. For example, if it’s a 1/4 Column, then the Resize Column option will appear as ‘1/4’.
Step 6 – To rearrange Columns, drag and drop the Column into its new position. You can also drag and drop Columns into different Container Elements.

Learn More About The Avada Builder Content Creation Process

How To Add Columns in Avada Live

Step 1 – Create a new page.
Step 2 – Activate Avada Live by clicking the ‘Avada Live’ button at the top of the page editor.
Step 3 – Insert a Container element into the page by clicking the ‘Add Container’ Icon on the Starter Page. Once you insert a Container, you’ll be asked to choose the Column or Column Layout you’d like to use. You can add an empty Container, but usually, it is at this stage that you add Columns to your Container, as seen below.

Step 4 – To add new columns to an existing Container, hover over the Column directly before where you’d like to add the Column. Mouse over the Column controls and you’ll see an ‘Add Column’ icon. Click this icon to add a new Column. You will be presented with the Select Column dialog, where you can choose the layout of your new Column/s.

Step 5 – To change the size of an existing Column, click on the ‘Column Size’ icon on the column controls. It will appear as the size your Column currently is. For example, if it’s a 1/4 Column, then the Column Size option will appear as ‘1/4’. Choose your new Column size from the options box.

Step 5 – To re-arrange Columns, mouse over the Column controls, and drag and drop the Column into place. You can also drag and drop Columns into different Container Elements.

Column Sizes

A Column can only be placed inside a Container Element, and it will always base its divisions on the parent container’s width. Most of the time, this will be the Site Width you’ve set for the site. For example, if you’ve set the Site Width to be 1200px, then a 1/2 Column will be 600px wide, minus any Column spacing you’ve set. Below you can see the possible preset Column sizes when added to the page.

1/1 – A one whole column is 100% of its container.
5/6 – A five sixth column is 83.33% of its container.
4/5 – A four fifth column is 80% of its container.
3/4 – A three fourth column is 75% of its container.
2/3 – A two third column is 66.66% of its container.
3/5 – A three fifth column is 60% of its container.
1/2 – A one half column is 50% of its container.
2/5 – A two fifth column is 40% of its container.
1/3 – A one third column is 33.33% of its container.
1/4 – A one fourth column is 25% of its container.
1/5 – A one fifth column is 20% of its container.
1/6 – A one sixth column is 16.66% of its container.

Preset Sizes or Custom Width

Columns can have a preset size as above, but they can also have a custom width. You can set Column widths (and more) independently for large, medium, and small devices. For more information on how to use this feature with Columns, please read the How To Set The Display Order And Size Of Columns In Responsive Layouts help file.

You will find Custom Widths under Columns > Design > Width. As seen below, you can click on Use Custom Width, which allows you to set a Custom Width using any valid CSS unit. A percentage value is the default, but you can also set a pixel value, or any other valid CSS unit. This provides ultimate freedom in Column sizing.

Flex Grow & Flex Shrink Options

Under this, you will also find two options called Flex Grow and Flex Shrink. These are useful when the sum of your Columns does not add up to 100%. With these values, you can instruct the browser on how to allocate the remaining space.

Flex Grow

Flex-grow determines whether your Column can expand to occupy additional space within its wrapping Container. Initially, the option will be empty, which means a default value of 0; thus, the Column will not expand to utilize any available space. With a value of 1 or higher, we instruct the Column to expand and occupy the available space.

It’s easiest to explain this with an example. Let’s say you have three Columns of 1/4 width. This means they take up seventy-five percent of the Container. If nothing is set, the Columns will not grow and remain at 1/4 each. However, if they all receive a flex-grow value of 1, the remaining twenty-five percent is distributed equally among all three Columns (an extra 8.333% for each one).

But if you set a value of one on the first and third Column, but a value of two in the middle Column, then the browser would divide the remaining space by four (25% / 4 = 6.5%) and apply two units to the second Column (13%) while the first and third Column would only grow by one unit (6.5%).

Flex Shrink

This option only works if the parent Container’s Content Wrap value is set to No Wrap. By default, the Containers are set to wrap, so if the Columns take up too much space, the last one will be pushed to a new row. But when Content Wrap is turned off, all Columns are forced to stay on the same row. That could lead to overflow when some Elements in the Columns can’t be reduced in width.

Similarly, the Flex Shrink factor, like Flex Grow, allows the browser to determine which Columns can shrink more than others. Initially, all columns have a factor of 1, so if you set one of them to e.g. 2, it can shrink twice as much as the others.

Another significant value is a Flex Shrink value of 0, which means the Column must not shrink at all. For example, if you use a px-width Column, it ensures that the Column will always remain at its set px width, regardless of available space. If Flex Grow is set on the same Column, it will not shrink beyond the overall width of its content.

Auto Width

There is also a new width option called Auto. With this selection, instead of a fixed width size, the Column will take up the space of the largest Element inside it that has a set width. So it will only work in certain instances. But any time you have an Element that has a set width, such as an image or an icon, etc, you can set the parent Column to Auto, and the Column will resize to the width of the Element.

Examples of Auto Width

On the Home page of the Pet Supplies Website, there is a banner at the bottom of the Page Title Bar, with an image of some pet food, and some text. This becomes a sticky Container as you scroll up, and the image has an Image Sticky Max Width that reduces its size as the Container becomes sticky. This image is in a Column set to Auto, so that the Column also resizes with the image, and so the spacing between it and the text next to it remains the same.

Sticky Columns

This feature is enabled on the Extras tab of the Column Element. There is also a Responsive Position Sticky option, as well as a Sticky Column Offset option. For full details on how to use Sticky Columns, please see the How To Use Sticky Columns document.

Responsive Option Sets

You can see the Responsive Icons at the top right of the Element on any Columns when in the back-end of the Builder, as seen in the image below of the Column Element. In the Front-End Builder, you will see the Responsive Icons directly on the individual options.

You will only see Responsive Option Sets when using the new Flex Containers. With Columns inside Legacy Containers, they will not be available.

Please see the Responsive Option Sets help file for details on this feature, which allows you to set independent options for multiple screen sizes without having to duplicate Containers and use visibility options. You will also see a screen icon next to the individual options that are part of this feature.

Element Options

Note: The Default setting will use the global settings assigned for this element in the Avada Global Options, found at Options > Avada Builder Elements > Column. Also, please note that the displayed options screens below show ALL the available options for the element. If you have Avada’s Option Network Dependencies turned on, you will only see options relevant to your selections and your Column type (Flex or Legacy), and so the options screen may look somewhat different.

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 specifies how much of the remaining space in the container should be assigned to the column.
Flex Shrink		Flex shrink specifies how much the column may shrink within the container if not enough space is available.
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%.
Hover Type		Select the hover effect type. 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		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
Conditional Rendering		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.

Column Element

How To Add Columns in Avada Builder

How To Add Columns in Avada Live

Column Sizes

Preset Sizes or Custom Width

Flex Grow & Flex Shrink Options

Flex Grow

Flex Shrink

Auto Width

Examples of Auto Width

Sticky Columns

Responsive Option Sets

Element Options

General

Design

Background

Extras

In this article