Mobirise Tutorials

Tutorial - VN Bildlayer

Das Werkzeug „VN Bildlayer“ wurde von Volker Niederastroth mit mir gemeinsam entwickelt, mit dem sich Texte direkt in Mobirise als Layer über Bildern gestalten lassen.

Meine hier gezeigte Version ist vom 28. August 2026.

Diese Anwendung findet ihr zum kostenlosen Download in der VN Block Galerie 

Such dort nach "VN Bildlayer" in der Kategorie "VN Tools".

Nach dem Import der Anwendung findet ihr die Anwendung im "VN Menü", das es seit dem 20. August 2026 zur vereinfachten Darstellung von den Anwendungen von Volker Niederastroth gibt.

Ich beschreibe dieses Menü ausführlich auf meiner Seite zum VN Menü 

Der Bildlayer erscheint beim Überfahren mit der Maus und bei Touchgeräten beim Antippen. Er passt sich allen Bildschirmgrößen an, da alle Maße prozentual berechnet werden. Auch Bilder mit abgerundeten Ecken werden korrekt erkannt. Der Text bleibt im Builder wie gewohnt per Doppelklick bearbeitbar. Ausrichtung, Farben und Dauer sind im VN‑Menü einstellbar. Alternativ kann der Layer dauerhaft sichtbar sein, statt nur beim Überfahren mit der Maus. Das Bild bleibt klickbar; die VN‑Lightbox öffnet sich weiterhin wie gewohnt mit dem zweiten Touch am Handy.

Pro Projekt könnt ihr jeweils nur dieselben Einstellungen verwenden — zum Beispiel entweder bei Mouseover (beim Überfahren mit der Maus) oder dauerhaft sichtbar. Die Texte hingegen könnt ihr in jedem <div> Container individuell anpassen.

Auf der Arbeitsseite erscheint der Layer zur Bearbeitung als Textcontainer, meist unterhalb des Bildes. Dadurch kann sich das dort dargestellte Layout verschieben. Nach der Veröffentlichung passt es sich jedoch wie gewohnt wieder an.

In der Anwendung können zahlreiche Einstellungen vorgenommen werden, etwa die Position des Textes, die Abdunkelung der Ebene oder ob diese dauerhaft statt nur beim Überfahren mit der Maus angezeigt werden soll.

Kopiert den Code aus dem "VN Bildlayer" in den "Code-Editor" jedes Blocks, in dem ihr ihn anwenden wollt. Außerdem muss die rot markierte CSS-Klasse jedem Bild hinzugefügt werden, das einen Layer erhalten soll. Wenn ihr keinen Button wollt, dann löscht ihr einfach den untersten <div> Container vom Code mit der class="mbr-section-btn".

<!-- VN-Bildlayer
*       Die Klasse an das <img>-Tag schreiben:
*       <img src="..." class="vn-layer-bild">
*       Zeile mit dem Knopf bei Bedarf löschen
-->
<div class="vn-layer-inhalt">
  <h4>Überschrift</h4>
  <p>Beschreibung</p>
  <div class="mbr-section-btn" mbr-buttons mbr-theme-style="display-4">
    <a href="#" class="btn btn-primary">Mehr</a>
  </div>
</div>

Lest dazu auch die beim Import gezeigte Splash.html