Columns Overlap #1

Mainly CSS method! Highlight the column with an image, select the “Advanced” tab and expand “Custom CSS” panel to see the code.
Additional tweaks have been made for a mobile view. For example, the text column TOP and BOTTOM margins have been “replaced” with the LEFT and RIGHT hand-side margins.

The opposite side example must include “Reverse columns” for mobile devices, see the “Advanced” tab, “Responsive panel”. z-index of 1 has been assigned to the text column in order to bring it atop the image column.

Overlapping Columns Heading

Quisque consectetur sem ut odio tincidunt, quis pretium eros convallis. Nunc et odio faucibus, hendrerit libero a, tristique urna. Morbi auctor, ipsum ut tempor dignissim, nulla erat accumsan urna, sit amet semper urna tellus aliquet odio.

Overlapping Columns Heading

Quisque consectetur sem ut odio tincidunt, quis pretium eros convallis. Nunc et odio faucibus, hendrerit libero a, tristique urna. Morbi auctor, ipsum ut tempor dignissim, nulla erat accumsan urna, sit amet semper urna tellus aliquet odio.

Columns Overlap #2

No CSS code at all. Download and install “OoohBoi Steroids for Elementor” add-on and use “Overlaiz” extension to manipulate the Background Overlay (which is the photo) size and position. “OoohBoi Steroids for Elementor” is completely free and can be downloaded from the official WordPress plugins repo.

Highlight the image column first! “Background Overlay” panel can be found under the “Style” tab. All of the “Overlaiz” settings/options are the part of the “Background Overlay”.

The opposite side example must include “Reverse columns” for mobile devices, see the “Advanced” tab, “Responsive panel”. z-index of 1 has been assigned to the text column in order to bring it atop the image column.

Overlapping Columns Heading

Quisque consectetur sem ut odio tincidunt, quis pretium eros convallis. Nunc et odio faucibus, hendrerit libero a, tristique urna. Morbi auctor, ipsum ut tempor dignissim, nulla erat accumsan urna, sit amet semper urna tellus aliquet odio.

Overlapping Columns Heading

Quisque consectetur sem ut odio tincidunt, quis pretium eros convallis. Nunc et odio faucibus, hendrerit libero a, tristique urna. Morbi auctor, ipsum ut tempor dignissim, nulla erat accumsan urna, sit amet semper urna tellus aliquet odio.