Easy and Responsive
The goal of the Agility Easy Responsive Columns system is to be both easy and responsive. In fact that’s the whole goal of Agility 3 – making the process of creating a responsive site simpler and quicker.
One box – many configurations
The Agility 2.1 responsive layout system is STILL state of the art. No other skin offers a layout system that can be used to rapidly create custom RESPONSIVE layouts.
However the Agility 3 Easy Responsive Columns system is far and a way simpler to use. Before Agility 3 if you wanted to create a 2 column section you would need to create:
- An area wrapper: HTML Container
- An area page wrapper: HTML Container
- A columns wrapper: Agility Responsive Columns Wrapper
- 2 columns: Agility Responsive Columns
That’s 5 boxes you had to create, label and give class names to. Today, it’s just one box.
Just drag it into the template and configure
The responsive columns system has 11 different column configurations to choose from:
- Single – full width column
- 2 columns – equally sized
- 2 columns – 3/4 + 1/4
- 2 columns – 1/4 + 3/4
- 2 columns – 2/3 + 1/3
- 2 columns – 1/3+ 2/3
- 3 columns equally sized
- 3 columns – 1/4 + 1/4 + 1/2
- 3 columns – 1/4 + 1/2 + 1/4
- 3 columns – 1/2 + 1/4 + 1/4
- 4 columns equally sized
And if that’s not enough for you – you can add more columns by using the Responsive Sub Columns box inside of any of the columns.
It does double duty
You can check the box to add an area wrapper and the system will set up a full width section that contains the columns. However, you can also simply drop it into an existing full width section to add multiple column configurations within the section.
Full control over padding
Many of the modern websites these days employ a “frameless” or “edge-to-edge” design where the backgrounds extend all the way to the edge of the next column. If that is your desire then Agility has you covered.
Simply check the appropriate boxes and the default padding will be removed!
Plus some bells and whistles
For those really hoopy sections of your site you can remove the page wrapper altogether (say for a full screen slider) and add an overlay element that you can use to apply a semi transparent color or patterned background.
Responsive Subcolumns Section
For added flexibility within the columns you can add sections of subcolumns which work just like the responsive column system. There are endless possibilities for laying out complex sites!