Customize a group page

Tailor the learning experience to your group’s specific needs with a library of widgets. A group page is composed of sections called widgets, with the following default layout:

• Carousel (only displayed if the group carousel has slides)
• Leaderboard
• Courses
• Learning needs
• Program sessions
• Paths

For more information about each of the sections mentioned above, see Breakdown of the sections in a group homepage.

In the Core Product:

• Platform admins can organize the page layout in the root group. The chosen layout applies to all platform groups.
• If the root group includes a carousel widget in the page layout, Group admins can create a carousel to highlight specific training content on each group page.

If you have the Customization solution:

• Platform and Group admins can organize a group page layout. The chosen layout cascades down to the subgroups until it reaches a group with a saved page layout.
• Platform and Group admins can create a carousel to highlight specific training content on each group page. 

For more information about the Customization solution, contact your Account Manager.

Organize the group page layout

To organize the widgets on the group page:

• Add a widget
• Delete a widget
• Reorder widgets

Add a widget

1. In the left sidebar, click on a group.
2. At the top right of the main section, click Page Layout.
3. In the right-side panel, click ADD WIDGET.
4. Select the widget you'd like to add.
5. At the top of the right-side panel, click .
6. Optional: To add another widget, repeat steps 3 to 5.
7. At the bottom of the right-side panel, click APPLY.

Delete a widget

1. In the left sidebar, click on a group.
2. At the top right of the main section, click Page Layout.
3. In the right-side panel, click Delete at the right of the widget you'd like to delete.
4. In the dialog box, click REMOVE.
5. At the bottom of the right-side panel, click APPLY.

Reorder widgets

1. In the left sidebar, click on a group.
2. At the top right of the main section, click Page Layout.
3. In the right-side panel, click on the left of a widget to drag and drop it up or down.
4. Click APPLY.

Create a carousel

A carousel is a slideshow that can highlight multiple training content for learners, link to internal or external material, and convey a message with a call to action on the group page.

Learners can navigate the carousel by clicking the arrows next to each slide or waiting until the carousel switches to the following slide automatically.

To create a carousel, add carousel slides to your group page. 

The carousel is only displayed on a group page if the admins have added slides to the carousel. If a carousel is added to the page layout but doesn't have content, then the carousel section is hidden on the group page.

Add a slide to the carousel

The following optional elements compose a carousel slide:

• An image
• A title
• A description
• A link to internal or external content
• A button (Only on the postcard layout)

To add a slide to the carousel:

1. In the left sidebar, click on a group.
2. At the top right of the main section, click Page Layout.
3. In the Page layout panel, select Carousel. 
4. Click ADD SLIDE.
5. Click to add an image.
   The Select an image dialog box opens. 
6. Import or Reuse an image. For more details on the recommended image dimensions and format, see Carousel image recommendations.
7. Select the Layout:
   • The poster layout displays a full image slide with the text on top of the image. This layout is selected by default.
   • The postcard layout displays the image on the left side of the slide and the accompanying text on the right of the slide.
8. Enter a Title and a Description.
9. Optional: If you selected the postcard layout, enter the Button text. If you do not add a button text, the slide won’t display any button.
10. Enter the Link (URL address) to internal or external content.
    • If you add a link to the poster layout, the learner can click anywhere on the slide to be redirected to the specified URL.
    • If you add a link to the postcard layout, the learner can click on the image and the button to be redirected to the specified URL.
11. Click APPLY.
    The group page displays the carousel slide.

To continue editing the carousel, click on the left of the slide title.

To close the Page Layout panel, click CLOSE.

Edit a carousel slide

You can edit the image, title, description, link, and button text of each slide.

1. In the left sidebar, click on a group.
2. At the top right of the main section, click Page Layout.
3. In the Page layout panel, select Carousel. 
4. Click the slide you wish to edit.
5. At the top right of the image, click  Edit to select a new image.
6. Click on a field to edit it.
7. Click APPLY.

Reorder carousel slides

1. In the left sidebar, click on a group.
2. At the top right of the main section, click Page Layout.
3. In the Page layout panel, select Carousel.
4. On the left of a slide, click  to drag and drop it up or down. 
5. Click APPLY.

Delete a carousel slide

1. In the left sidebar, click on a group.
2. At the top right of the main section, click Page Layout.
3. In the Page layout panel, select Carousel.
4. Select the slide you want to delete.
5. At the bottom of the right panel, click DELETE SLIDE.
6. Click APPLY.

If you delete all the carousel slides, the carousel section disappears from the group page.

Carousel image recommendations

Format

Carousel images can be in JPEG, PNG, or GIF format.

Image dimensions

We recommend the following image dimensions for each layout:

•  Poster layout: 1600x600 pixels
•  Postcard layout: 800x600 pixels

Smaller images may appear blurry or pixelated. Bigger images may be cropped.

No matter which image size you use, try to keep the main focus of the image near the center, with ample space above, below, and to the sides of that focus, whenever possible.

Additional information

• We recommend using an image that does not contain any text to avoid an overlap between your visuals and the slide description.
• In the poster layout, the image is darkened with a dark gradient with the following CSS characteristics:

  linear-gradient(rgba(255, 255, 255, 0), rgb(24, 25, 29))