Columns 2017-12-19T13:15:49+09:00

Column Shortcode

Avada’s column shortcodes allow you to manage the content on your pages into different column widths. This allows for greater control over your layouts, and provides creative opportunities. Columns serve as a container to place other content inside of them. Use any of our other shortcodes inside of a column shortcode.

boys_reading

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 consequat orem ipsum dolor sit amet, consectetur adipisicing elit. Incididunt ut labore et dolore magna aliqua. Ut enim ad et dolore magna exercitation ullamco lesse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non sadips ipsums proident, sunt in commodo consequat orem ipsum dolor sit amet culpa qui officia deserunt mollit anims sadips ipsums dolores sits unser. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.

  • Manage your content easily.
  • Have greater control over your layouts.
  • Divide the page up to 6 sections.
  • Fully customize the look of your column to match your site!

Background Image & Color

Each column can have a custom background image or color set. When using an image you can also set position and repeat values.

Image Background

Set positions and repeat values effortlessly.

Choose Solid Colors

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 consequat orem ipsum dolor sit amet, consectetur adipisicing elit.

Border Control & Padding

Each column can have a custom border and control the border size, border color and border style.

Solid Border

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 consequat orem ipsum dolor sit amet, consectetur adipisicing elit. Incididunt ut labore et dolore magna aliqua. Ut enim ad et dolore magna exercitation ullamco lesse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non sadips ipsums proident, sunt in commodo consequat orem ipsum dolor sit amet culpa qui officia deserunt mollit anims sadips ipsums dolores sits unser. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.

Dashed Border

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 consequat orem ipsum dolor sit amet, consectetur adipisicing elit. Incididunt ut labore et dolore magna aliqua. Ut enim ad et dolore magna exercitation ullamco lesse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non sadips ipsums proident, sunt in commodo consequat orem ipsum dolor sit amet culpa qui officia deserunt mollit anims sadips ipsums dolores sits unser. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.

Dotted Border

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 consequat orem ipsum dolor sit amet, consectetur adipisicing elit. Incididunt ut labore et dolore magna aliqua. Ut enim ad et dolore magna exercitation ullamco lesse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non sadips ipsums proident, sunt in commodo consequat orem ipsum dolor sit amet culpa qui officia deserunt mollit anims sadips ipsums dolores sits unser. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.

Equal Column Height

When used in our full width container, we provide an option to make all columns in a set equal height. This produces a much cleaner, even look for your content.

Equal Column Height

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 consequat orem ipsum dolor sit amet, consectetur adipisicing elit. Incididunt ut labore et dolore magna aliqua. Ut enim ad et dolore magna exercitation ullamco lesse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non sadips ipsums proident, sunt in commodo consequat orem ipsum dolor sit amet culpa qui officia deserunt mollit anims sadips ipsums dolores sits unser. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.

Column Sizes

We offer a complete set of columns from 1-6. See below for every column combination.

One Half

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 consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

One Half

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 consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

One Third

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 consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui.

One Third

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 consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui.

One Third

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 consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui.

One Third

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 consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui.

Two Third

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 consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui. 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 consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nis.

One 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 sitsers exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

One 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 sitsers exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

One 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 sitsers exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

One 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 sitsers exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

One 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 sitsers exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

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 aliquip ex ea commodo consequat. 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 consequat. 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 consequat. magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliqu enim ad minim veniam, quis nostrud exercitation ulis.

One 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 sitsers exercitation.

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 ut aliquip ex ea commodo consequat. 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 consequat. 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 consequat. magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliqu enim ad minim veniam, quis nostrud exercitation ulis.

Two 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 sitsers exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing 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. Ut enim ad minim veniam, quis nostrud sitsers exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 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 consequat.

One 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 sitsers exercitation.

One 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 sitsers exercitation.

One 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 sitsers exercitation.

One 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 sitsers exercitation.

One 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 sitsers exercitation.

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 consequat. 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 consequat. 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 consequat. magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliqu enim ad minim veniam, quis nostrud exercitation ulis.

One Sixth

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

One Sixth

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

One Sixth

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

One Sixth

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

One Sixth

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

One Sixth

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

One Sixth

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

Complete Set of Options

Every option and description included with the column shortcode is listed below.

  • 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.
  • 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 – Accept a pixel value, percentage or certain alphabetic values. For example, 50px, 100%, left top, left center, left bottom, right top, right center, right bottom, center top, center center, or center bottom. Sets the background’s position.
  • 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.
  • 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.

Join The 100,000+ Satisfied Avada Users!

BUY AVADA NOW!