Elasticode helpdesk ( back to site )

Click-by-click on how to start creating an experience

Welcome to our "How-To" series of tutorials written especially to make you a master of creating experiences!

We have chosen a few experiences and wrote a step by step "How-To" so you can get familiarize with our platform. You can find these tutorials in the same category of articles, right beneath this article. This specific tutorial is a click-by-click walk-through for your first steps in the platform, from logging in to start editing the first screen of your new desired experience.

Each experience includes the screens (textual and graphical assets) and the transitions. When you initially sign in our platform, you will come across the first screen which will indicate you have not created any experiences yet. This is how it would look like:

On the next screen, you will be asked to choose between starting a blank experience, or a template from our templates gallery. 

Note: If you will click on a specific experience in the gallery, the right side of the screen will be updated accordingly, and you will be able to watch a video of the experience.  Just hover over the experience screens on the right side, and you will see the play button.

I chose a blank experience for this walk-through, but you can choose one of the templates if you want. In case you tapped 'Blank Experience'. Click 'Let's go ' 


Now, you will find yourself in the experience screens area. If you will mouse hover screen 1, you will be able to click ' Edit' and enter the screen's editorial area, which we call the Studio. You can also add a blank screen, but usually (not always) you will prefer duplicating the first screen after editing it.

  • On the upper part of the experience's screens, you can edit the experience name by clicking the in the left side. You can also use our preview tools for web or mobile. Enjoy!
  •  If you ask yourself what is the button for, it is for locking the experience when editing is finished so no one could edit it again. If you lock an experience, you will be able to duplicate and edit the duplicated one.

Let's tap ' Edit' and start editing the first screen!

The upper bar (pointed by the red rectangle) include different features: such as navigating back to experience screens area by clicking the 'Experience Screen ' button, navigating between screens using the arrows or or the drop-down located between them, choosing the colors of the guideline, the background, and the iPhone mockup color. Also, you can set the zoom percentage to your convenience.

There are some more buttons like the 'Transition Inbound ' and 'Transition Outbound ' buttons which are used for setting the transactions between screens. The 'Reorder ' button in the right red circle and also the 'Elements bar' pointed by a big red circle.

As you can see in the above screenshot, next to the iPhone there is another section that was not mentioned in the previous paragraph. You can see it enlarged in the below screenshot. This is the 'Screen settings' section. In this section, you can set whether you want the 'Pagination' to appear or not by clicking the button pointed by a red circle. This action is reversible, just click the button again which now looks like that

Below the settings will be the 'Swipe' and 'Canvas color' (which is the area "inside" the iPhone mockup). It can be set to a specific color, gradient or transparent.

Note: The icon   (pointed in the red circle in the screenshot above) may appear near a setting. This icon means that any change in this setting would apply to all screens. Like many other icons and symbols on our platform you just have to mouse hover the icon to have the explanation appear.

Hope you found this walk-through very valuable,


Elasticode Team