HANDOUT PORTALSEITEN-LAYOUT Neues Layout Portalseiten Kopfbereich neu Sprachenumschalte links Logobereich neu Suchenfeld + Social-Media Mega-Menu/Flyout Menu Slider Featurebuttons Newsbereich + Portlet Kampagnenbereich Sitemap am Seitenfuß 1. Allgemeines zum neuen Layout Das 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 PloneSupport 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. Installation Das 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). 1/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. Anlegen einer Portalseite Navigieren 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. Elemente des Kopfbereichs 4.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-Bereich Der 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. Suchenfeld Das Suchen-Feld wird prominenter im rechten Bereich des Seitenkopfes dargestellt. 4.4. Social Media Links Links 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. Kopfgrafiken entfallen Im neuen Layout entfallen die Kopfgrafiken. 5. Mega-Menu / Flyoutmenu Ein neues Element im neuen Layout sind sogenannte Mega-Menus / Layermenu. Diese werden bei Hover/Klick auf einen 2 / 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. Elemente einer Portalseite 6.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 3 / 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 4 / 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. Newsbereich und Portletspalte Im 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. Kampagnen Im 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. Sitemap Ein 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. 5 / 5 Stand: 28.08.16