Elasticode helpdesk ( back to site )

How to create the "Colorful Screens" template?

We have chosen a few experiences that we wrote a step by step "how-to" to help get you familiarize with our platform.  This is a beginner experience, a good way to start learning the platform.


Before you begin creating your experiences, it will be helpful to write all the information that you want to tell your users, from there you can decide to either create an FAQ, What's New, or Onboarding.  The number of screens depends on how much information you have to update or educate your users. You will create this outline using our studio’s platform:

The very first part is to Add a new experience.  Click here for a full step by step on how to create an experience.  The next component will be to edit your screens.  Click on 'Edit' to take you to our studio.



Screen 1:  All the images that we have chosen for this screen came from the assets that we have created.  You should upload your images and choose the color that best suits your experience.  For the sake of this article, you can access our gallery and choose the images from this experience in order for you to become acclimated to the platform.  

We will be discussing the elements beginning from the bottom and working our way to the top.  Let's create the first screen.







Reordering elements: 

If you label all your elements, you will have an easier time making adjustments. To name the elements, click on 'Reorder ' button located on the top right corner of your dashboard.  After you label an element, click on Enter or Return key, so that the name is saved.  You can also rearrange the elements; if you want an element to be in front of another element. Make sure that once you have labeled all your elements click the 'Reorder' button again. 




Uploading Images: You are also able to create your own images.  Click here for detailed instructions on how to upload an image.

















Screen Settings: You are only able to see the swipe dots once you have more than once screen.  The Screen settings can be personalized to your liking.  You are able to change the color, as well as hide the screen completely.  Click here for an explanation.


Screen 2: We wanted the second screen to look similar to the first screen, but with a different app screen mockup and color overlay.  Hopefully you are more familiar with our studio that the next screen will be easier to create.













Screen 3 and Screen 4: can be created the same way as screen 1 and screen 2.  The only changes that need to be made are the color overlay and the new app screen mockup.




The elements that will be used to set the transitions for all the screens are: 

Text Value • New Button • New iPhone Mockup • New app screen mockup • Overlay

Transitions: When you are finished with all your screens, begin to set the transitions, the flow between the screens. You will find these buttons, 'Transition Inbound'   and 'Transition Outbound' , on the top of the screen. By clicking on one of these buttons, you will navigate to our transitions studio's platform. The transitions for this experience are very simple.  


Be sure to check out our detailed tutorials about transitions.




Note: These transitions can be applied to every screen in the experience.








Lets begin by going over what is happening during this transition.  The background transitions from fading out to fading into the next screen, while the text, iphone, and app are moving with the screen when you slide your finger across the screen.  

Here is how to use the transitions.  Part of the transitions is fading in and out, other elements are switching and moving with screen.  Make sure to reorder the elements that all will be under 'Inbound' and the other elements will be in 'Outbound.'  Here is how to transition each element. 


Transitions: Screen 1 and Screen 2

  1. Text Value (Inbound): Move In: Move with screen
  2. New Button (Inbound): Switch: From Element: New Button
  3. New iPhone Mockup (Inbound): Move In: Move with screen
  4. New app screen mockup (Inbound): Move In: Move with screen
  5. Text Value (Outbound): Move Out: Move with screen
  6. New Button (Outbound): Switch: To Element: New Button
  7. New iPhone Mockup (Outbound): Move Out: Move with screen
  8. New app screen mockup (Outbound): Move Out: Move with screen
  9. Overlay (Inbound): Fade In/Move in from position: Stays in position
    1. Opacity 0% - 100%
  10. New Overlay (Outbound): Move Out: Stays in position


Note: When you are using the transition 'Switch,' make sure to begin in the 'Outbound' and choose which element you want to switch to in the 'Inbound.'









Lets begin by going over what is happening during this transition.  The background transitions from fading out to fading into the next screen, while the text, iphone, and app are moving with the screen when you slide your finger across the screen.  

Here is how to use the transitions.  Part of the transitions is fading in and out, other elements are switching and moving with screen.  Make sure to reorder the elements that all will be under 'Inbound' and the other elements will be in 'Outbound.'  Here is how to transition each element. 


Transitions: Screen 2 and Screen 3

  1. Text Value (Inbound): Move In: Move with screen
  2. New Button (Inbound): Switch: From Element: New Button
  3. New iPhone Mockup (Inbound): Move In: Move with screen
  4. New app screen mockup (Inbound): Move In: Move with screen
  5. Text Value (Outbound): Move Out: Move with screen
  6. New Button (Outbound): Switch: To Element: New Button
  7. New iPhone Mockup (Outbound): Move Out: Move with screen
  8. New app screen mockup (Outbound): Move Out: Move with screen
  9. Overlay (Inbound): Fade In/Move in from position: Stays in position
    1. Opacity 0% - 100%
  10. New Overlay (Outbound): Move Out: Stays in position









Lets begin by going over what is happening during this transition.  The background transitions from fading out to fading into the next screen, while the text, iphone, and app are moving with the screen when you slide your finger across the screen.  

Here is how to use the transitions.  Part of the transitions is fading in and out, other elements are switching and moving with screen.  Make sure to reorder the elements that all will be under 'Inbound' and the other elements will be in 'Outbound.'  Here is how to transition each element. 



Transitions: Screen 3 and Screen 4

  1. Text Value (Inbound): Move In: Move with screen
  2. New Button (Inbound): Switch: From Element: New Button
  3. New iPhone Mockup (Inbound): Move In: Move with screen
  4. New app screen mockup (Inbound): Move In: Move with screen
  5. Text Value (Outbound): Move Out: Move with screen
  6. New Button (Outbound): Switch: To Element: New Button
  7. New iPhone Mockup (Outbound): Move Out: Move with screen
  8. New app screen mockup (Outbound): Move Out: Move with screen
  9. Overlay (Inbound): Fade In/Move in from position: Stays in position
    1. Opacity 0% - 100%
  10. New Overlay (Outbound): Move Out: Stays in position



Note: Besides the transitions between screens, you have to set the 'Screen #1 Inbound' and 'Screen #X Outbound' (X=last screen), in our case 'Screen #4 Outbound'. In most cases, you just want to make sure that the main background elements, will be set as 'Move In' & 'Stays in position' | 'Move Out' & 'Stays in position' accordingly, but in this specific case we set these as 'Move In' & 'Move with screen' | 'Move Out' & 'Move with screen'.  When you are in 'Transition Inbound' from screen two, you will see both screen 1 and screen 2.  Here is where you will choose the flow from one screen to the next.  Every element is labeled for you as either inbound or outbound.