Skip navigation links
Digital Experience Studio > Website Technology > Sitecore CMS > XMC Component Guide >

Grid Ad

Grid Ad

A combination of text, a background image and a call to action, or CTA, button. Text can appear at the top and bottom of the component. This component can be displayed in a Grid Container component for a tiled layout.

Note: This component was formerly known as “Ad-Coming Soon” in Sitecore XP.
grid-ad-example
Figure 1: Example of a Grid Ad component from the Academic Governance website.

 

Component Information

Benefits

  • The Grid Ad is a versatile component that allows the content author to create a combination of text (including several lines, positions and font sizes), a background image and a call to action, or CTA, button to display in a Grid Container with other made-for-grid components.
  • The Grid Ad must be used in a Grid Container or a two-column page layout. It cannot be placed on a page without using one of these components.
  • The Grid Container is full page-width. It extends from one edge of the browser window to the other, spanning the width of the site. This expansive view pulls visitor focus to the grid images.

Example Use Cases

  • Provide a small snippet of text and keywords with a button link to a story or event page.
  • Provide visual imagery to attract visitor attention, text that summarizes detailed content and a button link that directs visitors to a page with more content.
  • Highlight a particular page and provide an easy way for visitors to get to it.

Template Data

Image (image)

  • Background image for the Grid Ad component. It fills the entire tile.
  • Required field.
  • Recommended image sizes:
    • X-Large tile: 1920x810 (12:5 aspect ratio)
    • Large tile: 1280x810 (4:5 aspect ratio)
    • Medium tile: 960x810 (6:5 aspect ratio)
    • Tall tile: 640x810 (4:5 aspect ratio)
    • Small tile: 640x405 (8:5 aspect ratio)

Eyebrow (single-line text)

  • Title that displays at the top of the component.
  • The text is automatically converted to uppercase regardless of how text is entered.

Eyebrow Position (droplink)

  • The selection determines where the Eyebrow displays in the component.
  • Values:
    • Up — This is the default. The Eyebrow displays at the top (above any Top Header or Sub-Header).
    • Down — The Eyebrow displays at the bottom (above any ottom Header or Sub-Header).

Top Header (single-line text)

  • Text that displays in large font at top of component, if present.
  • If the Grid Ad component is placed in a Large or Tall grid tile, the Top Header does not display.
  • If the Grid Ad component is placed in a Small grid tile and if both Top and Bottom fields are entered, only the Eyebrow and Bottom fields are displayed.

Top Sub-Header (multi-line text)

  • Text that displays in a medium-sized font at the top of the component, if present, and below the Top Header, if one is present.
  • If the Grid Ad component is placed in a Large or Tall grid tile, the Top Sub-Header text does not display.

Bottom Header (single-line text)

  • Text that displays in a medium-sized font at the bottom of the component, if present.
  • The text is automatically converted to uppercase regardless of how text is entered.

Bottom Sub-Header (multi-line text)

  • Text that displays in a medium-sized font at the top of the component, if present, and below the Bottom Header, if one is present.

CTA (droptree)

  • An optional button that displays at the bottom of the component.
  • Values:
    • None (default)
    • Call to Action button
  • The button will only display if at least one of the Top or Bottom fields is used.

Frequently Asked Questions

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.

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

Instructions for Use

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

In Pages:

  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 Pages, 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 Pages:

  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.

    grid-ad-explorer-icon
    Figure 2: The Grid Ad toolbar. The Explorer icon has been highlighted with a red box.

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 Pages:

  1. Click the nine-dot cube icon at the upper left. 
  2. Select the environment. 
  3. Select Content Editor.

In Content Editor:

  1. Locate the Grid Ad component in the content tree.
  2. Make necessary changes in each field.
Note: An existing Grid Ad can be duplicated in Content Editor and then changed as needed.
  1. Return to Pages.
  2. Refresh the screen to see changes.
  3. Preview the page.
  4. Publish the page.
grid-ad-admissions-example
Figure 3: A Grid Container (6 small variant) on the Admissions website contains a Grid Ad component. The Grid Ad component reads “1000+ Student Clubs.”

 

grid-ad-engineering-example
Figure 4: A Grid Container (6 small variant) on the Engineering website contains three Grid Ad components. The "Spring Commencement," "Colloquim Event," and "Design Day" event squares are Grid Ad components.

Tool Use Guide

 

 PagesExplorerContent Editor
Add to Grid ContainerOptimal  
Add to side column 
(two thirds page or sublayout)		Optimal  
Add imageOptimalPossiblePossible
Add alt text OptimalPossible
Add/edit textOptimalPossiblePossible

 

Documentation updated: Nov. 1, 2024

XMC Component Guide