Possibly Outdated Content

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

A member of the Avada Facebook group asked if it would be possible to recreate a popular Wix template only using Avada features. The honest answer is sort of. While it is possible to create a very similar layout, the Wix site uses CSS Grid which provides some capabilities that are hard to emulate in Avada.

Two things the Avada team needs to focus on (IMO) is the addition of CSS Grid and an improved animation engine. Hopefully, as they focus on performance improvements these two will come to light. Using the latest css features supported by mainstream browsers could help them remove a lot of excess code.

The Recipe

If you look at the template on a tablet or desktop, it appears to be a simple two column layout. The right column, which holds the individual’s photo, is fixed and the left column, which houses content, scrolls. This is relatively easy to do with css grid, but presents a challenge in Avada. Another challenge was how to get the menu to work correctly – anchor links.

Version 1

My first attempts were variations of a simple two column layout with nested columns, but those failed. I then decided to use just a single half-column, and set a static background image. After some trial and error I was able to get the individual’s photo positioned correctly. This is not ideal as it requires Photoshop, but the image element would not take css to set absolute positioning correctly (could be me).

I was still having a problem with the anchor links. The solution here was easy and in my opinion better that the original. Using the header builder I created a two column custom header. All margins and column gaps are removed, and the container content is set to full width. I placed the title and custom menu in the left column using a split (1/3+2/3) nested column. In the right column I placed the download button. Making this a sticky header gave the page a better feature than the original. The page now worked correctly., but that right column was still bugging me.

Version 2

I was still having an issue with the right column and the lack of flexibility in setting the image. After some more trial and error (and frustration), I decided to add a right column into the flow. Why? I knew the column had a background image feature that had more flexibility than the page background. It turns out this is another area where Avada fails – the inability to set the background using the settings available in CSS – background-size and background-attachment in particular. The upside is that the workaround for this was fairly simple – custom CSS. I created a class, .bg-fixed, and applied it to the column. This css gave me complete control (sort of) of the background image. I am still not sure why (researching), but the background is still relative to the page and not the column which means the background mage still needs a little manipulation. After playing a around with a variety of image, I opted for one that I could remove the background. This resulted in the torso being cutoff, so I positioned the image in the bottom right. I like the overall effect.

Copy to Clipboard

What about mobile?

This was where Avada’s core features and the new responsive elements came in handy. I simply hide the right column on tablet and mobile, place an image element at the top of the left column that only appears on mobile and tablet, and modified the padding using the responsive settings.


I initially used menu anchors, but due to some odd behavior I opted for a solution I had found for a non-WordPress site I was working on. Set the anchor id on the element you are targeting and then add a class – I used .anchor-link – how creative. The class has top padding of 70px and a top margin of -70px whch places the element exactly where I want.

Take a look at the final solution and let me know what you think.

Originally published on March 14, 2021

Shooting starThe Events Calendar Widget
glass buildingUsing CSS Grid for Post Layout

Leave a Reply

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


  • Read Moving away from builder settings

    Moving away from builder settings

    I am beginning to restructure my site to rely less and less on the Avada element settings in favor of site-wide styling.

    February 12, 2023

  • Read Adding Dynamic Data to a Toggle

    Adding Dynamic Data to a Toggle

    Adding dynamic data to a toggle in Avada is easier than you think.

    February 12, 2023

  • Read Horizontal Image Accordion

    Horizontal Image Accordion

    I just added a demo of an accordion-style image slider using nothing but Avada and some custom CSS.

    February 11, 2023

  • Read CSS Play Button + Lightbox

    I recently migrated this page over to the new site and wanted to make sure you could find it.

    October 11, 2021

  • Read Extending Beyond the Page Width

    A question was posted on the Theme Fusion forum about extending an image beyond the page width without using the full-width layout.

    April 11, 2021

  • Read Centering Content

    Centering Content

    This challenge came from a couple of questions in the facebook group: How do I center a 1/2 column in desktop and have it be full width on smaller screens? How do I keep an image focal point correct on mobile?

    September 15, 2020