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.

  • 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.


  • 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:


Please sign in to leave a comment.

Didn't find what you were looking for?

New post