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:
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 .
- Make sure you are in the default, legacy editor
- Switch to text view
- Delete any existing content and paste the contents of the file
- Switch to Avada Builder and edit as needed.
Originally published on April 11, 2021
