Use the Engagement Element (EE) Designer

Use the Engagement Element (EE) Designer to create engaging and appealing EEs that are personalized to your organization's needs. You'll start with a layout template, then drag and drop content to customize your page.

The EE Designer doesn't support giving or voting functionality. Use a hyperlink or button to direct users to a Giving or Voting EE.

Tip: Text fields on this page support custom translations.

Create a new EE

  1. Go to CSRconnect Admin Portal, Admin tools, Engagements, Engagement Elements.

  2. Select Create new.

  3. Choose Engagement Element Designer, then Select.

Select a Template

When you use the EE Designer, start by choosing a template. This determines the basic layout of EE, including the number, location, and width of columns, images, buttons, links, headers, and more.

  • Program overview -This template has a full width header image. Under that, there is a main content area and a right-hand side bar for secondary content.

  • Resource page - This template has space for an introduction at the top, then a 3-column layout for content.

  • Detailed list - Create a detailed list with custom icons or images.

  • Company spotlight - Use this layout to create reports on annual reviews, volunteer events, and company spotlights.

  • Single column - This simple layout is a single column for the entire page.

To preview the layout of each template, select the Preview icon. You can then select Use This Template to continue with that template.

Once you have selected a template, select Next to continue.

Enter EE Details

Enter Details about your EE.

  1. Upload a Title image. This appears on this EE's page and under Featured if this EE displays on the home page.

    • Recommended size 1024px x 780px. JPG, PNG, or GIF.

    • Select Adjust Image to preview your images and set a focal point. The focal point is the prioritized area when the image needs to be cropped. Select Save Focal Point, then Close.

  2. Enter a Title. Maximum 30 characters.

  3. Enter a Call to Action. Maximum 45 characters.

  4. To feature the EE on the home page, select Display on home and navigation menu. This setting syncs to the Featured setting for this EE.

    • If selected, enter a Menu page title for its appearance in the navigation.

  5. A URL will be automatically created for the new engagement element.

  6. Enter your EE's Active Date Range and select a Time Zone.

    • Start Date & Time and End Date & Time control when your EE can be visible to employees.

    • Select No end date to prevent it from expiring automatically.

  7. Select Next.

    To save your changes without publishing the EE, select Save as draft. You can return later to modify it and publish.

Use the Page Builder

  1. If this is your first time using the EE Designer, a brief getting started tutorial appears. Review the info, then select Next and Close.

  2. The Page Builder will display your selected template.

    To change the layout, such as to add or remove columns, return to Template and select an alternative.

  3. Use the Page Builderto manage your content elements.

    • To add a content element, select Content from the Elements menu (bottom right), choose a content element type, then drag and drop it into the layout.

    • To move a content element, select it in the layout, select the Move icon (4 arrows pointing in cardinal directions), then drag and drop it to the desired location.

    • To edit a content element, select it in the layout, select the Edit icon (pencil), and enter the information. Depending on the content element type, you may be prompted to enter and format text, enter a URL, or upload images. Remember to Save each element.

    • To duplicate a content element, select it in the layout, then select the Copy icon (stack of paper). The copy appears directly below the original.

    • To remove a content element, select it in the layout, then select the Delete icon (trash can).

  4. To change the colors used in the layout, select Theme from the Elements modal (bottom right). Choose a primary color, a secondary accent color, and a color to indicate clickable hyperlinks. Then select Update. All elements on the page will be affected.

    • To resume using default colors that match the rest of your community, select Reset to community settings. See Community branding.

  5. To zoom in or out, select a percentage (bottom right, under Elements).

Tip: If you made a change you regret, select Undo. Want it back? Select Redo.

Publish an EE

You can select Save as draft from the Details page and the Page Builder.

  1. When you are ready to publish an EE, return to the Page Builder.

  2. Select Preview and confirm the content appears as you expect.

    The preview opens in a new tab in your internet browser. Under Mode (lower left) select whether to preview as if a Desktop (landscape) or Mobile (vertical, narrow) user.

  3. Select Save and Publish. Your EE will publish and expire automatically based on its start and end date settings.