Grid Ad

Technically, only the image is required. However, at least one text field should be specified.

Users can use a color contrast analyzing tool to check color contrast. There should be a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (at least 18 pt.) or bold text.

Read more about color use on the MSU Brand Studio website, under RGB/Hex Accessible Pairings. Read more about accessibility standards on the Digital Accessibility website.

Simply adjust the text color, background color or background image to ensure the color contrast is compliant to accessibility standards.

Add a Grid Container to the page where the Grid Ad component is needed, and select the desired variant.

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. 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.

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 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. Open in new window — Check the box to have the CTA link open in a new browser window or tab.
   5. Click Clear link value to remove the CTA button.

Submit to Publishing Workflow

1. Click Actions button.
2. Click Submit.

In Page Builder:

1. Click the dropdown arrow to the right of the SitecoreAI 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. Click Actions button.
9. Click Submit.