Editing
High level overview of editing common features.
Last updated
Was this helpful?
High level overview of editing common features.
Last updated
Was this helpful?
The simplest way to get your app out there is to choose a template and customize and edit it to make it look and feel authentically yours.
To do this effectively, it’s important to understand editing toolbars.
The mouse is the main method of navigating to a part on the canvas you want to edit.
As you move the mouse around the screen the part under the mouse cursor will be highlighted. As you hover, you'll see a dotted orange container. Once you select the part, the dotted line will become a solid line.
Selecting the part is the first step to editing that part. Once it is selected, the property panel will be activated on the right. Every part has its own specific property editing panel.
Let's take a look:
In the example above:
A piece of text is selected. The text part is highlighted by a solid orange line with an orange box labeled "Text". The text editing panel is activated on the right. The properties to assist with editing text are available within the text editing panel.
A button is then selected. The button part is highlighted by a solid orange line with an orange box labeled "Button". The button editing panel is activated on the right. The properties associated with editing the button are available within the button editing panel.
An image is then selected. The image part is highlighted by a solid orange line with an orange box labeled "Image". The image editing panel is activated on the right. The properties associated with editing the image are available within the image editing panel.
You'll notice that all three editing panels are different from each other, and contain only editors associated with the part being edited.
Let's take a closer look at a text editing panel and an image editing panel to see at a glance how they're different. You'll notice that some properties say 'Default' next to them, and others say 'Value set'. Once a part has been edited - let's say that you change the color of some text - then in the text editor, the color property will change from 'Default' to 'Value set', and you'll also notice that the color you selected has been reflected in the words 'Value set'.
In the example video below, a landing page template has been added to a blank canvas, and various parts have been edited. Click the play button to view.
When the title is selected, the part is highlighted by a solid orange line, and the Text Editor is activated. The title is then edited, followed by the subtitle.
The first button is then selected and edited to change the text, and linked to the 'About' page. The second button is then selected and edited to change the text, and linked to the 'Products' page. The button has also had its color changed.
Then, the hero image has been selected and switched out for a different image from the Media Gallery, using the Image Editor.
All of this happened in a little over a minute!
Your application is always running so it looks and works to you the way your customers will experience it. Making an edit is instant in Appeggio and there is no waiting between edit and preview/run that you see in other tools. Don’t worry, your edits will only be visible to your customers when you publish them.
