Mobirise-Tutorials.com

Tommy an ChatGPT hat geschrieben:
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);
  }
}