Mobirise Tutorials

Tutorial

Zunächst müsst ihr die Skripte von Volker herunterladen. Der Link wird hier später ergänzt.

Entpackt das ZIP-Archiv minicms.7z mittels Doppelklick.

Folgende Verzeichnisse sind vorhanden:

admin
uploads

Folgende Dateien sind vorhanden:

cms_content.php
config.php

Die Inhalte der vier verbleibenden Dateien dienen lediglich als Hinweise, an welchen Stellen die referenzierten Lightbox-Skripte, die CSS-Anweisungen und die Verbindung zum CMS in Mobirise eingebunden werden müssen; sie sind nicht für den Server bestimmt.

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 -->

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;
}