Child pages
  • Erstelle attraktive Confluence-Seiten in 3 Schritten
Skip to end of metadata
Go to start of metadata


Anleitung

Erstelle attraktive
Confluence Seiten

Eine Schritt für Schritt Anleitung von Jan Kuntscher, Product Manager @ //SEIBERT/MEDIA


Mehr Erfahren    Live View




WILLKOMMEN

Einführung

Wir alle lieben Confluence. Realtime collabarotive editing, inline comments sowie @Mentions sind nur eine kleine Auswahl an Features, die wir täglich unzählige male nutzen.

Ganz besonders lieben unsere Kunden das Erstellen & Bearbeiten von Seiten. Mithilfe des vielseitigen Confluence Seiteneditors, kann jeder User selbst entscheiden, wie er seine Informationen aufbereiten möchte.

In diesem Zusammenhang stoßen wir immer wieder auf folgende Frage: "Wie kann ich ansprechende Confluence Seiten erstellen?"

Ich bin absoluter Confluence Fan und stelle euch in dieser Schritt für Schritt Anleitung vor, wie ihr die obige fantastische Confluence Seite erstellen könnt.

Lass uns kurz über das nötige Werkzeug, coole Inspirationsquellen und lizenzfreie Bilder sprechen.

Wie erstelle ich ansprechende
Confluence Seiten in 3 Schritten


SCHRITT 1

Header


1.1
1.2
1.3
1.4
1.5
Resultat

Füge das Makro 'Aura - Background Content' auf deine leere Seite ein

Einstellungen:

  • Content Vertical Position: Center
  • Minimum Height: 700
  • Color Picker: DF1183 und den Opacity-Regler auf 16
  • Image: Im Reiter Web die URL des hier hinterlegten Bildes einfügen
  • Image Position: Pfeil nach oben

Klicke nun auf den Save Button.


Status Quo

Das Makro ist wie im Screenshot konfiguriert und eingefügt. Auf zum nächsten Schritt.

Füge das Makro 'Aura - Title' innerhalb des Background Content Makros aus 1.1 ein

Klicke dafür zunächst in die Mitte des Background Content Makros,
damit der Cursor auf der linken Seite erscheint (dies kann man schnell übersehen).

Einstellungen:

  • Text Ausrichtung: Mittig
  • Font Size: 120
  • Farbe: Weiß

Nachdem du das Makro konfiguriert und eingefügt hast, kannst du deinen gewünschten Text
in den blauen Rahmen des Title Makros eingeben. Ich habe beispielhaft AWESOME TITLE eingetragen.
Klicke nun auf den Save Button.


Status Quo

Das Makro ist wie im Screenshot konfiguriert und eingefügt. Auf zum nächsten Schritt.

Füge das Makro 'Aura - Divider' unter den Title aus 1.2 ein

Klicke dafür zunächst unter das Title Makro, damit der Cursor darunter auf der linken Seite erscheint.

Einstellungen:

  • Alignment: Center
  • Full width: Aus
  • Farbe: B01548


Status Quo

Das Makro ist wie im Screenshot konfiguriert und eingefügt. Auf zum nächsten Schritt.

Füge das Makro 'Aura - Title' unter den Divider aus 1.3 ein

Klicke dafür zunächst unter das Divider Makro und drücke Enter, damit der Cursor darunter auf der linken Seite erscheint.

Einstellungen:

  • Font Weight: Light
  • Text Ausrichtung: Mittig
  • Font Size: 52
  • Farbe: FFFFFF (Weiß)

Nachdem du das Makro eingefügt hast, kannst du deinen gewünschten Text in das Makro eingeben. Ich habe AWESOME SUBTITLE eingetragen.


Status Quo

Das Makro ist wie im Screenshot konfiguriert und eingefügt. Auf zum nächsten Schritt.

Füge das Makro 'Aura - Background Content' unter das Background Content Makro aus 1.1 ein

Einstellungen:

  • Minimum Height: 3
  • Padding: 0
  • Farbe: B01548


Status Quo

Das Makro ist wie im Screenshot konfiguriert und eingefügt. Auf zum nächsten Schritt.

Bravo! Dein Header ist fertig

Speichere die Seite und dein Header ist fertig. Das sieht doch schon mal gut aus. 
Als nächstes kümmern wir uns um nun die Navigation. Bist du bereit?

2. Navigation


SCHRITT 2

Navigation


2.1
2.2
Resultat

Einführung

Damit sich der Leser gut zurechtfindet und auch auf weitere Inhalte zugreifen kann, ist eine gute Navigation unerlässlich.

Die Navigation kann nach zwei unterschiedlichen Methoden aufgebaut werden:

  • Methode 1 - Navigation für die Seite selbst (mithilfe von Ankern)
  • Methode 2 - Navigation auf andere Seiten (mithilfe von Links)

Die Idee in diesem Beispiel ist, dass diese Seite als Startseite bzw. Vaterseite fungiert und die einzelnen Karten auf andere Confluence Seiten bzw. Kindseiten verlinken (Methode 2).


Füge das Makro 'Aura - Cards' unter das Background Content Makro aus 1.5 ein

Im Reiter 'General' folgende Einstellungen vornehmen:

  • Columns: 4
  • Design: Light Accent
  • Hover Effect: Shrink
  • Maring between cards: 0
  • Padding inside cards: 6
  • Full width of parent: on

Aura Cards als Navigationspunkte nutzen und einstellen

Klicke auf die erste Karte in der rechten Vorschau. Der Reiter wechselt nun auf 'Content'. Hier kannst du die jeweils ausgewählte Karte auf deine Wünsche hin anpassen. Weitere Karten kannst du in der interaktiven Vorschau hinzufügen.

Einstellungen:

  • Title: Gewünschten Title eingeben
  • Link: Zu verlinkende Seite hinterlegen
  • Farbe: B01548
  • Icon: Gewünschtes Icon auswählen

Passe die Einstellungen für die vier Karten jeweils an.


Status Quo

Das Makro ist wie im Screenshot konfiguriert und eingefügt. Auf zum nächsten Schritt.

Navigation abgeschlossen. Das ist der Weg!

Speichere die Seite und deine Navigation ist fertig. Fantastisch! 
Jetzt kommt der dritte und letzte Schritt: Der Inhalt

3. Inhalt


SCHRITT 3

Inhalte


3.1
3.2
3.3
3.4
3.5
3.6
Resultat

Layout einfügen

Confluence bietet von Haus aus sogenannte Layouts an, mit denen Inhalte in Spalten unterteilt werden können. Ich nutze es in diesem Fall, um den Abstand zwischen Navigation und Inhalt zu minimieren. Ich weiß, dass es komisch klingt, aber der Confluence Editor hat so seine Eigenheiten...

Klicke auf den Button 'Page Layout' und anschließend auf den Button 'Add section'.



Status Quo

Nun solltest du zwei Layout Boxen (gestrichelte Rahmen) wie im Screenshot sehen.

Wir arbeiten jetzt in der zweiten noch leeren Box. Auf zum nächsten Schritt.

Füge das Makro 'Aura - Background Content' in die zweite Layout Box aus 3.1 ein

Einstellungen:

  • Content Vertical Position: Center
  • Minimum Height: 850
  • Padding: 40
  • Color Picker: FFFFFF (Weiß) und Opacity Regler auf 90
  • Image: Im Reiter Web die URL des hier hinterlegten Bildes einfügen


Status Quo

Das Makro ist wie im Screenshot konfiguriert und eingefügt. Auf zum nächsten Schritt.

Füge das Makro 'Aura - Title' in das Background Content Makro aus 3.2 ein

Einstellungen:

  • Font Weight: Light
  • Text Ausrichtung: Mittig
  • Font Size: 16
  • Select line height manually: on / 56
  • Farbe: 525252

Nachdem du das Makro eingefügt hast, kannst du deinen gewünschten Text in das Makro eingeben. Ich habe MOST WANTED eingetragen.


Status Quo

Das Makro ist wie im Screenshot konfiguriert und eingefügt. Auf zum nächsten Schritt.

Füge das Makro 'Aura - Title' unter den Title aus 3.3 ein

Einstellungen:

  • Font Weight: Bold
  • Text Ausrichtung: Mittig
  • Farbe: 000000


Status Quo

Das Makro ist wie im Screenshot konfiguriert und eingefügt. Auf zum nächsten Schritt.

Füge das Makro 'Aura - Divider' unter den Title aus 3.4 ein

Einstellungen:

  • Alignment: Center
  • Full width: Aus & anschließend Width auf 90 stellen
  • Farbe: B01548

Nach dem Einfügen drücke auf Enter, um eine neue Zeile nach dem Divider für das nächste Makro zu erstellen. 


Status Quo

Das Makro ist wie im Screenshot konfiguriert und eingefügt. Auf zum nächsten Schritt.

Füge das Makro 'Aura - Cards' unter den Divider aus 3.5 ein

Im Reiter 'General' folgende Einstellungen vornehmen:

  • Card Type: Bild
  • Columns: 1
  • Hover Effect: Shrink
  • Image Position: Links
  • Image Size: Slider auf ca. 3/4
  • Padding inside cards: 30

Klicke auf die erste Karte in der rechten Vorschau. Der Reiter wechselt nun auf 'Content'. Hier kannst du die jeweils ausgewählte Karte auf deine Wünsche hin anpassen und deine Inhalte einpflegen.


Status Quo

Das Makro ist wie im Screenshot konfiguriert und eingefügt. Auf zum nächsten Schritt.

Achievement unlocked - Du hast alle Schritte geschafft!

Glückwunsch! Sieht toll aus oder? Sicherlich hast du jetzt ganz viele Ideen, die du umsetzen möchtest. Sei kreativ und erstelle die schönsten Seiten. Inspiriere & motiviere deine Kollegen.

Hier kannst du dir nochmal die Vorlage live anschauen, bearbeiten und mit deiner Seite vergleichen:

Vorlage


Ansprechende Confluence Seiten

Gallerie

Gesamte Gallerie anschauen

Kurzlink dieser Seite      This page in English

  • No labels
Diese Seite wurde zuletzt am 13.01.2021 geändert.