All Collections
Workbook Editor
Using Graphics in the Workbook Editor
Using Graphics in the Workbook Editor

Learn about using Images in the workbook editor

Piers Batchelor avatar
Written by Piers Batchelor
Updated over a week ago

Creating and using Graphics

This page provides the steps for using the Graphics section of the Workbook Editor.

Please see our page on Using Charts or our page on Using the Toolbar in the Workbook Editor for an overview of all the sections in the Workbook.

Please see our article Using the Gallery to upload images to learn all the media management steps.



  1. Click the Graphics section on the toolbar to add a text box, shape, or image to your workbook.

  2. Double-click the icon, or drag the item onto the workbook. The properties panel displays any Style or Layout options for the selected graphic.

  3. Click on the graphic or use the arrow keys to move it.

  4. Drag the graphic's edges if you want to resize it.

Figure 1: Graphics options in the Workbook Editor

Figure 1: Graphics options in the Workbook Editor.

Adding a Text box

Text - Style options

  • Text field - enter text content

  • Font formatting - font type, bold, italic, underline, strikethrough, size, color, and shadow behind the text.

  • Alignment - word wrap, align text inside the text box (left, center, justified or right, bottom, middle, top), Letter spacing, Line spacing.

  • Text Overflow behavior- select how the text object will respond to different sizes of screens.
    There are two options:

    • Ellipsis- when the text overflows, three dots will be displayed in the end to indicate the displayed text is longer than what the user sees.
      A number of rows is defined as the maximum number of rows that text will be split into.
      ​This is the default behavior for new text objects
      ​

    • Responsive- the text is automatically scaled when there is a change in the object size, or the workbook size
      ​


      ​

  • Link - add a URL so it acts as a simple 'button' when clicked. Please see our detailed guidance on using a Button control.

Figure 2: Text box - Style options.

Text - Layout options

  1. Background - select a background color (the color picker displays, with options for color opacity and blur) or select an image (enter the image URL).

  2. Object's display in the frame - original, fill the frame, contain ( resize to fit ), cover ( clip to fit).

  3. Opacity of the image - use the slider to adjust its opacity/transparency.

  4. Border - options include line color, type, curving its edges, border width (pixels), and shadow.

  5. Text padding - use the slider to add padding (pixels) space around the text.

Text box - Layout options

Figure 3: Text box - Layout options.

Adding shapes

  1. Shape type - rectangle, square, circle, triangle, hexagon, line, arrow, elbow/corner.

  2. Shape fill - select a background color (the color picker displays, with options for color opacity and blur) or select an image (enter the image URL).

  3. Border - options include line color, type, and border width (pixels).

  4. Scale - use the slider to adjust the size/scale of the shape or enter a percentage. Click the option 'Keep aspect ratio' if you don't want to stretch the shape.

  5. Rotate - use the slider to adjust the shape's rotation or enter the number of degrees in the field.

Add a shape and adjust its color, border, size and rotation.

Figure 4: Add a shape and adjust its color, border, size, and rotation.

Adding images from the Gallery or a URL

  1. Image - the Style tab opens with the Image and Adjust sections. Use the Image options to select the image source from the Gallery or a URL.

  2. Media - the Gallery panel displays, so you change the image in the frame from the list or upload an image.

  3. Size in the frame - adjust the image to fill, resize to fit, or cover (the image expands to fill the frame.

  4. Adjust - options to add a shadow or the sliders to change the percentage Opacity, Saturation, or Blur.

Add an image and adjust its size and display.

Figure 5: Add an image and adjust its size and display.

Figure 6: Showing the image and adjustments settings.

Adding a Logo

You can add a logo to your navigation bar.

  1. Click on an empty workbook area to view the Workbook Settings and Navigation tabs.

  2. Click on the Navigation tab, and scroll down to Logo.

  3. Click on the plus sign (+) to add a Logo.

  4. Enter the URL to add the Logo.

  5. Click on the minus sign (-) to remove the Logo from view.

Did this answer your question?