✨Anwendungen und Blöcke, erstellt mit der Hilfe von der KI ChatGPT

[Tommy Herrmann]

Wer einen Blick darauf werfen möchte: Zurzeit experimentiere ich wieder mit Mobirise‑Blöcken, die mithilfe der KI ChatGPT erzeugt wurden. Diese biete ich neuerdings auch teilweise zum direkten Import als Block‑Erweiterung an:

https://www.mobirise-tutorials.com/AI-Beispiele/

Alle Menülinks führen zu Anwendungen, die ich mit ChatGPT erstellt habe. Einige der neuesten sind inzwischen auch als .mbrext (Mobirise‑Erweiterung) importierbar.

[struggle]

Also, ich empfinde mich als Laie, kann aber mit Hilfe im Code das eine oder andere ändern.
Um so mehr freue ich mich über deine hier angebotenen Blöcke, wo man den Eindruck hat, daß sie ordentlich durchdacht sind und einfach funktionieren.
Dafür ein Dankeschön

[Tommy Herrmann]

sehr gerne - Du probierst wenigstens solche Anwendungen auch mal aus - prima

[hansjuerg]

Hallo Tommy

Auch von meiner Seite ein grosses Dankeschön!
Dein Slider-Block habe ich schon vor einiger Zeit auf vmcu.ch eingefügt.
Wäre es möglich, statt einer HG-Farbe auch eine Grafik zu hinterlegen?

[struggle]

Hallo Hansjuerg,
mit Deinem Slider stimmt irgendwas nicht, da laufen die sechs Bilder durch und dann"springt" er. Das war bei mir auch so. Ich konnte das unterbinden, indem die sechs Bilder 3 x hintereinander durchlaufen. Ist nur eine Vermutung.
Und das Logo empfinde ich als ein bissel zu groß, man sieht leider nicht viel von den Bildern.

[Tommy Herrmann]

Moin Hansjuerg,

leider nicht - so wie dieser Slider jetzt aufgebaut wurde, da ich hier einen einfachen Textblock verwendet hatte, der nur eine Hintergrundfarbe anzubieten hat.

Man könnte das natürlich auch mit einem der typischen Mobirise-Blöcke erstellen, die ohnehin schon die Option haben, anstelle einer Farbe ein Bild oder ein Video als Hintergrund zu verwenden.

Kopiere doch mal den gesamten Code vom Slider Block - also zunächst den HTML-Teil (links) und dann auch den CSS-Teil (rechts).

Dann füge das bei ChatGPT am Prompt ein:

https://chatgpt.com/

... und bitte gleichzeitig darum in den Blockwerkzeugen von Mobirise noch die Option für ein Hintergrundbild einzubauen - also zusätzlich zur Option der Farbwahl. Das sollte gar kein Problem für eine KI sein.

Bitte auch darum, dann wieder beide Codes komplett neu zu generieren, sodass Du die Möglichkeit hast den gesamten Code (HTML sowie CSS) einfach auszutauschen, um keine Fehler zu machen.

Etwas anderes würde ich jetzt auch nicht tun. Es kann ja nichts Schlimmes passieren – höchstens bekommst du ein großes Aha‑Erlebnis. Im Notfall stellst du den ursprünglichen Zustand wieder her.

[hansjuerg]

Hallo Hansjuerg,
mit Deinem Slider stimmt irgendwas nicht, da laufen die sechs Bilder durch und dann"springt" er. Das war bei mir auch so. Ich konnte das unterbinden, indem die sechs Bilder 3 x hintereinander durchlaufen. Ist nur eine Vermutung.
Und das Logo empfinde ich als ein bissel zu groß, man sieht leider nicht viel von den Bildern.

Moin Reinhard

Das Springen habe ich gar nicht bemerkt. Versuche das zu korrigieren.
Das Logo kann ich verkleinern soviel ich will, das wird nur am PC übernommen, nicht aber auf dem Mobile.
Keine Ahnung - dazu kenne ich mich viel zu wenig aus :-)

[hansjuerg]

Moin Tommy

ChatGPT tut sich schwer mit meiner Anfrage. Kann erst morgen weiterschauen. Mein Upload-Volumen ist bis 19:30 Uhr aufgebraucht

[struggle]

Hallo Hansjuerg,
das Logo ist ja ein png, d.h. die Größe bezieht sich auf das gesamte Bild, also auf den transparenten Hintergrund. Diesen Hintergrund sollst Du nicht verkleinern, aber das Bild darinnen.
Ich mache das z.B. mit Paint.net (kostenlos).
Ich erstelle einen transparenten Hintergrund mit der gleichen Größe und speichere diesen.
Dann verkleinerne ich mein eigentliches Bild insgesamt und ziehe dieses in den erstellten transparenten Hintergrund. Jetzt kann ich es noch im erstellten Hintergrund verschieben/platzieren, am besten wieder genau in die Mitte. Dann dieses neue Bild zusammengefügt abspeichern.
Du hast jetzt die eigentliche Größe beibehalten, nur das Logo darinnen ist verkleinert.
Ich weiß nicht, welche Bild-Software du verwendest, aber eigentlich müßte das mit (fast) allen funktionieren.
Das mache ich regelmäßig mit allen png's so, die ich benutze, bis ich den gewünschten Erfolg habe.

[struggle]

Ich muss meine Antwort von vorher berichtigen, denn ich habe gerade was gesehen:
Du solltest im Slider unter "zentrales png" eigentlich das Bild/Logo als png abspeichern, du hast es aber als JPEG abgespeichert. Genauer: als "Logo-titel.jpg mit einer Größe von 333 x 296.
Wenn Du das Bild verkleinern willst, mache genau, wie vorher beschrieben einen transparenten Hintergrund mit einer Größe von 333 x 296, verkleinere vorher dein jpg-Logo und ziehe es dann in den transp. Hintergrund. Dann speichere es zusammengefaßt als PNG ab
Auf dem PC sieht es im Slider eigentlich sehr gut aus, wie es jetzt ist. Nur auf dem Handy verdeckt das Logo die Bilder.

[Tommy Herrmann]

Moin,

Ja, das ist lästig mit der kostenlosen Version, daher habe ich mich von Anfang an zur "Plus" Version entschieden für 23,00 €/Monat.

Auch wenn ich ChatGPT manchmal wochenlang gar nicht nutze finde ich, dass sich das lohnt. Es wird eine viel bessere und schnellere Version verwendet und es gibt kaum Einschränkungen.

Manchmal wird es langsam, wenn ein Chat zu umfangreich wird. Das liegt aber nicht an ChatGPT sondern am Browser. Dann einfach Browser schließen und ChatGPT machen lassen oder einen neuen Chat starten.

Man kann das Abo auch jederzeit zum Monatsende kündigen.

[hansjuerg]

Guten Morgen zusammen

Habe mich jetzt nochmal eine Stunde lang mit ChatGPT unterhalten. Scheint echt schwierig zu sein und es gibt noch keine Lösung. Falls jemand am bisherigen Chatverlauf interessiert ist, kann ich gerne den Link hier posten.

[Tommy Herrmann]

Moin,

also ich habe jetzt mal meinen Code bei ChatGPT gepostet (wie oben bereits beschrieben) und ich wollte die Option "Image", also ein Bild anstelle der Farbe, als Hintergrund zusätzlich verwenden können.

Ich habe mit Dir einen Slider-Block für Mobirise erstellt. Den Code von diesem aktuellen Slider werde ich gleich hier als nächstes posten. Warte das also ab. Den Code unten poste ich ausschließlich als Vorlage für Dich um in meinen Slider-Block noch zusätzlich diese Option "Image" als Hintergrund in den Mobirise Block-Werkzeugen, neben der Wahl "Color" wählen zu können.

Alles klar, ich warte auf den aktuellen Slider-Code. Sobald Du ihn postest, baue ich die zusätzliche Mobirise-Background-Option Image neben Color passend in Deinen Block ein.
Bereit — poste einfach den aktuellen Slider-Code.

Hier ist mein aktueller Slider-Code, in den zusätzlich die Option "Image" außer der Option "Color" als Hintergrund wählbar sein soll. Bitte ändere sonst gar nichts am Slider. Poste den gesamten fertigen, neu generiertem HTML und CSS Code neu:

ChatGPT hat das in nicht einmal 5 Sekunden auf Anhieb korrekt generiert.

Slider mit Hilfe von ChatGPT erstellt - hier mit Hintergrundbild.jpg

Bei der Slider-Version mit der Lightbox habe ich auch noch ein Overlay mit einstellbarer Farbe und Deckkraft hinzugefügt.

Du müsstest diese von mir so geänderte Block-Erweiterung (mbrext-Datei) dann erneut von meiner Seite downloaden und erneut in den Mobirise-Erweiterungen importieren. Dann einfach in den Block-Werkzeugen "Image" als Hintergrund wählen.

https://www.mobirise-tutorials.com/AI-B ... er-ChatGPT

Option Image als Hintergrund hinzugefügt.jpg

[Tommy Herrmann]

Das Logo kann ich verkleinern soviel ich will, das wird nur am PC übernommen, nicht aber auf dem Mobile.

Wenn Du das Logo am Handy kleiner haben möchtest, dann kannst Du das in der CSS an dieser Class einstellen:

max-width (englisch) = maximale Breite (deutsch)

Code: Alles auswählen

 .ai-center-overlay img {
    max-width: 210px;
  }

Also max-width: 210px; auf einen anderen Wert wie z.B. 160px:

Code: Alles auswählen

 .ai-center-overlay img {
    max-width: 160px;
  }

Diese Class steht in dieser Media-Anweisung (recht weit unten in der CSS):

Code: Alles auswählen

@media (max-width: 575.98px) {
  .ai-showcase {
    min-height: 300px;
  }
  .ai-slider-full {
    margin-top: 1.25rem;
  }
  .ai-slider-wrap {
    height: 220px;
  }
  .ai-slider-group {
    gap: 14px;
    padding-right: 14px;
  }
  .ai-slide-item {
    width: 110px;
    height: 150px;
    border-radius: 14px;
  }
  .ai-center-overlay img {
    max-width: 210px;
  }
  .ai-slider-track {
    animation-duration: 28s;
  }
}

Ich würde das Logo aber ehrlich gesagt in der Größe belassen, denn sonst sieht das unausgewogen am Handy aus.

[hansjuerg]

Guten Morgen Tommy

Ist es möglich, dass die Bezahlversion von ChatGPT besser arbeitet als die Freeversion?
Ich habe genau deinen html-code und auch die css, mit derselben Frage ChatGPT vorgelegt und bis jetzt keine funktionierende Antwort erhalten!

Wie dem auch sei, vielen Dank Tommy, das funktioniert super. Jetzt muss ich nur noch ein passendes HG-Bild finden

[Tommy Herrmann]

ja - das kann sehr gut sein

Ich habe schon lange die Bezahlversion und weiß es nicht wirklich.

Du kannst das doch mal vorbereiten und vielleicht mal einen Monat lang testen. Also das "plus" Abo für 23,00 Euro abschließen, dann hast Du einen Monat Zeit alles auszuprobieren. Gucke wann Du es kündigen musst - einige Tage vor Ablauf sollten ausreichen.

Kündigst Du nicht vom gleichen Rechner, dann verlängert sich das Abo jeweils um einen Monat.

[Tommy Herrmann]

Warte mal - ich schalte mal genau diesen Chat öffentlich frei und poste gleich hier den Link. Dann kannst Du meine Aktionen und Form der Fragestellungen sehen.

Hier mein Chat - da kannst Du meine Fragen genau sehen und auch wie lange ChatGPT für Antworten benötigt hat:

https://chatgpt.com/share/6a0aa712-2fac ... 870e18bd23

[hansjuerg]

Im Vergleich meine "Unterhaltung" mit ChatGPT:

https://chatgpt.com/share/6a095fd1-e914 ... f16ad501ec

[Tommy Herrmann]

lasse Dir immer den gesamten Code generieren. Das mussst Du dann auch jedesmal dazu schreiben:

"Bitte generiere den gesamten HTML - und CSS Code neu für diesen Block, so vermeide ich Fehler beim Einbau"

[hansjuerg]

Danke, das merke ich mir für das nächste Mal.