Community X.

Connect with other creators, share ideas, give feedback and get the latest product updates.

Dec 23, 2020

Asymmetrical layout gallery

Hi, all!


I want to recreate images layout like on this website https://patriciaurquiola.com/architecture/il-

sereno so that there is only one image per row, and one left, the other one right etc.

What would be the best way to do this easily, so that it also work on the tablet and mobile?

I would really like to use pro gallery for this, but there are not asymetrical layouts like this, any workarounds?


Thank you!

2
Best Answer
Dec 23, 2020

Hi Hana,

I believe the quickest flow would be using the Layouter, because it would be the easiest way to Add/Remove items.


  1. Add a Lauouter (quick add)

  2. Stretch to section

  3. Layouter > Change Layout > List

  4. Set first item min height to 500px

  5. Add image & title to the first item and stack them

  6. Reduce the item min height to small value (e.g. 100px)

  7. Now for each item you can : Duplicate item (cmnd+D), Change image, Reset image (to get the new image original porportions), Set it to be 100% (of stack container), Align image Left, Change title.

  8. Align each stack to Left / Center / Right


Hope that works for you,

Please feel free to ask anything

:)


Dec 23, 2020

Hi,


Thank you for your reply!

It works nice!


Cheers

Editor X

Design your boldest creations.