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

Featured image by: 

Let me know what you think about this post.

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

Share This Story!

You might also like to look at these

  • Adding visual styling using custom CSS

    Continue reading
  • As a result of testing a variety of builders, I have run across some really nice demo layouts and components that can be implemented within these tools. These are very similar to the Avada [...]

    Continue reading
  • I have been testing a variety of themes and plugins that claim that can change your world. While I know this is marketing hype, I want to believe at least one of them will change my view of Avada.

    Continue reading

Share This Story!

You might also like to look at these