The Column Element goes hand in hand with the Container Element, and is another essential structural component when building your site in Avada.
With Avada 7.0, we have completely re-imagined both the Container and Column elements, basing them on CSS Flexbox. This means that extremely flexible positioning and spacing have now arrived in the Fusion Builder. At the same time, we have 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.,View Element Demo Page!OverviewHow To Add Columns In Avada Builder
How To Add Columns In Avada Live
Column Sizes
Responsive Option Sets
Element OptionsGlobal Options,How To Add Columns in Avada BuilderIMPORTANT NOTE You must first create a Container element before you can add a Column element.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.
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.
Learn More About The Fusion Builder Content Creation Process 767,641 Businesses Trust Avada
Get Avada767,641 Businesses Trust Avada
Get Avada767,641 Businesses Trust Avada
Get Avada,How To Add Columns in Avada LiveStep 1. Create a new page.
Step 2. Activate Avada Live Builder 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.
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 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 SizesA 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 WidthIn 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.
Auto WidthThere 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 WidthOn 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.,Responsive Option SetsAnother 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.,Element OptionsLocation: The edit screen within each Element.
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.
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 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 (elements are stacked vertically), Row (elements are positioned horizontally if they fit), or Block (works like legacy mode to allow floating and wrapping). 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, when Row is selected in Content Layout option.
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.
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.
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 – 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 ScreenDesign 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.
Overflow – Value for column』s overflow CSS property. Choose from Default, Hidden, Scroll, Visible, or Auto.
View The Options ScreenBG (Background) TabColor Tab
Background Color – Controls the background color of the 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.
Gradient Angle – Controls the gradient angle. In degrees.
Radial Direction – Select direction for radial gradient.
Linear Angle – Set the angle of the linear gradient. In degrees.
Image Tab
Background Image –Upload an image to display in the background.
Background Position – Choose the position of the background image.
Background Repeat – Choose how the background image repeats.
Background Blend Mode – Choose the desired blending mode. This is the interaction between layers if you have for exmaple a background image and a background color or gradient.
Color Options ScreenGradient Options ScreenImage Options ScreenExtras Tab
Animation Type – Controls the column』s animation type. Choose between None, Bounce, Fade, Flash, Rubberband, Shake, Slide, Zoom, Flip Vertically, Flip Horizontally, or Light Speed.
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.
Rendering Logic – Add conditional render logic for the element. See Conditional Element Rendering in Avada for more details.
Filter Type (both regular & hover state options)
Hue – This filter controls the hue (color) of the contents of the column.
Saturation – This filter controls the color saturation of the contents of the column.
Brightness – This filter controls the brightness of the contents of the column.
Contrast – This filter controls the contrast of the contents of the column.
Invert – This filter inverts the colors of the contents of the column.
Sepia – This filter adds a sepia filter on the contents of the column.
Opacity – This filter controls the opacity of the contents of the column.
Blur – This filter adds a blur filter to the contents of the column.
View The Options ScreenGlobal OptionsLocation: WordPress Dashboard > Avada > Options > Avada Builder Elements > Column.
The Avada Advanced Options Network gives you amazing flexibility with additional Global Options that allows you to control individual Elements en masse.
Column Margins – Specify the default top/bottom margins for all column sizes. Enter values including any valid CSS unit, ex: 0px, 20px.
Column Spacing – Controls the column spacing between one column to the next. Enter value including any valid CSS unit, ex: 4%.
Column Width on Medium Screens – Controls how columns should be displayed on medium sized screens. Choose from Inherit from Large, or Full Width.
Column Width on Small Screens – Controls how columns should be displayed on small sized screens. Choose from Inherit from Large, or Full Width.
View The Options Screen