Mobirise Tutorials
VN-Designer

Erste Schritte VN Designer

Vorwort

Der Webbaukasten „VN Designer“ von Volker Niederastroth ist bereit für die Nutzung. Nachdem ihr die erste Installationsdatei heruntergeladen und installiert habt, müsst ihr sogleich über das Menü "Hilfe" → "Über VN‑Designer" → "Nach Updates suchen" die neueste Version installieren.

Bitte stellt eventuelle Fragen nicht persönlich an mich, sondern in meinem Forum . Dort helfe ich ebenfalls gerne — so erreicht ihr zudem den Autor der Software und weitere Helfer.

Die Software nutzt verschiedene KI‑APIs und bietet dadurch leistungsstarke Funktionen: Texte in Blöcke einfügen, ganze Blöcke vollständig neu codieren oder neue Funktionen hinzufügen. Außerdem kann die KI die Website in alle Sprachen übersetzen. Zusätzlich stehen mächtige, KI‑gestützte Bildwerkzeuge zur Verfügung, mit denen sich Bilder überarbeiten oder komplett neu von der KI erzeugen lassen.

Ich habe zu meinem vorhandenen CookieFirst‑Consent‑Button einen weiteren Button des VN‑Designers zu Demonstrations‑ und Testzwecken hinzugefügt. Außerdem habe ich die VN‑Lightbox integriert: sie lässt sich projektweit auf alle Bilder anwenden, wirkt aktuell auf meinen Seiten jedoch nur auf ausgewählte Bilder.

Ich habe die Suchmaschine VN-Suche, die ihr im Menü unter "Werkzeuge" findet, bereits in mein Mobirise-Tutorial-Projekt integriert. Deshalb verweist mein Suchbutton dorthin. Die VN-Suche ist ein leistungsstarkes Werkzeug, das die gesamte Domain, einschließlich aller Verzeichnisse, sowie den Inhalt von PDF- und Textdateien durchsucht. Bitte lest auch mein Tutorial zu dieser Suchmaschine.

Die Erstellung sämtlicher Anleitungen für den VN‑Designer ist sehr umfangreich; vieles wird sich noch ändern oder ergänzt werden. Deshalb veröffentliche ich meine Tutorials zum VN‑Designer nach und nach.

Hier gelangt ihr zum Download der Software; bitte lest zuerst mein Tutorial zur Installation und natürlich das Handbuch.

Hier könnt ihr euch eine Vorschau einiger Themes ansehen, die standardmäßig kostenlos im VN-Designer enthalten sind.

Der VN-Designer bietet zahlreiche zusätzliche Erweiterungen. Ihr findet sie unter „VN-Werkzeuge öffnen“ am Maulschlüssel . Einige Erweiterungen sind kostenlos, andere kostenpflichtig. Ihr könnt sie direkt herunterladen oder kaufen – ganz einfach über den Button unten links: „+ Block hinzufügen“ → „Werkzeuge“. Dort werdet ihr auch über mögliche Updates für Erweiterungen informiert, die dann als „NEU“ gekennzeichnet werden.

Eine Alternative zum Erwerb von Erweiterungen ist der Shop 

Viel Erfolg und viel Spaß mit dem VN-Designer!

VN-Designer Logo

VN Designer

Download & Handbuch

Hier geht es zum Download der aktuellen Version des VN-Designers. Ihr könnt eine neue Version bedenkenlos über eine vorhandene installieren. Eure Seiten gehen dabei nicht verloren.

Aktuelle Update ist:
v1.3.98 vom 01.11.2026

Im Download Version 1.3.77

Bitte lest das Handbuch zum VN‑Designer, damit durch falsche Bedienung keine größeren Fehler entstehen.

Zum Handbuch

Updates zur Version prüfen:
Menü → Hilfe → Über VN-Designer

Lizenzen

Hier geht es zum Shop für zusätzliche Erweiterungen des VN‑Designers 

Bitte prüft die Lizenzen auf der Seite von VN-Designer.de

Die Vollversion kostet einmalig 98,00 € und gilt für die lebenslange Nutzung. Updates sind nach dem Kauf für einen begrenzten Zeitraum kostenfrei. Die Schnupperlizenz kostet 20,00 € und ist drei Monate gültig. Beim Erwerb der Vollversion wird dieser Betrag angerechnet. Die kostenlose Version ist voll funktionsfähig, trägt jedoch ein Wasserzeichen und ein Branding und eignet sich deshalb nicht für Veröffentlichungen. Sie eignet sich sehr gut zum Testen, da alle Funktionen wie in der Vollversion verfügbar sind.

Anzahl Blöcke

VN-Designer Lizenzen

Screenshot der Lizenzen vom September 2026

VN Designer

Aktuelle Anzahl aller Blöcke

Aktuell191 Pakete · 766 Bausteine

Sicherungen und Pfade

Sichern
Legt zusätzlich eine datierte Sicherungskopie des ganzen Projektordners an einem frei wählbaren Ort an.

Speichern
Speichert den aktuellen Stand in der Datei „projekt.vnd“ im Projektordner. Ihr könnt die Sichern‑Taste gar nicht oft genug drücken – klickt nach jeder Änderung an beliebigen Elementen immer auf „Sichern“.

Exportieren
Die Funktion „Exportieren“ erzeugt aus dem Projekt eine fertige, eigenständige Website im Unterordner „publish“, die sofort auf jeden Webserver hochgeladen werden kann — ganz ohne VN‑Designer.

Projekt-Datei
Die Projekt-Datei hat den Namen „projekt.vnd“. Diese Datei sowie die dazugehörige Ordner "assets" werden zur Wiederherstellung eines Projektes benötigt.

KI Chats ↓
In der im Projekt-Verzeichnis liegenden Datei "ki-chats.json" werden die letzten 50 Chats mit der KI gespeichert. Unten eine Übersicht einiger API-Key Anbieter. Lest mein Tutorial zur KI im VN Designer.

Weitere Sicherungen
Sicherungen der verwendeten User-Blöcke oder Cache-Verzeichnisse speichert der VN-Designer hier:

C:\Users\User-Name\AppData\Roaming\vn-designer

Code Editor ↓
Der Code-Editor ist ein mächtiges Werkzeug zum Bearbeiten von Blöcken und bei der Arbeit unverzichtbar. Unten finden Sie eine kurze, vorläufige Beschreibung sowie eine Ansicht.

VN-Übersetzer
Für das Werkzeug zur Übersetzung von Webseiten verwende ich derzeit den KI‑Dienst von Microsoft Azure. Die Übersetzungen werden in einer JSON‑Datei gespeichert; die Seiten werden deshalb nur einmalig und nur bei Änderungen neu übersetzt. Andernfalls werden die Inhalte aus der gespeicherten JSON‑Datei geladen. Microsoft stellt monatlich 2 Millionen kostenlose Zeichen zur Verfügung. Unten eine Übersicht einiger API-Key Anbieter. Hier mein Verbrauch von diesem Projekt. Lest mein Tutorial zur KI im VN Designer.

KI Chat

Künstliche Intelligenz

Hier ChatGPT

Über den Button „KI“ in der oberen Menüleiste könnt ihr einen Chat mit der KI starten. Verschiedene KIs stehen zur Auswahl – außerdem könnt ihr eine lokale KI verwenden. Tragt zuvor im Menü unter Einstellungen → KI‑API‑Schlüssel die API‑Keys ein, die euch von den jeweiligen Anbietern bereitgestellt werden (einige kostenlos, andere kostenpflichtig; die Gebühren sind in der Regel gering). Unten eine Tabelle einiger Anbieter.

Unten findet ihr ein Dropdown-Menü, mit dem ihr wählen könnt, ob ihr nur chatten möchtet oder Änderungen am aktuell aktiven Block beziehungsweise an der gesamten Seite vornehmen wollt.

Es werden maximal 50 Chats gespeichert.

Übersicht einiger KI Anbieter

Hinweis: Ein kostenpflichtiges ChatGPT-Abonnement wie ChatGPT Plus enthält kein Guthaben für die OpenAI-API. Das Abonnement und die API-Nutzung werden unabhängig voneinander abgerechnet.

API Keys für den VN-Übersetzer

Dienst API-Key erstellen und verwalten Modelle / Sprachen Preise
Microsoft Azure Translator API-Key verwalten Modelle und Sprachen anzeigen Preise anzeigen
Google Cloud Translation API-Key verwalten Modelle und Sprachen anzeigen Preise anzeigen
Code Editor

Code Editor

Der Code-Editor des VN‑Designers ist ein mächtiges Werkzeug, mit dem ihr den HTML‑ und CSS‑Code jedes Blocks bearbeiten könnt.

Einzelne Tags werden zusammenhängend hervorgehoben. Sowohl im HTML‑ als auch im CSS‑Code kann gesucht werden, und es lassen sich Kommentare einfügen. Fehler werden hervorgehoben.

Neben der KI, die ich oben beschrieben habe, verfügt der Code-Editor über eine eigene KI, die ihr direkt im Editor aufrufen und verwenden könnt. Innerhalb dieser Funktion ist jedoch ausschließlich die direkte Änderung des Codes möglich. Diese KI war ursprünglich die erste KI im VN‑Designer und wurde durch die oben beschriebene ersetzt; beide Optionen funktionieren weiterhin, da sich dieselbe KI auswählen lässt.

Icons

Icons

Ihr könnt an beliebigen Stellen der Seite Icons einfügen — in der Menüleiste, in Buttons oder im Text. Klickt dazu auf die jeweilige Schaltfläche, um das Icon‑Fenster zu öffnen. Im normalen Textmodus wählt ihr im Textwerkzeug die Schaltfläche „*Symbol“.

Im Programm sind standardmäßig Bootstrap‑Icons installiert, die sehr gut zum Design passen. Außerdem stehen euch standardmäßig zwei Sammlungen von Weltflaggen zur Verfügung: rechteckige  und quadratische .

Reichen diese nicht aus, könnt ihr zahlreiche weitere Icons herunterladen. Eine gute Quelle ist GitHub: Klickt dort auf den Button "Code" und wählt "Download ZIP". Entpackt das ZIP‑Archiv und öffnet den Ordner "json" mit den Icon‑Sammlungen im JSON‑Format. Wählt zum Beispiel die Datei "lucide.json" — damit stehen euch etwa 2.000 zusätzliche Icons zur Verfügung. Kopiert die JSON‑Datei in ein Verzeichnis eurer Wahl, z. B. "Meine‑Icon‑Sammlung".

Im Icon‑Fenster der Software klickt ihr auf das gelbe Ordnersymbol  rechts neben der Dropdown‑Auswahl, wählt den Ordner mit eurer JSON‑Datei aus und bestätigt mit "Ordner auswählen". Kurz darauf erscheint der Eintrag "lucide" in der Dropdown‑Liste, und ihr könnt die Icons daraus auswählen.

Farbige Logos findet ihr z.B. in der Icon-Gruppe "logos.json" oder auch "fluent-color.json".

Alternativ könnt ihr einzelne Icons als SVG‑Dateien herunterladen und in einen separaten Ordner (z. B. "Meine‑Icons") ablegen. Diesen Ordner wählt ihr über das kleine, rechteckige Symbol direkt neben dem gelben Ordnersymbol aus, um die einzelnen SVG‑Icons in der Dropdown‑Auswahl anzuzeigen und zu verwenden.

Bei Iconify könnt ihr die bei GitHub heruntergeladenen Icons vorab ansehen.

Dort könnt ihr einzelne SVG‑Icons (Scalable Vector Graphics) bequem auswählen und herunterladen und sie anschließend in euren Ordner „Meine-Icons“ kopieren. Sobald ihr neue Elemente in einen eurer Ordner kopiert, müsst ihr den jeweiligen Ordner neu einlesen, damit die Software die Icons erkennt und anzeigt.

Des Weiteren steht euch im Shop  das Werkzeug „VN‑Icons“ kostenlos zum Download zur Verfügung, mit dem sich Icons herunterladen lassen. Dabei ist jeweils auf mögliche Urheber- und Nutzungsrechte zu achten.

VN-Designer

Arbeitsansicht vom VN-Designer