Responsive Options In Avada
In this video we’ll be looking at responsive options in about.
Make sure you subscribe to our YouTube channel to keep up with all the latest videos like this one. And if you don’t want to miss one, click the Bell icon to get notifications of all new videos on our channel. OK, let’s begin.
Of order is fully responsive by default, but there are many options to help you fine tune your site to suit your design and content. So that it looks as good on a tablet or phone as it does on a desktop.
Let’s just look at an example here. If I look at the driving school demo, it looks great on a large screen.
And if I change to medium screen view, we can see the layout changes considerably.
We can now see the mobile menu here and as we Scroll down; we can see the layout has been simplified to suit the smaller screen size.
How and when these changes take place, however, is very much up to you through the responsive options found at Avada options responsive.
These are the main responsive options, but there are further possibilities when creating your content in the Avada builder as we will see later.
The first option is on by default, as this turns responsive design on or off in the thing.
The next four options are to do with breakpoints. The screen pixel width when the layout starts to change.
The first of these is the grid responsive breakpoint. This option controls when grid layouts such as the blog or portfolio begin to break into smaller columns.
Next comes the header responsive breakpoint. This controls when the desktop header changes to the mobile header and begins to show the mobile menu.
You have anything more control over this. If you build a custom header with Avada layouts.
Then there is a responsive breakpoint for the site content. This controls when the site content area changes to the mobile layer.
This includes all content below the header, including the footer.
The mobile layout for content is one of the main changes with responsive design as this is when column layouts begin to breakdown and columns are placed underneath each other for smaller screens.
The last breakpoint option is the sidebar responsive breakpoint, which of course controls when sidebars change to the mobile layer.
The next option is mobile device term where you can enable or disable pinch zoom on mobile devices.
Following this, we find the element responsive breakpoints. These are connected to the responsive preview options in Avada live and the responsive option sets feature introduced in about a 7.
Here you decided what pixel value you want. The element responsive options and visibility to take effect for the various screen sizes.
Finally, here we find the responsive typography options.
Responsive typography sensitivity is where you can control the responsive sensitivity of Typography in responsive layouts. You can set it to 0 to disable it entirely or increase the value for a greater effect.
Finally, there is the minimum font size factor.
You can adjust the minimum font size factor by adjusting the multiplying value of the minimum font size. For example, if set to zero, there is no minimum font size. If set to 1, then the minimum font size will be the same as the font size of the element.
If set to two, then the minimum font size will be double the initial font size of the element.
OK, those are the global responsive options, but if we search for mobile in the global options, we can see a whole range of other relevant options specifically relating to mobile layouts.
Most of these are pretty self-explanatory and give you a huge amount of control over your mobile layouts.
Also, under sidebar styling there is a useful responsive option called Sidebar Responsive Order.
Here you can determine where your sidebars sit in relation to your main content. When the site goes into responsive mode.
The E Commerce sites and other sites with important sidebar content. This is especially useful.
Another area related to responsive design is also found in the global column options. If we head to the Avada builder elements column, we can see there are defaults set for what columns do on medium and small screens.
By default, columns on medium screens inherit from the large screen layout.
And on small screens they go full width, but you can change the default behavior as has been done here or on a column by column basis using the column width options in the various screen size layouts. As we will see in a minute.
So as you can see about it provides a very granular global level of control over the responsive layout of your site.
But there are even more choices when actually creating your content.
Introduced in about a seven a new feature called responsive option sets is a real game changer when it comes to responsive layouts.
Watch the responsive option sets video for more information on this new feature, but in short it allows you to have independent layouts for your containers and columns in various screen sizes, all with the same elements.
And to check out a popular way you can use this feature, watch the linked video how to set the display order and size of columns in responsive layout.
Let’s just go to the about a consultant website here and Scroll down to see an example of responsive option sets in use.
Here in the some brands we work with section you can see that on large screens these individual company columns are 1/6 size.
But if we switch to the medium screen size from the toolbar, we are now in a responsive editing mode.
And if we change any of the responsive options, that will only affect this medium screen view.
So, in this screen size we can see that these columns are not inheriting the full screen layout as the global options would dictate, but instead have been changed to 1/3 width columns.
And if we go further down to small screen view instead of being full width here that have been set to half width.
These options give you enormous control over your responsive layout.
Finally, mention must be made of images when talking about responsive design. In Avada, images are pixel based and you will want to upload only the largest size of the image you will need when you upload it.
The Avada also has an advanced image system where it displays the correct sized version of the image. Depending on the screen width.
So, if the user is viewing the site on a phone, smaller size images will be loaded to save on page load time.
For more information on this, please see the How about a controls responsive images document linked here as well.
So, as you can see about it gives you all the responsive options you could ever need to make sure your site looks its best at all screen sizes.