Label the elements

When somebody else places your snippet on their site, they may want to make edits to its layout or design. This can sometimes be tricky to do, since they don’t know exactly how the creator built it in the first place! 

To help your teammates easily understand the structure of your snippet, use the Page Structure Panel to label all the constituent elements. This is especially important if your snippet has any hidden elements, or elements that are only visible in certain Device Modes

If the snippet contains interactions, make sure you label those, too.

Use appropriate placeholder content

If your snippet involves text, it can be helpful to include “lorem ipsum” or other placeholder text that will give others a good sense of what the layout is going to look like once they add content. If the snippet includes one or more images, you may want to include placeholders there as well (although keep in mind that when others add the snippet to their page, the image will automatically be added to their media library.)

Think about styling

Where has the styling been applied to the elements of your snippet? If you’ve styled things inline or at the block-level (by applying your styles directly to the element or the text), this will be saved along with your snippet, guaranteeing it looks the same wherever it’s used. 

Wherever you haven’t applied styling directly, though, the snippet could potentially inherit from the Global Styles of whatever website it’s placed on. This can be potentially useful – if you want the typography of the snippet to adapt to the branding of its destination, for example. It’s up to you how finely you want to constrain its appearance across different contexts.

Ensure it’s responsive

Have you checked the appearance of the snippet across different Device Modes, to make sure it looks good at all possible screen widths? It’s always good practice to make sure the elements of a page design are responsive.

Did this answer your question?