2. Workspace Design

Design the First Section of Your Workpage

In this step, you’ll add two text widgets next to each other in the first section of the workpage.

1. Choose Add Widget in the first section to open the widget gallery.

   

2. Select the Text widget.

   

3. Design the Text widget as follows:

   Area	Input
   Text	Type (or paste, see note below) the following: Verify your sales orders with our sales managers.
   Font	Select the text and change to Arial 14pt.
   Color	With the text already selected, choose black from the chart.

   Note: For rich text input fields throughout this Workbook, you can directly type the required input or right choose and use the “Paste as plain text” option.

   

   Pasting the text directly will result in unwanted formatting being copied into your input.

   

4. On the right side of the widget that you’ve just added, choose the + to add another column.

   

5. Choose Add Widget in the second column and select the Text widget.

6. Design the Text widget as follows:

   Area	Input
   Text	Type the following: More Information
   Font	Select the text and change to Arial 14pt.
   Color	With the text already selected, choose black from the chart.

Design the Second Section of Your Workpage

In this step, you’ll add images to the second section.

1. Choose the + under the first section to add a new section.

   

2. In the second section, choose Add Widget.

   

3. Select the Image widget.

   

4. Choose the link in the widget to browse your computer for the following image from the worskapce_images.zip file: workspace_row2_image1.jpg

   

5. Hover over the image to expose the settings at the top right and choose the cog icon to edit the image widget.

   

6. Design the Image widget as follows:

   Area	Input
   Caption	Carla Grant, Sales Manager
   Caption Layout	Inline
   Caption Alignment	Left

7. Choose Save.

   

8. On the right side of this widget, choose the + to add a new column.

   

9. Choose Add Widget in the new column, select the Image widget, and then choose the link in the widget to browse your computer for the following image from the worskapce_images.zip file: workspace_row2_image2.jpg.

10. On the top right of the widget that you’ve just added, choose the cog icon to edit your image widget.

    

11. Design the second Image widget as follows and then choose Save.

    Area	Input
    Caption	Michael Hill, Sales Fulfillment Manager
    Caption Layout	Inline
    Caption Alignment	Left

12. Choose + next to the second image widget to open a third column.

    

13. Add the following 4 image widgets one under each other in the third column. Keep chooseing Add Widget and select an image each time until you’ve added all the below images:

    Image Position	Image File
    First image	workspace_image_with_icon1.png
    Second image	workspace_image_with_icon2.png
    Third image	workspace_image_with_icon3.png
    Fourth image	workspace_image_with_icon4.png

    

14. Choose the cog icon at the top right of the first image widget and design as follows. When you’re done, choose Save.

    Area	Input
    Caption	Sales Orders
    Link To	See Below Note
    Caption Layout	Overlay
    Background Opacity	0%
    Caption Alignment	Left

    Note

    If you have completed the
    

15. Choose the cog icon at the top right of the second image widget and design as follows. When you’re done, choose Save.

    Area	Input
    Caption	Product Documentation
    Link To	https://help.sap.com/viewer/product/WZ/Cloud/en-USOnce
    Caption Layout	Overlay
    Background Opacity	0%
    Caption Alignment	Left

Once you’ve published your site, you can select this image to open the SAP Work Zone documentation product page.

16. Choose the cog icon at the top right of the third image widget and design as follows. When you’re done, choose Save.

    Area	Input
    Caption	Consider Your Sales Pitch
    Caption Layout	Overlay
    Background Opacity	0%
    Caption Alignment	Left

17. Choose the cog icon at the top right of the fourth image widget and design as follows. When you’re done, choose Save.

    Area	Input
    Caption	Stay Involved
    Caption Layout	Overlay
    Background Opacity	0%
    Caption Alignment	Left

18. Use the dividers between the 3 columns to align all the images. Also make sure to adjust the More Information heading in line with the third column.

Note: you will see the dividers between the 3 columns, your mouse arrow will be changed to a horizontal double arrow once you hover over one of the dividers. Hold the left button on your mouse and drag the divider to left or right to have a good layout.

19. To increase the spacing between this section and the first section, hover over the section to expose the settings on the right, and choose the cog icon to edit the spacing.

    

20. Under Padding Top, add the value 30 pixels and choose Save.

Note: you may need to adjust your screen resolution to see the Save button.

You can now continue to design the remaining content of your workspace.