Possibly Outdated Content

This content was written a while ago and may no longer be accurate, but remains here for reference purposes.

Someone wanted to know if it was possible to recreate a feature they had seen on another website where there was a faded image to the right and text to the left.

Avada can handle this multiple ways:

  • Like the original, create images to use in the background. The original uses one image for desktop and a different one for mobile.
  • Use a background image on the column, and then place the text in a nested column (Sample 1). This can be done with 6.2.3 or version 7. Sample 1b changes the width of the text column.
  • Use nested columns and change the order on mobile and tablet (sample 2). Version 7

The challenge was using no custom CSS. I also chose to not use an image that included the fade. Check out the full explanation and results.

Originally published on July 27, 2020

Hover Columns
Mega Menu Issues – Avada 7 Custom Header

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.


  • Read Customizing Post Pagination

    Customizing Post Pagination

    In this article, I show how CSS can be used to customize the Avada pagination element.

    February 20, 2023

  • Read Quick Tip: Faux Nested Columns

    Quick Tip: Faux Nested Columns

    Overcoming a shortcoming in Avada with some CSS.

    December 4, 2022

  • Read Targeting the Boxes

    Targeting the Boxes

    I put together a quick demo to highlight the containers that do not have settings, but that can be targeted with CSS.

    November 3, 2022

  • Read Test Layout – The Becker

    Test Layout – The Becker

    Trying to duplicate the basic look and feel of Dirk Beckers' website using Avada.

    August 3, 2022

  • Read Offset Image Recipe

    I put together a recipe for creating an offset image layout.

    February 24, 2022

  • Read Services Section

    Another quick demo to mirror a Gutenberg-based design.

    January 15, 2022