Column Element

Columns Help You Structure Your Content And Design

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.

One Full

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sed tincidunt magna ac arcu consequat, et bibendum tortor tristique. Aenean sed erat scelerisque nunc sodales cursus ac et orci. Phasellus tempor nunc non nibh dapibus facilisis. In ullamcorper purus purus, vitae tincidunt enim.

One Half

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore dolore magna.

One Half

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore dolore magna.

One Third

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do.

Two Third

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore dolore magna aliqua.

Three Fourth

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.

One Fourth

Lorem ipsum dolor sit amet consectetur.

Four Fifth

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi aliquip ex.

One Fifth

Lorem ipsum dolor sit.

Two Fifth

Lorem ipsum dolor sit amet, consectetur adipicing elit sed do eiusmod tempor.

Three Fifth

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

One Sixth

Lorem ipsum.

Five Sixth

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.

Border Customization Settings

Avada allows you full control over borders; size, color, position, style and more are all adjustable.

Dashed Border Style

TAKE CONTROL OF YOUR WEBSITE

Solid Border Style

TAKE CONTROL OF YOUR WEBSITE

Dotted Border Style

TAKE CONTROL OF YOUR WEBSITE

Single Border Top

TAKE CONTROL OF YOUR WEBSITE

Single Border Right

TAKE CONTROL OF YOUR WEBSITE

Single Border Bottom

TAKE CONTROL OF YOUR WEBSITE

Single Border Left

TAKE CONTROL OF YOUR WEBSITE

Borders On All Sides

TAKE CONTROL OF YOUR WEBSITE

Customize The Border Size

TAKE CONTROL OF YOUR WEBSITE

Customize The Border Size

TAKE CONTROL OF YOUR WEBSITE

Border Radius

TAKE CONTROL OF YOUR WEBSITE

Full Control of Border Radius

TAKE CONTROL OF YOUR WEBSITE

Box Shadow Settings

Avada allows you full control over box shadows, both inner and outer for columns. Add depth and dimension to your websites pages.

Box Shadow & Border

TAKE CONTROL OF YOUR WEBSITE

Box Shadow Outside

TAKE CONTROL OF YOUR WEBSITE

Box Shadow Inset

TAKE CONTROL OF YOUR WEBSITE

Background Customization Settings

Column backgrounds can take color, images links, hover effects, gradients and also gradient overlays. Standalone gradients or blend with your chosen background images for amazing results in any circumstance.

Customize The Background Color & Opacity

TAKE CONTROL OF YOUR WEBSITE

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

Customize The Background Gradient

TAKE CONTROL OF YOUR WEBSITE

Customize The Background Radial Gradient

TAKE CONTROL OF YOUR WEBSITE

Add A Gradient Overlay With Blend Modes to Background Images

TAKE CONTROL OF YOUR WEBSITE

Column Filter Options

Apply design filters to columns to completely transform the appearance and design of the entire column an its contents. Utilize options such as hue, saturation, opacity, blur and many more, while controlling the regular and hover states.

Customize The Background Color & Opacity

TAKE CONTROL OF YOUR WEBSITE

Any Background Images

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.

Avada Columns 1-6

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!

Helen Parkins
Helen ParkinsDeveloper
In sit amet imperdiet erat. Nulla luctus orci sit amet diam varius tristique. Neque in, facilisis nulla. Ut id eros blandit.
Learn More!
Brian McArthur
Brian McArthurDeveloper
In sit amet imperdiet erat. Nulla luctus orci sit amet diam varius tristique. Neque in, facilisis nulla. Ut id eros blandit.
Learn More!
Julia Atkinson
Julia AtkinsonDeveloper
In sit amet imperdiet erat. Nulla luctus orci sit amet diam varius tristique. Neque in, facilisis nulla. Ut id eros blandit.
Learn More!

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

Mobile Visibility Setting

Only Display on Tablet

Mobile Visibility Setting

Only Display on Mobile

Mobile Visibility Setting

Display Everywhere

Mobile Visibility Setting

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

BUY AVADA NOW!

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

Start Searching

Video Tutorials

Start Watching

Need Support?

Start Engaging

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.

General

  • Column Spacing– Set the Column Spacing.
  • Center Content – Center Content Vertically (Equal Heights On Parent Container Must Be On)
  • Link URL – Set the column link.
  • Link Target – Choose from “_self” or “_blank”.
  • 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 element on small, medium or large screens.

  • CSS Class – Add a class to the wrapping HTML element.

  • CSS ID – Add an ID to the wrapping HTML element.

Design

  • Background Color – Set the background color for your column.
  • Background Image – Choose or Upload a Background Image.
  • Hover Type – Set the Column Hover Type. Choose from None, Zoom In, Zoom Out, Lift Up.
  • Border Size – Set the Border Size.
  • Border Radius – Set border radius on the Top/Left, Top/Right, Bottom/Left and Bottom/Right
  • Box Shadow – Choose from Yes* or No.

  • Box Shadow Yes – Provides advanced configuration: Box Shadow Position, Box Shadow Blur Radius, Box Shadow Spread Radius, Box Shadow Color, Box Shadow Style.
  • Padding – Add top, right, bottom and left padding to your column.

  • Margin – Add top and bottom margin.

Animation

  • Animation Type – Select the type of animation: None, Bounce, Fade, Flash, Rubberband, Shake, Slide, Zoom.
  • Direction of Animation – Can be one of these values: Top, RIght, Bottom, Left, Static.
  • Speed of Animation – Accepts a numerical value from .1, which is the slowest, to 1, which is the fastest.
  • Offset Animation – Controls when the animation should start.