Elasticode helpdesk ( back to site )

How to create 'IFTTT' template?

 We have chosen this experience to write a step by step "how-to" to help get you familiarize with our 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: We believe that IFTTT has a great Onboarding experience.  We were able to break down each element to recreate the experience.  Download the zip drive in order to have all the elements for this experience: Elasticode_IFTTT assets examples.zip

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






Screen Settings: You are only able to see the swipe dots once you have more than one 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.







Uploading Images: Click here for detailed instructions on how to upload an image.





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 labelled all your elements, click the 'Reorder' button again.  To go to the next screen, click on the 'Next screen '  button.  This button is located on the top left corner of your dashboard.


















Screen 2: We added a new screen, but kept the same background color.  This screen has very few elements.








and





Screen 3: This screen is a copy of screen 2.  There are a few differences though.













Screen 4: This screen is a new screen.  Review screen 2 on how to Add a Screen.






Screen 5: The last screen for this experience is also a new screen.












The are a lot of elements that will be used to set the transitions throughout the screens: 

Camera and Calendar • phone@3x.png • rss and facebook and cloud.png • gmail and stocks and sun • IF lets • by • IFTTT • Save • recipe_marker@3x.png • Recipes • instagram_to_dropbox@3x.png • recipe_description@3x.png • icon-location@3xcopy.png • icon_photos@3x1.png • icon_contacts@3x.png • Bell and beams of light.png • bottom_phone@3xf.png • Unlock • Some • Nearly • Email • Backup • 3 if then.png

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.   


Be sure to check out our detailed tutorials about transitions.




Note: A lot of these transitions can be applied to the screens in the experience.







Lets begin by going over what is happening during this transition.  Most of the elements for the Inbound are moving in with the screen while the Outbound elements are either moving out to the right or with the screen.  

Here is how to use the transitions.  Make sure to reorder the elements that all will be under the 'Inbound' group and the other elements will be in 'Outbound.'  Here is how to transition each element. 


Transition: Screen 1 and Screen 2

  1. Camera and calendar (Outbound): Move Out: Move Out To: Right
  2. Save (Inbound): Move In: Move In From: Move with screen
  3. recipe_marker@3x.png (Inbound): Move In From: Move with screen
  4. Recipes (Inbound): Move In From: Move with screen
  5. instagram_to_dropbox@3x.png (Inbound): Move In From: Move with screen
  6. phone@3x.png (Outbound): Move Out: Move Out To: Move with screen
  7. rss and facebook and cloud.png (Outbound): Move Out: Move Out To: Right
  8. gmail and stocks and sun (Outbound): Move Out: Move Out To: Right
  9. IF lets (Outbound): Move Out: Move Out To: Move with screen
  10. by (Outbound): Move Out: Move Out To: Move with screen
  11. IFTTT (Outbound): Move Out: Move Out To: Move with screen








Lets begin by going over what is happening during this transition.  The transitions for the two screens are either moving with the screen or switching.  

Here is how to use the transitions.  Make sure to reorder the elements that all will be under the 'Inbound' group and the other elements will be in 'Outbound.'  Here is how to transition each element. 


Transition: Screen 2 and Screen 3

  1. recipe_marker@3x.png (Inbound): Switch: From Element: recipe_marker@3x.png
  2. Save (Inbound): Fade In/Move in from position: Move In From: Stays in position
  3. recipe_description@3x.png (Inbound): Move In From: Move with screen
  4. instagram_to_dropbox@3x.png (Inbound): Switch: From Element: instagram_to_dropbox@3x.png
  5. Save (Outbound): Fade Out/Move out in Direction: Move Out To: Stays in position
  6. recipe_marker@3x.png (Outbound): Switch: To Element: recipe_marker@3x.png
  7. Recipes (Outbound): Move Out: Move with screen
  8. instagram_to_dropbox@3x.png (Outbound): Switch: To Element: instagram_to_dropbox@3x.png


Note: When you are using 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 transitions for the Inbound are fading and moving in from the bottom of the screen.  The Outbound transitions are moving out of the screen to the left of the screen.

Here is how to use the transitions.  Make sure to reorder the elements that all will be under the 'Inbound' group and the other elements will be in 'Outbound.'  Here is how to transition each element. 


Transition: Screen 3 and Screen 4

  1. icon-location@3x copy.png (Inbound): Fade In/Move in from position: Move In From: Bottom
  2. icon_photos@3x1.png (Inbound): Fade In/Move in from position: Move In From: Bottom
  3. icon_contacts@3x.png (Inbound): Fade In/Move in from position: Move In From: Bottom
  4. Bell and beams of light.png (Inbound): Move In: Move In From: Bottom
  5. bottom_phone@3xf.png (Inbound): Move In: Move In From: Bottom
  6. Unlock (Inbound): Move In: Move In From: Right
  7. recipe_marker@3x.png (Outbound): Move Out: Move Out To: Left
  8. Save (Outbound): Move Out: Move Out To: Left
  9. recipe_description@3x.png (Outbound): Move Out: Move Out To: Left
  10. instagram_to_dropbox@3x.png (Outbound): Move Out: Move Out To: Left







Lets begin by going over what is happening during this transition.  The transitions for the Inbound are either moving in with the screen or switching from the outbound elements.  The Outbound transitions are switching, moving out of the screen, and fading out of the screen.

Here is how to use the transitions.  Make sure to reorder the elements that all will be under the 'Inbound' group and the other elements will be in 'Outbound.'  Here is how to transition each element. 


Transition: Screen 4 and Screen 5

  1. icon-location@3x copy.png (Outbound): Switch: To Element: icon-location@3x copy.png
  2. Some (Inbound): Move In: Move In From: Move with screen
  3. Nearly (Inbound): Move In: Move In From: Move with screen
  4. Email (Inbound): Move In: Move In From: Move with screen
  5. Backup (Inbound): Move In: Move In From: Move with screen
  6. icon-location@3x copy.png (Inbound): Switch: From Element: icon-location@3x copy.png
  7. icon_photos@3x1.png (Outbound): Switch: To Element: icon_photos@3x1.png
  8. icon_photos@3x1.png (Inbound): Switch: From Element: icon_photos@3x1.png
  9. icon_contacts@3x.png (Outbound): Switch: To Element: icon_contacts@3x.png
  10. icon_contacts@3x.png (Inbound): Switch: From Element: icon_contacts@3x.png
  11. 3 if then.png (Inbound): Move In: Move In From: Move with screen
  12. Bell and beams of light.png (Outbound): Fade Out/Move out in Direction: Stays in position
  13. bottom_phone@3xf.png (Outbound): Move Out: Move Out From: Move with screen
  14. Unlock (Inbound): Move In: Move Out: Move Out From: Move with screen




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 #5 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.