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.

Originally published on April 11, 2021

high rise buildingsCreating Layouts
Adding and Styling Top-level Category Labels

Leave a Reply

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

RELATED ARTICLES

  • 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 Avada Challenge – CV Page

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

    March 14, 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