Column Element

Columns Help You Structure Your Content And Design

Sorry, your browser doesn't support embedded videos.

Flexible Columns To Build Your Layouts

Columns are an extremely important part of the page building process and this page show you everything they can do! They are containers that allow you to place any element, widget or content inside of them. They allow you to separate and organize content with ease. Avada offers 1-6 column sizes and the intuitive interface allows you to easily adjust the column size on the fly with just a click. Creative design depends on columns and the options they offer, and Avada columns are like no others. They allow you to insert background images, colors, borders, border styles / colors / sizes, border positions on any size, column animations, control the overall gutter width between columns down to the exact amount you desire, add column links, hover effects and more. In addition, column widths automatically adjust size based on the overall site width set in the Fusion Theme Options Panel.

Column Sizes From 1-6 Columns

Avada’s framework offers up to 6 column layouts, giving you incredible creative freedom to build pages the exact way you want to.

Background Customization Settings

Customize The Background Color & Opacity

Any Background Images

TAKE CONTROL OF YOUR WEBSITE

Zoom Out Hover Effect

Zoom In Hover Effect

Lift Up Hover Effect

Apply A Link To The Entire Column

TAKE CONTROL OF YOUR WEBSITE

Add Full Column Combination Sets

Fusion Builder makes it easy to add entire sets of columns in any configuration you can think for fast layout creation. This is a major time saver by allowing you to add pre-configured column combinations including any of our 1-6 column sizes with just a few clicks.

Column Spacing

Spacing is so important for creative designs and Avada does not disappoint in this area. Avada allows you to set the exact column spacing you need with any valid css unit like px or %, and it can be set per column. The creative freedom this provides is liberating!

Control Spacing

Being able to easily control column spacing with any valid css unit opens up incredible creative possibilities.

Between Each

Being able to easily control column spacing with any valid css unit opens up incredible creative possibilities.

Individual Column

Being able to easily control column spacing with any valid css unit opens up incredible creative possibilities.

Ah I’m Spaced Apart!

Being able to easily control column spacing with any valid css unit opens up incredible creative possibilities.

Animation Settings

Animate the columns with smooth CSS3 animations that include 7 animations types, 4 directions, animation speed control and animation offset to control when the element starts the animation.

Bounce Animation

Rubberband Animation

Flash Animation

Fade Animation

Shake Animation

Slide Animation

Zoom Animation

Control All Padding & Margins

Every column offers full padding controls for top/right/bottom/left and margin controls for top/bottom giving you freedom to control the importance of spacing in your layouts. In addition, you can use any valid css unit like px, %, ems and more.

Columns Offer Both Padding & Margin Controls In Any Valid CSS Unit

25px Padding

Columns Offer Both Padding & Margin Controls In Any Valid CSS Unit

50px Padding

Columns Offer Both Padding & Margin Controls In Any Valid CSS Unit

16% Padding

Insert Any Element Or Widget Into Columns

Columns are like boxes, and they are meant to have content inside of them. Avada’s columns accept any element from Fusion Builder, as well as any general content you wish to add to them, including widgets. Columns are empty shells, waiting to be filled!

Nested Columns

Take even more control over your content and website with Nested Columns. Fusion Builder gives you the ability to nest columns inside other columns to increase flexibility over what you display, how you display it, and what order it’s displayed in. Nested columns can utilize the full 1-6 column setup and have their own unique user interface in Fusion Builder to easily make edits, add content and boost creativity!

Mobile Visibility Settings

Our mobile visibility system gives you full control over what displays based on 3 customizable screen sizes. Every Fusion Builder Element has these settings and they allow you to show or hide elements on various screen sizes. In addition, you can choose what those screen sizes are! This gives you maximum control to set the exact point when an element should show or hide. Resize the page to see the elements appear or disappear based on what we set.

Only Display on Desktop

Only Display on Tablet

Only Display on Mobile

Display Everywhere

Advanced Options Network

Theme Options are global, Page Options are individual. This setup gives you amazing creative flexibility that becomes indespensible when you start creating your site. Having the option to freely choose how individual pages are styled is an incredible freedom.

#1 Selling Theme Of All Time

525,000+

Individuals & Businesses Trust Avada

Documentation & Videos

We have a wide range of support material to suit your learning style. Our documentation is extensive and growing. There are almost 500 documents, where you can search and read about almost any aspect of Avada. Prefer to watch? We have a growing library of HD video tutorials covering the basics and much, much more. Like to engage? Submit a support ticket, join our Community Forum, or engage with other users on the community run Facebook Avada Users Group.

Documentation

Video Tutorials

Need Support?

Customize Elements Globally Or Individually

Elements can be controlled globally inside of the Fusion Theme Options, or individually per Element by changing the options for each once added to a page or post. Individual Element options will always override the global theme options. This flexibility gives you the ultimate freedom to style Elements and content that is unique and will stand out from the rest of the site.