Column Element
Columns Help You Structure Your Content And Design
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
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
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.
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.
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.
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.
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!
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
Only Display on Tablet
Only Display on Mobile
Display Everywhere
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
550,000+
Individuals & Businesses Trust Avada
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.
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.
