Feature Story

Feature Story Overview

Feature Story Overview
The Feature Story content is located in the Story Card component item and consists of five elements to modify:

1. Title
2. Description
3. Teaser
4. Image
5. Call to Action Link

Access the Story Card

1. Navigate to the Story Folder from Content > Agency Name Here > Content modules > Story Folder from the Content Tree.

OR

2. Navigate to the _resources folder under the page.
a. If it does not exist, insert a Story Folder
Create Story Folder in _resources

Create a Story Card

1. Right-click on the Story Folder item.

2. Insert the Story Card option.
Create Story Card

3. Name the Story Card title.
Name

4. Modify the Story Card Title if needed.
a. This field is automatically populated from the file name.
Story Card Title

5. Enter the Story Card Description.
a. Select the ‘Show editor’ link to add content from the Rich Text Editor.
b. If the Story Card is selected to be highlighted, this content will display.
Create Story Card Description

6. Enter the Story Card Teaser.
a. The teaser text displays when the story card is a sub-story.
b. If the Story Card is not selected to be highlighted, this content will display.
Story Card Teaser

7. Enter the Story Card Image.
a. The image size should be 667x445 px
b. Ensure an Alternate text is displayed on the image.
c. Ensure the image has been optimized for quicker load.
Story Card Image Browse

8. Select the Story Card link.
a. Select the ‘Insert link’ to link to a page in Sitecore.
b. Select ‘Insert media link’ to link to a document file in Sitecore.
c. Select the ‘Insert external link’ to link to an off-site website.
Story Card Link

9. For internal Sitecore links, select the page you want to link to.

10. Enter the navigation title in the ‘Description’ field.
Image Insert

11. Select the Insert button.

12. Select the Save Save icon icon (top left in the Content Editor Ribbon).

Repeat steps 1-11 to create additional Story Cards.

Insert the Story Card on the Page

1. From the Experience Editor, insert a sublayout on the page.

2. Select the sublayout container you want to insert the Story Card component into.
a. Story Card only available on following sublayouts:
i. Full-Width
ii. 9-3 sublayout (9 container)
iii. 8-4 sublayout (8 container)
iv. 6-6 sublayout
v. Dynamic Grid sublayout

3. Select the ‘Story’ tab and select the Featured Story component.

4. Select the Featured Story you want to insert.

5. Select OK.

6. Select the Save Save icon icon (top left in the Experience Editor Ribbon).

Create a Story Group

A story group is multiple story cards grouped together into a single component. The Story Group component displays multiple Story cards with one being a lead story and the others as sub-stories. There are two ways that the Story Group displays:

1. Lead story with sub-stories in text boxes aligned right (default view)

2. Lead story with sub-stories showing images under the lead story

Story Group - Lead Story with substories in text boxes aligned right default view
Example 1: Lead story with sub-stories in text boxes aligned right (default view)

Story Group - Lead stories with sub-stories showing images under lead story
Example 2: Lead story with sub-stories showing images under the lead story

1. Right-click on the Story Folder item.

2. Insert the Story Group option.
Create Story Folder in _resources

3. Name the Story Card title.
Name

4. Modify the Story Group Title if needed.

5. This field is automatically populated from the file name.
Story Card Title

6. Select the Story Group URL.
a. Select the ‘Insert link’ to link to a page inside of Sitecore.
b. Select the ‘Insert external link’ to link to an off-site website.
Story Group CTA Link

7. For internal Sitecore links, select the page you want to link to.

8. Enter the navigation title in the ‘Description’ field.
Image Insert

9. Select the Insert button.

10. Select the Save Save icon icon (top left in the Content Editor Ribbon).

Insert Story Cards into the Story Group

1. Insert individual Story Cards under the Story Group to display them in the component.
a. See Create a Story Card above

2. To identify the lead story, select the ‘Is Highlighted Story’ under the Title field.
Story Card Highlighted

Insert the Story Group on the Page

7. From the Experience Editor, insert a sublayout on the page.

8. Select the sublayout container you want to insert the Story Group component into.
a. Story Group only available on following sublayouts:
i. Full-Width
ii. 9-3 sublayout (9 container)
iii. 8-4 sublayout (8 container)
iv. 6-6 sublayout
v. Dynamic Grid sublayout

9. Select the ‘Story’ tab and select the Story Group component.

10. Select the Story Group you want to insert.

11. Select OK.

12. Select the Save Save icon icon (top left in the Experience Editor Ribbon).

Change the Story Group View

1. From the Experience Editor, select the Story Goup component on the page.

2. Select the Display Settings icon from the Story Group toolbar.
Story Group Display Settings

3. Select the ‘Display images for all stories in the group’ checkbox.
Story Group Control Properties

4. Select the Number of Stories to Display dropdown and assign the number of stories you want to display.
Story Group Number of Stories

5. Select OK.

6. Select the Save Save icon icon (top left in the Experience Editor Ribbon).

Story Group in smaller containers or screen sizes

Default view – Large Desktop
Story Group in smaller containers or screen sizes - Default View - Large Desktop

Default view – 1200px
Story Group in smaller containers or screen sizes - Default View - 1200px

Default view – 576px
Story Group in smaller containers or screen sizes - Default View - 576px

Default view – 375px
Story Group in smaller containers or screen sizes - Default View - 375px

Image view – Large Desktop & 1200px
Story Group in smaller containers or screen sizes  Image View  Large Desktop  1200px

Default view – 576px
Story Group in smaller containers or screen sizes - Image View - 576px

Default view – 375px
Story Group in smaller containers or screen sizes - Image View - 375px

Create a Story Collection

A Story Collection is multiple story groups displayed together in a single component separated by a horizontal line.

Insert Story Groups under the Story Group List

1. Insert Story Groups under the Story Group List to display them in the component.
a. Story Groups need Story Cards added as well. See Create a Story Card above

Insert the Story Group List on the Page

1. From the Experience Editor, insert a sublayout on the page.

2. Select the sublayout container you want to insert the Story Group List component into.
a. Story Group List only available on following sublayouts:
i. Full-Width
ii. 9-3 sublayout (9 container)
iii. 8-4 sublayout (8 container)
iv. 6-6 sublayout
v. Dynamic Grid sublayout

3. Select the ‘Story’ tab and select the Story Group List component

4. Select the Story Group List you want to insert.

5. Select OK.

6. Select the Save Save icon icon (top left in the Experience Editor Ribbon).