Mobirise Block Tutorial

Wie ein Mobirise-Block aufgebaut ist

Jeder Block besteht aus genau zwei Dateien. HTML definiert Struktur und Parameter, CSS/LESS definiert das Aussehen – und beide kommunizieren über Variablennamen.

HTML

Was hier passiert

Parameter mit <mbr-parameters> deklarieren
Elemente anzeigen/verstecken mit mbr-if
CSS-Klassen dynamisch setzen mit mbr-class
Styles inline setzen mit mbr-style
Texte editierbar machen mit data-app-selector

CSS / LESS

Was hier passiert

Parameter als @variablenname empfangen
Bedingte Styles mit & when (@var = wert)
Animationen mit @keyframes definieren
Klassen stylen die per mbr-class gesetzt werden
Verschachteltes LESS (kein normales CSS!)

💡

Die Brücke zwischen HTML und CSS ist immer der name-Attribut im Parameter. Ein <input name="myAnim"> im HTML wird im CSS zu @myAnim.

HTML – Die wichtigsten Regeln

Was du im HTML-Block wissen musst, bevor du etwas änderst:

Attribut / Tag	Wozu
<mbr-parameters>	Alles hier drin erscheint als Panel rechts in Mobirise. Reihenfolge = Reihenfolge im Panel.
<header>Text</header>	Überschrift im Parameter-Panel (nur visuell, kein HTML-Heading).
name="xyz"	Der Name der Variable. Im CSS dann als `@xyz` verfügbar.
mbr-if="showTitle"	Element wird nur gerendert wenn der Parameter `showTitle` = true. Nur innerhalb des Containers verwenden!
mbr-class="{...}"	CSS-Klassen werden dynamisch per JSON-Objekt gesetzt. Key = Klassenname, Value = Bedingung.
mbr-style="{...}"	Inline-Styles dynamisch setzen. Wert kommt direkt aus dem Parameter.
data-app-selector	Sagt Mobirise welches Element im Editor klickbar/editierbar ist.
condition="..."	Parameter im Panel nur anzeigen wenn Bedingung erfüllt – z.B. `condition="animEffect != 'none'"`.

⚠️

mbr-if nur im Container! Auf divs direkt in der <section> (außerhalb des Containers) funktioniert mbr-if nicht. Diese müssen immer im DOM sein und per CSS ein-/ausgeblendet werden.

CSS / LESS – Die wichtigsten Regeln

Mobirise nutzt LESS, kein reines CSS. Das sieht fast gleich aus, hat aber wichtige Unterschiede:

Syntax	Bedeutung
@variablenname	Der Wert des Parameters mit diesem Namen aus dem HTML. Automatisch verfügbar.
& when (@var = 'wert')	Block wird nur zu CSS kompiliert wenn die Bedingung stimmt. Für Checkboxen: `@showGrain = true`
& when not (@fullScreen)	Negierung – Block gilt wenn Variable falsy ist.
@bg-type, @bg-value	Spezielle Variablen vom `fieldset type="background"`. Automatisch gesetzt.
@keyframes name { }	Animationen ganz normal definieren – gleich wie CSS.
.klasse { & when ... }	Verschachtelung möglich – Regeln innerhalb einer Klasse bedingt setzen.

✅

Merkhilfe: Im HTML deklarierst du was es gibt. Im CSS definierst du wie es aussieht. Die Verbindung ist immer der name-Wert im Parameter = @name im CSS.

Praxis-Beispiel

Ziel: Konfigurierbaren Animationseffekt für den Titel

Wir fügen dem Standard-Header1-Block einen Dropdown hinzu, mit dem der Nutzer in Mobirise zwischen verschiedenen Animationen wählen kann. Dazu kommen Dauer-Slider und ein Texteffekt-Dropdown.

Das braucht Änderungen in beiden Dateien – hier genau warum welche wo hinkommt.

Schritt 1 – Parameter im HTML deklarieren

Zuerst sagst du Mobirise: "Es gibt diese neuen Einstellungen." Das passiert ausschließlich im <mbr-parameters> Block im HTML.

Was wir brauchen

Für eine konfigurierbare Animation brauchen wir drei Parameter:

Ein Dropdown zum Wählen des Effekts (fadeIn, zoom, typewriter, ...)
Einen Slider für die Animationsdauer in Sekunden
Ein Dropdown für einen Texteffekt (shadow, glow)

HTML – Parameter hinzufügen

Diese Zeilen kommen in <mbr-parameters>, nach dem Background-Bereich:

HTML – <mbr-parameters> HTML

<!-- Vorhandener Code (nicht ändern) -->
<input type="checkbox" title="Overlay" name="overlay" ...>
<input type="color" title="Overlay Color" name="overlayColor" ...>
<input type="range" title="Opacity" name="overlayOpacity" ...>

<!-- NEU: Animation-Bereich -->
<header>✨ Animation</header>

<!-- Dropdown: Effekt wählen -->
<!-- name="animEffect" → im CSS als @animEffect verfügbar -->
<select title="Effekt" name="animEffect">
    <option value="none" selected>Kein Effekt</option>
    <option value="fadeInUp">Fade In Up</option>
    <option value="fadeInRight">Fade In Right</option>
    <option value="zoomIn">Zoom In</option>
    <option value="typewriter">Typewriter</option>
</select>

<!-- Slider: Dauer 0.5s bis 5s -->
<!-- "inline" = Slider und Label auf einer Zeile -->
<input type="range" inline title="Dauer (s)" name="animDuration"
       min="0.5" max="5" step="0.5" value="1">

<!-- Dropdown: Texteffekt -->
<select title="Texteffekt" name="textEffect">
    <option value="none" selected>Kein Effekt</option>
    <option value="shadow">Shadow</option>
    <option value="glow">Glow</option>
</select>

<!-- Farbwähler nur anzeigen wenn Effekt gewählt -->
<!-- condition= blendet den Parameter im Panel aus/ein -->
<input type="color" title="Effekt-Farbe" name="effectColor"
       value="#e43f3f" condition="textEffect != 'none'">

💡

Warum ins HTML? Parameter müssen im HTML stehen weil Mobirise sie beim Laden des Blocks auswertet und das Panel daraus baut. Im CSS kann man nur lesen, nicht deklarieren.

Schritt 2 – Das Titel-Element anpassen

Jetzt verbinden wir die Parameter mit dem <h1> Tag. Das h1 bekommt mbr-class und mbr-style – zwei der wichtigsten Mobirise-Attribute.

Vorher – das originale h1

HTML – original HTML

<h1 class="mbr-section-title mbr-fonts-style mb-3"
    data-app-selector=".mbr-section-title"
    mbr-theme-style="display-1"
    mbr-if="showTitle">
    <b>Create your first website</b>
</h1>

Nachher – mit Animation-Klassen und CSS-Variablen

HTML – erweitert HTML

<h1 class="mbr-section-title mbr-fonts-style mb-3 main-title"
    data-app-selector=".mbr-section-title"
    mbr-theme-style="display-1"
    mbr-if="showTitle"

        <!-- mbr-style: Setzt CSS Custom Property für Animdauer -->
    <!-- So kann CSS die Variable @animDuration aus dem Slider lesen -->
    mbr-style="{'--anim-duration': animDuration + 's'}"

    <!-- mbr-class: Setzt CSS-Klassen basierend auf dem Dropdown-Wert -->
    <!-- Wenn animEffect == 'fadeInUp' → Klasse "anim-fadeInUp" wird gesetzt -->
    mbr-class="{
        'anim-fadeInUp':    animEffect == 'fadeInUp',
        'anim-fadeInRight': animEffect == 'fadeInRight',
        'anim-zoomIn':      animEffect == 'zoomIn',
        'anim-typewriter':  animEffect == 'typewriter',
        'effect-shadow':    textEffect == 'shadow',
        'effect-glow':      textEffect == 'glow'
    }">
    <b>Create your first website</b>
</h1>

✅

Das Prinzip von mbr-class: Es ist ein JSON-Objekt. Der Key ist der CSS-Klassenname, der Value ist eine JavaScript-Bedingung die true oder false ergibt. Mobirise wertet das live aus.

Schritt 3 – Animationen im CSS definieren

Im CSS definieren wir jetzt was die Klassen anim-fadeInUp, anim-zoomIn etc. tatsächlich machen. Mobirise übergibt die Parameter automatisch als LESS-Variablen.

Basis-Klasse: Titel ausblenden bis Animation startet

CSS / LESS CSS

/* Titel startet unsichtbar – die Animation blendet ihn ein */
.main-title {
  opacity: 0;
  word-wrap: break-word;
}

Gemeinsame Basis für alle Animations-Klassen

CSS / LESS CSS

/* Alle anim-* Klassen teilen diese Properties */
/* --anim-duration kommt aus mbr-style im HTML! */
.anim-fadeInUp,
.anim-fadeInRight,
.anim-zoomIn {
  animation-duration: var(--anim-duration) !important;
  animation-fill-mode: forwards !important;  /* bleibt am Endpunkt */
  animation-timing-function: ease-out !important;
  opacity: 0;
}

Die einzelnen Animationen

CSS / LESS CSS

/* Fade In Up – kommt von unten */
.anim-fadeInUp { animation-name: fadeInUp; }
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Fade In Right – kommt von rechts */
.anim-fadeInRight { animation-name: fadeInRight; }
@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Zoom In – kommt klein herein */
.anim-zoomIn { animation-name: zoomIn; }
@keyframes zoomIn {
  from { opacity: 0; transform: scale(0.6); }
  to   { opacity: 1; transform: scale(1); }
}

/* Typewriter – eigene Logik: Text wird aufgetippt */
.anim-typewriter {
  border-right: .15em solid currentColor;  /* blinkender Cursor */
  white-space: nowrap;
  overflow: hidden;
  animation:
    typing var(--anim-duration) steps(40, end),
    blink-caret 0.75s step-end infinite;
  animation-fill-mode: forwards !important;
  max-width: 100%;
  opacity: 1;  /* Typewriter braucht opacity: 1 von Anfang an! */
}
@keyframes typing {
  from { width: 0; }
  to   { width: 100%; }
}
@keyframes blink-caret {
  from, to { border-color: transparent; }
  50%      { border-color: currentColor; }
}

Texteffekte mit @effectColor

CSS / LESS CSS

/* @effectColor = Wert aus dem color-Picker im Panel */

.effect-shadow {
  text-shadow: 4px 4px 8px @effectColor;
}

.effect-glow {
  text-shadow:
    0 0 10px @effectColor,
    0 0 20px @effectColor,
    0 0 40px @effectColor;
}

💡

Warum ins CSS? Animationen und visuelle Effekte gehören ins CSS weil sie reines Styling sind. Das HTML setzt nur die Klasse (über mbr-class) – was die Klasse bedeutet, definiert allein das CSS.

Schritt 4 – So sieht das Ergebnis aus

Nach dem Einfügen der Änderungen erscheint im Mobirise-Panel ein neuer Bereich "✨ Animation" mit drei Einstellungen:

Live Preview

Create your first website

Titel kommt mit fadeInRight rein (1s) + Glow-Effekt in rot

Was im Panel erscheint

Parameter	Art	Was er steuert
animEffect	Dropdown	Welche CSS-Klasse auf h1 gesetzt wird → welche @keyframes-Animation läuft
animDuration	Slider 0.5–5	Wird als `--anim-duration` CSS-Variable gesetzt, @keyframes liest sie
textEffect	Dropdown	Setzt effect-shadow oder effect-glow Klasse
effectColor	Farbwähler	Nur sichtbar wenn textEffect != none. Wird als @effectColor ins CSS gegeben

Referenz – Parameter-Typen im Überblick

Alle verfügbaren Input-Typen in <mbr-parameters> HTML

<!-- Checkbox → @name = true/false -->
<input type="checkbox" title="Full Screen" name="fullScreen" checked>

<!-- Range Slider → @name = Zahl -->
<input type="range" inline title="Dauer" name="animDuration"
       min="0.5" max="5" step="0.5" value="1">

<!-- Select Dropdown → @name = gewählter option-value -->
<select title="Effekt" name="animEffect">
    <option value="none" selected>Kein</option>
    <option value="fadeInUp">Fade In Up</option>
</select>

<!-- Color Picker → @name = Hex-Farbe -->
<input type="color" title="Farbe" name="myColor" value="#ff0000">

<!-- Image Picker → @name = Bildpfad -->
<input type="image" title="Bild" name="myImage">

<!-- Background Fieldset (Sondertyp: setzt @bg-type + @bg-value) -->
<fieldset type="background" name="bg" parallax>
    <input type="image" title="Image" selected>
    <input type="color" title="Color">
    <input type="video" title="Video">
</fieldset>

<!-- Condition: Parameter nur anzeigen wenn Bedingung true -->
<input type="color" name="effectColor"
       condition="textEffect != 'none'">

Häufige Fehler und Lösungen

❌ mbr-if auf direktem Section-Kind

FalschFEHLER

<section>
  <!-- Das funktioniert NICHT! -->
  <div class="grain" mbr-if="showGrain"></div>
  <div class="container">...</div>
</section>

Richtig – immer rendern, per CSS ein-/ausblendenLÖSUNG

<!-- HTML: div immer im DOM -->
<div class="grain"></div>

/* CSS: per LESS-Variable ein-/ausblenden */
.grain { display: none; }
& when (@showGrain = true) {
  .grain { display: block; }
}

❌ Editierbarer Text ohne data-app-selector

Falsch / RichtigFEHLER → FIX

<!-- Nicht editierbar in Mobirise: -->
<span>Mein Text</span>

<!-- Editierbar in Mobirise: -->
<span data-app-selector=".mein-element"
      class="mein-element"
      contenteditable="true">Mein Text</span>

❌ Typewriter mit opacity: 0

Typewriter braucht opacity: 1!MERKEN

/* Alle anderen Animationen starten mit opacity: 0 */
.anim-fadeInUp { opacity: 0; ... }

/* Typewriter NICHT – sonst sieht man nix */
.anim-typewriter {
  opacity: 1; /* ← muss 1 sein! */
  overflow: hidden;
  white-space: nowrap;
  animation: typing var(--anim-duration) steps(40, end);
}

Wie baut man eineneigenen Block?

Wie ein Mobirise-Block aufgebaut ist

Was hier passiert

Was hier passiert

HTML – Die wichtigsten Regeln

CSS / LESS – Die wichtigsten Regeln

Ziel: Konfigurierbaren Animationseffekt für den Titel

Schritt 1 – Parameter im HTML deklarieren

Was wir brauchen

HTML – Parameter hinzufügen

Schritt 2 – Das Titel-Element anpassen

Vorher – das originale h1

Nachher – mit Animation-Klassen und CSS-Variablen

Schritt 3 – Animationen im CSS definieren

Basis-Klasse: Titel ausblenden bis Animation startet

Gemeinsame Basis für alle Animations-Klassen

Die einzelnen Animationen

Texteffekte mit @effectColor

Schritt 4 – So sieht das Ergebnis aus

Was im Panel erscheint

Referenz – Parameter-Typen im Überblick

Häufige Fehler und Lösungen

❌ mbr-if auf direktem Section-Kind

❌ Editierbarer Text ohne data-app-selector

❌ Typewriter mit opacity: 0

Wie baut man einen
eigenen Block?