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)
Delete a section - Documentation
Scroll to the Rich Text Editor (RTE) component near the top of the page.
Find the section titled “Temporary Information” in the component.
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.
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.
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.
Image sizes and dimensions
These next steps involve uploading your own image into Sitecore’s Media Library. The Media Library supports standard image formats such as JPG, GIF, and PNG. Now is the time to make sure that you have access to basic image editing software such as Microsoft Paint, Adobe Photoshop, or an online image editor such as https://www.befunky.com/create/.
Each component includes recommended image dimensions.
Media Grid
Add a new section of content - Documentation
Scroll to the Media Grid component.
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.
The page will automatically refresh itself and you will see a new section with a default image, title, and paragraph.
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.
Edit the new section by giving it a unique Title using the same process you’ve done in previous exercises.
Add an image to a component - Documentation
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.
A new modal window will open with all of the content fields available for the component.
In the first field named Image, notice the recommended image size: 480x280 px
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.
Click the blue Upload button in the top left. The Upload Media window will open.
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.
Click the appropriate folder. The Media Library file tree will close itself and you will see the new destination you have set.
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.
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.
If needed, upload additional images following the same drag and drop area or Browse for media files button.
Click the Upload media button and your images are now in the Media Library ready to be selected.
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.
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.
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
Delete an entire component from the page - Documentation
Scroll to the Accordion component near the bottom of the page and click on the Control Bar titled “Accordion.”
A small rectangle of Sitecore controls will appear above the component. (The Sitecore controls will also be labeled with the selected component name)
Click the Delete icon (red x) to remove the component. You will see the component disappear from the page.
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.
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
Add a new RSS component into an empty placeholder - Documentation
Scroll down to one of the two empty placeholders and click anywhere within the large “+ Select Component” box.
A button labeled Add here will appear in the upper left corner of the placeholder.
Click the Add here button. A window titled “Select a Rendering” will appear with a grid of components for you to select from.
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.
Click the green + Add Component button.
The page will refresh with a selection to choose between two layout options: float or grid. Choose one of the options.
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
Add a new Media Float component into a full placeholder - Documentation
In the editing ribbon at the top of your screen, click on the Home tab .
Click the button labeled Component.
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.
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.
Your web browser will automatically refresh the page and the new component rendering will be in the placeholder you selected.
Click the green + Add Component button.
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
Move a component elsewhere on the page - Documentation
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.
Click the Move component button. (page with arrows inside icon)
Scroll to the new location you want to move your component to and click the Move to here button.
You should see the component has moved into the placeholder you specified.
Save the page to keep your changes.
The End
Congratulations on completing the Sitecore self-guided training exercises!
