Avada Challenge – CV Page

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.

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.

Anchors

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.