Insights Canvas: Adding Layout Elements

After creating your Insights Canvas, you will be presented with a blank canvas page. You can begin adding elements by clicking anywhere on the screen or by using the green Insert button located at the bottom of the canvas.

There are two types of elements that can be added to your canvas: Layout elements and Data elements. We will review the Layout element options in this article. Learn more about Data elements.

Add a Text Element

The Text element allows you to add text anywhere on your canvas. This element is great for providing insights or context for those individuals that will be viewing your canvas. You can use text to provide explanations and background information to support your data and visuals.

Setup

1. Click anywhere on your canvas or click the green Insert button to access the add-element menu. Select Text from the available options.

2. On the Settings tab, enter your text into the Content area. Use the HTML editor to make formatting changes to your text, as needed. You can can change things like font-size and color, as well as minor formatting such as bolding and italicizing. If you are familiar with HTML, feel free to make further customizations via the source code.

3. Use the Layout & Options tab to edit the following settings: 

  • Width - Set the width of your text element (in pixels).
  • Rotation - Use this field to rotate the text element clockwise. Enter a value between 0 - 360.
  • Font - Select a font for the text inside the text element. There are a number of fonts to chose from and you also have the option to import your own web font.
  • Order (z-index) - This feature is particularly important if you want to place your text 'in-front' of another element i.e. Shape. In order to ensure that the text is not hidden by the shape, you must input a higher z-index value for that text element than the z-index value for the shape. For example, a text element with a z-index of '2' would show in-front of a shape with a z-index of '1'.
  • Hide Element - Check the Hide this element box to remove but not delete this element from your canvas.
  • Class Name -Use the class name provided to reference the calculation element in custom CSS via Canvas Style > Custom Code > Custom CSS. For more details regarding Insights Canvas styling options, visit the tutorial.
  • Tap Event - Assign an event that is triggered when the the layout or data element is clicked or tapped (on mobile devices). You might want to link a shape or chart to open a specific survey or take the viewer to your website. Tap Events are only active when viewing the Insights Canvas via Preview or while Shared.

4. Click on the Logic tab to access the Conditional Style controls. Learn more about how to dynamically style your canvas elements.

Once your Text Element has been added to your canvas, you can move it to a specific location on the canvas. Click on the element to select it and the click and drag it into place.

Add an Image Element

The Image element allows you to add images to your canvas from the SurveyGizmo File Library or from an externally hosted URL. This is a great means for adding your company's logo to your Insights Canvas.

You can customize the image size and radius, among other options.

Setup

1. Click anywhere on your canvas or click the green Insert button to access the add-element menu. Select Image from the available options.

2. Click Add image anywhere on the Image area to either select a previously uploaded image from your SurveyGizmo library, to upload an image to use, or to provide an image url. Click Insert Image after you have made your selection.

3. Use the Layout & Options tab to edit the following settings: 

  • Width - Set the width of your image element (in pixels).
  • Rotation - Use this field to rotate the text element clockwise. Enter a value between 0-360.
  • Radius - Specify a radius (in pixels) to round the corners of your image. An image with a width of 200px and a radius of 200px will present as a perfect circle.
  • Order (z-index) - This feature is particularly important if you want to place your image in-front or behind another element i.e. Shape. In order to ensure that the image is not hidden by the shape, you must input a higher z-index value for the image element than the z-index value for the shape. For example, an image element with a z-index of '2' would show in-front of a shape with a z-index of '1'.
  • Opacity - Use values between 0 - 100% to adjust the opacity of your image. The lower the value, the less opaque your image will be.
  • Hide Element - Check the Hide this element box to remove but not delete this element from your canvas.
  • Class Name - Use the class name provided to target the specific text element in custom CSS via Canvas Style > Custom Code > Custom CSS. For more details regarding Insights Canvas styling options, visit the tutorial.
  • Tap Event - Assign an event that is triggered when the the layout or data element is clicked or tapped (on mobile devices). You might want to link a shape or chart to open a specific survey or take the viewer to your website. Tap Events are only active when viewing the Insights Canvas via Preview or while Shared.

4. Click on the Logic tab to access the Conditional Style controls. The image element offers a unique option here in that the image can be dynamically replaced with another image when a condition is met. Learn more about how to dynamically style your canvas elements.

Once your Image Element has been added to your canvas, you can move it to a specific location on the canvas. Click on the element to select it and the click and drag it into place.

Add Shapes to Your Canvas

The Shape element provides you with a library of default shapes that can be added to your canvas to help you highlight key points and annotate your data. Think of shapes as visual aids that help you tell the story of your data.

Review the below image for available shapes:

You can customize the size and color of each shape that you add. You can even rotate shapes (i.e. arrows) to point in different directions.

Setup

1. Click anywhere on your canvas or click the green Insert button to access the add-element menu. Select Shape from the available options.

2. Select the Shape Type from the available options.

3. Use the Layout & Options tab to edit the following settings:

  • Color - Select a fill color for your shape. Use the provided color palette or color wheel, or input a HEX code. 
  • Width & Height - Set the width and height of your shape (in pixels).
  • Rotation - Use this field to rotate the shape element clockwise. Enter a value between 0-360.
  • Order (z-index) - This feature is particularly important if you want to place your shape behind another element i.e. Text. In order to ensure that the shape is behind the text, you must input a higher z-index value for the text element than the z-index value for the shape. For example, a text element with a z-index of '2' would show in-front of a shape with a z-index of '1'.
  • Hide Element - Check the Hide this element box to remove but not delete this element from your canvas.
  • Class Name - Use the class name provided to target the specific text element in custom CSS via Canvas Style > Custom Code > Custom CSS. For more details regarding Insights Canvas styling options, visit the tutorial.
  • Tap Event - Assign an event that is triggered when the the layout or data element is clicked or tapped (on mobile devices). You might want to link a shape or chart to open a specific survey or take the viewer to your website. Tap Events are only active when viewing the Insights Canvas via Preview or while Shared.

4. Click on the Logic tab to access the Conditional Style controls. The shape element offers a unique option here in that the shape color, width, and rotation can be dynamically updated when a condition is met. Learn more about how to dynamically style your canvas elements.

Once your Shape Element has been added to your canvas, you can move it to a specific location on the canvas. Click on the element to select it and the click and drag it into place.

Create a Multi-Column Layout for Your Canvas

Add a Layout Block to create a multi-column element that can contain other elements within it. You can add between 1-4 columns as part of a layout block. Items added into a layout block behave as a unit.

A Layout Block is a great organizational tool if you have a large amount of elements in use on your canvas that you want to align evenly.

Setup

1. Click anywhere on your canvas or click the green Insert button to access the add-element menu. Select Layout Block from the available options.

2. Select your desired number of Columns, specify the Width (in pixels), and provide an Order (z-index) value.

3. Click Save to add your Layout Block to the canvas. Now that your Layout Block has been added to the canvas, you can add other canvas elements inside of the Layout Block and move those elements as a unit.

Next Steps

Learn more about customizing your Insights Canvas Layout Elements.

Basic Standard Market Research HR Professional Full Access Reporting
Free Individual Team & Enterprise
Feature Included In