Manage your drag-and-drop template settings

There are many variables provided to give you the customization you have been hoping for in creating communication for your families and surrounding community. This article will walk through some of the settings and configurable properties behind the scenes in the drag-and-drop editor tool. 

Don't yet see the drag-and-drop editor option? 

We are slowly rolling out the drag-and-drop editor to Messages XR Enterprise clients. There are two areas where you may already be able to access this option:  

• the Additional Email templates button in the Email channel
• the Templates tab in the Messages area

There are four areas within the drag-and-drop editor where you can configure options to add customization to your newsletter: 

• Row Properties
• Image Properties
• Video Properties
• The Settings tab

Let's jump in!

Configure your Row Properties

As you are becoming familiar with adding structure with rows, remember you can configure settings in Row Properties. Clicking on each row will open up Row Properties in the side panel. 

There are 4 sections of options available to you in Row Properties: Backgrounds, Borders, Layout, and Columns Structure. 

Backgrounds

The Backgrounds Row Properties provide you with the following customization options:

• Row background color: You can change the background color of each row.
  • If you prefer to apply Background color to all rows at once, configure Settings > Background color, instead.
  • Click to open the color picker and select a different color, or enter a hex code.
• Content area background color: This will adjust the background of the area where your content will go.
  • If you prefer to apply Background color to the entire Content area at once, configure Settings > Content area background color, instead.
  • Click to open the color picker and select a different color, or enter a hex code.

• Row background image: Add a background image that will only populate on part of your design, specifically within a row or rows.

  • Toggle Row Background Image on, click Choose Image, and paste the image URL.
  • Content Area or Row: Select whether the image applies to the Content Area or the Row.
  • Toggle Fit to Background to resize the image to fit the container.
    • When enabled, other layout options are disabled.
    • When disabled, the image retains its original dimensions.
  • Repeat: This will cause your image to repeat. This works well with smaller images or symmetrical patterns.
  • Center: This option will center your background image.

  Use Repeat and Center simultaneously

  Repeat and Center together creates a similar effect to Fit to Background, but the image repeats instead of resizing. Use this combo if your image was designed with specific dimensions that support your layout.

Borders

The Borders Row Properties provide you with the following customization options:

• Content area border: This option lets you control top, bottom, left, and right spacing for any row—giving you precise layout control and cleaner, more polished designs.
• Content area rounded corners: Here you can soften row borders, whether you're starting with sharp edges or not.
  • Rounds all corners by default
  • Use More options to choose specific corners
  • For borderless rows, apply a unique content area background
  • Matching row/content colors will hide the effect

Layout 

Improve mobile responsiveness by adjusting column stacking when the default setup isn’t ideal.

• Stack on mobile: Toggle off so that columns in the selected row will not stack.
• Hide on desktop/mobile: Being sure to confirm which row you have selected, you can hide individual content blocks or entire rows from a specific type of device.
  • Hidden rows won’t appear in the preview.

Columns Structure 

Each column within a row has its own Columns Structure option. The Column Structure Row Properties provide you with the following customization options:

• Columns structure
  • Column background: Adjust the background color to only one column at a time.
  • Column padding: Add padding around the edges of your column.
  • Column border: Configure options for your column borders:
    • Create a solid, dotted, or dashed border.
    • Adjust the border size.
    • In the color picker, change the color of the border. 

Configure your Image Properties

Once uploading an image, it's easy to make changes to your newly-inserted media. Simply click on the image in your main panel and Image Properties will open up in your side panel again. 

Here are some of the options you have when modifying the images you have inserted into your messages. 

• Auto width: If the image size is bigger than the box, this option is enabled automatically. You can switch it off if you want to resize it. Toggle this setting ON and OFF to automatically fill (ON) or not (OFF) the content area of the image.
• Align: Use this to change the positioning of the image. You can align the image to the text.
• Apply effects: Click on this button to load an image editing tool that allows you to resize the image, apply visual effects, and much more.
• Change image: Click on this button to open the folder where you can replace the image with a new one.
• URL: Specifies where the image is saved. You can also paste an external URL to load an image.
• Alt text: Enter the text that should be displayed when images are turned off.
  • This is a best practice in email design since there are still email clients that have images turned off by default.
  • Adding alternate text also makes your images more accessible.
• Action < Image link: Here you can link the selected image to a URL, to a new email in an email client, or to a telephone number for making a call or sending a text message.
  • Open web page: Select an option from this dropdown to determine the action that will be taken when users click on the linked image:
    • Open web page
    • Send email
    • Make call
    • Send SMS
  • Link file: Click this to link the selected image to a file that you previously uploaded through the builder’s media folders.
• Block Options: Block options allow you to customize the padding and visibility of the image.
  • Padding: Adjust All sides proportionally, or click More options to be able to adjust the padding for each side of the image individually.
  • Hide on: You can also opt to Hide your content on Desktop or Mobile using the visibility block option.

Configure your Video Properties

When you Insert a video link into a drag-and-drop template message, you have some options to customize the way your video displays in your newsletter that are found in Video Properties. 

• Click on the Video block in your main panel to open up Video Properties in the side panel. 

• URL: Enter the URL of the video you would like to insert into your newsletter
  • When you click Enter, a preview of your video will be automatically generated. The image displaying in the newsletter will be a link to the provided URL.
  • Before grabbing the URL, be sure you have followed these supported video format guidelines:
    • Supported video formats: This feature does not work with videos from Resources or any of our internal software.
      • Supported formats are:
        • Youtube: Apply Public and Unlisted privacy settings
        • Vimeo: Apply Public and Unlisted privacy settings
    • Supported aspect ratios
      • 4:3 and 16:9 (standard video formats)
      • 9:16 (YouTube shorts format)
      • 21:9 and 9:21 (CinemaScope formats)
  • Option: Link video at a specific timestamp: If you're using a YouTube video, you can also link the video starting at a specific timestamp. If you need information on how to generate this type of link, please see this Lifewire article.
• Title: Enter the title that will appear when users hover on the image in their message.
• Customize the Play icon options available to display on top of your video thumbnail and preview your selection in real-time:
  • Play icon type: Round Solid, Round Outline, Rectangle Solid, Rectangle Outline, Square Solid, Square Outline, or Arrow Only.
  • Play icon color: Light or Dark, depending on the background of the video thumbnail.
  • Play icon size: Choose the size that you prefer. 

Now you're all set! Learn more in the article, "Insert a video link into a drag-and-drop template message."

Configure your Settings tab

In the side panel, the third tab is called Settings. This is where you can configure the overall display of your newsletter. Learn more below about the options available to you. 

General Options

• Content area width: This specifies the maximum width for the content area when viewed on large devices. On smaller screens, this setting is ignored. Slide the dot and preview in real time how it will display with each different measure. 

• Content area alignment: This sets the default alignment for text in the content area.
  • While the standard setting is Center, you can choose to align it to the Left, if you'd prefer.
• Background color: Add a hex code to define the default background color for the entire design.
  • This can be overridden at the row, column, or content block level.
• Content area background color: This sets the background color specifically for the content area.
• Default font: You can even match your website font and branding with your outgoing communication.
  • Select a default font family that will apply to all content elements across your design.
  • You can override this at the content block level, if you need to.
• Link color: Add your hex code to set the default color for hyperlinks in the design.
  • This setting can also be overridden for individual elements.