What is the Visual Editor?

Find out more about the Crowdbotics Visual or Layout Editor, and when and where to use it.

The Crowdbotics Visual Editor is a layout editor that you can access directly from your App Dashboard. The Visual Editor enables you to customize the appearance, location, and content of elements in your app’s user interface.

Each individual screen in your app will have visual elements like buttons, text, or images. You can use the Visual Editor to edit aspects of these elements such as font, color, text, or shape. Simply drag-and-drop these elements into your app’s screens and use the contextual settings that appear to tweak their appearance.

To begin using the Visual Editor, add a module to your Storyboard canvas. Hover over the module and select “Layout” to edit that screen’s appearance.

How to use the Visual Editor

The layout editor allows you to customize the appearance, location, and content of elements in your app’s interface from the Storyboard page of the App Builder platform. After making these customizations, the App Builder will generate a preview of your app and custom code that reflects the screen adaptations you did in the layout editor. To effectively use the layout editor, here is the important terminology you should refer to: 

Feature Overview

1. Element Tree: A convenient way to view all the different nested elements you have inputted into your layout, and individually select or delete each inputted element. 
2. Elements: Drag and drop elements of your choice from a variety of different options, including the following: flex, columns, rows, button, text, text input, number input, date input, text area, switch, image, slider, checkbox, radio button, and icon
3. Resources: Drag and drop images to use in your layout under this tab. 

To edit a specific element in your layout, press “Edit Selected” after selecting the element. The “Edit Selected” tab has the following options: 

1. Vertical Alignment: Adjust the placement of text within your element with this option. Text-top and text-bottom move the text to the top and bottom, respectively, of the button/text box.
2. Overflow: Customize whether surplus text appears on the screen, and if it does appear, how this text will be displayed.
3. Width and Height: Enter in numerical dimensions if pt. is selected, or a percentage if % is selected of the associated element or flex. 
4. Padding: Values in padding boxes are used to allocate space to the left, right, bottom, or top of text within an element itself. 
5. Margins: In contrast to the padding values, margin values can be used to allocate space to the left, right, bottom, or top of the element as a whole (for example, you can create space between elements and flexes with the margin tool). 
6. Font Style: Select normal or italic font from the dropdown menu.
7. Font Weight: Adjust the density of your text with ranging weight values, where higher weight values indicate stronger bolding
8. Border Weight: Inputting values for border weight allows you to create a line (solid, dashed, or dotted) on select sides of the element, or all four sides