Column Element

26/03/2019

The Column Element goes hand in hand with the Container Element and is another essential component when building your site. Once you've inserted a container element into your page, you can then insert a column or set of columns inside it, and then insert elements inside the columns. Continue reading below for a list of column sizes available, a guide on how to use them in the Fusion Builder, and a list of customization options.

Column Element
View the Column Demo Page!

How To Use Columns in Fusion Builder

IMPORTANT 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 Fusion Builder by clicking the 'Use Fusion Builder' button on top of the page editor.

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.

Step 4 - To add new columns, hover over the Container you'd like to add a new column to and you'll see a '+ Column' button. 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

Different Column Sizes

A column can only be used inside a Container element and will always base it's divisions on it'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.

  • 1/1 - A one whole column is 100% of it's container.
  • 1/2 - A one half column is 50% of it's container.
  • 1/3 - A one third column is 33.33% of it's container.
  • 2/3 - A two third column is 66.66% of it's container.
  • 1/4 - A one fourth column is 25% of it's container.
  • 3/4 - A three fourth column is 75% of it's container.
  • 1/5 - A one fifth column is 20% of it's container.
  • 2/5 - A two fifth column is 40% of it's container.
  • 3/5 - A three fifth column is 60% of it's container.
  • 4/5 - A four fifth column is 80% of it's container.
  • 1/6 - A one sixth column is 16.66% of it's container.
  • 5/6 - A five sixth column is 83.33% of it's container.

Element Options

Location: 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 your Theme Options > Fusion Builder Elements > Column Element section. 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 so the options screen may look somewhat different.

General Tab

  • Column Spacing - Controls the column spacing between one column to the next.
  • Center Content - Allows you to center content vertically. This option only works if the 'Equal Heights' option is enabled in the Container it's in. Choose between Yes or No.
  • 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 or in new browser tab. Choose between _self or _blank. _self = open in same browser tab, _blank = open in new browser tab.
  • Ignore Equal Heights - Allows you to ignore equal heights on this column if equal heights is enabled on the surrounding container. Choose between Yes or No.
  • Column Visibility - Allows you to control the Element's visibility. Choose one or more between Small Screen, Medium Screen, or Large Screen.
  • 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 Screen

Design Tab

  • Background Color - Controls the background color.
  • Background Image - Allows you to upload an image as the column's background.
  • Background Position - Controls the position of the background image. Choose between Left Top, Left Center, Left Bottom, Right Top, Right Center, Right Bottom, Center Top, Center Center, or Center Bottom.
  • Background Repeat - Controls how the background image repeats. Choose between No Repeat, Repeat Vertically and Horizontally, Repeat Horizontally, or Repeat Vertically.
  • Hover Type - Controls the hover effect type. Choose between None, Zoom In, Zoom Out, or Lift Up. Note: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.
  • Border Size - Accepts a pixel value that sets the size of the column's border.
  • 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 Position - Allows you to set the position of the column's border. Choose between All, Top, Right, Bottom, or Left.
  • 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.
  • Padding - Accepts a pixel value that sets the column's top, right, bottom, and left padding. For example, 25px.
  • Margin - Accepts a pixel value that sets the column's top and bottom margin. For example, 25px.
View The Options Screen

Animation Tab

  • Animation Type - Controls the column's animation type. Choose between None, Bounce, Fade, Flash, Rubberband, Shake, Slide, or Zoom.
  • 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 1.
  • 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.
View The Options Screen

Global Options

Location: WordPress Dashboard > Avada > Theme Options > Fusion Builder Elements > Column Element

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.
View The Options Screen

Column Element Parameters

Each of these parameters correspond to each individual Element option as shown above, in this document. Likewise, the format illustrated below is what you will see if the Fusion builder is deactivated in your page/post.

Copy to Clipboard
  • type - Choose from 1_6, 1_5, 1_4, 1_3, 2_5, 1_2, 3_5, 2_3, 3_4, 4_5, 5_6, or 4_4. Sets the size of the column.
  • spacing - Accepts a percentage or numerical value. For example, 20 or 14%. Sets the margin added to the column.
  • center_content - Choose from yes, or no. This will enable or disable center alignment for column content. The container the column is in must have equal heights enabled.
  • link - The URL path you want the column to direct to when clicked. For example, http://www.example.com/.
  • target - Choose from _self or _blank. _self = open in same browser tab, _blank = open in new browser. Tab. Sets how you want the link to open.
  • min_height - Choose from yes, or no. Disable or enable equal heights on the column if it's inside a container that has equal heights enabled.
  • hide_on_mobile - Choose from small-visibility, medium-visibility or large-visibility. You can select more than one setting. This will show the element on the selected visibility options, and will hide them on the deselected ones.
  • class - Add a custom class to the wrapping HTML element for further css customization.
  • id - Add a custom id to the wrapping HTML element for further css customization.
  • background_color - Accepts a hexcode ( #000000 ). Sets the background color of the column.
  • background_image - The URL path of your background image. For example, http://www.sample.com/image.jpg.
  • background_image_id - The id of your background image.
  • background_position - Choose from left top, left center, left bottom, right top, right center, right bottom, center top, center center, or center bottom.
  • background_repeat - Choose from no-repeat, repeat, repeat-y, or repeat-x. Sets how the background repeats.
  • hover_type - Choose from none, zoomin, zoomout, or liftup. Sets the hover type.
  • border_size - Accepts a pixel value. For example, 5px. Sets the border's size.
  • border_color - Accepts a hexcode ( #000000 ). Sets the column border's color.
  • border_style - Choose from solid, dashed, or dotted. Sets the border style.
  • border_position - Choose from all, top, right, bottom or left. Sets which side of the column will have a border.
  • box_shadow - Enables a box shadow. Values are yes, or no.
  • box_shadow_blur_radius - Set the blur radius of the box shadow. In pixels.
  • 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.
  • box_shadow_color - Controls the color of the box shadow.
  • box_shadow_style - Set the style of the box shadow. Values are outer or inner.
  • padding_top - Enter values including any valid CSS unit, ex: 4%.
  • padding_right - Enter values including any valid CSS unit, ex: 4%.
  • padding_bottom - Enter values including any valid CSS unit, ex: 4%.
  • padding_left - Enter values including any valid CSS unit, ex: 4%.
  • margin_top - Accepts a pixel value. For example, 5px. Sets the bottom margin.
  • margin_bottom - Accepts a pixel value. For example, 5px. Sets the bottom margin.
  • animation_type - Choose from none, bounce, fade, flash, rubberBand, shake, slide, or zoom. Sets the animation to use on the element.
  • animation_direction - Choose from down, right, left, up, or static. Sets the animation's incoming direction.
  • animation_speed - Accepts a numerical value from .1 (fastest), to 1, (slowest).
  • animation_offset - Choose from default, top-into-view, top-mid-of-view, or bottom-in-view. Sets when the animation starts.