Skip to end of metadata
Go to start of metadata

Directions for how to use navigate to and use the controls in Sitecore Email Builder.

If you have not received basic Sitecore training, you may first want to schedule a session with the web team. Email webteam@wsb.wisc.edu to schedule a training session, or for more information.


  1. Develop the Content (Write Copy and Gather Images): Write the text you would like to use in the email/newsletter in Word, Google docs, or another document editor. Gather any images you would like to use in the email. Note: The images should be high quality images that are at least 580px wide. See the Training: Media Library, Image Re-sizing and Optimization for more details, or Image Editing - Quick Guide for image editing using PIXLR X.
  2. Log into Sitecore: Navigate to the Sitecore Login Page and click on Content Editor
  3. Go to Your Department Folder: Within Sitecore navigate to the email templates directory by clicking the following folders: sitecore > Content > Templates > email > directory/folder matching your area.
  4. Create a New Template: If you are creating a new email/newsletter, right-click on your group's folder (e.g. Hawk-Center), or an email folder, and select Insert then Main Email Template.

    Or …

    Duplicate an Existing Email: Locate the email you want to copy/duplicate. Then left click on the email so that the name is highlighted. Right click on the email and select Duplicate.
  5. Name the Email: Enter a name that makes sense to you. The web team recommends using all lowercase and dashes instead of spaces (e.g. hawk-center-email-template).
  6. - Optional - Provide a Display Name: The Display Name should be proper case, with spaces where needed. (e.g. Hawk Center Email Template) You can change the display name by selecting the Home tab and clicking on the Display Name icon under Rename.
  7. File the Email: Move the email into the appropriate folder. Emails are currently organized in folders by year, and month. (e.g. If you build the email in May of 2020, you would left click on the email and then drag it into the 2020 > 05 folder.)
  8. Edit the Email: To edit the content of the email go to the WSoB tab. There you will edit, move, add and remove the following controls by clicking on the Details icon under the WSB tab. Then, navigate to [Project > Email Builder > Email], select the control you want to add, and enter a placeholder. You position controls using placeholders. Each control can only use certain placeholders. You will be able to preview the email as you work on it by clicking the Preview Page icon under "Proofing" in the "WSB Tab".

              1. Header**

  1. The placeholder for this control is placeholderEmailHeader.
  2. This control should only be used one time in an email.
  3. This adds the WSB logo to the top of the email. All emails should have the header control.
  4. Header color and images are changed by selecting new images and colors in the header control.
  5. Your header images should be located in the Meta-Data folder [sitecore > content > templates > email > meta-data > header-images] and then look for your department's name (e.g. [sitecore > content > templates > email > meta-data > header-images > hawk-center]). If you need something added or changed please contact the web team.

              2. Teaser Text**

  1. The placeholder for this control is placeholderEmailTeaserText.
  2. This is an optional feature, but it is highly recommended that you have teaser text in your email. Teaser text allows you to control the line of text that will be displayed after the subject of your email in most email applications.
  3. The teaser text can be changed by editing the single line of text in the control.

              3. Email Title**

  1. The placeholders for this control can be placeholderEmailBody or placeholderEmailColumnOne (Left Column).
  2. This control should only be used one time in an email.
  3. This control allows you to add a title to the email. The title is in a bigger font and in our brand red.

              4. Greeting**

  1. The placeholder for this control is placeholderEmailBody.
  2. This is an optional feature. This control should only be used one time in an email.
  3. This control allows you to add a dynamic field that populates an individual’s first name for either iContact or LRM (Clickdimensions). (e.g. Dear fname,)

              5. Paragraph

  1. The placeholders for this control can be placeholderEmailBody or placeholderEmailColumnOne (Left Column).
  2. This feature allows you to add and format paragraphs of text.
  3. You can add multiple paragraphs within a single paragraph control by hitting enter and typing each paragraph. Or, you can copy and paste multiple paragraphs into the control from a text editor.
  4. To add a break in text (line break), but have the next line appear right below the text above it hit Shift + Enter.
  5. You can make text bold or italic, add ordered and unordered lists, and create inline calls to action or hyperlinks that go to either website pages or email addresses.

              6. Horizontal Rule

  1. The placeholders for this control can be placeholderEmailBody or placeholderEmailColumnOne (Left Column).
  2. This control allows you to add a line or horizontal rule to your email. There will be a break before and after the line.

              7. Article

  1. The placeholders for this control can be placeholderEmailBody or placeholderEmailColumnOne (Left Column).
  2. This control allows you to add an image, heading, paragraph of text and a drop down call to action.
  3. The web team recommends that you only have 3-5 articles featured in an email.
  4. See the Training: Media Library, Image Re-sizing and Optimization for more details about the image sizes allowed in the Article control.
  5. There are some pre-made article images available in the media library: [sitecore > media library > Email > Template > Newsletter] in the event-templates and Holiday folders.
  6. Your article images should be located in a media folder [sitecore > media library > Email]. Upload images into the directory/folder matching your area. You should be able to add images to this folder. (e.g. [sitecore > media library > Email > hawk-center]

              8. Callout**

  1. The placeholder for this control is placeholderEmailBody.
  2. This control allows you to add a paragraph of text that is within a blue box with a slightly darker blue outline.
  3. The web team recommends that you only have one callout in each email.

              9. Full Width Image

  1. The placeholder for this control is placeholderEmailBody.
  2. This control allows you to add a full width image.
  3. See the Training: Media Library, Image Re-sizing and Optimization for more details about the image sizes allowed in the Full Width Image control.
  4. The full width image can be anything you would like it to be as long as it meets our Branding Standards.
  5. There is a PowerPoint template available that lets you create basic full width images with minor branding features. You can also use Pixlr.com to create your own images.
  6. There are some pre-made full width images available in the media library: [sitecore > media library > Email > Template > Newsletter] in the event-templates and Holiday folders.

              10. Section Heading

  1. The placeholders for this control can be placeholderEmailBody or placeholderEmailColumnOne (Left Column).
  2. This control allows you to add a secondary heading or section to the email. You can use multiple Section Headings in an email. This heading is dark gray, a slightly larger font, and has a line under it.
  3. Often times it is used before a two column sublayout.

              11. Two Column Sublayout**

  1. The placeholder for this control is placeholderEmailBody.
  2. This control allows you to add a two column layout or section to the email. The two columns start wherever the Two Column Sublayout is positioned in the email.
  3. Group items that are in placeholderEmailColumnOne (Left Column) and placeholderEmailColumnTwo (Right Column) directly after the Two Column Sublayout.
  4. The items will appear in the order they are in the Controls panel.
  5. Section Headings, Paragraphs and Articles Controls can be in the left column. Sidebar Content and the Featured Speaker Controls can be in the right column.
  6. This control also allows you to add Facebook, Twitter, Linkedin and Instagram button(s) to the right Column.
  7. The web team recommends that you try to keep the left and right columns as even as possible in your email.
  8. This control should only be used one time in an email.

              12. Sidebar Content

  1. The placeholder for this control is placeholderEmailColumnTwo (Right Column).
  2. This control allows you to add a heading, paragraph of text and a drop down call to action to the right column.
  3. The web team recommends that you only have 3-5 Sidebar Content Controls featured in an email.

              13. Featured Speaker

  1. The placeholder for this control is placeholderEmailColumnTwo (Right Column).
  2. This control allows you to add an image, heading, paragraph of text and a drop down call to action to the right column.
  3. See the Training: Media Library, Image Re-sizing and Optimization for more details about the image sizes allowed in the Featured Speaker Control.

              14. Button**

  1. The placeholders for this control can be placeholderEmailBody or placeholderEmailColumnOne (Left Column).
  2. This control allows you to add a teal button to the email. This clickable button has a hover effect, button text, and can go to either a website page or email address.
  3. The web team recommends that you only have one main button in your email.

              15. Closing

  1. The placeholder for this control is placeholderEmailBody.
  2. This control allows you to add a closing with a headshot of an individual, the person’s name, and their title to the bottom of an email.
  3. See the Training: Media Library, Image Re-sizing and Optimization for more details about the image sizes allowed in the Closing Control.
  4. Your closing images should be located in the Meta-Data folder [sitecore > content > templates > email > meta-data > closing-images] and then look for your department's name (e.g [sitecore > content > templates > email > meta-data > closing-images >hawk-center]). If you need something added or changed please contact the web team. 

              16. Signature**

  1. The placeholder for this control is placeholderEmailBody.
  2. This control allows you to add a Signature to the bottom of your email. The signature can have a Full Name, Title, Department, Room Number, Phone Number, Email Address, and clickable links to Facebook, Twitter, Linkedin and Instagram.
  3. Typically the Signature control is only used one time in an email.
  4. Often times the Signature control is used if the Footer control is not used.

              17. Footer**

  1. The placeholder for this control is placeholderEmailFooter.
  2. This control should only be used one time in an email.
  3. This control allows you to add a footer to the email. The footer should have at least the Department Name. It can also have the Phone Number, Email Address, a clickable link to a Website, and if needed a smaller clickable link to something like privacy text.

              18. Unsubscribe**

  1. The placeholder for this control is placeholderEmailUnsubscribe.
  2. This control should only be used one time in an email.
  3. This control allows you to add a dynamic field that gives someone the ability to unsubscribe from your email list in either iContact or LRM (Clickdimensions).
  4. This field is only required when sending an email from LRM (Clickdimensions). iContact automatically adds an unsubscribe field.


*before text means the control is required to be in every email. ** after text means the control can only be used one time in an email.

  1. Preview the Email: To preview your email save your changes and then select the "WSoB tab" and click the "Preview Page" icon. This will allow you to see your email as you work on it.
  2. Upload Images and Publish Media Items: After you have added all the text and controls to the email, Upload your images to the media library and publish them. Then you will be able to link to them and see the images in your email.
  3. Publish the Email: When you are done editing your email and you want to either send a link to someone to review or send the email using an email marketing provider, you should publish your email. To publish your email to the directory, save your changes, select the WSoB tab, and then click the Publish button under Workflow. Then you will be able to open your email in the directory.
    1. If you share the URL that is in the directory with others, they will not see any in process changes. They will only see the email as it was when it was last published. This is helpful if you are still developing the email and want them to only see things that have been finalized.
    2. It is recommended that you view the published email in the directory and copy the code from this page in an incognito window. This serves two purposes: you can verify your images have been published, and it disables any add-ons. Disabling add-ons means the html will not have any extra code in it when used in an email marketing provider.

Note: An email can be published more than once. So if you publish your email and notice a mistake, simply return to the email builder to edit the control(s) and save and publish the email again. 

Copying the .html for Use in an Email Marketing Service

  1. Go to the directory: Make sure you have published your newsletter in Sitecore, then go to directory. Browse through the links until you've found your newsletter.
  2. Open an InPrivate Window: When saving the .html of these email newsletters for use in iContact or another email marketing provider, make sure you are in InPrivate mode in Internet Explorer and Mozilla Firefox or Incognito for Chrome. To switch to InPrivate mode click on Tools and go to InPrivate. This will open a window that is now InPrivate mode. This will keep the html clean and prevent extra code from being added.
  3. View the Email in an InPrivate Window: Copy the URL of the email from the directory and paste it into the address bar of the InPrivate window.
  4. View Page Source and Copy .html: Right click on the white space of your screen. Select View Page source. Copy all the .html on your screen. (Keyboard shortcuts: Hit Control + A to select all the code, then Control + C to copy it.)
  5. Paste the .html: Then open your email marketing service and paste the .html code into their .html editor.
  6. Test Email Before Sending: Be sure to send yourself a test email before scheduling the send. Check the Send from information, Subject, Teaser Text, and test all links in your email.

Help Documents and Best Practices for Emails

Help Documents and Best Practices for Creating and Sending an Email and E-newsletter/Landing Page

See Also:


« Previous: Sitecore Email Builder: Example Controls
Next: Email Builder: Publishing Media Library Items  »