Welcome to the first page of training! (Don’t worry, there’s only one page after this one.) These exercise pages are a way for you to not only learn how to use the components our team has built into Sitecore but also, show us that you understand how they work and are ready to edit the content representing your part of the university to anyone in the world.

This is all open book so keep the Sitecore User Guides open in a separate browser tab or window to help you as you work. You can also practice any of the exercises, or just play around, on the separate Sandbox page created for you within Sitecore. Finally, take advantage of the links labeled “Documentation” that we have placed along the exercises. Those links will take you directly to the place in the Sitecore User Guides that explain the component in more detail.

This first set of exercises focuses on teaching you how to edit content on a page. Let’s go!

Part 1 - Editing

Rich Text Editor (RTE)

Let’s begin with one of the most common tasks: editing text that is already on the page. The first component on the page is the Rich Text Editor. It allows you to enter text and links in a variety of single and multi-column layouts. The content in this RTE has an outdated title and a paragraph that needs updating.

1. Edit a Title - Documentation

   1. Hover your mouse cursor over the first section and click the yellow Edit button that appears over the right of the section.

   2. A new modal window will open with all of the content fields available for editing within the component.

   3. Find and click in the Title field “Welcome 2023 Freshmen” and change the year to the current calendar year

   4. Click the blue OK button in the lower right corner of the window and the component will automatically save your changes.

2. Edit a paragraph - Documentation

   1. Hover your mouse cursor over the first section and click the yellow Edit button that appears in the controls over the upper-right corner.

   2. A new modal window will open with all of the content fields available for the component. Notice that this layout has multiple columns with separate text fields for each column.

   3. Find the field named Column 1 and click the “show editor” button.

   4. A Rich Text Editor modal window will pop up. Replace the second paragraph from:
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sit amet sollicitudin erat, in elementum purus suspendisse potenti mauris vel molestie velit.
      to
      Our students benefit from the hands-on learning opportunities available through these organizations, and our partners benefit from having access to USF’s research expertise, our state-of-the-art technologies, and our talented graduates who help fill pressing workforce needs.

   5. Click the blue OK button in the lower right corner of the window and the component will automatically save your changes.

Media Float

Now that the Rich Text Editor has been updated, we will move down the page to the next component. Media Float allows you to add images, videos, or a combination of both next to a title and paragraph of text. Media Float also has many of the exact same content fields as the Rich text Editor and they are edited in the exact same way you just experienced. Let’s edit some of the content fields that are unique to the Media Float component.

1. Add an internal link - “Academic Information” section - Documentation

   1. Scroll to the section titled “Academic Information” and hover your mouse cursor over it. Click the yellow Edit button that appears over the right of the section.

   2. A new modal window will open with all of the content fields available for the component. Note that the Media Float has more fields than the previous RTE component did but you still interact with them in the same way.

   3. Scroll down to the field named Link URL and click the “Insert link” button.

   4. A new modal window will open with a site tree for choosing the page you want to link to. Click the arrows to expand the site tree and reveal a path to the Exercise Two page (Home > Sitecore Training > Your Name > Exercise Two)

   5. Click once on the Exercise Two page and then click the blue OK button in the lower right corner of the window. The path to the page is now filled in the Link URL field.

   6. Click the blue OK button in the lower right corner of the window and the component will automatically save your changes.

1. Add an external link - “Athletics” section - Documentation

2. Scroll to the section titled “Athletics” and hover your mouse cursor over it. Click the yellow Edit button that appears over the right of the section.

   1. A new modal window will open with all of the content fields available for the component.

   2. Scroll down to the same field we just edited in the previous step named Link URL and click the “Insert external link” button.

   3. A new modal window will open with fields for you to manually add an external link.

   4. In the second field named URL, manually enter the address: https://gousfbulls.com

   5. Click the blue Insert button in the lower right corner of the window.

   6. The path to the page is now filled in the Link URL field.

   7. Click the blue OK button in the lower right corner of the window and the component will automatically save your changes.

3. Add a YouTube video - “Hands-On” Section - Documentation

   1. Scroll to the section titled “Hands-On” and hover your mouse cursor over it. Click the yellow Edit button that appears over the right of the section.

   2. A new modal window will open with all of the content fields available for the component.

   3. Scroll down to the field named Video URL and click in the blank field.

   4. Copy and paste, or type, the YouTube video shared link: https://www.youtube.com/watch?v=-fBbqg9VQDQ

   5. Click the blue OK button in the lower right corner of the window and the component will automatically save your changes.

   6. A play icon will now appear over the image. If you click it, the video you just added will play.

4. Edit the same section to use the video’s thumbnail instead - “Hands-On” Section - Documentation

   1. Hover your mouse over the same “Hands On” section and click the yellow Edit button that appears over the right of the section.

   2. A new modal window will open with all of the content fields available for the component.

   3. In the first field named Image, click the button named “Clear.” The image that was originally set from Sitecore’s Media Library will now have been removed.

   4. Click the blue OK button in the lower right corner of the window and the component will automatically save your changes.

   5. The image for the “Hands-On” section now displays the YouTube thumbnail for the video linked in the section.

Part 2 - Component Options

Many components have options that enable you to make adjustments across the whole component. The options available will depend on the component and number of sections added. Let’s change the options on the same Media Float component we have been working with.

Media Float

1. Edit the options of a component - Documentation

   1. Scroll to the top of the Media Float component.

   2. In the Control Bar titled “Media Float,” click the Options (gear) icon on the right. A panel will expand down to reveal all the options available to change in the component.

   3. Find the Image Float option and click the button with an arrow pointing to the right to float all of the images in this component to the right of the title and paragraph. (This is where the “float” in Media Float comes from.) You should see this change happen live.

   4. Click the Save button and the component will automatically save your change. (Some browsers will pop up a warning dialog when saving component options. When this happens, it is ok to click Reload as your changes will still be saved. Our team is working to prevent these pop-ups.)

Part 3 - Sort Items

Components with multiple sections give you the control to change the order of those sections with the Sort Items function. Graduation is the last part of the student journey so let’s move it to the bottom of the the same Media Float component we have been working with.

Media Float

1. Change the sort order of sections within a component - Documentation

   1. Scroll to the top of the Media Float component.

   2. In the Control Bar, click the Sort icon (Two arrows pointing up and down) on the far right. A new modal window will open with a list of content items for you to sort.

   3. Click the first item in the list and use the Move Down button on the right to reorder the item to the bottom of the list.

   4. Click the blue OK button in the lower right corner of the window and the component will automatically save your changes.

   5. The new order of the sections in the Media Float component is: Academic Information, Athletics, Hands-On, Graduation

Congratulations on making it to the second, and final, page of the training! The previous exercises were focused on the most common tasks of editing existing content inside of the components and changing their options. In the next exercises, we will focus out to the sections within the component and then the components themselves.
(Remember to make use of the Sandbox page if you want to practice any of the exercises.)

Part 1 - Delete Content Inside of a Component

You have edited sections of content in the previous exercises but what about deleting sections of content. The benefit of managing your content by component sections is the ability to easily delete unwanted sections without touching the sections you need to keep. Let’s do this in a familiar component, the Rich Text Editor.

Rich Text Editor (RTE)

1. Delete a section - Documentation

   1. Scroll to the Rich Text Editor (RTE) component near the top of the page.

   2. Find the section titled “Temporary Information” in the component.

   3. Hover your mouse cursor over the section you want to edit and find the red Delete button that appears over the right of the section.

   4. Click the red Delete button. A modal popup window will appear with a message asking you to confirm that you want to delete this section.

   5. Click the blue OK button to confirm and the page will refresh itself with the section removed from the component.

Part 2 - Add Content Inside of a Component

You have learned the benefits of managing and deleting content by sections within the components but what about adding a new section? Adding a new section of content into a component is not only easy, but the components will frequently aid you in maintaining the legibility of the layout. Let’s add a new section to the Media Grid component near the bottom of the page.

Media Grid

1. Add a new section of content - Documentation

   1. Scroll to the Media Grid component.

   2. Find the large Add button (a green dotted outline square with a plus symbol in the center) below the three existing sections. Click this Add button once.

   3. The page will automatically refresh itself and you will see a new section with a default image, title, and paragraph.

   4. Note how the Media Grid component has automatically made room for the new section by updating the layout from a 3x3 row into a 2x2 grid. This is one of the benefits of managing your content with component sections.

   5. Edit the new section by giving it a unique Title using the same process you’ve done in previous exercises.

       

2. Add an image to a component - Documentation

   1. Hover your mouse cursor over the same Media Grid item you just created. Click the yellow Edit button that appears over the right of the section.

   2. A new modal window will open with all of the content fields available for the component.

   3. In the first field named Image, notice the recommended image size: 480x280 px

   4. Click the button named “Browse.” A new window titled Select Media will appear with an interface to Sitecore’s Media Library. We will use this to upload an image.

   5. Click the blue Upload button in the top left. The Upload Media window will open.

   6. Click the gray Change Destination button in the upper right. The Media Library file tree will expand allowing you to find the appropriate destination folder for your image.

   7. Click the appropriate folder. The Media Library file tree will close itself and you will see the new destination you have set.

   8. Upload your image by either dragging and dropping it into the labeled area or clicking the Browse for media files button. Your new image will appear on the screen with a preview, information fields, file statistics, and a button to remove it.

   9. Fill in the Alternate text field with a short description of the image. This step is important as it allows visitors with screen readers to understand your image without having to see it.

   10. If needed, upload additional images following the same drag and drop area or Browse for media files button.

   11. Click the Upload media button and your images are now in the Media Library ready to be selected.

   12. In the media tree, find and click the image you just uploaded. A larger preview with the image’s name and details will update to the right of the tree confirming the image you have selected.

   13. In the bottom left of the window, click the blue Select button. The Select Media window will close and you now will see your selected image in the Image field.

   14. In the bottom left of the window, click the blue OK button. The page will automatically refresh and the component now displays your image.

Part 3 - Delete a Component

Now that you’re familiar with deleting and adding sections within components, let’s broaden the scope to the components themselves. Removing components from a page is as easy as deleting a section of content but with a slightly different process to help prevent accidental deletions.

Accordion

1. Delete an entire component from the page - Documentation

   1. Scroll to the Accordion component near the bottom of the page and click on the Control Bar titled “Accordion.”

   2. A small rectangle of Sitecore controls will appear above the component. (The Sitecore controls will also be labeled with the selected component name)

   3. Click the Delete icon (red x) to remove the component. You will see the component disappear from the page.

   4. You will need to manually save this change as Sitecore does not automatically save component deletions. In the editing ribbon at the top of your browser window, click the Save icon.

   5. The component is now deleted from the page.

Part 4 - Add a Component Into an Empty Placeholder

The containers that Sitecore gives us to add components into a page are called Placeholders. When there are no components in a placeholder, they are visible to us from the Edit view we have been working in. Let’s add a new component into one of these empty placeholders.

RSS

1. Add a new RSS component into an empty placeholder - Documentation

   1. Scroll down to one of the two empty placeholders and click anywhere within the large “+ Select Component” box.

   2. A button labeled Add here will appear in the upper left corner of the placeholder.

   3. Click the Add here button. A window titled “Select a Rendering” will appear with a grid of components for you to select from.

   4. Click on the icon for the RSS component and then click the blue “Select” button in the lower right of the window.
      Your web browser will automatically refresh the page and a new RSS component rendering will be in the placeholder you selected.

   5. Click the green + Add Component button.

   6. The page will refresh with a selection to choose between two layout options: float or grid. Choose one of the options.

   7. The RSS component has now been added and automatically saved to the page.

Part 5 - Add a Component Into a Full Placeholder

Placeholders that already have components inside of them do not show themselves on the page but are still just as accessible as empty placeholders. You just have to know what button to press to make them reveal themselves. Let’s add a component into one of these full placeholders.

Media Float

1. Add a new Media Float component into a full placeholder - Documentation

   1. In the editing ribbon at the top of your screen, click on the Home tab .

   2. Click the button labeled Component.

   3. Multiple buttons labeled Add here will appear everywhere on the page where it is possible for you to add a new component. Scroll to the placeholder you want to add the new component and click the Add here button.

   4. A window titled “Select a Rendering” will appear with a grid of components for you to select from. Click on the component you want to add and then click the blue “Select” button in the lower right of the window.

   5. Your web browser will automatically refresh the page and the new component rendering will be in the placeholder you selected.

   6. Click the green + Add Component button.

   7. The component you selected has now been added and automatically saved to the page.

Part 6 - Move a Component

Components can be reordered within the same placeholder or moved into other placeholders on the page. In this final exercise, let’s move a component of your choice somewhere further up or down the page.

Any Component

1. Move a component elsewhere on the page - Documentation

   1. Select the component you want to move by clicking on its control bar. When you have selected a component, Sitecore will pop up a small, rectangular window with the component’s name and buttons to control it.

   2. Click the Move component button. (page with arrows inside icon)

   3. Scroll to the new location you want to move your component to and click the Move to here button.

   4. You should see the component has moved into the placeholder you specified.

   5. Save the page to keep your changes.

The End

Congratulations on completing the Sitecore self-guided training exercises!