• Topics
• FAQs
• API Documentation
• Professional Services
• User Experience Dictionary
• Important Notice

3. Editing pages

Open the "Home" page to edit it by selecting it from the pages dropdown in the breadcrumb navigation.

The editor contains three main parts:

• The toolbar at the top provides general editing options.
• The Stencil Palette on the left contains the "stencils" - the building blocks for your prototypes.
• The canvas in the middle is your workspace and represents the page or screen you are designing.

The "Home" page in our example will be very simple and consist of only three elements:

• a large image that spans the entire width of the screen
• a headline reading "Get prototyping today!", and
• a call to action in the form of a "Sign up for free" button.

Add the elements (image, headline, button) to the "Home" page by dragging them from the Stencil Palette onto the canvas with your mouse.

If you cannot find them easily, type the element name into the search field atop the Stencil Palette. You can navigate the search results with the arrow keys and add the stencil by hitting "enter".

Arrange the stencils by dragging them to the desired location and adjust their size as needed by selecting them and pulling the handles that appear around them to the desired position. If you prefer, you can also upload an image and use it instead of the "image" stencil, which is a generic placeholder. To upload an image, simply drag the file from your file system onto the canvas. The image will also be added to the Stencil Palette for later use. Double-clicking on the stencils will allow you to edit the content. When editing the text element, a text editor toolbar will appear above the element and allow you to format the text, e.g. to make it boldface. Like so:

Your page should look like this:

Well done! Now let's do the other two pages.

-->For the "Signup" page, add three "text inputs", a "combo box", a "checkbox" and a "button". Arrange them underneath each other, center-aligned, and label the text inputs "Name", "Email" and "Password" by double-clicking on them to edit the content. Label the checkbox "I accept the terms of use" and the button "Sign up for free now" using the same approach. The page should look like this:

Now let's take a look at the combo box. The combo box is a dynamic element that will be able to open and close and show different values in the preview. To define the different values, double-click on the element. You will see three default entries that you can replace with the two words "English" and "German" - using a new line for each entry. In the preview, this will allow the user to select between the two languages. You will also find a similar type of syntax for editing the content of stencils such as the "menu", the "table" or the "tree view".

Finally, let's use the context menu for the first time: Select the third text input (the password field) and open the properties section of the context menu . Select the "password field" checkbox. Voilà, the text input will now hide any input.

Finally, for the "Welcome" page let's just use a "text" stencil with the words "Welcome!" and a "button" for creating the first project. Like this:

By the way, if you need to change the settings of a page, such as the screen type, size or background, use the page settings at the top of the page:

<< previous

next >>