Column Element

Last Update: March 13, 2023

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

Back in Avada 7.0, we completely re-imagined both the Container and Column elements, basing them on CSS Flexbox. This means that extremely flexible positioning and spacing are now a part of the Avada Builder. At the same time, we kept our classic setup for Containers and Columns in case you want to keep using it on pre-existing sites. For more information on this, see the Introducing Flexbox For Containers and Columns doc.

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.

Continue reading below for details on how to use the Column Element, and watch the video below for a visual overview of this foundational Design Element.

For privacy reasons YouTube needs your permission to be loaded.
I Accept

How To Add Columns in Avada Builder

Step 1. Create a new page, or edit an existing one.

Step 2. Activate the Avada Builder, or Avada Live.

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.

Add a Column

Step 5. To change the size of an existing column, click on the ‘Resize Column’ icon on 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 re-arrange columns, simply drag and drop the column into place. You can also drag and drop columns into different Containers elements.

How To Add Columns in Avada Live

Step 1. Create a new page.

Step 2. Activate Avada Live by clicking the ‘Avada Live’ button on 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 you add Columns to your Container, as seen below.

Add Containers - Avada Live

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.

Column Controls > Add Column

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.

Column Controls > Column Size

Step 6. To re-arrange columns, simply mouse over the Column controls, and drag and drop the column into place. You can also drag and drop columns into different Containers 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 it’s container.
  • 5/6 – A five sixth column is 83.33% of it’s container.
  • 4/5 – A four fifth column is 80% of it’s container.
  • 3/4 – A three fourth column is 75% of it’s container.
  • 2/3 – A two third column is 66.66% of it’s container.
  • 3/5 – A three fifth column is 60% of it’s container.
  • 1/2 – A one half column is 50% of it’s container.
  • 2/5 – A two fifth column is 40% of it’s container.
  • 1/3 – A one third column is 33.33% of it’s container.
  • 1/4 – A one fourth column is 25% of it’s container.
  • 1/5 – A one fifth column is 20% of it’s container.
  • 1/6 – A one sixth column is 16.66% of it’s container.

Column Width

In Avada 7.0, we have also introduced Custom Widths for Columns, as well as the ability to set column widths (and more) independently on large, medium and small layouts. For more information on how to use this amazing new feature with Columns, please read the How To Set The Display Order And Size Of Columns In Responsive Layouts doc.

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 a percentage value. This gives ultimate freedom of positioning.

Column > Width & Order Options

Auto Width

There is also a new width option called Auto. With this selected, 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 a 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.

Column > Auto Width Example

Sticky Columns

This much requested 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

Another new feature for Containers and Columns in Avada 7.0 is 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 below image 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 Options Sets document for specific details of this awesome new feature, but in short, it 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 on the individual options that are a part of this feature.

Column Element Tabs

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

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. Each of the 3 sizes has a custom width setting on the Responsive tab in the Global Options.
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.
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
Background Type
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.
Background ColorControls the background color.
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 Custom SizeSet the custom size of the background image.
Background Custom SizeSet the custom size of the background image.
Background Blend ModeChoose how blending should work for each background layer.

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. Default currently set to Top Of Element Hits Bottom Of Viewport.