HANDOUT PORTALSEITEN-LAYOUT

1 / 5 Stand: 28.08.16

NeuesLayout–Portalseiten

• Kopfbereich neu • Sprachenumschalte

links • Logobereich neu • Suchenfeld +

Social-Media

• Mega-Menu/Flyout Menu

• Slider

• Featurebuttons

• Newsbereich + Portlet

• Kampagnenbereich

• Sitemap am

Seitenfuß

1. AllgemeineszumneuenLayoutDas neue Layout ist als eigenständiges Theme umgesetzt. Es ist nur global für ein gesamtes Portal aktivierbar. Es bietet die Möglichkeit sogenannte „Portalseiten“ einzurichten. Gleichzeitig ändert sich auf bestehenden Seiten vor allem der Kopfbereich und in kleinen Teilen auch die Abmessungen der Portletspalten. Vorher Testen Das neue Theme sollte zuerst in der Testumgebung ausprobiert werden, der Plone-Support hilft hierbei gerne. One Way Theme-Wechsel Tests im Vorfeld empfehlen sich ausdrücklich, da ein späteres „Zurück-Wechseln“ zum alten Theme nicht möglich ist! Es kann pro Portal in jedem Ordner beliebig viele Portalseiten geben.

2. InstallationDas neue Layout/Theme wird als Zusatzprodukt installiert. Sie finden als Administrator unter KonfigurationàZusatzprodukte den Eintrag: unibonn.theme2016 Haken Sie dieses Produkt an und klicken unten auf „Installieren“. Mit der Installation des Themes wird dieses automatisch aktiv. Gleichzeitig werden hierbei die Produkte „Doormate“, „unibonn.fontawesome“ und unibonn.startseite mitinstalliert, falls diese voher noch nicht installiert waren. (Hinter den jeweiligen Produktnamen ist die jeweils aktuelle Version aufgeführt).

HANDOUT PORTALSEITEN-LAYOUT

2 / 5 Stand: 28.08.16

Hinweis: Auch wenn es für Admins klickbar ist, in unserem Setup ist es nicht vorgesehen, Produkte zu deinstallieren. Lassen Sie die Deinstallation von Produkten bitte nur über den Support vornehmen!

3. AnlegeneinerPortalseiteNavigieren Sie in den Ordner, in dem Portalseite angelegt werden soll. Hängen Sie an die URL in Ihrem Browser folgendes an: create_default_startpage Daraufhin wird Ihnen eine Startseite (eine Collage) mit vordefinierten Elementen angelegt. Sie finden diese Seite normal unter „Inhalte“ in einem Ordner und können diese z.B. problemlos als „Startseite“ eines Ordners definieren.

4. ElementedesKopfbereichs4.1. Sprachenumschalter

Die Sprachenumschaltung erfolgt jetzt links oben. Die Sprachen werden nicht mehr durch Flaggen sondern durch die Iso-Sprachcodes (DE, EN, FR etc.) dargestellt.

4.2. Logo-BereichDer Logobereich wurde in der Höhe verkleinert. Der Schriftzug unter dem Uni-Bonn-Logo entfällt. Damit reduziert sich auch der Platz für das Einrichtungslogo nach unten.

4.3. SuchenfeldDas Suchen-Feld wird prominenter im rechten Bereich des Seitenkopfes dargestellt.

4.4. SocialMediaLinksLinks neben dem Suchenfeld können Social Media Icons (incl. Verlinkung) angezeigt werden. Sie können selbst definieren, welche Icons incl. Links dort angezeigt werden sollen. In einem Navigation-Root werden die Social-Media-Icons jeweils neu definiert. Sie finden die Social Media Icons in den Optionen des Navroots. (Gehen Sie im Ordner auf „Inhalte“ und dann auf „EditNavroot“). In dem nachfolgenden Dialog „RootObject bearbeiten“ finden Sie die Social Media Icons ganz unten:

Sie definieren jeweils Titel, Link und können ein Icon aus einer vorgewählten Liste

aussuchen. 4.5. KopfgrafikenentfallenIm neuen Layout entfallen die Kopfgrafiken.

5. Mega-Menu/FlyoutmenuEin neues Element im neuen Layout sind sogenannte Mega-Menus / Layermenu. Diese werden bei Hover/Klick auf einen

HANDOUT PORTALSEITEN-LAYOUT

3 / 5 Stand: 28.08.16

Menüpunkt in der Hauptnavigation eingeblendet. Die Struktur und Elemente des Mega-Menus sind redaktionell gestaltet. Sie finden die Einrichtung in den Eigenschaften des jeweiligen Ordners. Wechseln Sie auf den Navigationspunkt zu dem Sie ein Mega-Menu einrichten wollen. Dort auf „Inhalte“ und „Bearbeiten“. Im Register „Einstellungen“ finden Sie unten den Eintrag „Folder Menu“. Um die Struktur und Optik der Ausgabe hinzubekommen, sollte dieser Eintrag nur mit dem FcK-Editor bearbeitet werden. Im Fck-Editor finden Sie in der oberen

Buttonzeile den Button „Vorlagen“ . Klicken Sie auf diesen, in dem nachfolgenden

Popup finden Sie den Eintrag „Flyout Column“. Klicken Sie auf den Eintrag, Sie erhalten dann einen Beispieleintrag in das Editorfeld. Ein Abstand (Umbruch) zwischen zwei „Flyout Columns“ erzeugt in der Ausgabe eine neue Spalte. Innerhalb einer Spalte können Sie Zwischenüberschriften erzeugen, indem Sie einem Eintrag das Überschriftenformat „h3“ zuweisen. Wir empfehlen Ihnen zuerst die komplette Struktur über das Anlegen mehrer „Flyout Columns“ zu erzeugen. Kontrollieren Sie die Ausgabe und fangen Sie erst danach mit der Zwischenstrukturieren und den einzelnen Links an. Es empfiehlt sich die Bearbeitung dieser Einträge auf möglichst wenige Redakteure zu reduzieren.

6. ElementeeinerPortalseite6.1. Slider

Der Slider ist eine Option direkt an der Collage der Portalseite. Sie finden dort rechts außen den Registereintrag „slider settings“.

Klicken Sie auf „Slidersetting“. Lassen Sie die oberen Einstellungen auf den vorgeschlagenen Standardwerten. Sie finden unten die jeweiligen Slides. Sie könne dort einen neuen Slide hinzufügen, die Reihenfolge bestehender Slides ändern bzw. bestehende Slides editieren. Ein Slide besteht jeweils aus drei Feldern:

• Slide Fügen Sie in dieses Feld das Bild ein. Das Bild muss vorher außerhalb der

HANDOUT PORTALSEITEN-LAYOUT

4 / 5 Stand: 28.08.16

Collage hochgeladen werden (nicht an dieser Stelle im FCK hochladen!). Das Hochgeladene Bild sollte eine Breite von 1160 Pixeln haben. Beim Einfügen des Bildes nehmen Sie dann die Größe „full“. Für die Höhe des Bildes gibt es keine Vorgabe

• Slide Overlay In dieses Textfeld kommt der Text, der in der Ausgabe in das Feld kommt, das über das Sliderbild geblendet wird. Die Überschrift ist dabei schlicht Text mit der Auszeichnung bold/fett. Nach dem Fließtext besteht die Möglichkeit einen „Link“ zu setzen, dieser wird in der Ausgabe als Button dargestellt.

• Overlay orientation Hier bestimmen Sie die Position des Textfeldes über dem Sliderbild (links, rechts, oben, unten)

6.2. Featurebuttons

In der Zeile darunter finden Sie die Feature Buttons:

Diese bestehen jeweils aus einem Symbol, einer Beschriftung und einem dazugehörigen Link. Beim initialen Anlegen einer Portalseite werden hier schon 5 Featurebuttons angelegt. Sie können diese dann einfach ändern. Gehen Sie dazu auf die Startseite und dort auf „Zusammensetzen“:

Sie finden dort die schon angelegten FeatureButtons. Um einen Button zu ändern, klicken Sie darüber auf „Bearbeiten“. Ein Featurebutton besteht dann aus dem Titel (der späteren Beschriftung), einem Link und dem Symbol. Der Link ist ein „interner Link“ – wenn Sie hier auf eine externe Seite verlinken wollen, müssen Sie vorher in Ihrem Portal ein „Link Objekt“ in

HANDOUT PORTALSEITEN-LAYOUT

5 / 5 Stand: 28.08.16

einem Ordner angelegt haben. Das Linkobjekt enthält die externe URL, der FeatureButton verweist auf das interne Linkobjekt. Bei dem Symbol haben Sie Auswahl auf Icons aus dem „Awesome-Font“. Die dort enthaltenen Icons finden Sie unter: https://fortawesome.github.io/Font-Awesome/icons/ Jedes Icon hat dort eine Bezeichnung (z.B. „bluetooth“, „percent“ etc.). Tragen Sie diesen Namen in das Feld „Feature button“ ein. Sie erhalten eine kleine Vorschau auf das Icon.

6.3. NewsbereichundPortletspalteIm mittleren Teil der Portalseite ist standardmäßig der Newsbereich untergebracht. Dieser zeigt automatisch News (vormals Pressemitteilungen) an. Wenn Sie einen solchen Bereich noch nicht haben, diesen aber einrichten möchten, wenden Sie sich bitte an den Plone-Support. Im rechten Bereich gibt es eine „Portletspalte“, die hier innerhalb der Collage abgebildet ist. D.h. diese Portlets laufen nur rechts neben den News und nicht wie bisher über die gesamte Seite.

6.4. KampagnenIm unteren Bereich der Portalseite finden Sie die sogenannten Kampagnen. Diese bestehen aus einer Überschrift, einem Bild und einem kurzen beschreibenden Text. Die Logik der Kampagenen ist analog zu den Featurebuttons, d.h. mit Anlegen der Portalseite wurden dort 4 „Dummy-Einträge“ vorgenommen, die Sie jeweils auf Ihre Bedürfnisse hin abändern können. à Was nicht benötigt wird, kann entfernt werden. Wenn Sie einzelne Elemente der Portalseite nicht benötigen, können Sie diese aus der Collage entfernen.

7. SitemapEin weiteres Element des neuen Themes, das sich global über alle Seiten erstreckt, ist eine redaktionell gepflegte „Sitemap“ am Ende jeder Seite. Sie legen diese Sitemap zentral in Ihrem Portal an. Pro Navigation-Root kann es dann jeweils eine neue Sitemap geben. Sie finden unter hinzufügen einen neuen Punkt „doormat“. Legen Sie hiermit ein erstes Objekt an. Innerhalb der doormat müssen Sie erst eine Struktur erzeugen. Diese besteht zuerst aus „doormat columns“ (die Spaltenaufteilung) und innerhalb einer Spalte dann aus „sections“. Eine Sections ist schlussendlich ein Texteditorfeld. Hier können Sie die Überschriften und die anzuzeigenden Links eintragen. Es empfiehlt sich die Doormat durch den Administrator verwalten zu lassen. Berücksichtigen Sie, dass die doormat auf jeder Seite unten angezeigt wird, es sollte sich hier um Redaktionell ausgewählte, strukturierte Bereiche handeln – die Sitemap sollte nicht eine vollständige Sitemap sein.