Loading...
Columns 2017-01-12T18:23:37+00:00

Column Element

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.

Powerful column options provide incredible page layout control and creative freedom.

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 need them to be.

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

Background Customization Settings

Column backgrounds can take color, images links, hover effects and more.

Customize The Background Color & Opacity

TAKE CONTROL OF YOUR WEBSITE

Add 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 Via Fusion Builder

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 buttons 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

100px 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!

Complete Set of Options

Every option and description included with the columns shortcode is listed below. Please note, new features are frequently added through theme updates, so there is a possibility that even more options are now available.

  • last – Can be one of these values: yes, or no.  Set if the column is last in a set.
  • spacing – Can be one of these values: yes, or no. This will enable or disable the margin between columns.
  • center_content – Can be one of these values: yes, or no. This will enable or disable center alignment for content within the column.
  • hide_on_mobile – Can be one of these values: yes, or no. Shows or hides the column on mobile phone devices.
  • background_color – Accepts a hexcode ( #000000 ). Sets the infobox’s background color. Leave Blank for Theme Option selection.
  • background_image – The URL path of your background image, starting with http:// and usually ending on .jpg, .png or .gif.
  • background_repeat – Can be one of these values: no-repeat, repeat, repeat-y, or repeat-x. Sets how the background repeats.
  • background_position – Accepts a pixel value, percentage or position, such as; left top, left center, left bottom, right top, right center, right bottom, center top, center center, or center bottom.
  • hover_type – Can be one of these values: none, zoomin, zoomout, or liftup. Sets the hover type for the picture.
  • link – The link you want the column to direct to, including http://. For example, http://www.example.com/.
  • border_position – Can be one of these values: all, top, right, bottom or left. Sets the position of the border.
  • border_size – Accepts a pixel value that sets the border’s size. For example, 5px.

  • border_color – Accepts a hexcode ( #000000 ). Sets the border’s color. Leave Blank for Theme Option selection.
  • border_style – Can be one of these values: solid, dashed, or dotted. Sets the border’s style.
  • padding – Accepts a pixel value that sets the padding. For example, 5px.
  • margin_top – Accepts a pixel value that sets the top margin. For example, 5px.
  • margin_bottom – Accepts a pixel value that sets the bottom margin. For example, 5px.
  • animation_type – Can be one of these values: none, bounce, fade, flash, rubberBand, shake, slide, or zoom. Sets the animation to use on the shortcode.
  • animation_direction – Can be one of these values: down, right, left, up, or static. Sets the incoming direction for the animation.
  • animation_speed – Accepts a numerical value from .1, which is the slowest, to 1, which is the fastest.
  • animation_offset – Can be one of these values: default, top-into-view, top-mid-of-view, or bottom-in-view. Sets when the animation starts.
  • element visibility – Choose to show or hide the element on small, medium or large screens. Show them on all, or just some, givine you full control over all screen sizes. Each screen size also has a custom width setting in Fusion Theme Options.

  • class – Add a custom class to the wrapping HTML element for further css customization. Please refer to this documentation section.
  • id – Add a custom id to the wrapping HTML element for further css customization. Please refer to this documentation section.

Join The 370,000+ Satisfied Avada Users!

BUY AVADA NOW!

Sliding Bar Section For Widgets

This is the sliding section that can be enabled or disabled on any demo. You can insert anywhere from 1-6 columns along with any widget that comes with Avada, WordPress or additional 3rd party plugins. It's perfect for placing additional information on your site.

Recent Works

Contact Info

12345 North Street, New York City, NY 555555

Phone: 1-800-555-5555

Mobile: 1-234-567-8910

Fax: 1-234-879-5641

Web: http://yourwebsite.com