Learn & quickstart

All you need to know to enjoy Pingendo.

Download and install

Pingendo is a desktop software running on Windows, OSx and Linux. Select the version you need from the dropdown menu and the download will automatically start. Follow the suggested procedures to install the software on you computer.

Note for OSx: there might be a system warning. You need to authorize Pingendo from the control panel as a trustable application.

UI basics

When you open Pingendo you will see a blank page with bars and controls all around. Let's briefly see the main functions:

  1.  Section and components: browse the list of premade blocks and Bootstrap 4 components.
  2.  Toolbar: start/open/save projects, preview in the browser or toggle different device resolutions.
  3.  Canvas: your working area to visualize your project, select elements and input texts.
  4.  Right inspectors: here you can configure elements or customize the page aspect.
  5.  Live Code Editor: Inspect and edit HTML and SASS files on the go.
Pingendo working space and UI

Visual Builder

Create a new file

First things first: let's create a new file to begin your website project. You can start editing the blank page named Untitled.html or select the icon in the toolbar. Save it straight away: Pingendo will ask you to choose a directory and a name for your project. 

For the moment you haven't modified anything, so you will see just an HTML file in your chosen local directory. As well as any of the THEME options is modified, you will be asked to save also the .css and .scss files related to your project. 

Start building

It's time to begin your project: select the icon in the left panel. Here you can browse a selection of premade blocks made with pure Bootstrap 4 components. When you find something good for you, drag it into the canvas. You will see a highlithed cyan line that indicates you where the section is going to be placed. Drop it. Repeat and enjoy! 

You will see how fast and easy is to build a webpage with Pingendo. The blocks are organized by category, and if something is missing you can easily assemble new sections with the Bootstrap components. Just find what you need and drag it in the right position.

Pingendo visual builder Bootstrap 4 components

There are several way to add elements to your web page: copy/paste components or whole sections, clone them with the specific icon in the toolbar and many more. Take your time to discover all of them, and don't be afraid of mistakes: the UNDO button works fine.

To know more about the visual builder you can have a look to our forum article about it.

Customize and configure

Elements settings

Any time you select something in the canvas, you will notice that the ELEMENT tab on the right is changing. Any components has specific fields that can be edited to customize its aspect, like width, color or margins. From any selection you can always press the Esc button to select the parent item, like a column or a container. Keep track of your selection in the canvas or using the component tree on the right.

Pingendo customize and configure panels

Theme settings

Change the face of your webpage has never been so easy: the THEME inspector on the right lets you modify the main color and aesthetical factors with ease. Modify whatever you want and see the effects immediately in the canvas. As said at the beginning, once you apply any change to the THEME inspector, Pingendo will ask you to save the actual theme of your project. Choose a name and a path and it's done!

You can link .css and .scss themes from other projects and apply them right away. At the top of the THEME tab there's the file field: browse your local folders to apply a different theme with its set of colors, properties and fonts.

Code while designing

Here comes one great Pingendo's feature: the live code editor. Every operation that you might do in the visual builder or with the left tabs are generatig clean and battle-tested code. And where to access this code? at the bottom of the canvas!

Pingendo live code editor

Click on the HTML/SASS tab to see them jumping up, or drag them upward. As you can imagine they are showing the two files related to your project: the HTML source, with all the elements and componentsm and the .scss rules compiled by SASS.

From these drawers you can edit and integrate the webpage all the time: add custom .css rules or modify elements' classes is matter of seconds, and the effects are displayed in real time in the canvas. 

If you want to see your page running as a website, just click on the preview icon ( ) in the upper ribbon!

Shortcuts

Ctrl-c Copy
Ctrl-x Cut
Ctrl-v Paste
Ctrl-shift-c Clone
Del Delete
Esc Select parent element
Ctrl-z Undo
Ctrl-shift-z Redo
Ctrl-s Save
Ctrl-shift-s Save as

Get started with Pingendo

Available for Windows, OSX and Linux