Pingendo Help Center

Visual builder: a complete overview


#1

Here there is an overview of the visual builder features. One of Pingendo’s missions is boosting your productivity and you will see how fast is to assemble a website UI.

Drag & drop from the section browser

Fight back the horror vacui of the blank page clicking the + icon at the top of the left tab and browse the list of premade blocks. There are several categories to choose from, all fully customizable. Drag the section you need into the canvas and drop it where you want.

All sections are made by Bootstrap 4 components. Edit them according to their properties: you can type new text, delete images, colums and whole rows.

If you feel like assembling your own sections, or integrating an existing one, there are several ways to do that. The simplest is browsing the component browser just below the section one. Here you have all the Bootstrap 4 elements that might be needed to build a website.

Drag and drop what you want: the cyan line might switch from horizontal to vertical, according to pointer position. The components is added together with a column or a rows when needed. If the position doesn’t suit you, you can always drag it somewhere else.

Tree Plus

At the top right corner there’s the component tree. It displays with components that could have a child (i.e. a column, a row or a navbar). You will notice that for some selection a + icon will appear in the corner: click on it so see the list of items you can add for that particular component. You can see here the navbar options, so you can add an icon, another item, a button and so on.

Clone

To be even faster, you can directly clone elemnts in the canvas. There’s a clone button in the upper ribbon that will duplicate your selection. For columns and rows you can also click the + button that’s following your pointer in the canvas. Try to clone a row with this command and see how Pingendo will create an exact copy right next to it (or below).

Copy/paste

This is pretty intuitive: select what you want, copy or cut it to clipboard and paste it elsewhere. The most common shortcuts are working also in Pingendo so you won’t have any difficulty while using this resource. Notice that you can cut or copy anything, from paragraph to whole sections, withing the same page or even in other projects. This command is working with HTML snippets: if you paste it in a text editor, you will see the its code.

HTML code editor

Eventually you have the possibility to type directly the snippets you want to add in the HTML drawer at the bottom of the canvas. Just click on the HTML tab and see the live code editor coming up. There you can type anything you need, or paste a snippet from somewhere else and so on.

Changes will be shown in real time in the canvas, so you always know if your snippet is working or not!