Tutorials zu der künstlichen Intelligenz "Mobirise AI"
Im Juni 2025 wurde die erste Beta-Version zur Nutzung der KI in einzelnen Modulen als "Block AI" vorgestellt.
Jetzt ist es möglich, jeden Block nachträglich von der KI bearbeiten zu lassen oder über die Block-Seite einen eigenen Custom-Block generieren zu lassen.
Die KI kann bereits CSS und JavaScript erstellen.
Ansicht der Block-Werkzeuge und vom AI-Editor
Für die Block-AI wurde ein neues Werkzeug-Symbol in der Toolbox hinzugefügt.
Nach einem Klick auf dieses Symbol öffnet sich der AI-Editor, in dem ihr eure Anweisungen eingeben könnt. Dabei handelt es sich beispielsweise um CSS- oder JavaScript-Anweisungen.
Unten ist als erstes Video ein Beispiel für die Erstellung eine einfachen JavaScript zur Abdunklung nach Klick auf einen Button.
Unten ein Screenshot vom durch die KI generierten Code.
Hier ein weiterer Versuch mit folgender Anweisung - diesmal in Englisch - das geht aber ebenso auf Deutsch:
Please make the word **Mobirise** 20% larger, bold, and red.
Deutsch:
Bitte mache das Wort **Mobirise** 20% größer, fett und rot.
Siehe das Ergebnis im Screenshot unten. Es wurde eine CSS-Klasse erstellt, mit der die font-size=120% gesetzt wurde
Ansicht des von der AI geänderten Textes vom Wort "Mobirise"
Ansicht Änderungen durch die KI am Desktop und am Smartphone
"Block AI" generiertes JavaScript
"Custom Block AI" generiertes Carddeck
Ansicht im Code Editor des von der AI generierten JavaScript zum Abdunkeln
Ansicht vom Custom Block AI Editor
In der Blockansicht findet ihr jetzt oben einen leeren Button. Ein Klick darauf öffnet den Editor zur Erstellung eines eigenen benutzerdefinierten Blocks.
Hier habt ihr die Möglichkeit, ein Bild hochzuladen und entsprechende Anweisungen als Prompt für die KI einzugeben.
Schaut euch als Beispiel das zweite Video oben mit der Erstellung eines Carddecks und auch das Video unten dazu an, in dem ich einen einfachen Slider erstellt habe.
Der fertig generierte Block wird unmittelbar auf der geöffneten Seite eingefügt. Ihr könnt ihn dann an die gewünschte Stelle verschieben, an der ihr diesen Block verwenden möchtet.
Hier ist ein Versuch, einen Slider über die benutzerdefinierte KI zu erstellen. Die automatische Diashow wurde eigenständig generiert und stoppt bei Mouseover. Ich habe das unten erstellte Video zur KI-Generierung des Sliders unverändert gelassen, um die Dauer der Generierung zu dokumentieren. Die Bilder wurden nicht einheitlich in der Größe generiert und zu klein mit einer Breite von 1200 px, was zu einer unzureichenden Schärfe geführt hat. Ich habe diese drei Bilder durch eigene Bilder auf meinem Server ersetzt, da ich ohne Kenntnis der Bildrechte nicht auf den Anbieter "Imgix.com" verlinken möchte, den die AI zur Erstellung von Benutzerblöcken zur Zeit nutzt.
Diesen Text zur Generierung habe ich eingegeben:
Erstelle einen Slider mit drei Bildern von den Malediven am Strand. Der Block soll eine maximale Höhe von 500 px haben, und die Bilder müssen alle die gleiche Größe besitzen. Der Hintergrund des Blocks soll Dunkelblau sein. Im unteren Bereich möchte ich als Label für jedes Bild eine Beschriftung erstellen können. Der Slider benötigt auch Navigationspfeile auf der linken und rechten Seite.
Custom Block AI - die Erstellung vom Slider Block oben
Dieses unten stehende Formular wurde unverändert durch die KI-Komponente "Custom Block" von Mobirise erstellt. Lediglich die Breite habe ich anschließend über "Block AI" anpassen lassen.
Mein Prompt war:
"Erstelle ein einfaches Kontaktformular mit den Feldern Name, Ort, E-Mail, Betreff und Nachricht sowie einer Checkbox zur Bestätigung der Datenschutzerklärung, zu der auch ein Link eingefügt werden soll."
Es ist mir zwar einmal gelungen, mit der Version 6.1.0 BETA eine Frage über die Block AI zu stellen und daraufhin in Form eines eingefügten Textes im Block eine Antwort zu erhalten. Allerdings konnte ich dies nicht wiederholen, auch nicht mit der Version 6.1.1 BETA. Anscheinend ist es bisher noch nicht möglich, auch nicht auf Englisch, mit dieser KI zu kommunizieren.