Intro to the Dittofi Design Studio (Frontend)

Search…
Learn your way around the Frontend Builder in the Dittofi Design Studio.
The Dittofi Design Studio is a full stack, software builder. With the Dittofi Design Studio you can build frontend, backend, API & ETL & big data ready software applications. Each of the types of software application e.g. frontend, backend, API & ETL, can work as standalone components within your existing tech stack OR as part of a complete, all in one, Dittofi solution. Below is a screenshot of the Studio.
The Studio is split into several applications that correspond to different aspects of full stack software development. These applications can be seen in the purple bar that is on the left hand side of the Design Studio. Highlighted above in purple we have Frontend Builder, Backend Builder, APIs & other tools.
In this section, we are going to look exclusively at the Frontend Builder, which consists of a page builder where users can build high performance websites & web apps using HTML, CSS, React & Redux in an entirely visual way. In later tutorials we will show how these pages can be integrated with a Dittofi or Custom Backend solution.
In this tutorial we will cover:
1.Accessing the Dittofi Design Studio
2.Adding components to the canvas
3.Removing components from the canvas
4.Shortcut keys
Accessing the Dittofi Design Studio
To access the Dittofi Design Studio, you need to first create an account. You can do this going to https://dittofi.com/website/login/ & using Google Single Sign On or by creating an account manually & verifying your username & password.
Dittofi makes it easy to test the solution by giving you a free 14 day trial. The free trial includes all the features in the Design Studio. 
After the trial has completed, your account will be either downgraded to a free tier, or you'll be given the option to take a paid for subscription, based on the features that you find most useful.
Adding components to the canvas
Once inside the Design Studio, you will be prompted to create your first app. For a refresher on how to do this, go to the "Hello, world" Tutorial in the "Getting Started" section.
After you've created your app, you'll arrive at the Dittofi page builder where you can visually design & build custom, high performance websites & web apps.
To help you in this process, we give you a list of pre-built web components that you can add to the canvas through two main methods.
Method 1: Drag & Drop
Drag & drop is relatively self explanatory. You are able to click on different components inside the components panel & drag & drop these onto the page.
Notice that the yellow bar indicates if the component will be added to the canvas before or after a component.
Method 2: Using the Arrows
Sometimes, when your page is very full up of components (boxes, inside boxes, inside boxes), it is difficult to find the drop zone for a component using the drag & drop method. Dittofi gives you the option to get more accurate positioning of elements using the copy components to a clipboard & then using the arrows to position the copied component, before, after or inside a selected component. 
You can find the arrows at the top of the components panel.
To use the arrows, first orientate yourself by selecting a component on the canvas. Second, select a component from the components panel.  Finally, press the backward facing arrow.
You'll notice that when you selected the component from your components panel this added the component to your clipboard. The backward facing arrow then added your component as the last child of your selected component.
Each of the arrows does something slightly different, below is a list of each of them & the role that they play. 
1.The downward facing arrow adds components to a page right before the selected component. 
2.The forward facing arrow adds components as the first child of the selected component.
3.The circle arrows replace the selected component with another selected component.
4.The backward facing arrow adds a component as the last child of the selected component
5.The upward facing arrow adds a component to a page right after the selected component.
Removing Components
To remove a component from the canvas, you can either:
1.Select the component & then press the delete key
2.Go to Edit > Selected Components > Delete Component
Shortcut Keys
Dittofi gives you the option to use shortcut keys to super charge your app development. The shortcut keys mimic as closely as possible the design tools that you're most familiar with.
Shortcut Key
Outcome
Ctrl+C
Copies the selected component to your clipboard
Ctrl+V
Pastes the component in your clipboard as the last element in of the selected target component.
Ctrl+X
Cuts the selected component & stores it in your clipboard
Ctrl+Z
Undoes the last action on the canvas
Ctrl+Y
Re-does the last action on the canvas
Escape
Deselects all of the existing components 
Ctrl+S
Saves the state of the applications canvas
Intro to the Box Model
Next - Learn Frontend
Elements
Last modified 1yr ago
Copy link
Outline
Accessing the Dittofi Design Studio
Adding components to the canvas
Removing Components
Shortcut Keys