Usage:

The following two containers have CSS classes pair-layout–image-left and pair-layout–image-right assigned to them. Each container consists of two columns, with respective CSS classes pair-layout–image and pair-layout–text, which set the behavior of these columns in both variations.

In responsive layouts, both varieties look the same, placing left-justified text beneath an image.

In desktop layout, the two columns unfold into a flex structure with explicit order. The first places the image on the left, and the second places the image on the right.

The image column has a fixed height (400px) and flexible width. Rather than scaling the image as the display layout changes, the column will trim the left and right margins from the image while keeping it centered to make it fit. For best results, use images at least 600×400 with a landscape orientation to allow for fluid display width.

When editing, only the Avada Live editor (not in wireframe mode) will display these elements in their actual locations.

These example containers are saved in the library and can be placed on any page. Place one container for each pair of image and text. Edit the content box text and the image column’s background settings to suit. For best results, alternate left/right variations.