Adobe Muse als CMS verwenden

Adobe Muse ist eigentlich nicht ideal dafür geeignet um Templates für Content Management Systeme zu erstellen. Mit dem Business Catalayst Hosting von Adobe kann man seine Muse Seiten Online editieren. Doch die wenigsten wissen, dass diese Funktion mit jedem Web Host funktioniert, sofern man einen FTP Zugang hat um seine Seiten hochzuladen. Wie das genau funktioniert erkläre ich euch in diesem Artikel.

Mit Muse ist es recht einfach ohne HTML und CSS Wissen eine attraktive Website zu erstellen. Muse selbst habe ich schon in meinem Artikel – Adobe Muse – eine Alternative zu Dreamweaver? – vorgestellt. Aber wie sieht es mit der laufenden Wartung von Inhalten aus? Benötige ich dazu immer Adobe Muse, können meine Kunden Inhalte selbst ändern? Die Antwort darauf ist – man benötigt kein Muse um Inhalte zu ändern. Alles geht einfach über eine Weboberfläche.

Ich zeige euch in diesem Beitrag in 5 Schritten, wie man beginnend bei der Erstellung bis zur Synchronisierung der Online und Offline Inhalte Muse als CMS verwenden kann.

 

1. Schritt – Seite erstellen

Bevor wir beginnen die Seiten zu erstellen, werfen wir einmal einen Blick in die Seiteneigenschaften. Hier muss man im Reiter Erweitert die Checkbox bei „Bearbeiten im Browser ermöglichen“ aktivieren.

Adobe Muse - Site Eigenschaften
Adobe Muse – Site Eigenschaften

 

Für den ersten Schritt habe ich eine beliebige Seite mit Adobe Muse erstellt. Um die verschiedenen Funktionen zeigen zu können habe ich eine Website bestehend aus insgesamt 4 Seiten erstellt. Auf dieser gibt es unterschiedlichen Text und auch verschiedene Arten von Bildern. Um zu zeigen, dass auch verschiedene Device Größen gewartet werden können, habe ich auch eine Phone Variante angelegt. Die Struktur der Seite ist hier abgebildet.

Adobe Muse - Seitenstruktur
Adobe Muse – Seitenstruktur

 

Auf der Seite gibt es oben die Navigation und auf der rechten Seite eine Überschrift mit einem Text darunter. Der Text beinhaltet 2 Formatierungen. Einmal einen fett geschriebenen Text und einmal einen Text in einer anderen Farbe.

Auf der linken Seite gibt es drei verschiedene Varianten vom Bildern. Beim ersten Bild wurde ein Rechteck erstellt und das Bild als Hintergrund in dieses Rechteck eingefügt. Beim Bild daneben, handelt es sich um ein normales Bild ohne Effekte und beim ganz rechten Bild wurde ein Schein Effekt angewendet. Diese drei Varianten habe ich erstellt um zu zeigen, welche Arten von Bildern sich bearbeiten lassen und welche nicht.

Die fertige Seite sieht dann wie folgt aus:

Adobe Muse - Beispielseite
Adobe Muse – Beispielseite

 

 

2. Schritt – Hochladen der Website

Wenn die Seite fertig ist, müssen wir diese zu unserem Webhost hochladen. Dafür verwenden wir den FTP Zugang, den wir von unserem Provider bekommen haben. Um das Hochladen zu starten, rufen wir über

Datei > Auf FTP Host hochladen

die entsprechende Funktion auf.

Adobe Muse - FTP Eingabe Felder
Adobe Muse – FTP Eingabe Felder

 

Im ersten Fenster geben wir den Servernamen, den Usernamen und das Passwort ein. Damit die Sync Funktion der Online und Offline Inhalte verwendet werden kann, muss man noch die Checkbox bei „Anmeldedaten speichern“ aktivieren

Adobe Muse - FTP Anmeldedaten
Adobe Muse – FTP Eingabe Felder

 

Im nächsten Schritt erfolgt die Eingabe der URL unter der die Seite erreichbar ist. In meinem Fall, habe ich die URL http://demo.andreasstocker.at/ eingerichtet. Beim Hochladen kann man entweder „nur geänderte Dateien“ oder „Alle Dateien“ angeben.

Adobe Muse - FTP Upload starten
Adobe Muse – FTP Upload starten

 

Es dauert jetzt einige Sekunden – je nach Menge der Inhalte und die Seite wurde ins Internet übertragen. Nach dem Upload der Inhalte wird die Seite automatisch im Browser aufgerufen.

Adobe Muse - FTP Upload Progress
Adobe Muse – FTP Upload Progress

 

 

3. Schritt – Login in Adobe inbrowserediting

Nachdem wir die Seite jetzt im Internet aufrufen können, ist es auch möglich diese zu editieren. Dazu rufen wir im Browser folgende URL auf:

https://inbrowserediting.adobe.com/login/

Adobe Muse - inbrowserediting Start
Adobe Muse – inbrowserediting Start

 

In dem Textfeld geben wir die Domain unserer Seite ein. Also in meinem Fall demo.andreasstocker.at

Adobe Muse - inbrowserediting URL Eingabe
Adobe Muse – inbrowserediting URL Eingabe

 

Jetzt werden wir aufgefordert unsere Zugangsdaten einzugeben. Hier verwendet man die selben Daten, wie sie auch bei Adobe Muse zum FTP Upload der Seiten angegeben wurden. Wenn möglich empfehle ich aus Sicherheitsgründen einen eigenen FTP Account für die Online Wartung anzulegen – ist aber nicht unbedingt notwendig.

Adobe Muse - inbrowserediting Anmeldung
Adobe Muse – inbrowserediting Anmeldung

 

 

4. Schritt – Online editieren der Inhalte

Es dauert nun einige Sekunden und man sieht die aktuelle Muse Website. Fährt man jetzt mit der Maus über die verschiedenen Inhalte, so erscheint unterhalb ein Button zum Bearbeiten des Inhaltes. Im Beispiel unten könnte nun die Überschrift bearbeitet werden.

Adobe Muse - inbrowserediting Webseite
Adobe Muse – inbrowserediting Webseite

 

Es ist aber leider nicht möglich alle Inhalte über dieses Tool zu bearbeiten. Auf der einen Seite sind das natürlich Inhalte wie die Navigation, die vom System automatisch erzeugt werden, aber auf der anderen Seite kann man auch verschiedene Arten von Bildern nicht bearbeiten. Im folgenden Screenshot habe ich alle Inhalte grün eingerahmt, die man bearbeiten kann und mit rot all jene Inhalte, die man nicht bearbeiten kann. Zu den Problemen zählen vor allem Bilder, die als Background Image eingefügt werden und auf der anderen Seite all jene Bilder, die in Muse mit einem Effekt versehen wurden.

Adobe Muse - inbrowserediting - bearbeitbare Inhalte
Adobe Muse – inbrowserediting – bearbeitbare Inhalte

 

Will man jetzt einen Inhalt bearbeiten, dann klickt man einfach auf den „Bearbeiten“ Button und schon sieht man das entsprechende Eingabefeld vor sich. Hier kann man jetzt die Inhalte ändern. Es ist nur möglich den Text selbst zu ändern, nicht jedoch die Formatierung. Allerdings kann man bestehende oder neue Textinhalte mit einem Link verknüpfen. Links können sowohl externe Seiten, interne Seiten oder auch Inhalte sein, die man hochladen kann. Damit kann man zum Beispiel recht leicht ein PDF hochladen und zum Download anbieten.
In meinem Beispiel habe ich eine neue Zeile mit dem Inhalt „Diese Zeile wurde über das Web hinzugefügt.“ eingegeben.

Adobe Muse - inbrowserediting - Inhalte bearbeiten
Adobe Muse – inbrowserediting – Inhalte bearbeiten

 

Klickt man auf den Aktualisieren Button, dann verschwindet das Eingabefenster wieder und der Inhalt auf der Seite wurde verändert.

Adobe Muse - inbrowserediting - fertig bearbeitete Inhalte
Adobe Muse – inbrowserediting – fertig bearbeitete Inhalte

 

Auf die selbe Art, kann man auch Bilder verändern. Einfach den „Bearbeiten“ Button unter dem Bild anklicken und man kommt in das entsprechende Eingabefeld. Bilder können entweder vom Webspace oder von der lokal Platte verwendet werden.

Adobe Muse - inbrowserediting - Bilder bearbeiten
Adobe Muse – inbrowserediting – Bilder bearbeiten

 

Hat man auch noch andere Device Größen, dann kann man links oben im Drop Down Menü das gewünschte Gerät auswählen und auch diese Inhalte bearbeiten. Wenn man verknüpfte Textfelder verwendet, dann ist es natürlich nicht notwendig alle Geräte einzeln zu bearbeiten. Die Inhalte werden in diesem Fall automatisch übernommen.

Adobe Muse - inbrowserediting - wechsel der Device Größen
Adobe Muse – inbrowserediting – wechsel der Device Größen

 

Hat man alle gewünschten Änderungen vorgenommen, dann ist es wichtig den grünen Aktualisieren Button links unten anzuklicken. Tut man das nicht, sind alle Änderungen weg.

Adobe Muse - inbrowserediting - veröffentlichen
Adobe Muse – inbrowserediting – veröffentlichen

 

Auf die selbe Art und Weise kann man jede andere Seite bearbeiten. Einfach mittels der Menüleiste zur entsprechenden Seite wechseln und los geht es. Hat man alle Inhalte erfolgreich verändert, dann kann man sich aus dem Edit Tool wieder abmelden (rechts oben beim Zahnrad).

 

 

5. Schritt – Synchronisieren mit MUSE

Es ist auf der einen Seite schön, dass man online die mit Muse erstellten Seiten bearbeiten kann, aber was ist, wenn man etwas am Design verändern möchte. Wie kommen die online geänderten Inhalte wieder in unsere Muse Datei, damit wir mit dem aktuellsten Datenbestand arbeiten können?

Dieses Problem ist sehr einfach zu lösen. Hat man Muse beendet, so muss man das Projekt einfach neu laden. Muse überprüft jetzt automatisch die Online Version und meldet sich, wenn es Inhalte gibt, die synchronisiert werden müssen. Man kann diesen Test auch manuell über

Datei > Synchronisierung mit Webversion

aufrufen.

Adobe Muse - Manuelles synchronisieren
Adobe Muse – Manuelles synchronisieren

 

Stellt Muse eine Änderung fest, dann erscheint ein Hinweis, wie im Screenshot unten zu sehen. Hier ist unsere zusätzliche Zeile zu sehen. Mann kann nun auf „In Muse zusammenführen“ klicken und die online Inhalte wandern in das Muse Projekt. Möchte man die Inhalte nicht übernehmen, dann genügt ein Klick auf „Nicht zusammenführen“. Will man jetzt gar nichts machen dann ist Abbrechen die richtige Wahl.

Adobe Muse - Zusammenführung Dialog
Adobe Muse – Zusammenführung Dialog

 

Hat man alle Inhalte erfolgreich synchronisiert, dann sieht man alle Online Änderungen auch im lokalen Muse Projekt. Das ganze funktioniert übrigens auch, wenn man sowohl lokal als auch Online Inhalte geändert hat. Dann muss man sich entscheiden, welcher Inhalt gelten soll.

Adobe Muse - Zusammenführung abgeschlossen
Adobe Muse – Zusammenführung abgeschlossen

 

Ich denke das Adobe mit diesen Online Edit Funktionen ein oftmals notwendiges CMS nicht mehr notwendig macht, vor allem dann, wenn es darum geht schnell nur bestehende Text und Bild Inhalte zu verändern. Will man neue Inhalte hinzufügen, dann ist das mit Muse allerdings derzeit nur eingeschränkt möglich, da man nur bestehende Text oder Bild Bereiche verändern und erweitern kann.

 

 

Facebook

Ich würde mich übrigens freuen,
wenn Du auch meine Facebook Seite
besuchst und mein Fan wirst.

 

 

Andreas Stocker

Andreas Stocker

Andreas hat 25 Jahre Webagentur Erfahrung und gibt jetzt sein Wissen weiter, wie man selbst einen erfolgreichen Webauftritt umsetzt und betreut.

Dieser Beitrag hat 6 Kommentare

  1. Mari Steiner

    habe folgende Frage: Wenn ich bereits eine fertig erstellte Homepage habe und aber eine andere, neue, mit Muse erstellte Homepage erstellt habe und online stellen möchte, wird dann meine alte überschrieben? Was für Möglichkeiten habe ich mein Muse-Layout online zu testen?

    viele Grüße
    Mari

    1. Andreas

      Hallo Mari,

      Wenn Du mit Muse eine aktuelle Version deiner Seite online stellst, dann wird diese natürlich überschrieben. Auch wenn Du ein komplett neues Projekt erstellst, werden die bestehenden Daten am Webserver überschrieben.
      Wenn Du wirklich eine komplett neue Webseite hast, dann würde ich dir auf jeden Fall raten, die alten Inhalte vorher vom Webserver zu löschen, damit nicht alte Reste überbleiben, die von der vorigen Seite stammen.

      Um eine Muse Seite Online zu testen, gibt es mehrere Möglichkeiten.
      1. Wenn du ein aktives Muse Abo hast, dann kannst deine Seite auch testweise auf Business Catalyst hochladen. Du bekommst dann eine URL in der Form: http://xyz.businesscatalyst.com (Das xyz kannst du durch ein eigenes Wort ersetzen). Um es dort hochzuladen, gehe in Muse einfach auf „Datei“ -> „Auf Business Catalyst veröffentlichen“.
      2. Die zweite Möglichkeit, wäre bei deinem Web Hoster (sofern dieser das anbietet) eine Subdomain mit einem eigenen Verzeichnis zu erstellen, wo du deine Seite hochladen kannst. Dann ist die Seite nicht auf „www.meinewebsite.com“, sondern zum Beispiel auf „test.meinewebsite.com“ erreichbar.

      Ich hoffe das hilft dir weiter. Bei weiteren Fragen, melde dich einfach nochmal.

      Liebe Grüße
      Andreas

  2. ed höller

    hallo Andreas

    ich hab jetzt eine schon ziemlich umfangreiche website, sodass eine veröffentlich schon sehr lange dauert und immer wieder timeouts kommen …
    das „nur geänderte daten“-feld scheint nicht zu funktionieren …
    welche Möglichkeiten hätte man hier?

    danke
    LG ed

    1. Andreas

      Hallo Ed,

      probiere einmal die HTML Export Funktion „Datei“ -> „Als HTML exportieren…“.
      Damit werden die Inhalte lokal auf deiner Platte abgespeichert und du kannst diese Inhalte dann mit einem eigenen FTP Client hochladen.

      Hilft das weiter?

      LG Andreas

  3. Ulli

    Hallo,

    toller Artikel, wissen Sie wie man eine html Seite in einem Unterordner im Browser editieren kann?
    Danke

  4. Guy

    Ich wollte einfach einen netten Gruss da lassen. Bin gerade auf die Seite
    gestossen.

Schreibe einen Kommentar

Inhaltsverzeichnis

Über den Autor

Andreas Stocker

Andreas Stocker

Andreas hat 25 Jahre Webagentur Erfahrung und gibt jetzt sein Wissen weiter, wie man selbst einen erfolgreichen Webauftritt umsetzt und betreut.

Letzte Beiträge