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?
0
Comments
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?
Pendo designer:
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.
In editor:
In production:
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.