Mobirise Tutorials

Mobirise Block AI

Tutorials zu der künstlichen Intelligenz "Mobirise AI"

Tutorial Mobirise AI Translate

Block 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.

AI Editor

Ansicht der Block-Werkzeuge und vom AI-Editor

Block 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.

Block AI Editor

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

Wort-Änderung AI

Ansicht des von der AI geänderten Textes vom Wort "Mobirise"

Ansicht Änderungen durch die KI am Desktop und am Smartphone

AI Bearbeitung Desktop
AI Bearbeitung Smartphone

Beispiel-Videos

Erstes Video zeigt die Anweisung für ein JavaScript 💫 Zweites Video zeigt eine Anweisung zur Erstellung eines Carddecks

"Block AI" generiertes JavaScript

"Custom Block AI" generiertes Carddeck

Code Editor

Ansicht im Code Editor des von der AI generierten JavaScript zum Abdunkeln

AI Custom Block

Ansicht vom Custom Block AI Editor

Custom Block AI

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.

Video von Slider über Benutzerblock

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.

Slider generiert von Custom Block AI

Video von Erstellung des Sliders oben

Custom Block AI - die Erstellung vom Slider Block oben

Slider mit Lightbox über Benutzerblock

Hier ein Versuch im März 2026, mithilfe der "Custom Block AI" einen Slider inklusive Lightbox zu erstellen. Zusätzlich habe ich die Galerie weiter unten nochmals angelegt und den original generierten Quelltext von ChatGPT leicht überarbeiten lassen. Überarbeitet wurde ausschließlich die Lightbox: Die Hintergrundhöhe wurde reduziert und die Navigationspfeile in Schwarz geändert.

Weiterhin wurden die geklickten Bilder in der Lightbox dargestellt, was im Original nicht der Fall ist.

Diesen Text zur Generierung habe ich eingegeben:

Erstelle eine Bildergalerie mit Beispielbildern aus der Südsee mit Popup-Slider als Lightbox zum Vergrößern der Bilder.

Südsee Impressionen Original von Mobirise-AI

Südsee Impressionen von der KI ChatGPT überarbeitet

Kontaktformular generiert von Custom Block AI

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."

Kontaktformular

Fragen an die Block AI

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.

Nachtrag mit v6.1.16 BETA zur Kommunikation

Mit der Version 6.1.16 BETA vom März 2026 konnte ich über die "Block AI" Fragen stellen und daraufhin von der "Block AI" in Form eines eingefügten Textes im Block eine Antwort erhalten, siehe Screenshots unten:

Kommunikation mit Mobirise Block AI

Kommunikation mit Mobirise Block AI

© Copyright Mobirise-Tutorials.com

Datenschutz und Impressum

Google Translator
Accept all cookies to translate
Funktionale Cookies akzeptieren