Element Editing Control Descriptions and Instructions

Print Friendly and PDF Follow

Editing Options by Element Type

The grid below lists how each element can be modified.

 

   Box Button Multi-Column Divider Full-Width Image Image Group Text Title
Align   X       X      
Background X X   X X X      
Borders X X       X      
Column     X            
Favorites X   X            
Full-Width         X        
Icon Style                  
Image Settings           X      
Image Group Settings             X    
Layout             X    
Line Settings       X          
Mobile Settings X   X   X        
Position X X       X      
Size   X       X      
Social Networks                  
Style   X              
Spacing     X         X X
Typography   X           X X
                   

 

 Element Editing Control Descriptions and Instructions

Align

  • To set the alignment for an item (not text), select the object and click the preferred alignment: left, center, right
 

Background

  • With an element selected, click the color select square in the bottom right corner of the background control
  • From the pop up, you can either enter a hex value, click a swatch of recently used colors or use the color picker.

 

Borders

  • Click the center square in the cross to apply or remove a border to all for sides
  • Click one of the four ends of the cross to apply or remove a border on one side.
  • Under style, you can set the border type: Solid, Dashed, Dotted, None
  • Set the width of the border in pixels by entering a number value or clicking the up and down arrows to increment the amount.
  • From the color box pop up, you can either enter a hex value, click a swatch of recently used colors, or use the color picker.
  • Last used colors is based on recently selected colors.

  • You must include the # symbol before hex color values.

 

Column

  • In the content pane, when a column is selected for editing it has a black outline.
  • A selected column
    • can be set to show or hide on a mobile device
    • can be locked to its current width so that equalize column
    • can have a specific pixel width determined
    • can be deleted by clicking "remove selected column"
  • To make all the columns the same width, click the equalize columns button
  • You may click "add column" up to five columns
 

Favorites

(Formerly Saved Content)

Save element as a favorite

  • Select a box or column element

  • In the right hand content tab, locate the favorite element manager

  • Click save

Delete favorite element

  • Select a box or column element

  • In the right hand content tab, locate the favorite element manager

  • Click Manage saved elements

  • When the complex element manager loads, on the right hand side select the name of the element you want to delete
  • Click Delete selected

 

Full Width

  • With your column element selected, choose one or two cells
  • If you convert to one column after populating two columns, content will be lost
 

Icon Style

  • The icon style control is for the social follow element
  • Choose between circle, rounded, or square
 

Image Settings

  • Image settings shows a preview and the original image dimensions in pixels
  • To swap or set an image, select "Jump to Gallery"
  • Alt text is the help text that describes an image before it loads
  • Link type allows you indicate whether a button will direct to a URL or email an individual
  • Protocol allows you to choose the prefix for the url: http, https, ftp, other
  • URL is the image hyperlink destination
  • If the original width of your image is bigger than 240px, but you resized it to a smaller size in the desktop version, you are able to make it full width on mobile with the Fluid on mobile switch.

Dynamic Image

  • If you change the Dynamic Image slider to "On", you will be prompted to fill in additional information.
  • This option is useful if there is an image on your .edu site or another external site that you would like to utilize without uploading it to your Encompass site.

 image_settings.png

 

dynamic_image.png

Image Group Settings

  • The Image Group element helps you to add 2 to 5 images at the same time.
  • Under the Image Group settings tab you can choose the layout, add, remove or reorder images
 

Layout Settings

  • Choose if objects sit side by side or stack

 

Layout Settings for Social Share

  • Choose if objects sit side by side or stack

  • Display icon and text, just text, or just icon
 

Line Settings

  • For divider elements
  • Set the style (solid, dashed, dotted)
  • Set the width in pixels
  • Define the line color

 

Mobile Settings

  • Use mobile settings to hide an area when the email is viewed on a mobile device
  • With the Reorder on mobile function (for multi-column elements) you can decide if you want to stack columns on mobile view, or not.

 

Position

    • Control the padding and margin around an image by adjusting the numeric value for the top, bottom, right and left areas.
 

Size

  • Drag the slider to resize an element or use the width and height controls to set specific pixel dimensions
 

Style

  • Increasing the radius makes the button more round. Decreasing the radius makes the button have sharper corners (like a square or rectangle)
  • Link type allows you indicate whether a button will direct to a URL or email an individual
  • Protocol allows you to choose the prefix for the url: http, https, ftp, other

**NOTE: Versions of Outlook that do not support border-radius will display rounded buttons as square.

 

Spacing

  • Control the padding around a selected element by adjusting the numeric value for the top, bottom, right and left areas.
 

Typography

  • Use the typography box to set the headline, text and link styles for a text element
  • Color, font size, line-height (leading) can be defined for paragraph text and up to three headlines.
  • Link underline controls whether hyperlinked text is underlined