EE Designer content element types

Use the Engagement Element (EE) Designer to drag and drop content elements into your page template.

Image

Use a single image to highlight an activity, employee, event, etc.

  1. Upload an image file.

  2. Select Next.

  3. To prevent the image from being re-sized, enter the Set image height (in pixels). The image's width will automatically scale in proportion to this height.

    To allow the image to be re-sized based on the relative area available, leave this field blank.

  4. Enter Image alternative text. Describe the image contents and purpose. This is used for an accessible web design and assists users who are unable to see the image.

  5. Determine whether the image should be static or interactive:

    • No link

    • Link to external page - For example, link to an external resource, social media site, news article, or a charity's website. Enter the URL of the page to link to.

    • Link to internal page - Use these to drive users to take action within the community, such as to record their volunteer hours, review or redeem a new incentive program, or explore specific areas of the site. Use the menu to select which page to link to.

    For interactive hyperlinks, select whether the link should Open in a new tab of the user's internet browser.

  6. To adjust the image, select Set Focal Point. Then choose the most interesting part of the image to be the new center of the image.

    Select Save focal point to preview the image and to review how the image is cropped or zoomed to fit the set image height.

    • In general, we recommend:

      • Make the focus of the image fall on the line that divides the top middle and top third of the image.

      • Use large groups of people vs a single person.

      • Solid colors, foliage and nature or cityscapes are options that look good at any size.

  7. Select Save.

Button (link)

Use buttons to encourage action and to direct users to related content.

  1. Determine whether the button should

    • Link to external page - For example, link to an external resource, social media site, news article, or a charity's website.

      Enter the URL of the page to link to.

    • Link to internal page - Use these to drive users to take action within the community, such as to cast a vote, record their volunteer hours, review or redeem a new incentive program, or explore specific areas of the site.

      Use the menu to select which page to link to from the community.

  2. Select whether the link should Open in a new tab of the user's internet browser.

  3. Enter concise Button text that calls the user to take action. For example:

    • Donate

    • Sign up

    • Submit

    • Visit

    • Volunteer

    • Vote

  4. Select a Button style.

  5. Choose how to determine the button's width:

    • Fit to text - Buttons expand and contract based on the length of the button text. Buttons will vary in size.

    • Fit to column - All buttons in a column are consistent sizes. If button text is excessively long, the text may not fit as nicely.

  6. Select the button and its text alignment within the column.

    • Left justified

    • Centered (recommended)

    • Right justified

  7. Select Save.

Text

Use text to tell a story, provide a description, or explain.

  1. Enter one or more paragraphs of text.

  2. Use the formatting options to customize its appearance. You can include links to related content.

  3. Select Preview (the eye icon) to review how the formatting affects the appearance.

  4. Select Save.

Heading

Use headings as titles or to label subsections of a large EE.

  1. Enter phrase or a short sentence.

    Warning: If you enter line breaks, they'll merge into single line.

  2. Use the formatting options to customize its appearance. You can include links to related content.

  3. Select Preview (the eye icon) to review how the formatting affects the appearance.

  4. Select Save.

Divider

Use a line to divide content into subsections for improved readability.

Accordion

Enable users to select which content to show or hide as they read. Use progressive disclosure to encourage users to scan for the basics and to drill in to learn more.

  1. Select the down arrow ( V ) next to Item 1.

  2. Enter phrase or a short sentence as the Item title. This is visible at all times.

    Readers will expand the accordion to read more about this item.

  3. Enter one or more paragraphs of additional details for the Expanded text.

  4. Use the formatting options to customize the appearance of the item title and the expanded text.

    You can even include links to related content.

  5. At the top of the item, select the up arrow ( ^ ) next to Item 1 to collapse it.

  6. Select Add another accordion item. Enter the title and expanded text. Then format the text and collapse it.

  7. Add multiple items to the accordion.

  8. To remove an item, collapse it. Then on the row with item title, select Delete (trash can icon).

  9. Select Save.

Image gallery

Use multiple images to highlight an activity, employees, events, etc.

  1. Select a gallery type.

    • Grid - Shows small "thumbnails" of all images simultaneously.

    • Carousel (slideshow)- Shows a single image at a time. Periodically, the carousel automatically "rotates" to show the next image from the gallery. Users can manually pause, fast forward, and reverse.

  2. Select whether to show images in a Lightbox.

    When enabled, users can select an image to view a larger version in a centered overlay. The rest of the page is slighted dimmed while the image is selected.

  3. To delete an image, select X.

  4. For each image, select Set Focal Point. Choose the most interesting part of the image and then select Save Focal Point.

    • In general, we recommend:

      • Make the focus of the image fall on the line that divides the top middle and top third of the image.

      • Use large groups of people vs a single person.

      • Solid colors, foliage and nature or cityscapes are options that look good at any size.

  5. Select Save.

Embed video

Enter a video link to embed it in your EE. Supported video platforms are YouTube and Vidyard. To embed correctly, video links must use the formatting in the examples below.

To embed a YouTube video:

  1. Select the Share button for your desired YouTube video.

  2. Select Embed.

  3. Copy the video link from the provided iframe code. The link must include the word “embed.”

    • Example:https://www.youtube.com/embed/wtyvf3dQ1Fs?si=jo3AMtgFXzzO2iNP

  4. Paste the embed link into the Video URL field in the EE Designer.

  5. Select Save. Use the Preview button to ensure your video embedded correctly.

  6. Select Save and Publish or Save as Draft to save your changes.

To embed a Vidyard video:

  1. Select the Share icon for your desired Vidyard video.

  2. Select Thumbnail in the Embed dropdown.

  3. Copy the video link.

  4. Paste your video link in the Video URL field in the EE Designer, then change the end of the link from ".jpg?" to ".html?".

    • Example: https://play.vidyard.com/yYnbEpqijJgShtdGGix7KM.html?

  5. Select Save. Use the Preview button to ensure your video embedded correctly.

  6. Select Save and Publish or Save as Draft to save your changes.

Content block

  1. Set the size of your background, if desired.

  2. On the Background tab, select either a background image or color to display.

  3. On the Text tab, enter your heading and additional text for the content block, and format as appropriate.

  4. Optional: On the Image tab, you can select additional images to display for your content block. Upload the image and set the size.

    Note: You can also select Enable rounded border if you would like to round the image. However, the image must have the same width and height if you want to create a circle with the rounded borders.

  5. Select Save.

iFrame

Embed an external element, such as an HTML document or a website.

  1. Enter a URL for an iFrame element.

  2. Set the width and height for the element, and select Save.

Code block

Users who are familiar with code can further customize content by inserting a block of HTML with incline CSS to control the styling.

The EE Designer interface may not immediately render these additions.

We strongly recommend you Preview a saved draft to confirm the code acts as expected.

Contact your Blackbaud Customer Success Manager (CSM) for details and assistance. Based on our experience with other organizations, we have examples of HTML code to best support common engagement programs.