Responsive Fusion Slider Demo Using Fallback Image

On a large display device, the slider image shows a landscape orientated image of a Balinese man walking down the steps of a temple. Notice here, you can see traditional parasols and the sides of the steps.

On a small display device, the slider image shows a portrait orientated image of a Balinese man walking down the steps of a temple. This is the same photo in the desktop version. Yet, it’s a completely different image file that was intentionally cropped to fit better on smaller devices. No longer can you can see traditional parasols and the sides of the steps. A couple bonuses is that the smaller cropped version will look better on a smaller device and load faster because it’s a smaller file.

Using a fallback image for the Avada Fusion Slider element is a crude yet effective way to implement responsive web design (RWD) using Avada.

This is Bali on 35mm film by freelance photographer mark l chaves

Click on the image to view the full size.

This is Bali on 35mm film by freelance photographer mark l chaves

Click on the image to view the full size.

Go Small

Now switch to a smaller device to view the mobile version of the same photo. And, to find out how to use the Fusion Slider Fallback Image option.

Go Big

Switch back to a larger device to compare the view the desktop version of the same photo.

How was this Done?

This was accomplished by creating two different versions of the hero banner image of the Balinese man.

  1. Landscape at 2,048 pixels wide.
  2. Portrait version cropped using Adobe Photoshop at 720 pixels wide.

Then, using the Fusion Slider Fallback Image option for this page to load the portrait version of the slider image.

Physically altering the original image so that the main focus of the picture stays in view is called art direction.

Avada Fusion Slider Fallback Image - Resposive Web Design by freelance web developer mark l chaves

What are the Trade-Offs?

[fusion_checklist icon=”” iconcolor=”” circle=”” circlecolor=”” size=”” divider=”” divider_color=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=””][fusion_li_item icon=”fa-check fas”]

This is a quick and dirty way of doing responsive design in Avada. Meaning this method is fast and easy, yet crude.

[/fusion_li_item][fusion_li_item icon=”fa-check fas”]

The fallback image will look better on a smaller device because it’s customised to do so.

[/fusion_li_item][fusion_li_item icon=”fa-check fas”]

The fallback image will load faster on mobile device because it’s a smaller file. Google will love you for this!

[/fusion_li_item][fusion_li_item icon=”fa-ban fas”]

You need to make a mobile friendly version of your slider image (can be a good thing, but it’s an extra step).

[/fusion_li_item][fusion_li_item icon=”fa-ban fas”]

You will not be able to use text overlays on the fallback image (could be a deal breaker for many).

[/fusion_li_item][/fusion_checklist]

Questions or Comments?

If something isn’t clear or if I missed something, please leave me a comment below.

Buy Me a Coffee at ko-fi.com