Mobirise Tutorials

CMS for Mobirise

CMS Content Management System für Mobirise

CMS Beispiele Tutorial CMS Lightbox Galerie Translate 

Übersicht meiner CMS Bereiche

  • CMS Teil 1
    Text und Beispiele im CMS erstellt
  • CMS Teil 2
    Video im CMS erstellt
  • CMS Teil 3
    Lightbox Galerie im CMS erstellt
  • Tutorial
    Download und Tutorial zum MiniCMS für Mobirise
  • Lightbox
    Einbau und Verwendung der automatischen Lightbox

CMS Beispiel - Teil 1(3) up 

Admin  Im Oktober 2025

Tutorial up 

Download MiniCMS von meinem Server:

MiniCMS.zip vom 25. Oktober 2025 


Alternativer Download von Volkers Server:

www.niederastroth.de/minicms.7z 



Entpackt das ZIP-Archiv minicms.zip  oder das ZIP-Archiv von Volker minicms.7z mittels Doppelklick.


Folgende Verzeichnisse sind vorhanden:

admin
uploads

Folgende Dateien sind vorhanden:

cms_content.php
config.php


Die vier übrigen Dateien im Download von Volker enthalten lediglich Hinweise dazu, an welchen Stellen die referenzierten Lightbox‑Skripte, die CSS‑Anweisungen und die Anbindung an das Mobirise‑CMS eingefügt werden müssen. Diese Hinweise sind in meinem nachfolgenden Tutorial beschrieben. Sie sind nicht für den Server bestimmt; daher habe ich die Hinweisdateien aus dem Download von meinem Server entfernt.

Die SQLite Datenbank wird erst nach dem ersten Eintrag automatisch im Stammverzeichnis (Root) des Projekts erstellt.

Kopiert nun die beiden Verzeichnisse sowie die beiden oben genannten Dateien in das Stammverzeichnis eures Mobirise‑Projekts auf dem Server.

Ruft das Verzeichnis "admin" über die URL auf. Dies ist auch der zukünftige Link zum Administratorbereich:

DeineDomain.de/admin/

Das Login-Fenster des TinyMCE CMS-Editors öffnet sich. Gebt sowohl als Benutzername als auch als Passwort jeweils "admin" ein. Danach öffnet sich das Dashboard. Tragt sofort eure gewünschten Zugangsdaten ein: Klickt dazu oben rechts auf "Admin ändern" und gebt den neuen Benutzernamen sowie das Passwort ein. Anschließend werdet ihr ausgeloggt und müsst euch neu anmelden.

Macht euch zunächst mit diesem Editor vertraut, damit ihr alle Funktionen des TinyMCE kennenlernt und sicher bedienen könnt. Über das Code-Symbol (< >) lässt sich außerdem der Quelltext direkt bearbeiten — das ist besonders praktisch, um beispielsweise Bootstrap- oder Mobirise‑Klassen einzufügen. Siehe meinen Screenshot von dem Dashboard unten.

Wichtig: Tragt oben links im Feld „Inhalt‑ID“ die ID ein, unter der dieser Inhalt in einem beliebigen Mobirise‑Block angezeigt werden soll. Gebt der ID am Ende eine fortlaufende Ziffer (für den ersten Block …1, für einen weiteren Block derselben Seite …2 usw.). Nach einem Klick auf „Speichern“ werden die so sortierten Inhalte in der Übersicht unten angezeigt und lassen sich später über den Bleistift‑Button ✏️ wieder in den Editor laden und weiterbearbeiten. Für eine andere Seite vergebt ihr einen neuen Namen nach demselben Prinzip – wieder mit einer fortlaufenden Ziffer am Ende. Dadurch wird ein neuer Tab in der Übersicht unten erstellt.

Im Screenshot des Mobirise-Code-Editors habe ich die Einbindung rot markiert. Im HTML-Editor ist das <div> mit der oben beschriebenen data-id zu sehen – in diesem Beispiel sieht es folgendermaßen aus:

<!-- Start CMS Teil-1 -->
<div class="cms-content" data-id="Tutorials4-Bereich1"></div>
<!-- End CMS Teil-1 -->

Bitte berücksichtigt bei der Erstellung der CMS-Bereiche, dass die Inhalte weder in der Arbeitsansicht von Mobirise noch nach dem lokalen Publizieren sichtbar sind. Da hierfür die Skriptsprache PHP verwendet wird, sind die Inhalte erst online einsehbar.

Die CSS habe ich bereits oben im CMS‑Bereich beschrieben. Damit begrenze ich die Bildgrößen, stelle die Schriftfarbe entsprechend meiner Mobirise‑Seite ein, verkleinere die Schrift und zentriere das Logo auf mobilen Geräten. Das CSS ist natürlich flexibel einsetzbar und kann auch direkt im TinyMCE‑Editor des CMS eingefügt werden.

Im Einbau‑Block des CMS habe ich dem großen Bild vom Sonnenuntergang noch dieses zusätzliche CSS hinzugefügt, das das Bild auf 90 % der Displaybreite begrenzt wird, einen Schatten hinzufügt und beim Überfahren mit der Maus eine Animation abspielt. Diese Class habe ich direkt im TinyMCE-Editor an das <img> Tag geschrieben:

.myshadow {
  box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.4);
  transition: all 0.5s linear;
  width: 800px;
  height: auto;
  max-width: 90%;
}
.myshadow:hover {
  box-shadow: 25px 25px 25px 0px rgba(0, 0, 0, 0.4);
  transform: scale(1.05);
  cursor: pointer;
}



Für den Einbau der automatischen Lightbox findet ihr meine Anleitungen mit den Skripten  unten.

Dashboard

Dashboard vom CMS mit dem TinyMCE Editor

Code Editor

CMS Einbau im Code Editor

Head-Code - In den Seiteneinstellungen im Bereich "Inside <head> code:" einfügen.
<!-- Lightbox für das CMS -->

<link href="https://cdn.jsdelivr.net/npm/glightbox/dist/css/glightbox.min.css" rel="stylesheet">

<script src="https://cdn.jsdelivr.net/npm/glightbox/dist/js/glightbox.min.js"></script>
CSS-Code optional - In den Seiteneinstellungen im Bereich "Inside <head> code:" unter dem <head> Code von oben einfügen.
<!-- CSS optional zur kleineren Darstellung des Lightbox-Containers -->

<style>

  /* --------------------------------------------

     GLightbox – kompakte, transparente Caption

     -------------------------------------------- */



  /* Hintergrund der Caption vollständig transparent halten */

  .glightbox-container .gdesc,

  .glightbox-clean .gdesc,

  .glightbox-container .gslide-desc,

  .glightbox-clean .gslide-desc {

    background: transparent !important;

    backdrop-filter: none !important;

    border: 0 !important;

    box-shadow: none !important;

    /* keine margin-Änderung – Position bleibt wie vom Layout vorgesehen */

  }



  /* Innenabstand klein halten und Höhe begrenzen (ca. 24px) */

  .glightbox-container .gdesc-inner,

  .glightbox-clean .gdesc-inner {

    padding: 2px 12px !important;   /* schmaler Balken */

    max-height: 24px !important;    /* Zielhöhe */

    overflow: hidden !important;    /* Überlauf verbergen */

  }



  /* Caption-Text: weiß, eine Zeile, Ellipsis

     WICHTIG: 50px Abstand unten aus dem JS hier neutralisieren */

  .glightbox-container .gslide-title,

  .glightbox-container .gslide-description {

    color: #fff !important;

    /* margin: 0;  (nicht gesetzt, wird durch folgende Regeln ersetzt) */

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

    line-height: 24px !important;   /* vertikal kompakt */

    background-color: transparent;

    margin-bottom: 0 !important;    /* <-- überschreibt die 50px aus dem JS */

  }



  /* Titel optional leicht hervorheben */

  .glightbox-container .gslide-title {

    font-weight: 600;

    margin-right: .5em;

  }



  /* --------------------------------------------

     Gesamten (Bild + Caption) Block kleiner machen

     Ziel: 90% der Bildschirmhöhe, nicht bis ganz oben kleben

     -------------------------------------------- */



  /* Die innere Box (Bild + Caption) auf 90vh begrenzen und mittig halten */

  .glightbox-container .ginner-container {

    height: auto !important;        /* 100vh aus der Lib aufheben */

    max-height: 90vh !important;    /* Zielgröße: 90% der Viewport-Höhe */

    display: flex !important;

    flex-direction: column !important;

    justify-content: center !important; /* vertikale Zentrierung der Einheit */

    align-items: center !important;

    margin: auto !important;        /* zentriert innerhalb des Overlays */

    box-sizing: border-box !important;

    padding: 12px 0 !important;     /* etwas Luft oben/unten */

  }



  /* Medien innerhalb der 90vh halten (Platz für ~eine Caption-Zeile einkalkulieren) */

  .glightbox-container .gslide-media img,

  .glightbox-container .gslide-media video,

  .glightbox-container .gslide-media iframe {

    max-height: calc(90vh - 24px) !important;  /* 24px für Caption-Zeile */

    width: auto !important;

    height: auto !important;

    object-fit: contain !important;

    display: block !important;

  }



  /* --------------------------------------------

     NEU: Optionale, sanft abgerundete Ecken für Bilder

     (fixer Pixelwert vermeidet „ovale“ Ecken bei Hoch-/Querformat)

     -------------------------------------------- */

  .glightbox-container .gslide-media img {

    border-radius: 20px !important;  /* sanfte Rundung, gleichmäßig in allen Formaten */

    overflow: hidden !important;     /* verhindert sichtbare Überstände */

  }



  /* --------------------------------------------

     Mobile-Optimierung (≤ 500px):

     Caption direkt unter das Bild (nicht am unteren Rand fixiert)

     -------------------------------------------- */

  @media (max-width: 500px) {

    .glightbox-mobile .glightbox-container .gslide-description,

    .glightbox-mobile .glightbox-container .gdesc {

      position: static !important;   /* aus der Bottom-Positionierung lösen */

      bottom: auto !important;

      left: auto !important;

      right: auto !important;

      transform: none !important;

      width: 100% !important;

      margin: 0 !important;

      padding: 0 12px !important;

    }



    /* Kleiner, definierter Abstand zwischen Bild und Caption */

    .glightbox-container .gslide-media {

      margin-bottom: 8px !important;

    }

  }

</style>

JavaScript-Code (Tommy) - Anzeige Lightbox-Bilder pro Block mit Beschriftung vom ALT Text. In den Seiteneinstellungen im Bereich "End of <body> code:" einfügen.
Hier ist eine Bildzählung eingebaut. Wer sie deaktivieren möchte, setzt in Zeile 7 die Variable von "true" auf "false": const ENABLE_LIGHTBOX_COUNT = false;
<!-- Lightbox-Styles und Script pro Mobirise-Block -->

<script>

    // AJAX-CMS + Lightbox-Integration

    document.addEventListener('DOMContentLoaded', () => {



      // OPTIONAL: Bildzählung "Index (Total) - " vor die Caption setzen (pro Galerie/Block)

      const ENABLE_LIGHTBOX_COUNT = true; // <- auf false setzen, um die Zählung zu deaktivieren



      // NEU: Hilfsfunktion für optionale Nummerierung

      function applyNumberingForBlock(blockRoot, galleryId) {

        if (!ENABLE_LIGHTBOX_COUNT) return;



        const PREFIX_RE = /^\s*\d+\s*\(\d+\)\s*-\s*/;

        // Alle Lightbox-Links dieses Blocks / dieser Galerie einsammeln (DOM-Reihenfolge = Reihenfolge)

        const sel = '.lightbox[data-gallery="' + galleryId.replace(/"/g, '\\"') + '"]';

        const anchors = Array.from(blockRoot.querySelectorAll(sel));

        const total = anchors.length;

        if (!total) return;



        anchors.forEach((a, idx) => {

          // Basis-Titel ermitteln (entweder aus data-title oder alt), evtl. vorhandenes Präfix entfernen

          let base = a.getAttribute('data-title-base');

          if (!base) {

            const img = a.querySelector('img');

            const raw = a.getAttribute('data-title') || (img ? img.getAttribute('alt') : '') || '';

            base = raw.replace(PREFIX_RE, '');

            a.setAttribute('data-title-base', base);

          }

          const composed = (idx + 1) + ' (' + total + ')' + (base ? ' - ' + base : '');

          a.setAttribute('data-title', composed);

        });

      }



      // NEU: Lightbox-Caption-Styling per CSS (dynamisch einfügen) – transparent, ~24px hoch, weißer Text

      (function injectLightboxCaptionStyles() {

        const css = `

          /* NEU: Hintergrund der Caption vollständig transparent halten (alle relevanten Container) */

          .glightbox-container .gdesc,

          .glightbox-clean .gdesc,

          .glightbox-container .gslide-desc,

          .glightbox-clean .gslide-desc {

            background: transparent !important;

            backdrop-filter: none !important;

            border: 0 !important;

            box-shadow: none !important;

            /* Wichtig: keine margin-Änderung, damit die Caption zentriert unter dem Bild bleibt */

          }



          /* NEU: Innenabstand klein halten und Höhe begrenzen, ohne Layout zu verändern */

          .glightbox-container .gdesc-inner,

          .glightbox-clean .gdesc-inner {

            padding: 2px 12px !important;   /* schmaler Balken */

            max-height: 24px !important;    /* Zielhöhe */

            overflow: hidden !important;    /* Überlauf verbergen */

          }



          /* NEU: Text weiß, einzeilig, Ellipsis; Höhe durch line-height ~24px */

          .glightbox-container .gslide-title,

          .glightbox-container .gslide-description {

            color: #fff !important;

            /* margin: 0; */

            white-space: nowrap;

            overflow: hidden;

            text-overflow: ellipsis;

            line-height: 24px !important;   /* vertikal kompakt */

            background-color: transparent;

            margin-bottom: 50px;

          }



          /* NEU: Titel leicht hervorheben (optional) */

          .glightbox-container .gslide-title {

            font-weight: 600;

            margin-right: .5em;

          }



          /* NEU (Mobile – echte Vertikalzentrierung):

             Setzt Bild + Caption als Einheit wirklich mittig,

             indem die gesamte innere Box vertikal übersetzt wird. */

          @media (max-width: 500px) {

            /* Caption bleibt direkt unterm Bild (wie von dir gewünscht) */

            .glightbox-mobile .glightbox-container .gslide-description,

            .glightbox-mobile .glightbox-container .gdesc {

              position: static !important;

              bottom: auto !important;

              transform: none !important;

              width: 100% !important;

              margin: 0 !important;

              padding: 0 12px !important;

            }



            /* 50px unten am Handy deaktivieren, damit die Caption dicht am Bild steht */

            .glightbox-mobile .glightbox-container .gslide-title,

            .glightbox-mobile .glightbox-container .gslide-description {

              margin-bottom: 0 !important;

            }



            /* Kern: die gesamte innere Box vertikal mittig setzen */

            .glightbox-mobile .glightbox-container .ginner-container {

              height: auto !important;           /* 100vh aufheben */

              min-height: 0 !important;

              position: relative !important;

              top: 50% !important;

              transform: translateY(-50%) !important;

              display: flex !important;

              flex-direction: column !important;

              align-items: center !important;

              justify-content: center !important;

              max-height: calc(100vh - 24px) !important; /* etwas Reserve */

              margin: 0 auto !important;

              box-sizing: border-box !important;

              padding: 0 !important;

            }



            /* Kleiner Abstand zwischen Bild und Caption */

            .glightbox-mobile .glightbox-container .gslide-media {

              margin: 0 0 8px 0 !important;

              max-width: 100% !important;

            }



            /* Bildhöhe so begrenzen, dass Bild + Caption bequem mittig passen */

            .glightbox-mobile .glightbox-container .gslide-media img,

            .glightbox-mobile .glightbox-container .gslide-media video,

            .glightbox-mobile .glightbox-container .gslide-media iframe {

              max-height: calc(100vh - 24px - 24px - 24px) !important;

              /* ~24px Top-/Bottom-Puffer + ~24px Caption */

              width: auto !important;

              height: auto !important;

              object-fit: contain !important;

              display: block !important;

            }



            /* Sicherheitsnetz: zentriere auch die Slide-Ebene */

            .glightbox-mobile .glightbox-container .gslide {

              display: flex !important;

              flex-direction: column !important;

              align-items: center !important;

              justify-content: center !important;

              width: 100% !important;

            }

          }

        `;

        // Vorhandenes Style-Tag aktualisieren oder neu anlegen

        let styleTag = document.querySelector('style[data-generated="cms-glightbox-caption"]');

        if (!styleTag) {

          styleTag = document.createElement('style');

          styleTag.setAttribute('data-generated', 'cms-glightbox-caption');

          document.head.appendChild(styleTag);

        }

        styleTag.textContent = css;

      })();



      document.querySelectorAll('.cms-content[data-id]').forEach(el => {

        const id = el.getAttribute('data-id');

        fetch('cms_content.php?id=' + encodeURIComponent(id))

          .then(r => r.text())

          .then(t => {

            el.innerHTML = t;



            // Lightbox automatisch für neue CMS-Inhalte aktivieren

            el.querySelectorAll('img').forEach(img => {

              // Nur wenn Bild noch keinen <a> Link hat

              if (!img.closest('a')) {

                const a = document.createElement('a');

                a.href = img.src;

                a.className = 'lightbox';

                img.parentNode.insertBefore(a, img);

                a.appendChild(img);

              }



              // NEU: Vorhandenen <a>-Elternlink ermitteln (nach dem ggf. Einwickeln)

              const aLink = img.closest('a');



              // NEU: Lightbox-Klasse sicherstellen

              if (aLink && !aLink.classList.contains('lightbox')) {

                aLink.classList.add('lightbox');

              }



              // NEU: Galerie-Name pro Block setzen -> gruppiert nur Bilder desselben data-id

              if (aLink) {

                aLink.setAttribute('data-gallery', id);

                // Optional: Titel aus alt übernehmen

                if (img.getAttribute('alt')) {

                  aLink.setAttribute('data-title', img.getAttribute('alt'));

                }

              }

            });



            // OPTIONAL: Vor Initialisierung die Nummerierung für diesen Block/Galerie schreiben

            applyNumberingForBlock(el, id);



            // Lightbox initialisieren (erneut nach dem Laden)

            // NEU: Instanz nur für diesen Block initialisieren (Selector filtert auf die Galerie des Blocks)

            GLightbox({

              selector: '.lightbox[data-gallery="' + id + '"]'

            });

          })

          .catch(err => {

            console.error('Fehler beim Laden von', id, err);

          });

      });

    });

</script>



JavaScript-Code Alternative (Original) - Alternativ zur Anzeige der Lightbox in den Seiteneinstellungen im Bereich "End of <body> code:" einfügen.
<!-- Lightbox-Styles und Script -->

<script>

    // AJAX-CMS + Lightbox-Integration

    document.addEventListener('DOMContentLoaded', () => {

      document.querySelectorAll('.cms-content[data-id]').forEach(el => {

        const id = el.getAttribute('data-id');

        fetch('cms_content.php?id=' + encodeURIComponent(id))

          .then(r => r.text())

          .then(t => {

            el.innerHTML = t;



            // Lightbox automatisch für neue CMS-Inhalte aktivieren

            el.querySelectorAll('img').forEach(img => {

              // Nur wenn Bild noch keinen <a> Link hat

              if (!img.closest('a')) {

                const a = document.createElement('a');

                a.href = img.src;

                a.className = 'lightbox';

                img.parentNode.insertBefore(a, img);

                a.appendChild(img);

              }

            });



            // Lightbox initialisieren (erneut nach dem Laden)

            GLightbox({ selector: '.lightbox' });

          })

          .catch(err => {

            console.error('Fehler beim Laden von', id, err);

          });

      });

    });

</script>

Video im CMS erstellt

Video CMS - Teil 2(3) up 


Auch dieses Video habe ich über das CMS eingefügt: Ich habe einen Text-/Bild-Block aus der Rubrik 'Image & Video' verwendet und das Bild durch das entsprechende <div> mit seiner data-id aus dem CMS ersetzt.

<!-- Start CMS Teil-2 (Video) -->
<div class="cms-content" data-id="Tutorials4-Bereich2"></div>
<!-- End CMS Teil-2 (Video) -->

Ansicht vom Source-Code im TinyMCE Editor
Ansicht Upload ausgesuchter Bilder im TinyMCE Editor Ansicht Galerie im TinyMCE Editor vom CMS

Bildergalerie vom CMS ↗️

Tutorial zur Bildergalerie


Hier zeige ich, wie ich eine versteckte Galerie in der Lightbox anhand des oben gezeigten Malediven-Beispiels umgesetzt habe.

Ich habe die Bilder ganz normal über den TinyMCE-Editor vom CMS  hochgeladen und dann über die Schaltfläche (< >) für den Quellcode (Source Code) ein <div class="hide"> um die zusätzlichen, versteckten Bilder gesetzt.

Ich habe diese CSS‑Klasse im Mobirise "CSS Editor" des Einbaublocks hinzugefügt:

.hide {
  display: none !important;
}

Es wird deshalb nur das erste Bild angezeigt, weil die übrigen Bilder die Klasse zum verstecken besitzen. Die Lightbox erkennt die Bilder dennoch automatisch anhand des <img> Tags, und der im ALT‑Text eingetragene Text wird als Bildunterschrift (Caption) unter dem jeweiligen Bild angezeigt. Falls ihr keine Bildunterschriften möchtet, lasst den ALT‑Text einfach leer.

Video zum Mini CMS

Guckt euch auch das Video von Volker zu seinem CMS an

Video von Volker zum CMS

© Copyright Mobirise-Tutorials.com

Datenschutz und Impressum

Google Translator
Accept all cookies to translate
Funktionale Cookies akzeptieren