Muse Kompakt Kurs – Lektion 6 – Musterseiten

Wir haben in der  letzten Lektion noch einige Variante gesehen, wie man Bilder in Muse einfügen und formatieren kann.

Heute werden wir uns näher mit dem Thema Musterseiten beschäftigen, die uns bei immer wieder vorkommenden Elementen einiges an Arbeit abnehmen können.

Sehen wir uns dazu die Planungsansicht in Muse an. Dort ist euch sicher schon aufgefallen, dass es im unteren Bereich noch eine Seite gibt, die etwas weiter darüber die Bezeichnung „Musterseiten“ hat. Diese Musterseiten und was man damit machen kann, werden wir uns jetzt etwas näher ansehen.

Musterseiten in Muse

Musterseiten in Muse

 

Was sind Musterseiten

Um zu verstehen, was Musterseiten sind, öffnen wir diese am besten und probieren aus was passiert.

Muse - Musterseiten - Inhalt (Logo) einfügen

Muse – Musterseiten – Inhalt (Logo) einfügen

Dazu habe ich in meinem Beispiel ein Bild Element, dass für ein Logo stehen soll im linken oberen Bereich eingefügt.

Man kann auf der Musterseite beliebige Inhalte einfügen, ja sogar eine ganze Seite könnte man dort gestalten. Trotzdem, ist das kein Platz um Seiten komplett umzusetzen. Lediglich Inhalte, die auf anderen Seiten öfter verwendet werden, sollen hier eingepflegt werden.

 

Wie wirken sich diese Musterseiten Inhalte aus?

Wir haben jetzt in die Musterseiten eine Grafik eingefügt. Was aber passiert mit diesen Inhalten. Wo und wann werden diese dargestellt. Um diese Frage zu beantworten, wechseln wir wieder zurück in die Planungsansicht. Dort wird unsere Frage rasch beantwortet.

Muse - Musterseiten Auswirkung

Muse – Musterseiten Auswirkung

Jede unserer Seiten, hat jetzt im linken oberen Eck ebenfalls das Logo stehen. Zu erkennen in den kleinen Vorschau Bildern. Unter dem Namen der Seite steht in [] Klammern ein Musterseiten Name, zum Beispiel „A-Musters.“. Das ist der selbe Name, den die Musterseite unterhalb als Seitenname verwendet. Wenn wir bei einer unserer „normalen“ Seiten in den Entwurfsmodus wechseln, dann können wir uns das im Detail ansehen.

Muse - Musterseiten Auswirkung Detail

Muse – Musterseiten Auswirkung Detail

Wir erkennen, dass unser Logo bei dieser Seite an genau der selben Position ist, wie auch auf der Musterseite. Versuchen wir das Logo zu verschieben oder anders zu verändern, dann merken wir, dass dies nicht möglich ist. Wenn man also ein Element hat, dass man nicht verändern oder verschieben kann, dann handelt es sich in den meisten Fällen um Elemente auf Musterseiten. Ich kann jetzt zurück zu meiner Musterseite wechseln und dort die Änderung vornehmen. Sobald das gemacht wurde, sind die Änderungen auf allen Seiten aktiv, die diese Musterseite verwenden.

 

Muster Seiten umbenennen

Die Standardnamen der Musterseite – „A-Musters.“ oder ähnlich, sind nicht recht aussagekräftig. Deshalb sollte man die Namen in seinem eigenen Projekt sprechend benennen.

Muse - Musterseiten umbenennen

Muse – Musterseiten umbenennen

Um die Musterseite umzubenennen, gehen wir genauso vor, wie wir auch unsere Seitennamen verändert haben. In meinem Beispiel, nenne ich die Seite „Musterseite mit Logo“. Sobald ich die Änderung durchgeführt habe, sehe ich diesen Namen auch untern dem Namen der jeweiligen Seiten, wo die Musterseite verändert wird.

 

Neue Musterseite anlegen

Wie kann man aber jetzt einer Seite eine andere Musterseite zuweisen oder gar keine verwenden. Dazu legen wir uns am besten eine neue Seite an. Dazu gibt es bei jeder Musterseite „links“ oder „rechts“ ein kleines Plus Symbol, sobald man mit der Maus über eine der Seiten fährt. Ein Klick auf dieses Plus Symbol und eine neue Seite wird entweder links oder rechts davon angelegt. Darunter macht bei Musterseiten keinen Sinn, da die Musterseiten keine Struktur wie eine komplette Website hat.

Muse - Neue Musterseite und umbenannt

Muse – Neue Musterseite und umbenannt

Dieser neuen Musterseite, habe ich zum Testen in der Fußzeile rechts unten 3 Social Media Icons hinzugefügt und die Seite auf „Musterseite Social“ umbenannt. Man kann dies auf den kleinen Vorschau-Bildern  erkennen.

 

Neue Musterseite einer anderen Seite zuweisen

Jetzt wollen wir diese neuen Musterseite einer bestehenden Seite zuweisen. In meinem Beispiel nehme ich dafür die „Produkt 2“ Seite. Um eine Musterseite einer bestehenden Seite zuzuweisen, gibt es zwei Möglichkeiten.

 

Die erste Methode – mittels Drag & Drop

Die erste, eher schnellere und einfachere Methode ist mittels Drag & Drop. Das bedeutet, man zieht die Musterseite einfach auf die gewünschte Seite und lässt dann los.

Muse - Musterseite zuweisen (Drag&Drop)

Muse – Musterseite zuweisen (Drag&Drop)

Sofort erkennt man, dass sich der Name der zugewiesenen Musterseite geändert hat. Damit kann ich auf einen Blick schnell erkennen, welche Seite von welcher Musterseite befüllt wird.

 

Die zweite Methode – über Menü

Bei jeder „normalen“ Seite, kann man mit der rechten Maustaste drauf klicken und dann mit dem Menüeintrag „Musterseiten“ die gewünschte Seite aus der Liste auswählen.

Muse - Musterseite zuweisen (Menü)

Muse – Musterseite zuweisen (Menü)

Wenn wir uns die Liste der Musterseiten in diesem Menü ansehen, dann fällt vielleicht ein Eintrag ganz oben in der Liste auf. Mit „Keine Musterseite“, kann man die zugewiesene Musterseite von dieser Seite komplett entfernen. Das ist vor allem praktisch, wenn man Seiten hat, die komplett individuell gestaltet werden sollen und keine gemeinsamen Elemente mit anderen Seiten haben.

 

Musterseiten kombinieren

Wenn du die Musterseiten aufmerksam betrachtet hast, dann wird dir bereits aufgefallen sein, das unter dem Titel der Musterseite „[Keine Musterseite]“ steht. Das bedeutet, dass diese Musterseite keine Musterseite besitzt. Wenn es den Eintrag“[Keine Musterseite]“ gibt, dann wird man wahrscheinlich auch was eintragen können.

Um uns das anzusehen, erzeuge ich von der Social Musterseite ein Kopie, in dem ich die Alt-Taste gedrückt halte und dann auf das Plus auf der rechten Seite der Musterseite klicke. Jetzt habe ich rechts daneben eine neue Musterseite, die den selben Inhalt, wir die Original Seite hat.

Die Seite wird auch sofort umbenannt in „Musterseite Social + Logo“. Ich möchte jetzt eine Musterseite haben, die nicht nur die Social Icons beinhaltet, sondern auch das Logo. Wir können jetzt die Musterseite öffnen und das Logo dort einfügen oder eben die Logo-Musterseite als Musterseite für unsere neue Social Musterseite verwenden.

Muse - Musterseiten kombinieren

Muse – Musterseiten kombinieren

Der einfachste Weg um das zu erreichen, ist die Logo-Musterseite einfach auf die neu erstellte Seite zu ziehen. Wenn das gemacht wurde, dann sehen wir sofort das Logo im linken oberen Eck. Die Kombination hat den Vorteil, dass bei Änderungen in der Logo-Musterseite diese sofort bei unserer neuen dritten Musterseite aktiv werden. Hätten wir das Logo dort nochmals als Grafik eingefügt, dann müssten wir im Fall einer Änderung diese manuell auf der neuen Seite durchführen.

 

Nochmals alles in der Übersicht

Zum Probieren, habe ich noch eine dritte Produktseite angelegt und dieser wieder mit Drag & Drop die neue dritte Musterseite zugewiesen. Am Bild unterhalb kann man jetzt gut die drei Varianten erkennen. Jede der drei Seiten, hat eine andere Musterseite zugewiesen bekommen, was man an der Bezeichnung unterhalb des Seitentitels und an den Vorschaubildern erkennen kann.

Muse - Musterseiten zugewiesen

Muse – Musterseiten zugewiesen

 

Die Anordnung der Elemente

Zum Schluss möchte ich die noch eine wichtige Eigenschaft der Elemente von Seiten und Musterseiten zeigen.

Hast du auf der Musterseite ein Element, zum Beispiel eine Grafik und an der selben Stelle auf deiner Seite ebenfalls ein Element, dann liegt das Element der Musterseite immer unterhalb des Seiten Elements und wird damit verdeckt. An der Grafik kannst du das schön erkennen.

Muse - Musterseiten Anordnung

Muse – Musterseiten Anordnung

Das ist sehr wichtig, da man sich vor allem bei Elementen, die beim Scrollen fixiert werden klar sein muss, dass sich die Seiten Elemente dann über das Musterseiten Element schieben. Das muss damit bei der Design Planung schon berücksichtigt werden.

 

Was du heute gelernt hast

In dieser Lektion, hast du erfahren, was Musterseiten sind, wie diese erstellt und Seiten zugewiesen werden können. Weiters kennst du die Möglichkeit, diese zu kombinieren und du weisst, worauf du beim Einsatz von Elementen achten musst, die übereinander liegen können.

 

Was kommt das nächste mal

Das nächste Mal werden wir uns die Widgets von Muse ansehen, die eine praktische Möglichkeit sind um einfach extrem mächtige Funktionen in unsere Website einzubauen. Konkret werden wir uns dann mit dem Menü Widget beschäftigen.

 

 

Comments

  1. Rehi Andreas,

    hier habe ich mal eine Frage. Die „3 Social Media“ Icons sind aber so nicht in der Widgets-Bibliothek, den dort finde ich nur größere Einzellinks oder?

    Gruß
    Tom

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.