How to design a guide with two or more building blocks side by side?
I want to make the design of the guide as the example below, is it possible to do this with the building blocks?
Let's say I have two blocks to the layout, the left one is only a full-width image and on the right block I want the title, text, and button. Is that possible?
Yes :) you would need to adjust your "stacking" blocks' margins to accomplish this, if you give them all the same right/left margin then they naturally stack up. So you would not use the "add side-by-side" function, just manually adjust margins for left/right to get the horizontal alignment you want before adjusting top/bottom for vertical alignment.
That worked, thank you very much Liz for the recommendations. ⭐️
Just to clarify what I did was just stack the blocks on top of each other, none to the side, and use the negative margins to make everything go where I wanted.
To adjust the margins of an image you must first upload it in real size, to avoid distortion.
Liz Feller I was able to fix all the margins and in the designer it looks good, but in the preview and in the test environment the margins are out of order, I don't know if there is a class that is being default. Did that happen to you too?
Preview mode and QA
I haven't seen this specifically, but I have experience where negative margins make it a little wonky outside the editor when lining things up. I have had to compensate for that by intentionally making it "misaligned" while editing, so that in prod it's correct.
Is this supported in Mobile App Guides as well, or is this a Web Guide only feature? My mobile guides don't seem to allow me to layout elements side-by-side.
Please sign in to leave a comment.