Layering in X Pro

Hey Xers!

I was given this rendering for a website to make. My concerns is the background where they’re unique shapes that bleed from one section to another and also shapes that have to span 2 different shapes. I was wondering how this would be achievable in Pro.

Thank you in advance!

My apologies for the white outs.

Thank you in advanced!

Hello Trung,

This is possible but there is no feature that is available out of the box that could achieve this so you will have to add some customization. As this would deal with custom development, this goes beyond the scope of our support.

But you may check these links for possible ideas:

Another workaround that you can try is to add the shapes as images and position them accordingly through CSS.

Hope this helps.

Thank you Jade!

I actually uploaded an entire page but it seems that it won’t load. my current concern right now isnt so much that odd shapes but the divider between each section.

How would I be able to achieve a custom shape on the top white half. where it bleeds into the next section. whether it be a custom background or an image.

Hey Trung,

Are you referring to the image in the screenshot below which overlaps the next section?

You can use an image element for that and apply a negative bottom margin value to it and then set the section’s z-index higher than the section below it. To see what I mean, please watch the short screencast below.

Hope that helps.

Hey Christian!

Yes! that’s it, thank you very much!

Also would it be kind of the same, since I want the lower layer(Blue) to be parallax but the top layer (white) still is connected with the section above it.

Thank you!

Hey @Pr1zm,

You are most welcome.

Yes it is the same with the lower layer image. Just keep in mind that the z-index of the upper image is 2 and 1 for the lower image by default. The sections must have a varying z-index too so that it will work.

Hope this helps.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.