Foreground + Background Layers

Overview

We have added new functionality to the Experience Canvas, which enables the Foreground + Background layers.  The Foreground layer will allow you to create widgets that automatically appear on every scene, and will always be displayed above the other widgets. Similarly, the Background layer will allow you to create widgets that appear on every scene, but they will always be displayed behind the other widgets. 



These new layers are helpful for speeding up the design process, and also improve the performance of your carousels and multi-scene experiences.  This can be seen in the following example carousel. Notice how the arrows and top text all remain fixed in place as you navigate:

Example Overlay Carousel

Please Note - To access the Foreground + Background layers, the latest performance updates must be enabled for your account. More information can be found here: Fastr Performance Updates 

Using the Foreground + Background Layers

Once our team has enabled these performance updates in your account, you will observe the following sections in the bottom-left corner of your screen:


From here, you can select the "Arrow" symbol to expand or collapse these sections, similar to working with a group. There are a few different options to move your Scene widgets to the Foreground or Background. 

• Move to Foreground - By right clicking on any widget, you will see a new option for "Move to Foreground". Selecting this option will move the widget from your current layer to the Foreground layer. You will notice the widget appear on all of your boards in the same positions, and it will be placed above the other widgets. If you move the Foreground widget on board 1, it will shift across all boards. 
• Move to Background - By right clicking on any widget, you will see a new option for "Move to Background". Selecting this option will move the widget from your current layer to the Background layer. You will notice the widget appear on all of your boards in the same positions, and it will be placed below the other widgets. If you move the Background widget on board 1, it will shift across all boards. 
• Move to Scene - By right clicking on any widget in your Foreground or Background, you will see a new option for "Move to Scene". Selecting this option will move the widget from your current layer to the Scene layer. 
• Drag and Drop - Alternatively, you are able to Drag and Drop any of your widgets between the layers. This can be done by selecting a widget in the Widget Layer panel, and then dragging it to a different layer. 
  
  

Additional Functionality 

• Resizing the Foreground + Background panels - You are able to resize the Foreground or Background panels by clicking on this line, and then dragging the window up or down: 
  
  
  
• Navigating Scenes  - A critical feature of the Foreground is having arrows to navigate between your boards. With this release, you are able to add an interaction for "Next Scene" or "Previous Scene". This makes it simple to add a single interaction to your Foreground widgets that work for every scene. This can be seen here: 
  
• Hiding and locking - In addition to collapsing the Foreground and Background panels, you can also hide or lock these widgets in place. This can be necessary when trying to adjust widgets on your Scene layer. 

If you have any questions or concerns, please reach out to support@getfastr.com