Column Element

18/10/2019

The Column Element goes hand in hand with the Container Element and is another essential structural 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. You can add an empty Container, but usually, it is at this stage you add Columns to your Container.

Step 4 – To add new columns to the Container, 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.

Add a Column
Learn More About The Fusion Builder Content Creation Process

How To Use Columns in Fusion Builder Live

Step 1 – Create a new page.

Step 2 – Activate Fusion Builder Live by clicking the ‘Fusion Builder 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 Fusion Builder 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.

Add Containers - Fusion Builder Live

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 Controls > Add Column
Column Controls > Column Size

Different Column Sizes

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

  • 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

  • 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.

  • 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

BG (Background) Tab

For privacy reasons YouTube needs your permission to be loaded. For more details, please see our Privacy Policy.
I Accept

Color 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. 

  • 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.

Image Tab

  • Background Image –Upload an image to display in the background.

  • Background Position – Choose the postion of the background image.

  • Background Repeat – Choose how the background image repeats.

  • Background Blend ModeChoose 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 Screen
Gradient Options Screen
Image Options Screen

Extras 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.

  • 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 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.

  • 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.

  • gradient_start_color – Set the start color for the gradient.

  • gradient_end_color – Set the end color for the gradient.

  • gradient_start_position – Set the start position for the gradient. From 0-100.

  • gradient_end_position – Set the end position for the gradient. From 0-100.

  • gradient_type – Set the type of gradient. Options are linear or radial.

  • radial_direction – Set the direction of the radial gradient. Options are bottom, bottom center, center, center left, left top, right, rigth top, and top.

  • linear_angle – Set the angle of the linear gradient. In degrees. 

  • 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.
  • background_blend_mode – Select the blend mode for the background image and any other background layer, like color or gradient. Choose from multiply, screen, overlay, darken, lighten, color dodge, color burn, hard light, soft light, difference, exclusion, hue, saturation, color, and luminosity. 

  • 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.
  • filter_hue – The hue filter for the column. From 0-359.

  • filter_saturation – The saturation filter for the column. From 0-200.  100 is the midway point, with no reduction or addition of saturation.

  • filter_brightness – The brightness filter for the column. From 0-200.  100 is the midway point, with no reduction or addition of brightness.

  • filter_contrast – The contrast filter for the column. From 0-200.  100 is the midway point, with no reduction or addition of contrast.

  • filter_invert – The inversion filter for the column. From 0-100.  100 is full inversion.

  • filter_sepia – The sepia filter for the column. From 0-100.  100 is full sepia.

  • filter_opacity – The opacity filter for the column. From 0-100.  0 is fully transparent.

  • filter_blur – The blur filter for the column. From 0-50.  50 is fully blurred.

  • filter_hue_hover – The hover state hue filter for the column. From 0-359.

  • filter_saturation_hover – The hover state saturation filter for the column. From 0-200.  100 is the midway point, with no reduction or addition of saturation.

  • filter_brightness_hover – The hover state brightness filter for the column. From 0-200.  100 is the midway point, with no reduction or addition of brightness.

  • filter_contrast_hover – The hover state contrast filter for the column. From 0-200.  100 is the midway point, with no reduction or addition of contrast.

  • filter_invert_hover – The hover state inversion filter for the column. From 0-100.  100 is full inversion.

  • filter_sepia_hover – The hover state sepia filter for the column. From 0-100.  100 is full sepia.

  • filter_opacity_hover – The hover state opacity filter for the column. From 0-100.  0 is fully transparent.

  • filter_blur_hover – The hover state blur filter for the column. From 0-50.  50 is fully blurred.

  • 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.