Mobirise Tutorials

VN Umbau

Werkzeug zur Umgestaltung von HTML und CSS Code durch die KI

Tutorial - VN Umbau

Das Tool „VN Umbau“ wurde von Volker Niederastroth entwickelt und nutzt künstliche Intelligenz, um den Code einer Webseite umzuschreiben. 

Meine hier gezeigte Version ist vom 31. August 2026.

Diese Anwendung findet ihr zum kostenlosen Download in der VN Block Galerie 

Such dort nach "VN Umbau" in der Kategorie "VN Tools".

Nach dem Import der Anwendung findet ihr die Anwendung im "VN Menü", das es seit dem 20. August 2026 zur vereinfachten Darstellung von den Anwendungen von Volker Niederastroth gibt.

Ich beschreibe dieses Menü ausführlich auf meiner Seite zum VN Menü 

Diese Anwendung verwendet künstliche Intelligenz, um den vorhandenen Code der Blöcke einer Mobirise‑Seite zu optimieren oder anzupassen. Wählt hierzu einen Block aus der Auswahl. Dafür stehen vorgefertigte Anweisungen zur Auswahl, z. B. „Für Mobilgeräte optimieren“, „Auf Bootstrap 5 aktualisieren“, „Zugänglicher gestalten“, „Bereinigen“, „Moderner gestalten“ oder „Benutzerdefinierter Auftrag“. Bei einem benutzerdefinierten Auftrag können beliebige Anweisungen formuliert werden, zum Beispiel: „Bitte ändere in diesem Mobirise‑Block die Farbe des <h4> Tags auf gelb und den Hintergrund des Blocks auf hellgrau.“

Der neu generierte Code wird im rechten Bereich getrennt als HTML‑ und CSS‑Code angezeigt. Diesen Code muss man anschließend manuell in den Code‑Editor von Mobirise einfügen. Man kann dabei entweder den vorhandenen Code ersetzen oder den neuen Code zunächst in einem neuen Block testen.

Ihr benötigt jeweils den API‑Key (Zugangsschlüssel) für die jeweilige KI — auch wenn dieser möglicherweise kostenfrei ist. Sucht beispielsweise bei Google nach dem API‑Key für ChatGPT und befolgt die dortigen Anweisungen. Tragt den Schlüssel anschließend in das entsprechende Eingabefeld der Anwendung ein, damit eine Verbindung zur jeweiligen KI hergestellt werden kann. Zur Auswahl stehen hier vier verschiedene KI‑Anbieter: ChatGPT, Gemini, Groq und OpenRouter.

Um einen API‑Schlüssel zu erhalten, müsst ihr euch beim jeweiligen Anbieter zunächst registrieren und anmelden. Die Abrechnung der Anbieter richtet sich nach der Anzahl der gesendeten und empfangenen Token. Ein Token ist ein kleiner Textbaustein – das kann ein einzelner Buchstabe sein; häufiger handelt es sich jedoch um mehrere Zeichen, einen Wortbestandteil oder ein kurzes, vollständiges Wort.

Kostenlose API‑Keys sind meist stark eingeschränkt oder funktionieren gar nicht. Häufig erscheint dann die Meldung:

„Zu viele Anfragen – einen Moment bitte warten“

Ich habe Groq kostenlos getestet und nutze für Gemini sowie für ChatGPT (OpenAI) jeweils die günstigste kostenpflichtige Version.

Lest zum "VN Umbau" auch die beim Import gezeigte Splash.html 

Übersicht der 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.

VN-Umbau

"VN-Umbau" Teilansicht