Registerkarten werden wahlweise Vertikal oder Horizontal dargestellt. In kleinen Anzeigegeräten wird automatisch die vertikale Darstellung verwendet. Diese automatische Auswahl nennt man „responsiv“. Vorteil: Darum brauchen Sie sich nicht kümmern.
Wählen Sie den Registerkartenblock über das Pluszeichen im Editor aus oder tippen Sie in einem leeren Absatzblock /tabs und drücken auf Enter oder Return. Damit haben Sie den Block und auch Ihre erste Registerkarte angelegt.
Den Titel geben Sie rechts in den Einstellungen in der Sidebar ein. Öffnen Sie diese oben rechts gleich nebem dem Speichern Button.
Auch den Slug geben Sie rechts in den Einstellungen in der Sidebar ein. Der Slug ist die Benennung dieser Registerkarte in der URL.
Damit weisen Sie den Besucher per Link direkt auf einen Reiter der Registerkarten hin. Sie müssen den Link nur um den Slug erweitern. Beispiel: auf diese Seite verweisen Sie mit diesem Link:
cms.zdv.uni-mainz.de/modul-demo/tabs/
host.domain.top-level-domain/verzeichnis/seite
Auf genau diese Registerkarte auf der Seite verweisen Sie mit
cms.zdv.uni-mainz.de/modul-demo/tabs#slug und auf die nächste Registerkarte verweisen Sie per
cms.zdv.uni-mainz.de/modul-demo/tabs#ausrichtung
Slugs müssen eindeutig sind. Wenn Sie zwei Karten gleichen Titels haben, schalten Sie für eine den benutzerdefinierten Slug ein und ändern den slug auf einen eindeutigen Wert.
Der Text bei Slug wird zum Ankerpunkt in der Webadresse. Beispiel: Die Seite hat die Adresse projekt.uni-mainz.de/thema
Der slug ist „langer-text-unterthema-1“
Dann ist die Adresse projekt.uni-mainz.de/thema#langer-text-unterthema-1
Diese unschöne Adresse sollten sie mittels des Benutzerdefinierten Slugs kürzen.
Verlinkten NICHT auf Inhalte innerhalb der Registerkarten! Das sieht wegen den Layoutshifts unschön aus. Immer auf den Slug des Tabs/Akkordeons verlinken.
Bei Ankernavigation auf den Seiten den Slug des Registerkartenelements oder des Akkordeons wird so der Link innerhalbe einer Seite einfügt: „#namedesslugs“, dort sollen weder Slashes oder ganze Links stehen. Der Hashtag sorgt dafür das dieser Link als „internal“ betrachtet wird, dadurch wird die Seite beim klick nicht nochmal neu geladen.
Diese Einstellung gibt es nur bei VERTIKALER Richtung! Klicken Sie auf den Registerkartenblock. Wählen Sie dann in der Sidebar die Anordnung/ Richtung, Justification / Orientation.
Diese Einstellung gibt es nur bei Vertikaler Ausrichtung. Automatisch anpassen bedeutet, dass die Tab-Breite an die Fensterbreite angepasst wird.
Fügen Sie weitere Registerkarten hinzu, indem Sie den Registerkartenblock auswählen. Der Cursor befindet sich irgendwo in den Registerkarten. Klicken Sie in den Blockeinstellungen auf das rote Icon mit dem Strich. Damit ist die einzelne Karte ausgewählt. Mit nochmaligem Klick auf das rote Icon befinden Sie sich bei den Einstellungen des gesamten Blocks . Klicken Sie nochmals für die Registerkarten den Blockeinstellungen. Nun ist oben rechts (bei Horizontalen) oder unter dem letzten Tab ein Pluszeichen erschienen. Mit Klick darauf erzeugen Sie eine neue Registerkarte.
Schachteln Sie keine Schachteln! Hier als Inhalt nur Texte und Bilder.
Eine gute Idee! Dies passiert automatisch sobald zu wenig Platz in dem Browserfenster ist.
Sind es allerdings sehr viele Registerkarten, dann ist das mobil auch nicht bedienerfreundlich.
Vertikal bedeutet, dass die einzelnen Registerkarten links auf der Seite untereinander stehen. In der mobilen Ansicht sieht man nur die Registerkarten, die man aufklappt. Mobil unterscheiden sich also Registerkarten und Akkordeons nicht!
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.