Watch the webinar or walk through the step-by-step guide below to learn how to create your own dashboard page.
The results will look something like this:
To begin, you'll need to create a new piece of content:
Go to Content in the left-hand menu.
Click 'Create New Content' in the upper right corner of the screen
Give your Content a name so that you can find it later.
Click 'Create' and you'll be brought to the Editor.
Give your page a title by selecting a Header from the palette (the section on the left) and dragging it onto the page.
Add a Card
Cards help to visually differentiate content. Here’s how to create a card:
Choose a card from the 'Containers' section in the palette and drag it below your page title.
Using the toolbox on the right, set the vertical alignment of your card to 'Start' and the horizontal alignment to 'Stretch'.
Add Section Text
Each card represents a section of your dashboard. To add a section title and subtitle:
Drag an H2 into your card and enter the text you want.
Drag an H4 below the H2 to create a subtitle.
Create Sub-sections with Layouts
Here we'll begin creating individual blocks within the card:
Drag a layout below the H4 that you added in the previous step.
Set content direction to 'Row'.
Set both horizontal alignment and vertical alignment to 'Start'.
Make sure the child layout behavior is set to "flex-grow".
Note: If you do not see these options, click on "Advanced Settings" in the toolbox.
Upload an Image, Gif, or Video
Add visuals to your content to make it pop:
Open the Media section of the palette and drag an image into your layout.
Link or Upload a media file.
Use the 'Styles' section in the toolbox to set an appropriate size. You can choose between pixels and percentages to size images. You can also use the resize handlers to manually drag the media file to the desired size.
Add an Additional Text Layout
This layout will allow you to stack text:
Drag a layout to the right of your image.
Set content direction to 'Column'.
Set vertical content alignment to 'Center' and horizontal alignment to 'Stretch'.
Add Content to the Sub-section
Add context for your users. Tell them a little bit about what content you're linking them to by adding a small header and some paragraph text. Drag the text into the newest layout you've added.
Link Users to Relevant Content
Add a button to show users where to go to learn more:
Choose a button from the 'Element' section in the palette and drag it to the right of your text layout; the teal navigation line will show you where to drop the button onto the page.
Click on the button to update the text and add a link using the small interaction hover on the bottom right corner of the button.
If you want to update the look of your button, select 'Colors' in the toolbox. These options will be synced with what you have set up in your Styleguide.
Duplicate the Sub-section
To save yourself some time, duplicate the sub-section you've just created. The Duplicate function will duplicate at the level you have selected, so you can duplicate an individual element or a full layout. In this case, you'll want to select the sub-section layout to create three sub-sections.
Duplicate Cards to Create Sections
Edit the image, text, and button links to make each section and subsection unique.
Click each image and use the toolbox on the right to upload or link new images; don’t forget to set the dimensions so everything is sized equally.
Double click any text to update the copy.
Click the interaction hovers on each button to update the links.