Custom blocks

Blocks are essentially small pieces of code that can be dropped into your designs. When a block is dropped into an email or page, it becomes a part of that design. Once placed, you can make additional edits, like changing text, swapping images, or fine-tuning styles. 

Block types

There are two types of blocks you can use in your designs.

Using blocks

Blocks can make email and page building faster. They will help streamline your process with consistent branding across your emails and pages. Blocks are perfect for things like banners for your pages, email footers, and other elements you want to reuse in your designs.

When considering whether to build a custom block, think about reusability. If the block you want to build is for a very specific use case, chances are that you will only need it once. Try keeping only those blocks that you know you will use often.

What to expect with custom blocks:

• Custom Blocks are built in the Blocks Editor under Design Library > Blocks.
• Users must have Design Library permissions to create blocks.
• When a custom block is dropped into an email or page, it becomes a part of that design. The dropped code is a snapshot in time from when it was last saved in the Blocks Editor.
• Custom blocks will act as a grouped block once dropped in a design. This can be adjusted by ungrouping the block.
• Custom blocks are a container by default. Adding more containers can lead to alignment issues or extra spacing. Avoid them, if possible, for more flexibility.
• For the most flexibility, we have not set a pixel width for the block’s container. It is set at 100% to fill the width of the design it is placed into.
• In the block’s container, it’s better to keep left and right margin values at 0. You can control that spacing, if needed, after it is placed into your design

Create a custom block (Blocks editor)

1. Go to Design Library > Blocks

2. Click Create a block

3. The Blocks Editor will open and you can start building a custom block.

Drag-and-drop blocks from the left panel of the Blocks Editor to the right panel. The process is similar to building an email or page design, but here you are designing a single block or group of blocks to re-use it.

4. Click Save

Test the Block

We recommend going into your design and dropping in your Block as you are designing it. This will help you see how your Block interacts with the design’s settings and styles. You can open a separate tab with your email or page design open, then add your Block to the design to see how it works.

Styling Basics

When building a custom block, your goal should be to match your ideal design 90-95% when it is dropped into a design. Why not 100%? When you drop your block into a design, preset styles from the email or page could affect its design. This is an expected part of how CSS works. You can use this to your advantage. When building your block, ask yourself:

• Do you need a flexible block that will adapt to multiple designs? Set fewer styles.
• Do you need a rigid block that will look nearly the same in every design? Set more specific ones.

You may need to make small adjustments when placed in your email or page, depending upon how the block is built.

Create custom blocks (Email or Pages Editor)

What to expect creating custom blocks:

• When the block is saved, it will only save This Block styles that are specific to the block (not General styles)
• The fewer styles you add the more flexible your custom block will be in any design as the block will take on the global styles for the block type. For example, a custom footer block would use the global footer styles of the design it is dropped into.
• Adding specific styles to the design will make the design more static. The custom block will use any styles set in the custom block, ignoring global styles for the design it is placed into.
• To save multiple individual blocks into one block, add them inside a container or column block.
• You can’t always drag a container into a container, so be aware of this as you save blocks.

To save/create custom blocks

To save custom blocks directly from email and page designs, right-click on any block and select Save to Blocks.

1. Hover over the block you want to make into a custom block

2. Right-click on the block and select Save to Blocks

3. Your custom block is immediately available under the Your Blocks tab

Editing a custom block

You can edit your Block in the Blocks Editor when you want to make changes to the custom Block that is dropped into designs. These changes do not update the Blocks added to existing designs.

You can also edit your dropped Block in your email or page. Change the styles and the content as needed. These changes do not update the Block in the Blocks Editor.

Group or Ungroup custom block

In emails and pages, dropped Blocks will be grouped by default, meaning it will act as a single block where you can edit all the information at the same time in the left side panel.

If you prefer to have more granular control over the Block styles, you can ungroup them in a couple ways.

Click on the custom block from the preview panel (right side). From the edit content panel (left side), scroll down to the bottom of the block and click Group/Ungroup.

Or, from the preview panel (right side), hover over your Custom block and right click. Select Ungroup to to ungroup the blocks. Or, after ungrouping, you can right click again and select Group.

Ungroup option

Group option