NEW Drag and Drop Editor - Content Blocks

Content Blocks are the most basic element of a Drag and Drop 2.0 Email Template. Content Blocks are added to Sections and are used to display specific types of content within the template, such as text or an image.

Goals

• Learn what types of Content Blocks are available in the NEW Drag and Drop Editor
• Learn how to edit Content Blocks
• Learn how to add new Content Blocks to a Section

Table of Contents

• Text
• Image
• Button
• Spacer
• Social Links
• Social Share
• HTML

The Sidebar - Universal Settings

Whenever you click on any Content Block in the editor, the right sidebar will update to show that block's settings and editing tools. Each block has unique settings, which we be discussed below, but each block also has a sidebar subsection called Block Settings. The options presented under Block Settings are the same regardless of which type of Content Block you are working with.

This menu allows you to set a background color or image for the block and adjust the padding around the content. Clicking the lock icons will prevent the padding values from being changed.

Text Block

Text Content Blocks can be added to a Section in the template in order to add text to that Section. Clicking on the block will display its editing menu containing options such as changing the font type, adding dynamic content, and adding hyperlinks.

The Text Block editing pane also includes a Fetch Content from Web feature that allows you to specify a webpage URL and automatically pull text from the web page into the block by referencing the webpage's metadata.

NOTE: The URL used to Fetch Content from the Web must begin with http:// or https://

Hyperlink Manager

Clicking the link button will open the hyperlink manager. The hyperlink manager allows you to specify what type of link you are adding, the link URL, and the link text. A link can be one of the following types:

• Website URL: this is a standard link to a webpage.
• Phone: this is a phone link that will automatically use your default phone app or software to call the specified number.
• Email: this is a mailTo link.
• File: this opens the file manager, where you can upload attachments, such as excel files or PDFs and link to them.
• Unsubscribe: this allows you to add a global unsubscribe link or a link to a previously created Subscription Management Page.
• View in Browser: this allows you to re-add a view in browser link into the template if the default view in browser link is removed.
• Web Content: this option displays a list of existing Forms, Surveys, or Landing Pages in your environment and allows you to add a link to a selected record.

Image Block

Image Content Blocks are used to add an image into a Section. Clicking on the Select Image button in the block will open the image manager, which allows you to pick any image you have previously uploaded and place it into the Content Block.

When you click on a Content Block that already contains an image, the editing menu will display in the sidebar. This menu allows you to open the image editor, replace the image, make the image a hyperlink, or change the image alignment within the block.

Button Block

The Button block allows you to add a button into the Email Template. 

Clicking inside the button will allow you to modify the button text. Clicking inside the block will also display the block editing menu in the sidebar.

The editing pane will allow you to set the button's hyperlink and also allow you to change the button color, border properties, and alignment.

Spacer Block

Spacer blocks allow you to add a divider or extra space between the content of other blocks or sections. 

Clicking inside the Spacer block will display the editing menu in the sidebar.

The editing pane will allow you to set the thickness, color, and style of the divider.

Social Links Block

Social Links blocks allow you to add links to your social media accounts to your template. Out-of-the-box, we offer icons for Facebook, Twitter, Google+, Linkedin, Instagram, Pinterest, Blogger, and YouTube, but you can add custom links to additional platforms as well.

Clicking inside the Social Links block will display the editing menu in the sidebar.

Edit Links will allow you to set the URLs for social links and add custom social links.

Additional options allow you to set the link alignment in the block, set the shape of the icons, set the visual style of the icons, and set whether the icons should be listed vertically or horizontally.

Social Share Block

Social Share blocks allow you to add social links into a template that recipients can use to share the content of the email on their own social media account. There are social share links for Facebook, Twitter, LinkedIn, and Google+

Clicking inside the Social Share block will display the editing menu in the sidebar. The editing menu includes options to set which social share links should be displayed, the alignment of the links within the block, the shape of the links, the visual style of the links, and whether the links should be displayed horizontally or vertically.

HTML Block

HTML blocks allow you to add custom HTML content into the email template. We recommend that only users familiar with HTML use these blocks since adding custom code to the template can affect its rendering and responsiveness.

Clicking the HTML block will update the sidebar to allow you to write or paste in HTML using the Code Editor.

You can write your own HTML or paste in existing HTML in the code editor, then click Save Code to return to the email template.

Adding Content Blocks to a Section

A Content Block can be added to a Section by clicking the desired block in the righthand sidebar and dragging it into the Section. Once a Content Block is in the section, it can be rearranged within the section at any time. A Section can contain as many Content Blocks as desired.