How to use sections in email templates
You will learn
Learn how to use sections in your email template layouts in Klaviyo’s drag-and-drop email template editor. Sections are groups of blocks, and can be used to organize your template. All drag-and-drop templates contain at least 1 section.
Before you begin
If you’re starting with an HTML template, convert it to a drag-and-drop copy to use sections. You need permission to edit templates. The conversion leaves your original HTML template unchanged.
- Navigate to Content > Templates and select Email: saved.
- Open the HTML template’s options menu and select Clone to drag and drop.
- Open the Converted templates tab. When the status is Ready to use, click the converted template’s name to open it in the drag-and-drop editor.
Review the converted copy’s layout, links, and personalized content before using it. Preview it on desktop and mobile, since spacing and styling can differ from the original. Learn more about converting HTML templates to drag and drop.
About template sections
Template sections allow you to group related blocks of content in your email templates. By grouping these blocks within a section, you can also apply styles to all the blocks at once, or move the section around your template easily.
Every block must be contained within a section. You can drag and drop blocks to move them between sections.
How to create and edit sections
All templates start with at least 1 section. To add a section:
- Open Content > Basic in the editor. Under Layout, drag Section into your template.
- Add content blocks (e.g., text, image, or button blocks) to the section and configure them.
To delete a section, hover over the section area, then click the trash icon.
- Hover over the section and click the star icon to save it as universal content for future templates.
- In Create universal content, enter a name in Universal content name, then click Create.
To use the section in another template, open Content > Universal in that template’s editor and drag the section into the template.
Section use cases and best practices
Every template is comprised of sections, and there are a few use cases where this can be particularly helpful. For example, headers and footers are easy to manage with sections, and you can also use sections to add a background image to a content block.
Headers
Use a section to build all of your email header content, including your logo, any navigation links, and other content included at the top of your emails. Once you’ve built a header as a section, save the section as universal content to easily add it to other emails.
Footers
Your email footer likely includes a variety of content, such as an unsubscribe link, your business address, key links, and any disclaimers or legal language you include in your messages. Keep all of this content organized using a section, and save the section as universal content so it’s easy to add to future emails.
Add background images beneath text
The section’s Styles tab allows you to set a background image with text, buttons, or other content overlaid on top. Learn how to add a background image to a section.
About section styles
Sections enable you to add styles that span multiple content blocks. To see all styling options available for sections, click the empty area beside the section’s content and view the Styles tab. Styling options include:
- Background images
Add a background image to a section - Content color
Use Auto to apply the content color from your template styles, Custom to select a different background color, or None for a transparent background - Border
Set a solid, dashed, or dotted border surrounding your section - Padding
Add space between your content blocks and the edge of a section area - Column content alignment
Choose whether column content is aligned to the top, center, or bottom of the section - Mobile stacking
Choose whether columns should stack on mobile
About section display options
Section visibility
To set a section to display on either desktop or mobile devices only:
- Toggle on Set same visibility for all blocks in this section in the section’s Display tab. This ensures all blocks in that section will use the same setting.
- Select either Desktop only or Mobile only.
Show/hide logic
Like individual blocks, sections can be set to show to or hide from recipients who have certain characteristics. When configuring your display options, it’s important to make sure that your block and section show/hide rules don’t conflict. For example, if a section is set to show to recipients in Canada, don’t set a block in that section to display only to recipients in Massachusetts. If you do, the block will be hidden for all recipients.
To show each audience a different version of an entire section, such as a different hero section for each loyalty tier, create show/hide logic variants for the section. Select the section, open the Display tab, and under Show/hide logic, select Personalize for multiple audiences. Each section variant has its own blocks, and the blocks inside a section variant can have their own logic variants.
Universal content sections and custom object sections support show/hide logic for one audience only. Logic variants aren’t available for them.
Learn how to show or hide template blocks and sections and create logic variants based on a recipient’s profile information.
Content repeat
Like individual blocks, sections can be set to repeat based on dynamic profile or event data. Learn how to set up a content repeat.
Additional resources
- Guide to the email template editor
Learn about Klaviyo’s drag-and-drop email template editor, including how to use template styles and configure each block type.
- How to insert a dynamic image in an email
Learn about the Dynamic Image option in an email image block, including how to find the right personalization tag to use and add it to an email template.