Grid Ad

In Page Builder:

1. Click the grid container to display the toolbar.
2. Click Click the “+” in a tile and under Components, select Grid Ad.
3. Hover over the Data folder in the pop-up window. Click “+” to the right of Data and add a component.
4. Click Grid Ad to add the component. Give it a name that is unique within the page.
5. To add additional Grid Ad components, click “+” to the right of Data and add another Grid Ad component. Repeat as necessary.
6. Click the Grid Ad to be assigned to the grid container cell, and click Assign.

Alternate method:

1. Click Components tab at the top of the content tree.
2. Locate Grid Components section.
3. Drag the Grid Ad to the tile in the Grid Container.
4. In the “Assign content item” dialog box, select the appropriate item.
5. Click Assign.

In Page Builder, with the Grid Ad selected, expand Advanced Styling and apply settings, as desired:

• ID — not used
• CSS Styles — not used
• Gradient — Shading is applied to the background image for better contrast with text; choose Black (default), Green or White.
• Eyebrow Position — Display Eyebrow position; choose Up (default, above Top text) or Down (above Bottom text)
• Text Alignment — Align all text; choose Center (default) or Left justified
• Green Line — Check to display a decorative green line between the Top Header and Top Subheader.
  • If Top text is blank, no green line displays, even if Top Subheader is empty.
  • Checking this option has no effect on Bottom text.
• Use Large Bottom Header Text — Check to use large text. This affects the Bottom Header only.
• Use Small Bottom Sub-Header Text — Check to use small text. This affects the Bottom Sub-Header only.

Add Text

• Text fields, including Top Header, Top Sub-Header, Bottom Header and Bottom Sub-Header, can be entered directly in the respective Pages fields.
• There is no specific character limit on text fields. If text is too long, the top and bottom text will either run together or the text is truncated to fit in the component, depending on the field(s). If this happens, text must be shortened. Be sure to preview.

Add Background Image

1. Click image in the component.
2. In “Image” right column:
   1. Click Add.
   2. Select an image from Media Library.
   3. Click Add selected.
3. Use Explorer or Content Editor to add alt text on image — see alternate method for instructions, below. Alt text can also be added to an image when it is uploaded into Media Library or Content Hub.

Add a Call to Action, or CTA, Button

1. Click the CTA field in the component.
2. In “CTA Button” right column, expand and set options, as needed:
   1. Link Type — Choose Internal, External or Media destination.
   2. Link Text — Add the text that will appear on the button.
   3. URL — This will depend on the type of link
   4. Expand Optional parameters to set Link title or Open in new window, if needed. Note: It is a best practice to have links open in the same window. If the link will open in a new window this should be made clear to the visitor.
   5. Click Clear link value to remove the CTA button.

In Page Builder:

1. Click the Grid Ad component to display the toolbar.

2. Click Box with arrow icon to go to Explorer. Explorer will open in a new browser tab.

   

In Explorer:

1. Select the Grid Ad component to add content.
2. Select image — Browse Media Library, select an image and click Add image.
3. Enter alt text for the image.
4. Eyebrow title — Add optional text to display above the Grid Ad.
5. Top Header and Top Sub-Header — Add text, if desired.
6. Bottom Header and Bottom Sub-Header — Add text, if desired.
7. CTA button — Select type, add URL (destination), button text, link title (which serves as the tooltip when a cursor hovers on the link) and set option to open in a new browser tab, if desired.
8. Return to Pages.
9. Refresh the screen 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 Grid Ad component in the content tree.
4. Make necessary changes in each field.

5. Return to Page Builder.
6. Refresh the canvas to see changes.
7. Preview the page.
8. Publish the page.