Page elements disposition

[Lyser]

Hello, i would like to have the follwing organisation of elements in a page :

The page would be separated in two with on the left side, several images and when clicking on one, his content would be displayed on the right side :

Is there a simple solution for this with X pro or custom code would be neccesary to do it ? i thought of a off canvas with a 50vw width but there is no control on how the off canvas appear if i’m not not wrong? (a simple fade would be ok instead of the right to left animated content). Also you cannot open directly another off canvas before closing the opened one.

[ruenel]

Hello @Lyser,

Thanks for writing in!

Regretfully there isn’t an option or feature in the theme that you can use in creating what you have in mind. What you can do is to use the Off-Canvas element instead. Perhaps, the following steps may help:
1.) Insert a GRID element to create your grid.
2.) In each of your cells, you insert the Off-Canvas element.

3.) Every time you click on the respective Off-Canvas, it closes the current open Off-Canvas and opens a new one.

Kindly let us know if this has worked out for you. Thanks.

[Lyser]

Thx Ruenel, i think i don’t get something with your solution because i’m forced to click once to close the current open off canvas then clic another time to open a new one. You can see that the hover is not active for others off canvas when one is opened.
Is it possible to open a new off canvas with only one clic when one is already open ?

Perhaps it’s the backdrop who is still here (despite that i put it transparent) and prevent clicking on others ? remove it completly could allow hover/clicking on others ?

[tristup]

Hi @Lyser,

I tried the way suggested by my colleague and found that this is the only way to acheive using existing elements and without any custom coding. But you have to click twice to close and open the next one as you pointed out.

What you are trying to acheive may require complex programming and you’d need to consult with our Elite team or else you can hire a developer who can assist you to do the customization.

Hope it helps.
Thanks

[Lyser]

Ok, for me we are not very far for the Off-Canvas to be a very poweful tool for interactive content with multiple instance of it.

Perhaps what missing is the possibility to :

• Clic on toggle to open one and at the same time closing another one if already open.
• Have better control for the Off-Canvas opening/closing animation (instead of the simple duration and easing, it would be so perfect to have the same possibility that we have for the animation scroll effects like Fade In Down, Roll In, etc…

(Having this update for The off-canvas would allow to create cool new ways to display interactive content with way more fresh design composition)

[ruenel]

Hello @Lyser,

What you are trying to do is not possible because when the Off-canvas is active, there is a backdrop the covers the whole screen. Kindly check out the image below:

As an alternative, you can use a set of images and a Stacked slider instead. Using the Custom Attributes, you will be able to display the slide on the right side of the column when you randomly click on the images on the left side. You must update your Pro theme to version 5.1.4 first before you can make use of the new Slider element.

Best Regards.

[Lyser]

Oh wow ! This new slider element allow me to do exactly what i wanted, thank you very much @ruenel !!

[prakash_s]

Hello @Lyser,

Glad that we were able to help you.

Thanks