Mach mit:
Dieses Lern-Portal hilft Dir, mit dem no-code Web-Baukasten «Mobirise» Deinen Webauftritt zu realisieren.
Websites ohne Code
© 2026 metaphor GmbH Basel
Mobirise ist einfach zu bedienen, aber ein paar Grundlagen solltest Du kennen. Hier zeige ich dir, wie Du loslegst.
Lade Mobirise von der offiziellen Website herunter. Installiere das Programm und starte es. Melde Dich mit Deiner eMail-Adresse bei Mobirise kostenlos an.
Ich zeige Dir die Elemente der Benutzeroberfläche, und wie Du eine neue Website einrichten kannst.
Jetzt übersetzt Du Deine Strategie aus der Vorbereitung in eine klare Nutzerführung. Wenn Inhalte und Performance sauber umgesetzt sind, sieht Deine Website nicht nur gut aus, sondern erfüllt auch ihren Zweck. Ein reduziertes Set an Blöcken macht die Pflege für Dich später einfacher.
Oder folge mir in unserem Demo-Projekt: ich erstelle Schritt für Schritt eine Website für ein Gartenbau-Unternehmen.
Dafür verwende ich ausschliesslich die Blöcke des kostenlosen Mobirise M5 Standard‑Themes und starte mit einer leeren Seite.
Ich werde «laut denken» und lasse auch die Fehler, die ich mache, in den Videos drin. So ist der Lerneffekt für Dich am grössten.
Die Site-Struktur skizzieren – Inhalte und Assets sammeln – Die Oberfläche konfigurieren – Eine neue Website einrichten – Logo und Menu anpassen – Die Startseite strukturieren – Exkurs: Interface Rundgang Teil 1 – Den Header-Block formatieren – Die Features umgestalten – Der Umgang mit Icons – Das Formular konfigurieren – Die Fusszeile einrichten – Exkurs: Interface Rundgang Teil 2 – Die Site Styles anpassen – Das weitere Vorgehen – Eine Galerie einrichten – Exkurs: Extensions installieren – Weitere Seiten befüllen – Die Pflichtseiten erstellen – Seiten-Titel und Beschreibung – Seiten und Inhalte verlinken – Mobile vs. Desktop Ansicht – Den Cookie-Alarm aktivieren – Überschriften H1 bis H6 – Exportieren vs. Veröffentlichen
Es geht los – zuerst mit Stift und Papier. Ich skizziere die Startseite und alle Unterseiten für unsere Gartenbau-Website. Ich verwende dafür auch schon die Blöcke, die mir Mobirise zur Verfügung stellen wird. Ich werde mich im Verlauf des Demo-Projektes immer wieder an meinen Skizzen orientieren.
Bevor ich mit Mobirise loslege, habe ich schon einiges vorbereitet: ich zeige Dir mein Verzeichnis, in dem ich Texte, Fotos für alle Seiten sowie ein paar Logos abgelegt habe. Alles ordentlich strukturiert und mit eindeutigen Namen versehen, damit ich nachher in Mobirise nicht lange suchen muss, und flüssig an meinem Projekt arbeiten kann.
Du hast Mobirise installiert. Es sind aber nicht alle Funktionen und Buttons von Anfang an aktiviert. Ich zeige Dir, wo Du die App-Einstellungen findest, und welche Optionen Du noch zuschalten solltest, damit Du Dich in Mobirise optimal zurecht findest und möglichst speditiv arbeiten kannst.
Jetzt gehts wirklich los – mit einer leeren Seite im kostenlosen Mobirise M5 Standard Theme. Du lernst den Unterschied zwischen den kostenlosen und bezahl-pflichtigen Themes und Blöcken kennen, und bekommst eine Übersicht, was alles zum Mobirise M5 Theme dazu gehört, mit dem wir in unserem Demo-Projekt arbeiten.
Wir haben zwei Blöcke auf die Startseite gezogen, ein Menu und einen Header-Block. Das Mobirise-Logo im Menu tauschen wir mit dem vorbereiteten Garten-Fit Logo aus, und aktualisieren den dahinter liegenden Link. Und wir bereiten bereits auch den Menu-Block für alle späteren Unterseiten vor. Die Farben passen wir ebenfalls schon an.
Ich ziehe noch weitere Blöcke auf die Startseite: zwei Features-Blöcke, ein Formular zur Kontaktaufnahme sowie einen Footer-Block. Damit habe ich alle Elemente platziert, die ich auf der Homepage haben möchte. Die Ansicht in Mobirise stelle ich auf «Tablet horizontal» um, weil ich so lieber arbeite, und weil die meisten Menschen meine spätere Website ungefähr in dieser Grösse zu Gesicht bekommen werden.
Exkurs
Ein guter Zeitpunkt für den grossen Überblick: wir schauen uns die Benutzer-Oberfläche von Mobirise im Detail an. Danach weisst Du, wo Du die Site-Einstellungen für Dein aktuelles Projekt finden kannst, und was passiert, wenn Du auf die anderen Buttons oben im Mobirise Menu-Balken klickst.
Der Header-Block wird umgestaltet: mit meinen vorbereiteten Texten, und statt des Platzhalters (dem Mobirise-Screenshot) setze ich an diese Stelle eine vorbereitete Garten-Fit Gartenbau Logo-Variante. Es gibt auch ein neues Hintergrund-Bild, und mit einem Overlay-Effekt bleiben meine Texte trotzdem gut lesbar.
Umbau des ersten Features-Block mit vorbereitetem Material: ich tausche die Fotos aus, erstelle die Alt-Texte neu, und übernehme meine eigenen Texte per Copy & Paste aus der geöffneten Text-Datei im Hintergrund.
Bei der Formatierung des zweiten Features-Block zeige ich Dir, wie Mobirise mit Icons in seinen Blocken umgeht. Dabei greift das Programm auf Icon-Fonts zu. Du kannst also nicht beliebig überall Deine eigenen Icons verwenden (eher nur als platziertes Bild). Es stehen Dir aber Hunderte an Icons zur Verfügung, unter anderem als Extension von Drittanbietern.
Exkurs
Jetzt werfen wir einen genaueren Blick auf die Parameter im Block-Toolbar von Mobirise. Danach weisst Du, welche Funktionen die Buttons dort haben, und ich demonstriere Dir mehrere praktische Beispiele zum Duplizieren, Verschieben und Ablegen von Blöcken als Benutzer-definiertem Block.
Bei der Anpassung des Kontakt-Formulars lernst du den Formular-Editor von Formoid kennen. Diesen Dienst setzt Mobirise für seine eigenen Formulare ein. Ich zeige Dir, wie Du Dich dort anmelden kannst, und welche Einschränkung der Service von Formoid mit sich bringt. Es gibt aber auch hierfür Alternativen von Drittanbietern.
Auch im Footer tauschen wir das Mobirise-Logo mit unserem Garten-Fit Logo aus und ändern die Verlinkung. Alle neuen Texte kommen wieder per Copy & Paste aus der geöffneten Text-Datei im Hintergrund. Die Social Media Icons blende ich aus, dafür gibt es einen Copyright-Vermerk. Dann schau ich mit Dir zusammen die komplette Startseite in der Browser-Vorschau an.
Du lernst hier, wie Du mit den Site Styles einige Änderungen an deiner Webseite vornehmen kannst, die anschliessend für Dein ganzes Projekt gelten. Ich zeige Dir, wie Du zusätzlich zu den vorhandenen fünf Schriftschnitten noch weitere hinzufügen kannst. Achtung: für die Site Styles funktioniert der Undo-Button nicht – merke Dir gut, wie vorher alles aussah…
Ich erkläre Dir mein weiteres Vorgehen: jetzt haben wir eine gut ausgebaute und formatierte Startseite, die ich duplizieren werde, für die Seite Gartenbau-Planung sowie alle weiteren Seiten. Dies ist eine viel speditivere Arbeitsweise, als jedes Mal bei Null zu starten und mit jeder Seite immer wieder neu anzufangen.
Wir nehmen zwei Blöcke und fügen diese zu einer visuellen Einheit zusammen. Den einen Galerie-Block mit anfänglich vier Bildern werden wir auf insgesamt acht Fotos erweitern. So kannst Du jede Galerie an Deine eigenen Bedürfnisse anpassen. Damit ist auch die Seite Garten-Planung bereits fertig gestellt.
Exkurs
Manchmal steht der Mobirise Block-Toolbar bei der Bearbeitung von Inhalten im Wege. Du lernst an diesem Beispiel, wie Du eine Drittanbieter Extension herunter laden kannst, die dieses Problem behebt. Dank der offenen Schnittstelle hast Du Zugriff auf viele Extensions, die die Funktionalität erweitern, oder Dir neue Design-Blöcke für Mobirise liefern. Meist sogar kostenlos.
Ich dupliziere die Seite Planung, und erstelle die Unterseiten Gartenbau und Gartenpflege, die genau dieselbe Struktur haben. Texte und Fotos werden durch vorbereitetes Material ersetzt. Dann kommt die Seite Unser Team dazu, die etwas anders aufgebaut ist. Dazu nutzen wir einen neuen Block sowie eine Liste. Und abschliessend lernst Du, wie Du eine individuelle Google Map in Dein Web-Projekt einbauen kannst.
Das Kleingedruckte: mindestens eine Seite mit Impressum gehört aus rechtlichen Gründen zu jedem Web-Projekt dazu. Ich zeige Dir, wie ich die Seiten Impressum, Datenschutz und AGB mit einem simplen Text-Block erstelle, und danach die Links zu diesen Pflichtseiten dezent in der Fusszeile unterbringe.
Ganz wichtig, vor allem für die Suchmaschinen-Optimierung: ich habe viel Zeit aufgebracht, um sinnvolle Seiten-Titel (mit max. 54 Zeichen) und Seiten-Beschreibungen (max 130 Zeichen) zu texten. Denn diese erscheinen ja genau so in der Anzeige der Suchmaschinen. Wenn Du hier sorgfältig arbeitest, erhöhst Du Deine Chancen, weiter oben in den Such-Ergebnissen zu stehen.
Endlich ist es soweit: nachdem wir die URLs der Seiten definiert haben, verlinken wir alle Seiten in unserem Demo-Projekt. Auch die Text-Links in den drei Abschnitten auf der Startseite führen nun zur entsprechenden Unterseite. Danach überprüfen wir alle Links in der Browser-Vorschau. Nun weisst Du, wann und wie Du Dein eigenes Web-Projekt verlinken kannst.
Bei der Arbeit an der Gartenbau-Demo-Website haben wir nicht häufig in die Ansicht zu Mobile gewechselt. Mehr als die Hälfte der Menschen geht heute mit dem Smartphone ins Internet. Du solltest deshalb Dein Projekt überprüfen, ob es auch in der Mobile-Ansicht überall ansehnlich daher kommt, und ggf. noch korrigieren, zum Beispiel die Abstände zwischen den Blöcken.
Viele Webseiten begrüssen Dich mit einem Cookie-Banner. Auch Mobirise hat eine solche Option, die Du natürlich zuerst aktivieren musst. Ich zeige Dir, wo Du alles findest, und wie Du es anpassen und verlinken kannst. Falls Du in der EU zuhause bist: es gibt noch zusätzlich einen DSGVO-Hinweis in Mobirise.
Ein ganz klein wenig kommt der HTML-Code doch mit ins Spiel – aber es ist nicht kompliziert. Alle Suchmaschinen und auch die Screenreader für Menschen mit Sehbehinderung erwarten eine semantisch korrekte Auszeichnung. Bevor Du Deine Website online stellst, solltest Du deshalb in Mobirise nochmal alle Überschriften dahin gehend überprüfen und richtig einstellen.
Dein Mobirise-Projekt ist soweit abgeschlossen. Mit dem Befehl Exportieren kannst du es in einem eigenem Verzeichnis speichern, und es später auch wieder re-importieren. So wie ein Back-up. Mit dem Befehl Veröffentlichen kannst Du dein Projekt online stellen, bei Mobirise selber oder bei einem Hosting-Service. In einem Zwischenschritt kannst Du aber auch lokal veröffentlichen, das Ergebnis kontrollieren, und die Daten später hoch laden.
Du hast es geschafft, und die Arbeit an Deinem Mobirise-Projekt erfolgreich abgeschlossen. Alles weitere findet auf der Seite Nachbereitung statt. Dort zeige ich Dir, wie Du Deine Web-Adresse (URL) und Speicherplatz bei einem Internet Service Provider buchen kannst. Ich lade unsere Demo-Site Garten-Fit.ch ins Internet hoch und schalte sie live. Dann lassen wir gratis eine XML-Sitemap erstellen, und richten ein kostenloses Google Search Console Konto ein. Dort erhältst Du einen Einblick, mit welchen Suchbegriffen und wie oft Deine Website gefunden wird.
Dieses Lern-Portal hilft Dir, mit dem no-code Web-Baukasten «Mobirise» Deinen Webauftritt zu realisieren.
© 2026 metaphor GmbH Basel
Offline Website Builder