UNIT 4: MANAGING CONTENT REVISIONS
UNIT 5: CONTENT MODERATION IN GOVCMS
UNIT 6: MANAGING FILES AND MEDIA ASSETS IN GOVCMS
UNIT 9: USING TAXONOMY TO CATEGORIZE CONTENT AND MEDIA
UNIT 11: CAPTURING DATA WITH FORMS
Appendix A - Glossary
About Salsa Digital

Using Components for rich layout options

You can use the Components field in the Create/Edit content form to create and manage rich content layout features, specifically the visual blocks of content on a page.

As you add or edit content, look for the Components field in the form:

Note that the Components field may be labelled differently in your GovCMS website.

This feature can be used to create anything from a simple text block or image to a complex and configurable slideshow.

Components may look different in every website implementation. The ‘vanilla’ GovCMS site used during the training has some preconfigured components available for most content types.

Exercise 12.1: Add content using Components

In this exercise you’ll use components and add and style content.

  1. Create a Standard page and add some content

  2. In the Components section, click on the Add content

  3. Fill in the Title, Heading, Body, and Link fields. Do not add Colour Palette and Style yet.

  4. Create another component and fill in the same fields but use different text

  5. Set your page as Published and save your changes

  6. Review the look of the page, locate the two content Components you created

  7. Return to editing the page you created in steps 1-5 (from the page, click the Edit button)

  8. Edit the first component only and apply the “Alt” Colour Palette

  9. Save your page as Published and review the change in the frontend

  10. Return to editing the page you created in steps 1-5

  11. Using drag and drop elements, rearrange the two components, so that the top component goes down

  12. Save your page as Published and review the change in the frontend

  13. Return to editing the page you created in steps 1-5

  14. Set the Full content field to “Edge to edge”

  15. Edit the top Paragraph

  16. Apply “Dark” Colour Palette and set the Style to “Hero”

  17. In the Modifiers section, add a Colour Background Modifier. Set the Background Colour to #ffeeaa and the Hover Background Colour to #ffe270. Set the Duration to 0.3 seconds

  18. Save your page as Published and review the change in the frontend

Challenge Exercise 12.2: Replicate homepage layout

Using the content created in the previous exercise, try to replicate the layout of the homepage.

Edit on GitHub