Sections, modules, and NICA custom modules in HubSpot

This Scribe walks through your basic email building blocks. Learn how they work, where and how to use them, and understand how you can use NICA custom modules to speed up your email build.

NICA Support Team
23 steps
2 minutes

HubSpot

Introduction

This Scribe walks through the basic email building blocks used in HubSpot Marketing: **Sections, modules, and custom modules.** Learn how they work, where and how to use them, and understand how you can employ NICA custom modules to speed up your email build.

These terms are also highlighted in the [NICA Marketing Glossary.](https://staff.nationalmtb.org/hubfs/MarCom/NICA-Marketing-Glossary.pdf)

Navigating your email

In your email editor, you can view the CONTENTS of your email in an outline form. This can be helpful if you're trying to edit a specific part of your email. To view the email contents, just click the **branched outline icon** located on the left side of your editor toolbar:

In this example, we're using a **single-topic league template** to show you how an email is structured, but these concepts apply to any email build in HubSpot's drag-and-drop email editor.

You can click/hover over different parts of your email outline (both **sections** and **modules**) and they'll be highlighted in your editor view. Click on them, and the editor toolbar will appear so you can format/change settings.

To return to this outline view at any point as you edit your email, you can click the **outline icon** or click the **"Contents" heading** at the top of your editor bar:

Sections

You can see that emails are structured by **SECTION.** A section is the basic building block used to create any email. Sometimes called a "row" in other email platforms, a section spans the full width of your email. Think of it like a floor of a building: it's one level, all the way across.

Once you click on a section, you can edit the settings/formatting of the section using the **Edit section** options, shown below:

You can also **clone/duplicate existing sections in your email.** If you have something that's already formatted the way you like, just hover over it and click the **clone element** icon that looks like double-up squares:

Modules

**Modules** are added *within* sections. Modules are the "bricks" that make up your email content: images, text, headings, buttons, links, and more.

To add a module, **click the "+" symbol** at the top left of your email builder toolbar. This opens a menu full of different module options:

Most of these modules are self explanatory and are easy to use: just **drag and drop** them into your email.

You can also **clone/duplicate existing modules in your email.** If you have something that's already formatted the way you like, just hover over it and click the **clone element** icon that looks like double-up squares:

You can **move** modules by hovering your mouse over the module you want to move. When the correct is highlighted, a blue-ish box appears around the element. Your cursor should turn to a hand icon; at this point, you can click and drag the element where you'd like it to go.

**PRO-TIP!** Did you move a module on accident? Maybe it landed in the wrong spot...and now your formatting is messed up. 😩 No worries! HubSpot has an "UNDO" feature in its email editor that makes it easy to reverse course. You can click the **backwards arrow icon** on the top right side of the screen, OR you can use the universal "undo" keyboard shortcut, **"CMD+Z"**

**Modules are versatile and can be rearranged within the sections of your email.** You can stack modules next to each other within the same section, in "columns" - just be mindful that they may appear differently in your mobile view, and you'll want to make sure everything is showing up in the order you want on mobile. You can change the "stacking" order of your mobile views in your SECTION settings.

Custom NICA modules & saved sections

One of the most powerful features of HubSpot is the ability to create **custom modules** that the NICA National team can pre-configure for your league. **Custom modules are common layouts used by leagues that are already designed and formatted for you. They make email formatting more simple and efficient.**

Your templates are already pre-populated with custom modules. To add another custom module, expand the **"Custom Modules"** section at the bottom of the "Add content" menu:

One example of a custom module is the **LEAGUE BUTTON** module. Let's walk through it:

When you drag a custom module into your email design, a series of options will populate on the left design menu:

For league buttons, be sure to update your button text and URL...

...and you can even change your **button color** from a series of brand color options that match your league!

Note that all custom modules feature different levels of customization. Some have more options for you to choose than others. **If you need support with changing or updating one of your leagues' custom modules, please submit a [MarCom Help Desk request.](https://nationalmtb.org/marcom-help)**

We've also set up a few **SAVED SECTIONS** for you. These are entire, pre-formatted sections (rows) that you can add to your email. To use them, click on the "SECTIONS"

...and choose from the **"Saved sections"** options:

**Did you know:** NICA National will continue to refine/add more custom modules and saved sections as we use HubSpot more. As of the date of this Scribe creation, leagues have access to the following **custom modules:** - **League brand color reference** (drag and drop into your email to see all of your league hex codes, and use to format other modules. Be sure to delete this module before sending your email!) - **League button**: Pre-formatted with easy brand color selection - **League email header**: Keep your logos/spacing consistent across all of your emails - **League main email menu**: Includes pre-populated URLS for: PIt Zone, your website, events, and a donate link - **League heading**: A text heading that can be formatted to different sizes and your league brand colors - **League NICA CTA**: A footer showing your league's relationship to/inclusion within the broader NICA national community - **League social media links**: Drag-and-drop section with all your social icons + URLs ready to go - **League sponsor email footer**: Pulls an embeded image of your league sponsor so they're always up to date anytime your email is viewed As of the date of this Scribe creation, leagues have access to the following **saved sections:** - **2-column short content section**: A photo + short text field (with button) - **3-column content section:** A 3-column section with text and buttons in each column - **Pre-formatted divider**: A gray line to quickly divide email sections Have an idea for a custom section or module? [**Let us know!**](https://wkf.ms/42nA6fo)