Tommys Glas Layer für Mobirise Block

[Tommy Herrmann]

Ich habe hier einen Glas-Layer als Erweiterung für Mobirise im Format .mbrext zum Import erstellt. Das heißt erstellt hat das die KI "ChatGPT" im allerersten Versuch so wie es jetzt ist. Dauer 35 Sekunden.

Du kannst die Position, Größe und Transparenz vom Layer über die Block-Werkzeuge ändern:

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

Hier kannst Du die Erweiterung zum Import in Mobirise downloaden:

https://www.mobirise-tutorials.com/AI-B ... yer.mbrext

Bemerkung: Du musst zunächst ein Hintergrundbild über die Toolbox des Blocks wählen.

[Volker]

Schon toll wie schnell KI ist

[Tommy Herrmann]

Ja, ich habe das auch zum ersten Mal mit der Toolbox über die KI ausprobiert, das ging total problemlos.

Sage mal, dieser Block hat ja nun extra ein "Fallback Bild", jedoch kann ich nicht erkennen, wann das zum Einsatz kommt.

Hast du meine Erweiterung "Glas-Layer" mal installiert? Meiner Ansicht sollte da jedes Hintergrundbild fehlen, oder?

[Volker]

Warte ich lad den mir mal runter ( hab ja noch nicht genug von denen )

Mit dem Fallback Image hat es die KI wohl zu gut gemeint

Entweder Bild, Farbe oder Video - ist ja auch richtig so. Das kannst löschen und dafür machst Glasfarbe rein. Nicht jeder mag weißes Glas Ansonsten Top

Der Rahmen gefällt mir den bau ich auch mal ein, auch mit Farbwahl

He he ich hab mal geklaut:
https://www.niederastroth.de/demo5/

[Tommy Herrmann]

Nee, das Fallback-Image hat Mobirise in den Header- Blöcken.

Sagst Du mir bitte noch wie das ausgesehen hat, ich vermute ganz ohne Bild, oder?

[Volker]

Ja war ohne Bild, was ja auch Ok ist. Bild rein und gut wars

Dann kommt das wenn das video nicht geht oder ?

Ich hab noch nie ein fallback image gesehen bei mir Meine Vidoes laufen ja auch alle

[Tommy Herrmann]

... danke.

[Volker]

Dann bin ich mal auf den nächsten Block gespannt den die KI zaubert.

Aber Du hast ihr schon einen Header Block gezeigt oder ? Das hat die doch nicht einfach so gemacht komplett ?

[Volker]

Geht auch in rund

https://niederastroth.de/demo6/

[Tommy Herrmann]

Die runden Layer solltest Du mit anbieten - die sind gut

[Tommy Herrmann]

Ich habe genau und exakt das an ChatGPT vorgegeben:

Ich hätte gerne in Mobirise einen Block so verändert, dass ich einen Layer als glas-ähnlichen Bereich mit Schrift einbringen kann, also ähnlich wie unten Links im Header dieser Beispielseite:

https://www.dpgmediagroup.com/nl-NL/ove ... ise.com%2F

Dieser Textlayer soll auf gläsern wirkendem Hintergrund (leicht transparent) gestaltet werden. Die Breite soll über die Blockwerkzeuge von Mobirise mittels Schieberegler einstellbar sein (Parameter) und die Höhe ergibt sich durch den Inhalt.

Der Layer soll außerdem in der Höhe und der Breite an jede beliebige Position über die Blockwerkzeuge (Parameter) positionierbar sein.

Bitte beschrifte den Layer mit einem Beispieltext wie "Beispieltext im Layer"

Unten meine Code für diesen Header-Block von Mobirise mit Bootstrap 5. Bitte generiere in jedem Fall immer den gesamten HTML und auch den gesamten CSS Code neu.

HTML aktuell:

Code: Alles auswählen

<section data-bs-version="5.1" class="header6" group="Headers" data-bg-video="{{bg.type == 'video' && bg.value.url}}" mbr-class="{
    'mbr-fullscreen': fullScreen,
    'mbr-parallax-background': bg.parallax}">

    <mbr-parameters>
        <header>Size</header>
        <input type="checkbox" title="Full Screen" name="fullScreen" checked>
        <input type="checkbox" title="Full Width" name="fullWidth">
        <input type="range" inline title="Top" name="paddingTop" min="0" max="10" step="1" value="6" condition="fullScreen == false">
        <input type="range" inline title="Bottom" name="paddingBottom" min="0" max="10" step="1" value="6" condition="fullScreen == false">

        <input type="range" inline name="textWidth" title="Width" min="4" max="12" value="10" step="1">
        <select title="Align" name="contentAlign">
            <option value>Left</option>
            <option value="justify-content-center" selected>Center</option>
            <option value="justify-content-end">Right</option>
        </select>
        <header>Show/Hide</header>
        <input type="checkbox" title="Title" name="showTitle" checked>
        <input type="checkbox" title="Subtitle" name="showSubitle">
        <input type="checkbox" title="Text" name="showText" checked>
        <input type="checkbox" title="Buttons" name="showButtons" checked>
        <header>Background</header>
        <fieldset type="background" name="bg" parallax>
            <input type="image" title="Image" value="file:///C:/Users/Thoma/Documents/Mobirise/Vorlageseite/assets/images/mbr.png" selected>
            <input type="color" title="Color" value="#4479d9">
            <input type="video" title="Video" value="https://vimeo.com/428046504">
        </fieldset>
        <header condition="bg.type === 'video'">Fallback Image</header>
        <input type="image" title="Fallback Image" value="../_images/background13.jpg" name="fallBackImage" condition="bg.type === 'video'">
        <input type="checkbox" title="Overlay" name="overlay" condition="bg.type !== 'color'" checked>
        <input type="color" title="Overlay Color" name="overlayColor" value="#4479d9" condition="overlay && bg.type !== 'color'">
        <input type="range" inline title="Opacity" name="overlayOpacity" min="0" max="1" step="0.1" value="0.2" condition="overlay && bg.type !== 'color'">
    </mbr-parameters>

    <div class="mbr-fallback-image disabled" mbr-if="bg.type == 'video'"></div>
    <div class="mbr-overlay" mbr-if="overlay && bg.type !== 'color'" opacity="{{overlayOpacity}}" bg-color="{{overlayColor}}"></div>

    <div class="align-center" mbr-class="{'container': !fullWidth, 'container-fluid': fullWidth}">
        <div class="row {{contentAlign}}">
            <div class="col-12 col-lg-{{textWidth}}">
                <h1 class="mbr-section-title mbr-fonts-style mbr-white mb-3" data-app-selector=".mbr-section-title" mbr-theme-style="display-1" mbr-if="showTitle"><b>MOBIRISE BUILDER</b></h1>
                <h2 class="mbr-section-subtitle mbr-fonts-style mbr-white mb-3" data-app-selector=".mbr-section-subtitle" mbr-theme-style="display-2" mbr-if="showSubitle">Header Subtitle</h2>
                <p class="mbr-text mbr-white mbr-fonts-style" mbr-theme-style="display-7" mbr-if="showText" data-app-selector=".mbr-text, .mbr-section-btn">
                    Mobirise is a free offline app for Windows and Mac to easily create small/medium websites, landing
                    pages, portfolios. 3500+ beautiful website blocks, templates and themes help you to start easily.
                </p>
                <div mbr-buttons mbr-theme-style="display-4" class="mbr-section-btn mt-3" mbr-if="showButtons"><a class="btn btn-danger" href="https://mobiri.se" data-app-placeholder="Type Text">Create Your Website!</a></div>
            </div>
        </div>
    </div>
</section>

CSS aktuell:

Code: Alles auswählen

& when not (@fullScreen) {
  padding-top: (@paddingTop * 1rem);
  padding-bottom: (@paddingBottom * 1rem);
}
& when (@bg-type = 'image') {
  background-image: url(@bg-value);
}
& when (@bg-type = 'color') {
  background-color: @bg-value;
}
.mbr-fallback-image.disabled {
  display: none;
}
.mbr-fallback-image {
  display: block;
  background-size: cover;
  background-position: center center;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  & when (@bg-type = 'video') {
    background-image: url(@fallBackImage);
  }
}

Dies ist also der Original-Code von diesem Header-Block:

Dann hat mir ChatGPT in exakt 35 Sekunden den Block inklusive der Parameter für die Blockwerkzeuge umgeschrieben - fehlerfrei. Ich habe in einem zweiten Anlauf lediglich die Deckkraft vom Layer noch als Werkzeug mit einbauen lassen.

↓

[Volker]

Geil

Ich sag ja das prompt ist wichtiger als alles andere und wenn Sie den Code sieht weiß die auch sofort wie mobirise tickt.