Fastr Workspace - Widget Types

Overview

This article will go over the different widget types that are available inside of the Workspace Canvas. The widgets can be found at the top of your screen, and you can click and drag to create a widget in the center of the canvas. As you have different widgets selected, you will get different options for that widget in the Design tab. The following screenshot shows each widget type with a label: 

Move Option

The move option can be used for selecting a widget on the board, in order to change that widget or reposition. This is a basic option that can be selected for when you want to edit a different widget. 

Board Widget

The board widget is used for creating the container for your content, and is typically the very first widget that should be added to the canvas. The board widget is required in order to preview or publish your content. One of the most important aspects of adding a board is making sure the aspect ratio matches your intended design. Therefore, a very thin board would be useful for creating a slim promo banner, where as a full mobile landing page would have a more vertical board. 

Outside of the standard Design options, you have a few other board specific changes that can be made: 

• Guides - By applying a guide, you can create an outline for lining up your widgets on the canvas. This can be used for applying a Grid, or setting up columns to work with. An example can be seen here:
  
• Size Presets - When adding a board, there is a dropdown available for picking size presets. This can be helpful for ensuring that your board matches your intended aspect ratio. 
  
• Having additional boards - You can also make use of having multiple boards in a single experience. This can be used for creating a carousel style experience, or is useful when considering a desktop vs mobile variant. For more information on these topics, please review the following articles:
  Fastr Workspace - Breakpoint Variants
  Fastr Workspace - Building a carousel

Shape Widgets

The Rectangle, Ellipse, Curve, and Path tools are all used for adding basic shapes to the canvas. These widgets have the standard options you would expect for adjusting the design of each shape. 

Text Widget

After adding a text widget to the canvas, you can see all the formatting options under the "Design" tab. These options allow you to modify the font, font size, font weight, line height, line spacing, and other alignment options. The following screenshot shows these options: 

There are some text specific options that are covered in detail here: 

- Header Tag: You can specify the text with a header tag to help the browser recognize the importance and structure of the text. This can be used to add H1 - H6 tags for SEO and ADA purposes. 

Image Widget

When clicking on the image widget, it will open a pop-up menu to import a new image into your account. This will allow you to upload a PNG, Jpeg, or GIF into your account. Once an image has been uploaded, you will be able to find the image in your Image Library, which is located in the Assets tab: 

With the image library, you can directly drag and drop images onto the canvas. Alternatively, you can also click on an existing image and swap with any image from your library. It is also possible to add an image fill directly to a shape widget, by adjusting the fill as shown here: 

HTML widget: 

You can use the HTML widget to embed HTML code or a URL directly into your content. This has a few different use cases, such as embedding a Workspace experience inside another, or for embedding a video. This would also be necessary if you are designing a carousel style experience.  

For guidance on how to use the HTML URL widget for adding carousels, please refer to the following article: 

For guidance on how to use the HTML widget for videos, please review to this article: Fastr Workspace - How to add videos

To switch between the HTML code or the Embed url, you can use this toggle in the Design tab

Link widget: 

You can select the link widget from the left side of the canvas and place it on top of any widget. This way, whenever a user clicks on the designated area, they will be redirected to the URL you specify. This can be useful when you want to add multiple links over a single widget. In the following example, I have one image widget that has multiple link widgets to target different products: 

To add an interaction action for the link widget, navigate to the "Interact" section and click on the + icon next to the interaction option. For more information on adding interactions, please review the following article: Fastr Workspace - Interactions Overview