Mixed Content

Advanced Styling options:

Variant (dropdown)

• Image on Left (default)
• Image on Right

Page Anchor ID (single line text)

• Creates an anchor to the component which can be linked to using an anchor link

Component fields:

Image

• Upload image
• Browse media library
• Optional field

YouTube ID (single line text)

• Enter the video ID characters from the end of a YouTube video URL
• The YouTubeId field overrides any image. Leave empty to display an image.
• Optional field

Title (single line text)

• Text that appears as the headline in the component
• Optional field

Description (multi line text)

• Text that appears as body copy in the component.
• Optional field

CTA

• Internal
• External
• Media

Title (single line text)

• Text that appears as the headline in the component
• Optional field

Description (multi line text)

• Text that appears as body copy in the component
• Optional field

Image

• Upload image
• Browse media library
• Optional field

YouTubeId (single line text)

• Enter the video ID characters from the end of a YouTube video URL.
• The YouTubeId field overrides any image. Leave empty to display an image.
• Optional field

CTA (choose type)

• Internal
• External
• Media

Insert Path

• Enter typed URL or Browse to locate page or file

Link Text (single line text)

• Displays as text on the button
• Optional field. If no link is added, the button will not display.

Link Title (single line text)

• Displays as a tooltip when a visitor hovers their cursor over the link
• Optional field

URL Query String (single line text)

• Optional additional link parameters

Anchor (single line text)

• Use this to link to an anchor on an internal page within the website.
• To link to an anchor on the same page, enter the anchor (preceded by #) in an external link field and omit using this anchor field.

Open in a new tab (checkbox)

Title (single line text)

• Text that appears as the headline in the component.
• Optional field.

Description (multi line text)

• Text that appears as body copy in the component. 
• Optional field.

Image

• Upload image
• Browse media library
• Optional field.

YouTubeId (single line text)

• Enter the video ID characters from the end of a YouTube video URL.
• The YouTubeId field overrides any image. Leave empty to display an image.
• Optional field.

CTA (choose type)

• Internal
• External
• Media

Advanced Styling options:

Variant (dropdown)

• 1 Column
• 2 Columns
• 3 Columns

Image Size (dropdown)

• Large
• Medium
• Small

Page Anchor ID (single line text)

• Creates an anchor to the component which can be linked to using an anchor link

Eyebrow Text (single line text)

• Small text that appears at the top of the component

Title (single line text)

• Text that appears as the headline in the component.
• Optional field.

Description (multi line text)

• Text that appears as body copy in the component. 
• Optional field.

Image

• Upload image
• Browse media library
• Optional field.

YouTubeId (single line text)

• Enter the video ID characters from the end of a YouTube video URL.
• The YouTubeId field overrides any image. Leave empty to display an image.
• Optional field.

CTA (choose type)

• Internal
• External
• Media

Title (single line text)

• Text that appears as the headline in the component
• Optional field

Description (multi line text)

• Text that appears as body copy in the component
• Optional field

Image

• Upload image
• Browse media library
• Optional field

YouTubeId (single line text)

• Enter the video ID characters from the end of a YouTube video URL.
• The YouTubeId field overrides any image. Leave empty to display an image.
• Optional field

CTA (choose type)

• Internal
• External
• Media

Insert Path

• Enter typed URL or Browse to locate page or file

Link Text (single line text)

• Displays as text on the button
• Optional field. If no link is added, the button will not display.

Link Title (single line text)

• Displays as a tooltip when a visitor hovers their cursor over the link
• Optional field

URL Query String (single line text)

• Optional additional link parameters

Anchor (single line text)

• Use this to link to an anchor on an internal page within the website.
• To link to an anchor on the same page, enter the anchor (preceded by #) in an external link field and omit using this anchor field.

Open in a new tab (checkbox)

Title (single line text)

• Text that appears as the headline in the component.
• Optional field.

Description (multi line text)

• Text that appears as body copy in the component. 
• Optional field.

Image

• Upload image
• Browse media library
• Optional field.

YouTubeId (single line text)

• Enter the video ID characters from the end of a YouTube video URL.
• The YouTubeId field overrides any image. Leave empty to display an image.
• Optional field.

CTA (choose type)

• Internal
• External
• Media

Title (single line text)

• Text that appears as the headline in the component
• Optional field

Description (multi line text)

• Text that appears as body copy in the component
• Optional field

Image

• Upload image
• Browse media library
• Optional field

YouTubeId (single line text)

• Enter the video ID characters from the end of a YouTube video URL.
• The YouTubeId field overrides any image. Leave empty to display an image.
• Optional field

CTA (choose type)

• Internal
• External
• Media

Title (single line text)

• Text that appears as the headline in the component
• Optional field

Description (multi line text)

• Text that appears as body copy in the component
• Optional field

Image

• Upload image
• Browse media library
• Optional field

YouTubeId (single line text)

• Enter the video ID characters from the end of a YouTube video URL.
• The YouTubeId field overrides any image. Leave empty to display an image.
• Optional field

CTA (choose type)

• Internal
• External
• Media

Insert Path

• Enter typed URL or Browse to locate page or file

Link Text (single line text)

• Displays as text on the button
• Optional field. If no link is added, the button will not display.

Link Title (single line text)

• Displays as a tooltip when a visitor hovers their cursor over the link
• Optional field

URL Query String (single line text)

• Optional additional link parameters

Anchor (single line text)

• Use this to link to an anchor on an internal page within the website.
• To link to an anchor on the same page, enter the anchor (preceded by #) in an external link field and omit using this anchor field.

Open in a new tab (checkbox)

Title (single line text)

• Text that appears as the headline in the component
• Optional field

Description (multi line text)

• Text that appears as body copy in the component
• Optional field

Image

• Upload image
• Browse media library
• Optional field

YouTubeId (single line text)

• Enter the video ID characters from the end of a YouTube video URL.
• The YouTubeId field overrides any image. Leave empty to display an image.
• Optional field

CTA (choose type)

• Internal
• External
• Media

When dragging a component from the Components list, be sure that “mainbody-1” displays before the component is dropped into the page.

From a public video page, the video ID is the string of characters that appear after “watch?v=” in the video URL (available in the browser URL bar or from the Share link option on YouTube). If the video is in a list, do not include the character after the video ID starting with “&list=.”

From the Video Details pane on an owned YouTube channel, the video ID is the string of characters at the end of the Video link, displayed under the preview panel on the right side of the Video details page. 

In Pages:

1. Select the page in the Content Tree. The page must use a basic Page layout.
2. Click the “+” button in any full-width area Placeholder box below the Breadcrumb links.
3. Select Mixed Content Full Bleed container from list.

Alternate method:

1. Click Components tab at top of the Content Tree.
2. Locate Mixed Content Full Bleed container.
3. Drag the Mixed Content Full Bleed container to any empty full-width placeholder area of the page below the Breadcrumb links.

Choose a variant:

4. Click to expand the Advanced Styling menu panel on the right site. 
5. Select a variant from the Variant drop-down list:
   1. Image on Left
   2. Image on Right

In Pages:

1. Select the page in the Content Tree.
2. Click the “+” button in any Placeholder box below the Breadcrumb links.
3. Select Mixed Content Grid container from list.

Alternate method:

1. Click Components tab at top of the Content Tree.
2. Locate Mixed Content Grid container.
3. Drag the Mixed Content Grid container to any empty placeholder area of the page below the Breadcrumb links.

Choose a variant:

4. Click to expand the Advanced Styling menu panel on the right side. 
5. Select a variant from the Variant drop-down list:
   1. 1 Column
   2. 2 Columns
   3. 3 Columns

Assign a component:

1. Select a Mixed Content container.
2. Click the “+” in the cell placeholder.
3. Choose the available component. 
   1. Mixed Content 1 Column will appear when adding content to a Mixed Column Grid container 1 Column variant.
   2. Mixed Content will appear when adding content to a Mixed Column Grid container 2 Column or 3 Column variants or the Mixed Content Full Bleed container.

Alternative method:

1. Open the Components menu.
2. Locate the desired component under the Grid Components section of the menu.
3. Click and drag to drop it in the appropriate column.

Assign content to the Mixed Content component:

1. In the Assign content item window, choose the component data to use:
   1. For existing components, select them from the page’s Data folder or from the appropriate shared folder.
   2. For new components, select Create new, type in the component title and hit Enter.
2. Once the component data is selected, click on the Assign button in the lower right corner.
3. To add a title, enter text in the Title field.
4. To add additional text, enter text in the Description field.
5. To add a link, click on the text on the button and use the right-side panel to set the Link Type, Link Text (what appears on the button) and URL (the link destination). Optional parameters are available to have the link open in a new window (appropriate when linking to a document or PDF).
6. Adjust settings in the right panel, as needed. 
7. To add an image, click the image placeholder and use the right-side panel to add an image. Click Add, locate the image in Media Library, Content Hub or upload an image, select the image and click Add selected. 
8. To add a video thumbnail to the image space, enter a YouTube video ID to the YouTube ID field below the image. Take care not to add extra spaces or characters when pasting a copied ID.

Figure 3: The YouTube ID field appears on the black bar below the image placeholder.

In Pages:

1. Click the Mixed Content component to display the toolbar. 

2. Click the Explorer icon. 

   Figures 4 and 5: The Explorer icon in the Mixed Content 1 Column and Mixed Content Grid toolbars.  

In Explorer:

3. In left pane, locate the appropriate component and click to select. 
4. Locate and click the content fields to change. Make changes in the right pane. 
5. Return to Pages by closing the Explorer browser tab.  

In Pages:

6. Refresh the canvas in Pages. 
7. Preview and publish the page.

In Pages:

1. Click 9-dot cube in upper left. 
2. Select environment. 
3. Select Content Editor. It opens in a new browser tab. 

In Content Editor:

1. If the Mixed Content component does not appear in the Content Tree, close the page’s Data node and expand it again to refresh the Content Tree. 
2. In the Content Tree, expand Content > MSU > sitename > Home > page name > Data or wherever the component was added. 
3. Locate and expand the Mixed Content component. 
4. Use the file location tool to select an image. 
5. Add text to necessary fields.  
6. Click Save. 
7. Return to Pages. 

In Pages:

1. Preview and Publish the page. 

For a live demo of Mixed Content Grid and Mixed Content Full Bleed components, view the Demo: Two-Thirds Layout and Mixed Content Components page.