In this training, we will: 

  • walk through common tasks together in the Editor role.
  • publish content and explore dynamic views in the Publisher role.
  • apply these new skills in an independent challenge scenario. 

You may practice on this site until the next training is scheduled. If you have questions, please email me at jennifer.vinciguerra@nc.gov 

Site Page

This is a Site Page, the most common Content Type. 

  • Editors can edit but not publish existing Site Pages.
  • Publishers can edit and publish existing Site Pages.
  • Web Managers can create new Site Pages and add them to the menu.
Tabs for editing a site page with a hand cursor selecting the Edit tab.
Use the Edit tab at the top left of the Page Content area to make changes to your page. 

Save your Site Page often to avoid losing work. 

Bands

Until recently, Site Pages only allowed one column and content was inserted directly into the page. Now that Site Pages can contain up to two columns, the layout is controlled with Bands.

Insert a Band and specify how many columns you want it to contain. Then insert one Component into each column. Do not stack multiple components into a column. Instead, stack multiple bands on the page to hold your content. 

Boating Safety

Always wear a life vest.

Trail Safety

Always stay on the marked trail.

Column One

A father smiles and shares content on a tablet device with his young son who wears a hearing aid.

Column Two

A woman holding a tablet with her screen displaying VPN login.

Components

A content type is a page into which you insert various kinds of paragraph components of content.
Paragraph Components are inserted into Content Types.

Insert various kinds of content into your page using Paragraph Components. Because there are so many, this training focuses on the most common:

Save your Site Page often to avoid losing work. 

Text Component

Let's edit this existing Text Component by adding some links.

  1. Select the Edit tab.
  2. Hover over this text to make the component toolbar appear above.
  3. Select the pencil icon to edit. 
Text component toolbar with the pencil icon for the Edit function selected.
Example of the component toolbar.

Links

  1. Highlight this text to create a hyperlink: My Challenge Scenario
  2. Select the Link button indicated by a chain icon in the text editor toolbar.
  3. Search for your last name. Select the result that ends with Supply Drive.
  4. Select the green check mark. 
Mouse cursor selecting the link icon from the text editor toolbar.
Link & Anchor icons

Anchors

  1. Click at the end of this sentence to insert an Anchor.
  2. Select the Anchor button indicated by a flag icon in the text editor toolbar.
  3. Enter your "lastname" and select the green check mark. 

 

CTA Card Component

CTA stands for "Call to Action" and provides a brief line of text, .svg icon, and link. 

Let's insert a new CTA Card:

  1. Click the "Add Band" button indicated by the plus sign inside the square. 
  2. A dialogue box appears prompting you to "Choose a Layout." Choose one-column and select Save. 
  3. Click the "Add Component" button indicated by the plus sign inside the square. 
  4. A dialogue box appears prompting you to "Choose a Component." Select CTA Card. 
  5. Complete all required fields and Save the component.
  6. Save the page. 
Arrow pointing down that says to Click the plus icon.

Basic Training

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce suscipit, urna at laoreet porta, lacus dolor porttitor urna, et ullamcorper odio nisi nec turpis. Integer varius ligula ligula, sit amet consequat quam efficitur eu. Praesent quis interdum ligula, nec ornare felis. Suspendisse vehicula hendrerit sem, quis consequat enim luctus id. Maecenas sagittis euismod congue. Donec sagittis fringilla eros ac pellentesque. Sed metus lacus, consectetur auctor ultrices porttitor, sollicitudin non purus. Nunc varius congue porttitor. Nullam lacinia felis eu turpis tempus, ut pulvinar ligula vestibulum. Mauris quis molestie ante, et semper enim.

Video Card Component

Embeds a YouTube or Vimeo video on your Site Page or Landing Page. 

Let's insert a new Video Card on this page. 

  1. Copy this URL: https://youtu.be/PTWkVplN5t0?feature=shared
  2. Click the "Add Band" button indicated by the plus sign inside the square.
  3. A dialogue box appears prompting you to "Choose a Layout." Choose one-column and select Save. 
  4. Click the "Add Component" button indicated by the plus sign inside the square.
  5. A dialoge box appears prompting you to "Choose a Component." Select Video Card.
  6. Complete all required fields and Save the component.
  7. Save the page.
Arrow pointing down that says to Click the plus icon.

Test

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce suscipit, urna at laoreet porta, lacus dolor porttitor urna, et ullamcorper odio nisi nec turpis. Integer varius ligula ligula, sit amet consequat quam efficitur eu. Praesent quis interdum ligula, nec ornare felis. Suspendisse vehicula hendrerit sem, quis consequat enim luctus id. Maecenas sagittis euismod congue. Donec sagittis fringilla eros ac pellentesque. Sed metus lacus, consectetur auctor ultrices porttitor, sollicitudin non purus. Nunc varius congue porttitor. Nullam lacinia felis eu turpis tempus, ut pulvinar ligula vestibulum. Mauris quis molestie ante, et semper enim.

Tab/Accordion Component

Condense a lot of information into a smaller, controlled area. The visitor can expand for more information as desired. 

Let's edit the existing Tab/Accordion below to include a new animal. 

  1. Hover over the Tab/Accordion component below. 
  2. Select the Edit icon indicated by the pencil.
  3. Select Add Items to Tab/Accordion Items.
  4. Type Donkey in the Item Title.
  5. Select the Insert Media button indicated by the image and music notes. 
  6. Search for "donkey" and select the image.
  7. Insert Selected.
  8. Save the component.
  9. Save the page. 
hand cursor selection the add items button for the tab/accordion component.
Example of the Add Items button.

Animals

Tab/Accordion Items

Brown alpacas in a field.

Black bear in a green, grassy meadow chewing on plants.

Mother cheetah resting but alert on top of a dirt mound with two cubs.

First Sidebar

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce suscipit, urna at laoreet porta, lacus dolor porttitor urna, et ullamcorper odio nisi nec turpis. Integer varius ligula ligula, sit amet consequat quam efficitur eu. Praesent quis interdum ligula, nec ornare felis. Suspendisse vehicula hendrerit sem, quis consequat enim luctus id. Maecenas sagittis euismod congue. Donec sagittis fringilla eros ac pellentesque. Sed metus lacus, consectetur auctor ultrices porttitor, sollicitudin non purus. Nunc varius congue porttitor. Nullam lacinia felis eu turpis tempus, ut pulvinar ligula vestibulum. Mauris quis molestie ante, et semper enim.

Content Types

Editors Can Create a:

Tab/Accordion Items

Create a Blog Entry

Let's create a Blog Entry together. When we discuss views, you will see how your Blog Entry is dynamically displayed in different default views. 

  • Content > Add Content > Blog Entry
  • Optional: Open detailed step-by-step instructions in a new window. 
  • Editors "Save for Review" by a Publisher. 

Create a Press Release

Let's create a Press Release together. When we discuss views, you will see how your Press Release is dynamically displayed in a default view. 

  • Content > Add Content > Press Release
  • Optional: Open detailed step-by-step instructions in a new window. 
  • Editors "Save for Review" by a Publisher. 

Create an Event

Let's create an Event together. When we discuss views, you will see how your Event is dynamically displayed in different default views. 

  • Content > Add content> Event
  • Optional: Open detailed step-by-step instructions in a new window. 
  • This content type publishes automatically for Editors.

Create an Alert

Let's create an Alert together. 

  • Content > Add Content > Alert
  • Show on Specific Pages > Single Page
    /basic-training/LASTNAME-site-page/
  • Optional: Open detailed step-by-step instructions in a new window. 
  • This content type publishes automatically for Editors.

Publishing

Please note the changes to the toolbar at the top of the screen. During the break, your user role was increased to the Publisher role. Please refresh your browser window.

Screenshot of the Publisher toolbar for the Digital Commons platform.
If your toolbar does not look like the image above after refreshing your browser window, please tell the instructor.

Moderation Dashboard

  1. Click your Username in the black tool bar. The white menu beneath it changes.
  2. Click Moderation Dashboard.
  3. Look under Needs Review and Draft Content for the Content Types that you edited.

Content

  1. Click Content in the top toolbar to see all Content Types in a searchable, filterable format. 
  2. Click each link to go to the Content Type and Publish it.
    • Blog Entry
    • Press Release
    • Site Page

Views

Blog

  • The /blog page displays all Blog Entries in Grid View. This is the Landing Page link in the menu across the top of the page.
  • The /blog-entry-list page displays all Blog Entries in List View.

Event

  • The /events page displays all Events in List View. This is the Landing Page link in the menu across the top of the page.
  • The /upcoming-events-page displays all Events in Grid View. This is the Site Page link named Events Grid View beneath Events in the menu across the top of the page.
  • The /past-events page displays all Past Events in List View. This is the Site Page link named Past Events List beneath Events in the menu across the top  of the page.

Press Releases

  • The /news/press-releases page displays all Press Releases in List View. This is the Landing Page link in the menu across the top of the page. 

Challenge

On