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
Zoom Out Hover Effect
Zoom In Hover Effect
Lift Up Hover Effect
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
Avada 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 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.
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
16% 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 Avada 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. Avada 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 Avada Builder to easily make edits, add content and boost creativity!
The Avada: Website Builder
CREATE THE LAYOUTS YOU WANT
The Avada Website Builder gives you the ability to design and build any layouts for your Avada website. Choose to customize the Footer, single posts, Portfolio posts, archives, search results, and more. With the power of Layouts, Layout Sections, Conditional Logic, Layout Section Elements, and Avada’s massive range of Design Elements, the sky is the limit. Custom design a global footer or only apply the custom Footer to a single page or post.
Header Builder
Whatever your design requirements are, getting the job done could not be any easier. You can decide how many columns to use when designing and building the header, with a vast array of styling options to perfect the layout. What’s more, is you can now choose to create and display as many different headers as you want for different pages and posts throughout your website.
Footer Builder
Free from any constraints of Global Options, anything you can imagine and design, you can build and implement as your Footer, either globally or in a conditional layout on a Custom Post Type, a post category, or any number of other possibilites. With the Avada Footer Builder, we have introduced a tool of unparalled design power and flexibility, and you are now limited more by your imagination than anything else.
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 Avada Global 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 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.
