Editor

The NetzBuilder editor is simple but elegant. The interface uses sober colors to prioritize the focus of the working page. This increases concentration on the web content and avoids confusing the elements of the editor with those of your site.

Let’s see a quick summary of the options. Get more information on each option by clicking on the following image or by jumping directly to the corresponding chapter.

The top section consists of an option bar where you can change the settings of the editor and the site in which you are working.

1. Responsive Mode.

These three icons represent the size of the type of device in which you wish to work. Pressing an option modifies the size of the workspace in real time to emulate the screen of the selected device, which is a mobile phone (small screen) , tablet (middle screen) and desktop computer (large screen) . NetzBuilder allows creating responsive sites. A responsive site is a website on which content is adjusted automatically to the screen size of your visitors device. You can find technical information on how responsive mode, resolutions, and screen types work in the responsive design chapter.

2. Enable or disable the grid display in the editor.

3. The save button allows saving the current changes made to pages. It automatically changes its status when it detects modifications not saved, offering you the option to do so.

4. Preview opens a new window outside of NetzBuilder to see how the current page looks once published. Use this feature to test the content live of the current page you are working.

5. Versions of NetzBuilder are copies of saved changes to your account. Like a history, this excellent feature allows reverting changes from your pages to previous versions or exchange between different versions of a site.

6. The publish button automatically pushes all changes made to pages into your live website.

7. The export function downloads your website files in a compressed zip archive.

8. This tab allows modifying the settings of your site, pages or returns to the general dashboard to manage all the sites under your NetzBuilder account.

In the side menu, you can find today three options. More functionality will be added in the future. Be sure to refer to the chapter of each section for more information.

A) Blocks

NetzBuilder comes with pre-built code blocks so you can quickly start building your website together. The blocks are various components of code grouped under a specific category. These categories are commonly used sections on websites. For example, most commercial sites have a header, then a body and finally the footer. NetzBuilder comes with many blocks, and you can even create your own to reuse them on all the pages and sites you want.

To use a block, just drag it to the work canvas. Use an empty block if you want to start creating your own content instead of using prebuilt components by NetzBuilder

B) Components

Components are individual elements used inside a block on your pages. For example, a button, an image, a text paragraph or a video just to mention a few. To use a component simply drag it to the page on the editor. Components must go inside a block. You cannot drag components directly into the empty canvas, and the components must be inserted into an existing block.

C) Pages

The pages options allow performing functionality related to the pages on your site like adding a new page, deleting existing ones, or renaming them.

D) Canvas

The canvas is the main editing area and simulates a browser window to see changes on a page in real-time. You will spend most of your time here. NetzBuilder is a visual editor of the WYSIWYG type “What You See Is What You Get.” This means that we try to reproduce as precisely as possible how your end website looks before being published. Under the canvas, there are all kinds of codes and every time you insert components or elements you are inserting a programming code.

While you can edit code directly on the canvas, you can also opt never to do so and work entirely visually. Alternatively, you can combine both methods. With NetzBuilder, unlike other easy-to-use products, you are not limited, and you can toggle between the visual mode to the professional programming code as you wish.

On the top you can see the name of the page you are currently working.

By default, the canvas is blank for each new page. You can start building content by dragging blocks or components from the sidebar menu into the canvas.

The NetzBuilder canvas supports the drag-and-drop feature so you can create complete websites by simply moving your pointer. You can create professional, modern, beautiful, secure websites that are easy to maintain in record time. More information on the canvas chapter.

Here ends the quick summary of the NetzBuilder interface. Don’t forget to visit the individual chapters to learn more about each feature. Learning how NetzBuilder works lets you fully enjoy the service and can transform anyone into a professional webmaster with zero efforts.