Skip to main content
All CollectionsWorking with Blocks
Design Block Best Practices
Design Block Best Practices

Important considerations when creating a library of snippets for your team to use.

Alex Piepenbrink avatar
Written by Alex Piepenbrink
Updated over 8 months ago

Label the elements

When somebody else places your block 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 Block, use the Page Structure Panel to label all the constituent elements. This is especially important if your block has any hidden elements, or elements that are only visible in certain Device Modes

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

Use appropriate content

If your block involves text and images, think about if that content should be used as-is or if it will be replaced with new content. If it's going to be used as-is, then make sure what you've written is accurate and has no typos. If the content is going to be replaced, it can be helpful to include “lorem ipsum” or other placeholder text and images that will give others a good sense of what the layout is going to look like once they add content and is clear that the content should be replaced. Although keep in mind that when others add the block 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 block? If you’ve styled things inline (applying styles directly to the text by highlighting the words and making changes) or at the element-level (by applying your styles to the element), this will be saved along with your block, guaranteeing it looks the same wherever it’s used. 

Wherever you haven’t applied styling directly, though, the block 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 block 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 block 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 before you save them out as a block.

Did this answer your question?