Promo Bar

Create a Promo Bar by following the instructions below. In Content Editor, drag the Data item to the site’s Data node. Use this item for all pages that use the component.

In Page Builder:

1. Select the page in the content tree.
2. Click “+” button in the topmost placeholder area, above the masthead.
3. Locate Promo Bar from the component list and drag it to the top of the page.

4. In the Assign content item dialog box, expand the MSU node, expand the appropriate website, expand Home, expand the appropriate page and expand Data. Then skip to step 5, below.

Alternate method:

2. Click Components tab at the top of the content tree.
3. Locate Promo Bar and drag it from the left column Components list into the main area’s topmost placeholder above the masthead.
4. In the Assign content item dialog box, expand MSU > sitename > Home > page name > Data.

Assign data:

5. Select Data and click “+” to the right of the Data item.
6. Select Promo Bar and give it a name unique within the context of the page. For example, “Promo Bar 1.”
7. Select the new component and click Assign.
8. Choose Promo Bar options. See additional instructions below.

1. Click Components tab at top of content tree.
2. Locate Promo Bar and drag it from the left column Components list into the main area’s topmost placeholder above masthead, in the order in which multiple Promo Bars should display.
3. In the Assign content item dialog box, expand MSU node, expand the site, expand Home, expand page and expand Data.
4. Select appropriate Promo Bar content and click Assign.
5. The component can be renamed in Explorer (open by clicking the icon on Promo Bar toolbar) or in Content Editor.
6. Choose Promo Bar options — see instructions below

1. Click the Promo Bar to display the toolbar.
2. Click Select content item icon.
3. In the Assign content item dialog box, expand MSU node, expand the site, expand Home, expand page and expand Data.

4. The component can be renamed in Explorer (open by clicking the icon on Promo Bar toolbar) or in Content Editor.

   

5. Choose Promo Bar options — see instructions below

1. Click the Promo Bar.
2. In the Promo Bar right column, expand Advanced styling:
   1. Select Color — Gray or Green background
3. In Promo Bar right column, expand Layout:
   1. Set any styling as required. These settings are not generally needed.
4. Add content:
   1. Promo Text — This is the text that displays in the Promo Bar. Click the field and type directly into the field. “[No text in field]” indicates that nothing will display in the Promotion Bar.
   2. Promo Link — Click the field in the component to edit. “[No text in field]” indicates that no link will display.
   3. In Link right column, expand and set:
      1. Link Type — Choose Internal (a page in this website), External (a page or file on another website) or Media (an asset in this site’s Media Library).
      2. Link text — This is the text that appears on the button.
      3. URL — This is the link destination. The method of assigning the URL depends on the type of link: Internal (use the page chooser), External (provide fully specified URL/path) or Media (use the Media Library chooser).
      4. Expand Optional parameters to set “Link title” or “Open in new window.”
      5. Click Clear link value to remove the CTA button.
      6. Expiry — Use Explorer or Content Editor to add a date on which the Promo Bar expires and no longer displays. See the alternate method below for more information.

In Page Builder:

1. Click the Promo Bar component to display the toolbar.
   1. Click Box with arrow icon to go to Explorer. It will open in a new browser tab.

In Explorer:

3. Select the appropriate component in the list.
4. Add content:
   • Text — This is the text that displays in the Promo Bar.
   • Link — Choose Internal (a page in this website), External (a page or file on another website) or Media (an asset in this site’s Media Library).
   • Insert path — Select the URL (destination) of the hyperlink.
   • Link title — Include text used as a tooltip (on mouse hover) for the hyperlink.
   • URL query string — Optional: include parameters added to the end of the URL.
   • Anchor — Optional: include an anchor tag added to the end of the URL.
   • Open in a new tab option — Check, if yes.
   • Expiry — Select a date on which the Promo Bar expires and no longer displays.
   • Click Clear link value to remove the CTA button.
5. Return to Page Builder.
6. Refresh the canvas to see changes.

In Page Builder:

1. Click the dropdown arrow to the right of the Sitecore XM Cloud icon in upper left.
2. Select Content Editor.

In Content Editor:

3. Locate the Promo Bar component in the content tree.
4. Make necessary changes in each field.
5. An existing Promo Bar can be duplicated and then changed as needed.
6. Return to Page Builder.

In Page Builder:

7. Refresh the canvas to see changes.
8. View the page using Preview (eye icon in upper right).
9. Publish the page.