Transcript of video:

Modules in Blocks Edit consist of sections, components, and regions. Dividing modules this way allows for separating content from layout, with each module type having its own functionality when building an email in the visual editor. Let’s go over each type and how to go about enabling them in a template.

Sections

Let’s start with sections. A section acts as a stackable container on top of other sections. Enabling a section will add it as a draggable module in the sidebar. When dragging it into the editor, it can only be placed between other sections.

In the template editor, go into edit mode, and with the section icon chosen on the left, start selecting areas that you want to turn into drag and drop modules. Use the blue bar of HTML elements at the bottom to help determine which areas would work as separate containers that are on top of each other. In this example, we’ve already enabled this section.

Each unique section requires a variable name and you can optionally also add a title to show in the sidebar. Click Update to confirm your changes. Let’s take a look at the code for it. You can do this either in the editor, or with your own code editor of choice. You can see the necessary classes and attribute that were added for the section.

A section can also have variants. Variants are alternate versions of sections that you can enable to choose from. This allows for preset design features and formatting options that can be switched between. Let’s look at this one for example. You can see in this example that this section has a format with and without this left border. Both versions of the section should be placed next to each other and given the same data-group attribute name.

Components

Next is components. Components are standalone pieces that can be placed within a section. Enabling a component adds it to a separate sidebar specific to components to drag in.

In the template editor, with the component icon chosen on the left, start selecting areas that you want to turn into a component. Again, use the blue bar of HTML elements at the bottom to help determine which areas would work as standalone components.

Let’s look at the code for components. You can see the classes and attributes that it needs to work. Variants can be added to components as well. In this example there is an alternate color to the button.

Regions

And finally, we have regions, which are static areas, that can’t be dragged around and don’t get added to the sidebar when enabled. A border around it is shown when mousing over it within the editor.

Go into edit mode and look for the region icon on the left. Decide what group of elements that you want to turn into a region. You can use the blue bar of HTML elements at the bottom to determine which will work. You have the options for allowing a region to be duplicated, or removed, or both. Duplicating a region makes it part of a listing where each copy can be ordered or removed.

Let’s see the code for regions. Regions can also have variants. In this example, the text is left-aligned and center-aligned.

And that’s module types in Blocks Edit. The essential building blocks for your email’s layout, based around your design system.