Mobirise-Tutorials.com

Hallo zusammen,
hab hier einen Block, in dem man zwei Hintergrundbilder ineinander überblenden kann, Des weiteren kann
man eine zusätzliche Grafik importieren und alles (auch die Texte) mit Opacity-Weite und Opacity-Winkel versehen kann. Da kommen wirklich schöne Effekte zustande. Texte und Zusatzbild kann man im Block auch noch frei verschieben, Die Zusatzgrafik noch drehen und mit Radien versehen. Vielleicht gefällts ja außer mir noch jemanden

https://www.shotokan-karate-dojo-neukir ... ack.mbrext

Grüße aus der schönen Oberpfalz

Hallihallo,

das mit dem Bildimport ist blöd gelaufen. Ich habe ohne Ende getestet allerdings die Bilder immer nur lokal geladen - hier sagt Chatgpt das das oft nicht richtig exportiert wird. Wäre dankbar wenn Du das nochmal testen würdest. Ich hab ja schonmal geschrieben, ich bin wirklich dankbar für eine konstruktive Kritik. Das war mein dritter Block - mir war klar das es da noch hakt und zwickt. Aber wir wachsen mit unseren Aufgabe

Hab jetzt die Beispielbilder online. Bei mir hat das mit den Bildimporten jetzt funktioniert.

https://www.shotokan-karate-dojo-neukir ... -v2.mbrext

Danke und Gruß

Neee - funzt immer noch nicht - ich bleib dran! Aber der Button - der ist drin

Hallo zusammen,
bin kläglich gescheitert. Das mit der Zusatzgrafik hab ich nicht hinbekommen. Je mehr "wir" verändert haben umso mehr ging kaputt. Ich habe die Zusatzgrafik herausgenommen. Der Rest sollte funktionieren. Habe denke ich alles getestet. Ist schade, aber ich denke das ist auch so ein schöner innovativer Block.
Ich wünsche Euch einen schönen Tag!

Bild

https://www.shotokan-karate-dojo-neukir ... -v3.mbrext

https://niederastroth.de/demo9/
Naja dann mach ich es mal wenn die KI keinen Plan hat

Aber den biete ich dann jetzt auch mal bei mir an

Natürlich mit Hubi als Ideen Geber

hi,

immer wieder toll wie Du das immer hinbekommst. Bin fast verzweifelt und hatte dann auch keine Lust mehr.
Schön das Du den dann fertig gemacht hast

Warum hat die KI das nicht hinbekommen - hat immer rumgemotzt das nur ein Import funktioniert und mir dabei alles andere geschossen. Egal - ist ein schöner Block geworden !!

Schönen Tach noch

Hubi,

KI kann nur logisch denken, nicht tricksen so wie der Niederastroth

Der Trick ist einfach auch das 3. Bild Mobirise als Hintergrundbild zu "verkaufen" aber heimlich über die anderen zu legen

Da kommt die KI eben nicht drauf, wenn du der das aber jetzt sagtst, wirst auch Du den Block hin bekommen

Da investiere ich jetzt keine Zeit mehr. Ich warte einfach bis Du das zum Download auf Deine Seite stellst

Auf die Idee mit dem 3. Hintergrundbild wäre ich in 100 Jahren nicht gekommen

btw: Ich hab gewusst das Du das angehst

So Hubi,

für Dich zuerst zum testen : https://www.niederastroth.de/3bild-header.mbrext

Hier das Video was den Header erklärt:

Mit allen Fixes die noch rein mussten

Sorry für die Bugs,

ich gelobe Besserung - toll verbessert

- wird dann auch runtergeladen von mir

Der nächste von mir wird besser

Schönen Tach noch!

Autsch

Mir ist ein Fehler unterlaufen - der Text muss natürlich über allen Bildern liegen. Das habe ich nun auch geändert.
So kann man das 3. Bild also auch rein kloppen, aber die Texte stehen immer über allen. Macht mehr Sinn denke ich.

Ist jetzt auch in der aktuellen mbrext so eingebaut

Sieht lustig aus : https://niederastroth.de/demo9/

Hubi,

ich hab mal aus deinem Header einen Monster Header gebaut

Schieber ohne Ende 3 Bilder mit Schatten auch in rund und schick schnack

Ist nur ein Spaß aber wer den haben will - kein Problem - Ich weiß ja wie man Bilder in Blöcke bekommt

https://niederastroth.de/demo10/

Hi, sieht wirklich mega aus - gibt-s den schon als download?

https://www.niederastroth.de/monster-block.mbrext

Hubi sag mir bitte ob du Platzhalterbilder hast beim Import

Und teste mal den Block hier: https://www.niederastroth.de/diagonal-header.mbrext

Sieht gut aus

Im Monster Block sind im Block selbst keine Platzhalter zu sehen - nur unterm Zahnrad die beiden ersten Hintergrundbilder. Bei den anderen ein Freiraum "Image not found". Nach dem Klick sind die aber super einzubauen!

Hab in meinem fehlerhaften Block noch ein wenig rumgespielt und einen zeitgesteuerten sanften Wechsel über opacity der Hintergrundbilder eingebaut - schaut auch klasse aus!

Aha OK danke, dann muss ich bei Hintergrund Bildern nachbessern, sind ja alles HG Bilder

https://www.niederastroth.de/3bilder_header.html

Deiner ist nun offizell bei mir zu Downloaden

Hallo Volker,

hab jetzt einfach mal diese Opacity-zeitschleife in Deinen Block eingebaut. Schaut wirklich toll aus finde ich wenn die Bilder sanft wechseln. Kannste gern übernehmen wenn Du willst. Ich mach keine extra mbrext draus, hab ja meinen Block

Die Zeitschleife kann man auch über einen Schalter deaktivieren - dann hat man halt wieder die alten Einstellungen.

Code: Alles auswählen

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

    <mbr-parameters>
        <header>Block-Einstellungen</header>
        <input type="checkbox" title="Full Screen" name="fullScreen">
        <input type="checkbox" title="Full Width" name="fullWidth" checked>
        <input type="range" inline title="Oben" name="paddingTop" min="0" max="10" value="10" condition="fullScreen == false">
        <input type="range" inline title="Unten" name="paddingBottom" min="0" max="10" value="10" condition="fullScreen == false">

        <header>Hintergrund (Parallax Schalter)</header>
        <fieldset type="background" name="bg">
            <input type="image" title="Bild" value="file:///C:/Users/huber/AppData/Local/Mobirise.com/Mobirise/projects/project-2026-04-16_081804/assets/images/eduardo-melendez-jetty-5988040-2000x1125.jpg" parallax selected>
            <input type="color" title="Farbe" value="#260a30">
            <input type="video" title="Video" value="https://www.youtube.com/watch?v=2Gg6Seob5Mg">
        </fieldset>

        <input type="checkbox" title="Overlay" name="overlay" checked>
        <input type="color" title="Farbe" name="overlayColor" value="#000000" condition="overlay">
        <input type="range" inline title="Deckkraft" name="overlayOpacity" min="0" max="1" step="0.1" value="0.5" condition="overlay">

        <header>Zweiter Hintergrund (Mix-Ebene)</header>
        <input type="checkbox" title="Zeige BG2" name="showBg2" checked>
        <input type="image" title="Bild 2" name="bg2Image" value="file:///C:/Users/huber/AppData/Local/Mobirise.com/Mobirise/projects/project-2026-04-16_081804/assets/images/krivitskiy-girl-6894042-2000x1525.jpg" condition="showBg2">
        <input type="range" inline title="Deckkraft" name="bg2Opacity" min="0" max="1" step="0.1" value="0.6" condition="showBg2">
        <input type="range" inline title="Verlauf" name="bg2Fade" min="0" max="100" value="29" condition="showBg2">
        <input type="range" inline title="Winkel" name="bg2Angle" min="0" max="360" value="132" condition="showBg2">

        <!-- NEU -->
        <header>Opacity Animation</header>
        <input type="checkbox" title="Animation aktiv" name="opacityAnim" checked>

        <header>Floating Image 1</header>
        <input type="checkbox" title="Bild 1 aktiv" name="showImg1">
        <input type="image" title="Datei 1" name="img1Src" value="file:///C:/Users/huber/AppData/Local/Mobirise.com/Mobirise/projects/project-2026-04-16_081804/assets/images/orangenes20osterei204-1024x1024.png" condition="showImg1">
        <input type="range" inline title="X (%)" name="i1X" min="0" max="100" value="40" condition="showImg1">
        <input type="range" inline title="Y (%)" name="i1Y" min="0" max="100" value="25" condition="showImg1">
        <input type="range" inline title="Breite (%)" name="i1W" min="5" max="100" value="18" condition="showImg1">
        <input type="range" inline title="Rundung" name="i1Rad" min="0" max="500" value="20" condition="showImg1">

        <header>Floating Image 2</header>
        <input type="checkbox" title="Bild 2 aktiv" name="showImg2">
        <input type="image" title="Datei 2" name="img2Src" value="file:///C:/Users/huber/AppData/Local/Mobirise.com/Mobirise/projects/project-2026-04-16_081804/assets/images/gerhard-und-stef-1-458x405.png" condition="showImg2">
        <input type="range" inline title="X (%)" name="i2X" min="0" max="100" value="65" condition="showImg2">
        <input type="range" inline title="Y (%)" name="i2Y" min="0" max="100" value="20" condition="showImg2">
        <input type="range" inline title="Breite (%)" name="i2W" min="5" max="100" value="17" condition="showImg2">
        <input type="range" inline title="Rundung" name="i2Rad" min="0" max="500" value="20" condition="showImg2">

        <header>Floating Image 3</header>
        <input type="checkbox" title="Bild 3 aktiv" name="showImg3">
        <input type="image" title="Datei 3" name="img3Src" value="file:///C:/Users/huber/AppData/Local/Mobirise.com/Mobirise/projects/project-2026-04-16_081804/assets/images/20241011-105623-815x676.jpg" condition="showImg3">
        <input type="range" inline title="X (%)" name="i3X" min="0" max="100" value="8" condition="showImg3">
        <input type="range" inline title="Y (%)" name="i3Y" min="0" max="100" value="11" condition="showImg3">
        <input type="range" inline title="Breite (%)" name="i3W" min="5" max="100" value="21" condition="showImg3">
        <input type="range" inline title="Rundung" name="i3Rad" min="0" max="500" value="20" condition="showImg3">

        <header>Schatten  Texte</header>
        <input type="color" title="Schatten Farbe" name="shColor" value="#000000">
        <input type="range" inline title="Schatten Stärke" name="shBlur" min="0" max="100" value="25">
        <input type="range" inline title="Titel X" name="tX" min="-500" max="500" value="0">
        <input type="range" inline title="Titel Y" name="tY" min="-300" max="300" value="0">
        <input type="range" inline title="Titel Größe" name="tSize" min="1" max="12" step="0.1" value="5">
        <input type="range" inline title="Button X" name="bX" min="-500" max="500" value="0">
        <input type="range" inline title="Button Y" name="bY" min="-300" max="300" value="45">
        <input type="checkbox" title="Zeige Buttons" name="showButtons" checked>
    </mbr-parameters>

    <div class="mbr-fallback-image" mbr-if="bg.type == 'video'"></div>

    <div class="bg2-layer" mbr-if="showBg2"></div>
    <div class="mbr-overlay" mbr-if="overlay && bg.type !== 'color'" style="opacity: {{overlayOpacity}}; background-color: {{overlayColor}};"></div>
    
    <div class="f-img i1" mbr-if="showImg1"></div>
    <div class="f-img i2" mbr-if="showImg2"></div>
    <div class="f-img i3" mbr-if="showImg3"></div>

    <div class="content-wrapper" mbr-class="{'container': !fullWidth, 'container-fluid': fullWidth}">
        <div class="row justify-content-center text-center">
            <div class="col-12">
                <h1 class="mbr-section-title main-title"><b>Monster Header</b></h1>
                <p class="mbr-text main-text">Parallax, Schatten  3 Bilder</p>
                <div class="mbr-section-btn main-btn" mbr-if="showButtons">
                    <a class="btn btn-primary" href="#">Action!</a>
                </div>
            </div>
        </div>
    </div>

</section>

Code: Alles auswählen

section {
  position: relative;
  overflow: hidden;
  background-position: 50% 50%;
  background-size: cover;
}
& when not (@fullScreen) {
  padding-top: (@paddingTop * 1rem);
  padding-bottom: (@paddingBottom * 1rem);
}
& when (@bg-type = "color") {
  background-color: @bg-value;
}
& when (@bg-type = "image") {
  background-image: url(@bg-value);
}
.mbr-fallback-image {
  display: block;
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  & when (@bg-type = 'video') {
    background-image: url(@fallBackImage);
  }
}
.bg2-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: url(@bg2Image);
  background-size: cover;
  background-position: center;
  opacity: @bg2Opacity;
  -webkit-mask-image: linear-gradient(@bg2Angle * 1deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) (@bg2Fade * 1%), rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(@bg2Angle * 1deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) (@bg2Fade * 1%), rgba(0, 0, 0, 0) 100%);
}
.mbr-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
}
.f-img {
  position: absolute;
  z-index: 3;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  aspect-ratio: (1 / 1);
  filter: drop-shadow(0 0 unit(@shBlur, px) @shColor);
}
.i1 {
  width: unit(@i1W, %);
  left: unit(@i1X, %);
  top: unit(@i1Y, %);
  background-image: url(@img1Src);
  border-radius: unit(@i1Rad, px);
}
.i2 {
  width: unit(@i2W, %);
  left: unit(@i2X, %);
  top: unit(@i2Y, %);
  background-image: url(@img2Src);
  border-radius: unit(@i2Rad, px);
}
.i3 {
  width: unit(@i3W, %);
  left: unit(@i3X, %);
  top: unit(@i3Y, %);
  background-image: url(@img3Src);
  border-radius: unit(@i3Rad, px);
}
.content-wrapper {
  position: relative;
  z-index: 10;
}
.main-title {
  transform: translate(unit(@tX, px), unit(@tY, px));
  font-size: unit(@tSize, rem) !important;
  color: #ffffff;
  position: relative;
}
.main-btn {
  transform: translate(unit(@bX, px), unit(@bY, px));
  position: relative;
}
h1, p {
  color: #ffffff;
}
@media (max-width: 767px) {
  .f-img {
    width: 25% !important;
    position: relative !important;
    display: inline-block !important;
    margin: 10px;
    transform: none !important;
  }
  .main-title, .main-btn {
    transform: none !important;
    font-size: 2rem !important;
  }
}
@keyframes opacityLoop {
  0% {
    opacity: 0.1;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.1;
  }
}
& when (@opacityAnim) {
  .bg2-layer {
    animation: opacityLoop 10s infinite ease-in-out;
  }
}
& when (@opacityAnim = false) {
  .bg2-layer {
    animation: none;
  }
}

Genacht zamme!

Wie da jetzt der alte Button wieder reingekommen ist - keine Ahnung - hab ich nicht reinkopiert

Bushisan hat geschrieben: Do 23. Apr 2026, 00:11 Wie da jetzt der alte Button wieder reingekommen ist - keine Ahnung - hab ich nicht reinkopiert

Dann frag mal Deine KI

Mobirise-Tutorials.com

Opacity stack

Opacity stack

Re: Opacity stack

Re: Opacity stack

Re: Opacity stack

Re: Opacity stack

Re: Opacity stack

Re: Opacity stack

Re: Opacity stack

Re: Opacity stack

Re: Opacity stack

Re: Opacity stack

Re: Opacity stack

Re: Opacity stack

Re: Opacity stack

Re: Opacity stack

Re: Opacity stack

Re: Opacity stack

Re: Opacity stack

Re: Opacity stack

Re: Opacity stack