How To Use Responsive Option Sets in Avada V7 – Transcript
Hi everyone, in this video we’re looking at how to use responsive option sets in about.
One of the very cool new features in about a seven is the responsive option sets this game. Changing new feature allows you to design independently for multiple screen sizes using the same elements.
This is achieved by allowing some specific element options to hold up to three sets of values corresponding with the three responsive screen sizes, large, medium, and small. There are many form factors available in various devices now, but these three sizes cover all scenarios and as we will see later, a fully customizable.
Avada is already fully responsive and there are many global options for responsiveness. See the responsive options in about a doc. For more information on that, but responsive option sets are in the builder and give you much more granular control over your layout than the options can.
Let’s have a closer look.
Here on the pet supplies website we can see the responsive icon in the toolbar in Avada. 7 this is now much more than just a responsive preview button. Now it’s also a responsive editing mode.
Based on the three screen breakpoints you set in the global options found it responsive element responsive breakpoints.
These icons now show you a preview of what your site will look like in that particular layout.
But now you can also edit in this mode to limit your changes to the particular layout you are on.
Let me show you how this works.
I’ll switch to the small layout here, and if I now edit a container and head to the design tab, we can also see there is a phone icon next to the margin and padding options.
This icon shows us that any option values we enter here are now tide to the small screen layout.
So, to clarify, if I go back to the desktop layout and change one of the responsive options.
The Medium and small layouts will inherit the setting.
If I want specific options for specific layouts, I can go into the medium or small screen views and set the options independently.
This can be as simple as changing the margins or padding or as complex as an entirely new layer. Let’s illustrate.
Here in desktop view there is 90 pixels bottom margin on this container.
But if I switch to the small screen view and I can do that from the icons on the toolbar or from the specific option icons in the container here and now change the bottom container margin to for example 30 pixels.
Then that padding will only apply when the site is viewed on a small screen.
We can set a different value for tablet or if we leave that it will inherit from the desktop layout.
There are only a couple of options in the containers that belong to the responsive option set, but if we look at columns there are several more.
I’ll just Scroll down away and edit this column down here and head to the design tab.
As we can see, the 1st five options all have the responsive icon.
Order doesn’t show when you’re in large screen view as you don’t need it there. So, if you don’t see it, that’s Why.
The first two options are perhaps the most powerful, with an order.
It is with these two options we can completely change the layout on medium and small screen views.
Before I show a quick example, it is useful to understand the default responsive behavior of columns.
If we look in the global options at options of other builder elements column.
You can see that there are two options to specify what happens to column width on both medium and small screens.
By default, columns on medium screens inherit from the desktop layer and columns on small screens go full width.
So that’s default behavior.
As we can see in this container, the columns on small screens are going full width as per the global options, but on large and medium screens there are three columns instead.
This is typical responsive design and, in most cases, will be what you want.
But there might be times you want to change this.
So back in the small screen layout.
Any changes I make to the responsive options will only apply when the site is viewed on small screens.
For example, I could change the width of these columns to 1/3 just like large and medium screens, so they show in multiple columns on Mobile.
And we can also drag these columns around to change the order if we like. Also, only on mobile if we prefer, we can use the order option to number our column specifically.
It might not be an entirely wise design choice in this situation to have three columns of content on a mobile device, but the option is there, and the choice is up to you.
For more examples of how you can use the responsive option sets to change the order and size of columns, please see the linked video.
OK, this concludes our video on how to use responsive option sets in Avada.
Make sure you subscribe to our YouTube channel to keep up with all the latest videos and if you have any questions or need assistance, please create a support ticket and our team will gladly assist you.
As always, we want to thank you for choosing Avada.