Section Layout - Image + Title

[pavlito]

What should I do to achieve this layout where I have content on the left ( within the container > column ) and image on the right ( where the image is outside of the container ) ?

[marc_a]

Hi @pavlito,

Thanks for reaching out!

To achieve the same layout in the section. In your section, I suggest that you disable the container then set the width and max-width to 100%. In that way you will have a full width section, then just adjust the content on your left column by setting a padding to match the design. At the same time, on the right column, your image will look like outside the container.

Hope that helps.

[pavlito]

Is there any more ways?

[pavlito]

It is not working

[tristup]

Hi @pavlito,

I have checked and found there are only 2 pages on your website and neither of the two pages has any section which you have referred to in the screenshot. I would suggest you check and let us know the exact page where you are having this issue for further investigation.

Thanks

[pavlito]

Hi @tristup,

I have used dummy image for now. It is home page first section

[tristup]

Hi @pavlito,

I have created a Test page with the same content and done the following steps to replicate the structure you are trying to acheive.

Step 1: Change the Page Template to Blank - No Container | Header, Footer.

Step 2: Enable the Global Container for the second section.

Step 3: Disable the Global Container for the first section and set 100% to Width and Max Width as suggested by my colleague.

Step 4. Added an Inner Row into the first column where the content is added.

Step 5: Enable the Global Container for Inner Row and adjusted the Padding

Step 6: Added all the content in the column of Inner Row as shown in the Step 4 screenshot.

NOTE: You can replicate the steps as described or you can save this as a Template using the Save Template option and load it using the Load Template wherever you required.

Thanks

[pavlito]

Hi @tristup

The problem occurs on different resolutions because margin left is specified in px

[ruenel]

Hello @Pavlito,

Just enable the Global Container in your Row element settings. Use the image as your section’s background image and then position it to the center-right.

Check out the test page in the secure note below.

Thanks.