This article will show you how to reuse specific email sections from Visual builder—like headers, footers, or others from your existing designs, without the need for coding or building them from scratch in HTML builder. Although Visual Builder doesn't offer the option to export just a portion of your email layout, this guide outlines steps that allow you to reuse your elements for new campaigns.
Note: The action requires some basic knowledge of HTML
Understand the email layout
To get started, familiarize yourself with the structure of your email in Visual Builder. The email is organized into rows, which divide it into smaller sections. Rows are a crucial element of the layout and play a vital role in identifying specific parts of your email within the HTML code.
For this example, let's use a design that's split into four sections. Since you want to reuse the email's footer, you'll be focusing on the fourth row.
Save email as an HTML file
To export your current email template as an HTML file, the process is the same whether your email campaign was created separately or as an email node within a scenario. Click the three dots on the right side of the editor and select Save as HTML to download your template.
Formatting and identifying code
You can open the HTML file using your code editor; Visual Studio Code is our top recommendation, as it's free and commonly used. In this step, you'll prepare the HTML code to extract the section you need. It's best not to skip this part, as the file's formatting can be messy, making it challenging to locate the correct tags.
Here comes the magic of the code editor. Press Shift + Alt + F on Windows or Shift + ⌥ + F on Mac. In just a second, your code changes from messy:
Into a readable format:
To improve the readability of your code, it's helpful to collapse both the <style> and relevant <table> tags, which allows you to focus on the key sections. Each row in your email's layout is contained within a <table> element. The challenge is pinpointing specific sections, such as the footer, within the code. The simplest way to start is by finding the first <td> tag that appears after the <body> tag. From there, collapsing the <table> tags will reveal a cleaner, more straightforward structure. For further clarification, refer to the accompanying video for a visual walkthrough.
You can use the row layout to identify the exact section of the HTML code you need. Every row in the email is stored within a <table> tag.
To preserve both the functionality and appearance of the footer, copy the <table> segment found between lines 188 and 293 (see video above), making sure to include the closing </table> tag. Repeat this process for the <style> Block located on lines 11-85 (see video above). By copying these sections, you'll have all the essential code needed.
Note: The line numbers shown in this example are illustrative only. The location of the relevant HTML and CSS will vary depending on the complexity and structure of your email.
Saving as a new block
Now, go to Data & Assets> Asset Manager and choose Block> New Block.
The final step is to paste the code you've copied into the editor. Be sure to review the preview to confirm that everything is displaying correctly before saving the Block.
How to reuse the Block in a campaign
To use your footer in a different email campaign, start by adding a new row to your email—this can be done in either an existing or a completely new campaign. Insert a Dynamic block into the new row. Next, click on the Dynamic Block you just added and select "Configure Block." Find and choose the Block you saved earlier, then click Apply. Your footer is now set up and ready for your upcoming email campaign.