Importing the assets
Assets can be imported from the Create Elements panel. We will import them as responsive images.
Positioning the elements
The positioning of the elements can be done by selecting an element and drag and drop it to the desired position.
Alternatively you can edit the element position from the Properties panel and change the Geometry properties as you like.
You can also select multiple elements and drag and drop them simultaneously to a position.
Creating animations in the editor
The starting transition animations will be created from the animation timeline by following a few simple steps:
1.Select the element that you would like to animate
2.Move the pinhead of the timeline to the time that you would like your animation to start
3.Select the property that you would like to animate, first set the value that you would like to have and then click on the "keyframe" symbol next to the property.
4.Move the pinhead of the timeline to the time that you would like the animation to end.
Set the new keyframe and click again the "keyframe" symbol next to the property.
A new keyframe is added to the timeline.
The animation is complete. You can preview it by clicking the "Preview" button.
Adding additional animation through external CSS files
Apart from applying styles via the editor, you can import your own styles from external CSS files.
Here are the steps for adding the external file:
Add class names to the elements
From the Properties Panel you can add custom class names to the elements.
Import the file using the Files panel
A new window will open, where you can select the CSS file you want to import. It will be listed under CSS files.
Double click on the file to open it in the file editor
From there you can directly edit styles and add new ones. In our particular case the external CSS consists the hover animation.
The editor adds styles to the elements as inline styles. If you wish to overwrite a style, you must use the "!important" prefix.
Saving the changes
You can save the changes using the "Save" button in the top left corner.
Export the UI
After you are ready with the UI, you can save and export the UI using the "Save" from the context menu.
You can also use the "Save" button in the tools panel.