Anleitung
Erstelle attraktive
Confluence Seiten
Eine Schritt für Schritt Anleitung von Jan Kuntscher, Product Manager @ //SEIBERT/MEDIA
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
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?
SCHRITT 2
Navigation
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
SCHRITT 3
Inhalte
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:
