Open Cms 10 Apollo Template. Anleitung OpenCms 10 Apollo Template. Reiter/Akkordeon. Version 1.0

Transkript

1 Anleitung OpenCms 10 Apollo Template Reiter/Akkordeon Version 1.0

2 INHALT Das Reiter-Element... 3 Verschiedene Darstellungsmöglichkeiten... 3 Erstellen eines Reiterelementes... 4 Reiterelement auf Seite einfügen... 4 Einteilung hinzufügen... 4 Inhalte hinzufügen... 6 Elementeinstellungen... 6 Option für die Vorlage... 7 Formatter (Format)... 7 Verstecke Titel... 7 Wrapper CSS Klasse(n)... 8 Zeige in Gerät... 8 Impressum Erzbistum Köln Reiter/Akkordeon 22. Februar 2017

3 DAS REITER-ELEMENT Mit einem Reiter-Element kann man gut einen neuen gestalterischen Blickpunkt setzen. Über eine relativ beschränkte Höhe können nicht nur Bilder, sondern auch Texte untergebracht und so den Besuchern über die Registerkarten verschiedenste Informationen schnell bereitgestellt werden. Verschiedene Darstellungsmöglichkeiten Reiter-Element in horizontaler Darstellung mit Registerkarten Reiter in Akkordeondarstellung 3 Erzbistum Köln Reiter/Akkordeon 22. Februar 2017

4 ERSTELLEN EINES REITERELEMENTES Reiterelement auf Seite einfügen Ziehen Sie dazu über den Zauberstab das Element vom Typ Reiter-Element auf Ihre Seite. Über den Bleistift bearbeiten Sie das Reiter-Element. In dem sich öffnenden Bearbeitungsfenster können Sie die Überschrift im Feld Titel hinterlegen oder neue Registerkarten anlegen und Titel vergeben oder ändern, da der Reitername als Titel der Registerkarte oder des Akkordeons angezeigt wird. Um eine zusätzliche Registerkarte hinzuzufügen, wählen Sie das + -Symbol aus und fügen einen neuen Reiter hinzu. Anschließend vergeben Sie einen Titel der Registerkarte. Nachdem Sie die gewünschte Anzahl an Registerkarten angelegt haben, schließen Sie das Bearbeitungsfester über die Schaltfläche Speichern & schließen. Einteilung hinzufügen Inhalte können Sie dem Reiterelement nur über den Seiteneditor hinzufügen. Standardmäßig enthält das Reiterelement einen leeren Container. Um im Reiterelement ein Inhaltselement platzieren zu können, müssen Sie dieses zuerst mit einer Einteilung versehen. In diesem Container können Sie nur Row-Einteilungen verwenden. Dies wird Ihnen aber auch im leeren Container angezeigt. 4 Erzbistum Köln Reiter/Akkordeon 22. Februar 2017

5 Um eine Einteilung in den Container hinzuzufügen, gehen Sie zunächst über die Schaltfläche Inhalte hinzufügen und das Drop-Down Menü in die Templateeinstellungen. Hier klicken auf das Element Layout Zeile und wählen eine Inhaltseinteilung Row aus. Die gewünschte Einteilung ziehen Sie in den leeren Container des Reiterelementes. Diesen Schritt wiederholen Sie für den / die anderen Reiter. Beispiel: Row 3 Spalten (4-4-4) 5 Erzbistum Köln Reiter/Akkordeon 22. Februar 2017

6 Inhalte hinzufügen Im Anschluss an das Einfügen der Einteilung können Sie in das Reiter-Element ein Inhaltselement einfügen. Hierzu gehen Sie über den Zauberstab auf den Reiter Typen und wechseln hier im Drop Down Menü auf Inhaltselement. Hier können Sie dann Inhaltselemente in das Reiterelement hinzufügen. Wie Sie einen Inhaltsabschnitt verwenden und konfigurieren, finden Sie in der separaten Anleitung Inhalts-Abschnitt. ELEMENTEINSTELLUNGEN Über die Elementeinstellungen können Sie die Darstellungsform des Reiter-Elementes einstellen, z.b. ob die Überschrift angezeigt werden soll, eine Hintergrundfarbe, oder ob das Element als Reiter bzw. Akkordeon dargestellt werden soll. 6 Erzbistum Köln Reiter/Akkordeon 22. Februar 2017

7 Option für die Vorlage Wenn Sie beim Bearbeiten der Einstellung das Kontrollkästchen aktiviert lassen, übernimmt OpenCms die Einstellungen in Vorlage für das nächste Element. Formatter (Format) Über die Einstellung Formatter können Sie auswählen, ob das Reiterelement als Tabs (Reiter) oder Akkordeon dargestellt werden soll. Verstecke Titel Bei aktiviertem Kontrollkästchen wird die Überschrift, also der Titel, nicht angezeigt. 7 Erzbistum Köln Reiter/Akkordeon 22. Februar 2017

8 Wrapper CSS Klasse(n) In dem Feld Wrapper CSS Klasse(n) können Sie sich auf in OpenCms hinterlegte Farben beziehen, die Sie als Hintergrundfarbe im Element hinterlegen. Um eine Hintergrundfarbe im Element zu hinterlegen, tragen Sie einen der folgenden Werte in das Feld ein: CSS-Klassen: Die Bezeichnung der CSS-Klassen setzen sich zusammen aus Hintergrund (bg) - Farbe (in englischer Schreibweise) z.b.: bg-red, bg-blue, bg-green, bg-yellow, etc. (Primär- und Sekundärfarben) Zeige in Gerät Hier können Sie wählen, in welchen Geräten die Elemente dargestellt werden sollen. Im Anschluss bestätigen Sie Ihre Einstellung mit Ok. Fertig. 8 Erzbistum Köln Reiter/Akkordeon 22. Februar 2017

9 IMPRESSUM Herausgeber: Erzbistum Köln Generalvikariat Hauptabteilung Verwaltung Abteilung IT-Services Internet-Administration Marzellenstraße Köln Besucheranschrift: Marzellenstraße Köln Telefon: Telefax: URL: Autor: Redaktion: Hendrik Alefelder, Auszubildender Wolfgang Koch-Tien Birgit Karbach 9 Erzbistum Köln Reiter/Akkordeon 22. Februar 2017