By Stephen Walker

I was on the Theme Fusion website and decided to take a look at the forum to see if there were any surprises or questions I could answer. One question was posted about extending an image beyond the page width without using the full-width layout. There was a nice graphic of what they were looking for and a link to a similar layout – the WP Elevation website.

After looking at the design and the website, which uses Elementor, I wasn’t sure if it was possible. Initially, I tried to replicate using just Avada elements and while it was possible to come close, I could only do it using the full-width content container settings. After a closer look at the code to see how it was done with Elementor, I realized that Avada does not have this capability in a design element. After a few seconds, I realized this should be easy enough (I hoped) to use a code block – fortunately it is. Here is the code needed for the right image:

Copy to Clipboard

As you can see, not a lot of code and the left image is the same just with the negative margin applied to margin-left. There are two key pieces: the negative margin and the object-fit: cover. The latter ensures that the image does not appear distorted when you set the height. The margins can be updated depending on your page width. The narrower the page, the greater negative margin you can use. I put together a demo page.

Below you can download the code that can be pasted into the editor .

  1. Make sure you are in the default, legacy editor
  2. Switch to text view
  3. Delete any existing content and paste the contents of the file
  4. Switch to Avada Builder and edit as needed.
Download the Builder Code

Originally published on April 11, 2021

share the article

Leave a Reply

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


  • CSS Play Button + Lightbox

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

  • Avada Challenge – CV Page

    A Facebook user asked if it would be possible to create a popular CV template using Avada.

  • 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?

  • Hover Columns

    Is it possible to create columns that change color when you hover over them?