The key to Live Responsive Editing in Avada Live is the Responsive Icon on the Toolbar. Not only does this provide responsive previews for your content, but it is now a responsive editor.

You can choose from Large, Medium or Small Screen. These give you an emulated preview of your page content as it will appear on the selected screen size, and hides any containers etc. that are turned off for that screen size. It also allows you to edit any of the options that are part of the Responsive Option Sets, and only have the changes you make reflected at that specific screen size. This is achieved through the Responsive Option Sets feature.

What this means, is that you can now present the same content in completely different ways on Large, Medium and Small screens. For example, you can change the margins and padding of Containers, change the width and order, as well as the spacing, margins and padding of Columns.

There are many form factors today with screens. What with desktops, laptops, tablets and smart phones, there is a huge range of aspect ratios, and it’s sometimes very difficult to tell what your content will look like on every device.

We have simplified this dilemma, by offering three screen size breakpoints, corresponding to the three major device types – desktop and laptop computers, tablets, and smart phones. And with the Avada Global Options, you can specify at what pixel dimensions these layouts kick in when the website is viewed on the front end.

Just head to Avada > Options > Responsive, and here, in the Element Responsive Breakpoints section, you can determine the breakpoints at which Medium and Small screens begin. The Responsive Previews in the builder will always show the layout for Medium and Small screens regardless of what values you enter into the options here, but the preview size will change.

For full details on this great feature, check out the Responsive Option Sets doc and video. This is the main tool to use when you have entered the Responsive Editing Modes.

By default, options flow through the various screen sizes. So if you make a change while in Large Screen to the Margins of a Column, then that change will also be reflected in Medium and Small Screen views.

But the Responsive Option Sets allows you to break that connection, and edit independently for both Medium and Small Screens. Any changes made to any of the options that are part of the Responsive Option Sets will only affect the Screen size you are editing.

With Containers, there are only a couple of options that are part of the Responsive Option Sets. These are Margins and Padding. But with Columns, there are five options, all under the design tab, that you can make great changes to your layouts with. They are Column Width, Column Order, Column Spacing, Margins and Padding. Check out the How To Set The Display Order And Size Of Columns In Responsive Layouts doc for more details and some specific examples.

To have full control over responsive design, it’s also important to understand the default behavior of Columns at various screen sizes. This is found at Avada > Avada Builder Elements > Column.

Here you can see two options which determine the default behavior for Columns on both Medium and Small Screens. The default behavior is that Columns on Medium Screens inherit the layout from Large Screens, and that Columns on Small Screens go Full Width.

You can change the default behavior for each size screen, or you can use the Responsive Option Sets to just change some of the Columns in each screen size using Live Responsive Editing. You decide.

In the Column Element, under the Design tab, the first two options are Width and Order. NB. You will only see the Order option when you switch to one of the Responsive Layouts: Medium or Small.

The width of the column is set initially when you add it into the Builder. So if you are in Desktop view, and change the size of the column in the Width option, the column changes visually in the builder to that size. So, in this way, it’s just the same as changing the column size from the Column Size icon in the Column Element Controls. You can also now set a Custom Width to your Column.

It’s when you change to a Responsive view that things get really interesting, though. Here, we can take an existing column, regardless of its size in Desktop view, and change it to whatever we wish for the Responsive view.

There are already a few Global Options that affect what happens when a desktop layout changes to a tablet or phone layout. In the Responsive Options (Avada > Options > Responsive) you will find the Responsive Design Option itself, which turns Responsive Design on or off for the whole site. But you will also find two options called Element Responsive Breakpoints. This is where you set the default behavior for Columns on responsive layouts. By default, with tablet views, the columns inherit from the Desktop layout, and on Mobile Layouts, they become 1/1 columns.

But now, with Responsive Option Sets, you have complete freedom with what happens to your columns in both Mobile and Tablet view.

This is because you can now apply this new sizing independently to both Tablet and Mobile view. So, in this way, we can have three different widths, all for the same Column! This is much easier than duplicating the content and using Visibility options. See the Example section below, for a real world example of what this would look like.

The Order option, as stated before, only appears in Responsive views. This option allows us simply to change the order of the selected Column in the selected view. So if we have two 1/2 Columns in desktop, we might decide to change the order of these in Tablet or Mobile view (or both).

To do this, you can simply drag the columns around to display them as you would like for the specific view. Alternatively, you can add a number to a selected Column to specify the order. You can number each Column, or you could, for example just add the number 1 to the Column you want at the top. For two columns, this would be easiest, but if you had three or more, you would control the display order with a numerical value on each Column.

Again, you can set the order for Columns independently in both Tablet and Mobile view, and for Desktop view, the order, of course, is the order you place them in the Builder. This provides and enormous amount of flexibility with Columns in all Responsive views, and combines with the Width option, allows for any conceivable layout on any device.

Let’s take a real world example to illustrate how this all works. In this example, from the Pet Supplies website, we can see in Large Screen view, that there are three 1/3 Columns with content a little way down the home page.

If we look at this area in Small Screen View, we can see that now two of the Columns have been changed to 1/2 width, and one left to go full width according to the Column Global Options.

In another example a little further down the page, we can two images in each their own 1/2 Column (going full screen), and a row of four x 1/4 Columns, containing Icons and text, directly under this.

If we look at this area in Small Screen View, the images have remained at their 1/2 Columns, instead of reverting to full width, as is the default for Columns in Small Screen View. And the four 1/4 Columns have now become 1/2 Columns.

These are all examples of Column resizing. But what about Column Ordering? This hasn’t been used on this page, but as an example, when we are in Small Screen View, we can simply drag and drop our Columns to rearrange their order, as in the image below, and this would only take effect on Small Screen Views.

Yes, it is. If you haven’t disabled the Responsive Design option, found under Options > Responsive, then your site is already responsive, and will alter its layout when it is viewed in tablet or mobile view, according to the options and breakpoints set in the Global Options. For example, a Container displaying two 1/2 Columns on Desktop will, by default, display them as 1/1 Columns when on a Small (Phone) device, to compensate for the narrow viewport.

There are many Responsive options you can set in Avada, and you can set your own breakpoints for several areas of the layout. Please see the Responsive Options in Avada video for full details on that. But Responsive Option Sets offers you much greater granular control with your content, and work in conjunction with the Avada Options to give you the freedom to decide exactly how you want your Columns to display on both Medium and Small size screens.

So now, if you want 1/2 width columns on Small Screens, that’s no problem. You can even drag and drop containers to change their order on various layouts. In short, you can have three completely different layouts for the same Containers and Columns, giving you all the flexibility you need for responsive design.

Responsive Options Sets are available on selected options in the Container and Column Elements (including background images), as well as a few other selected Design Elements; at this point the Button, Image, Text Block, and Title Elements. This feature will expand over time to other Elements and options.

There are very clear indicators for when Responsive Option Sets are available. In the back end editor interface, you will see the word ‘Responsive’ and a set of icons in the Title Bar of any Element that uses it. As well, a screen icon will be visible next to the options available for use with the feature, as seen below.

In Avada Live, on the right hand side of the toolbar, you will find the Responsive Icon. This is not just a preview option to see how the site looks on different screen sizes, but is also a new responsive editing mode. When you select a specific screen size, like Medium or Small, not only does the layout change on the screen, but any Responsive Options that you set while in that view, will apply only for that view.

You can also adjust the Responsive Screen view in Avada Live from the actual Element options that support it, by clicking on the icon in the option.

As you can see in the example of the Live Builder below, I have chosen the Small (Phone) Responsive Icon in the toolbar, and in the Padding Option for the Container I am editing, the icon has changed to the same icon, signifying that the values inserted (in this case 10px padding on the left and right sides of the Container) will only apply when the screen is at Small size.

Any responsive option set while in the Desktop view will carry through to both medium and small layouts, but if you want a specific value, for either Tablet or Phone for example, you would just click on the respective icon and then enter a different value into the relevant option.

It works the same way in the back end interface of the builder, but it just looks a little different. If we look at the Container or Column Element in the back-end interface of Avada Builder, we can see three Responsive icons at the top of the Element. If we select a specific icon along the top, the options included in this feature and that also have a responsive icon, will change their icons to match the one selected at the top. This shows that the values you set in this options will apply only to the selected layout.

See the image below to see how this works. Note how in the image, the Mobile Responsive view has been selected in the Container header, and in the Margin and Padding options of the Container, the Responsive Icons there have changed to a phone, showing that the values entered there will only apply when the page is viewed at Mobile size.

There are many options and situations you can change with this system to help you fine tune your design on Tablets and Mobile, including How To Set The Display Order And Size Of Columns In Responsive Layouts, and Alignment options on several Elements, including the Button, Image, Text Block, and Title Elements.

It’s also important to realize you have full control over the responsive sizes and behaviors in Avada. For example, under the Responsive Options, found at Avada > Options > Responsive > Element Responsive Breakpoints, you can determine the breakpoints at which a Medium Screen and a Small Screen kick in.

And under the Global Column options, found at Avada > Options > Avada Builder Elements > Columns, you can control the default behavior for Columns in responsive situations.

By default, Medium size screens inherit the layout from Desktop, and Small size screens revert to full width Columns, but you can, of course, change these default behaviors as you wish.

This feature is a real game changer. With Responsive Option Sets, you now have full control over your responsive layouts, all within the same containers and columns.