Start enjoying Pingendo with these few steps
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.
When you open Pingendo you will see a blank page with bars and controls all around. Let's briefly see the main functions:
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 open a new one in the File menu. 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 from a template
Template library you can find some themes and templates to start with. Select one and click the Open in desktop button. The browser should ask you to open it straight in the Pingendo Desktop app. Once you have selected a directory
to save the template, you can start working on it straight away.
The Project Folder browser will let you see the example landing pages as well as the related .scss file.
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.
There are several way to add elements to your web page: copy/paste components or whole sections, clone them with the command in the Edit menu 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.
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.
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.
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!
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!
|Esc||Select parent element|