{"id":1350,"date":"2022-05-03T16:24:27","date_gmt":"2022-05-03T14:24:27","guid":{"rendered":"https:\/\/cms-test.zdv.uni-mainz.de\/demo-module\/?page_id=1350"},"modified":"2026-04-02T09:20:57","modified_gmt":"2026-04-02T07:20:57","slug":"tabs","status":"publish","type":"page","link":"https:\/\/cms.zdv.uni-mainz.de\/modul-demo\/tabs\/","title":{"rendered":"Registerkarten"},"content":{"rendered":"\n
<\/div>\n\n\n\n<\/jgu-base-pageheader>\n\n\n

Registerkarten werden wahlweise Vertikal oder Horizontal dargestellt. In kleinen Anzeigeger\u00e4ten wird automatisch die vertikale Darstellung verwendet. Diese automatische Auswahl nennt man „responsiv“. Vorteil: Darum brauchen Sie sich nicht k\u00fcmmern. <\/p>\n\n\n\n \n<\/jgu-base-video>\n\n<\/jgu-base-heading>\n\n\n\n \n\n \n\n

W\u00e4hlen Sie den Registerkartenblock \u00fcber das Pluszeichen im Editor aus oder tippen Sie in einem leeren Absatzblock \/tabs und dr\u00fccken auf Enter oder Return. Damit haben Sie den Block und auch Ihre erste Registerkarte angelegt.<\/p>\n\n\n<\/jgu-base-tabsitem>\n\n\n \n\n

Den Titel<\/strong> geben Sie rechts in den Einstellungen in der Sidebar ein. \u00d6ffnen Sie diese oben rechts gleich nebem dem Speichern Button.<\/p>\n\n\n<\/jgu-base-tabsitem>\n\n\n \n\n

Auch den Slug geben Sie rechts in den Einstellungen in der Sidebar ein. Der Slug ist die Benennung dieser Registerkarte in der URL. <\/p>\n\n\n\n

Damit weisen Sie den Besucher per Link direkt auf einen Reiter der Registerkarten hin. Sie m\u00fcssen den Link nur um den Slug erweitern. Beispiel: auf diese Seite verweisen Sie mit diesem Link:<\/p>\n\n\n\n

cms.zdv.uni-mainz.de\/modul-demo\/tabs\/<\/code><\/p>\n\n\n\n

host.domain.top-level-domain\/verzeichnis\/seite<\/code><\/p>\n\n\n\n

Auf genau diese Registerkarte auf der Seite verweisen Sie mit<\/p>\n\n\n\n

cms.zdv.uni-mainz.de\/modul-demo\/tabs#slug<\/code> und auf die n\u00e4chste Registerkarte verweisen Sie per<\/p>\n\n\n\n

cms.zdv.uni-mainz.de\/modul-demo\/tabs#ausrichtung<\/code><\/p>\n\n\n<\/jgu-base-tabsitem>\n\n\n \n\n

Slugs m\u00fcssen eindeutig sind. Wenn Sie zwei Karten gleichen Titels haben, schalten Sie f\u00fcr eine den benutzerdefinierten Slug ein und \u00e4ndern den slug auf einen eindeutigen Wert.<\/p>\n\n\n\n

Der Text bei Slug wird zum Ankerpunkt in der Webadresse. Beispiel: Die Seite hat die Adresse projekt.uni-mainz.de\/thema<\/p>\n\n\n\n

Der slug ist „langer-text-unterthema-1“<\/p>\n\n\n\n

Dann ist die Adresse projekt.uni-mainz.de\/thema#langer-text-unterthema-1<\/p>\n\n\n\n

Diese unsch\u00f6ne Adresse sollten sie mittels des Benutzerdefinierten Slugs k\u00fcrzen.<\/p>\n\n\n\n

Verlinkten NICHT auf Inhalte innerhalb der Registerkarten! Das sieht wegen den Layoutshifts unsch\u00f6n aus. Immer auf den Slug des Tabs\/Akkordeons verlinken.<\/p>\n\n\n\n

Bei Ankernavigation auf den Seiten den Slug des Registerkartenelements oder des Akkordeons wird so der Link innerhalbe einer Seite einf\u00fcgt: „#namedesslugs“, dort sollen weder Slashes oder ganze Links stehen. Der Hashtag sorgt daf\u00fcr das dieser Link als „internal“ betrachtet wird, dadurch wird die Seite beim klick nicht nochmal neu geladen.
<\/p>\n\n\n<\/jgu-base-tabsitem>\n\n\n \n\n

Diese Einstellung gibt es nur bei VERTIKALER Richtung! Klicken Sie auf den Registerkartenblock. W\u00e4hlen Sie dann in der Sidebar die Anordnung\/ Richtung, Justification \/ Orientation.<\/p>\n\n\n<\/jgu-base-tabsitem>\n\n\n \n\n

Diese Einstellung gibt es nur bei Vertikaler Ausrichtung. Automatisch anpassen bedeutet, dass die Tab-Breite an die Fensterbreite angepasst wird.<\/p>\n\n\n<\/jgu-base-tabsitem>\n\n\n \n\n

F\u00fcgen Sie weitere Registerkarten hinzu, indem Sie den Registerkartenblock ausw\u00e4hlen. 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\u00e4hlt. Mit nochmaligem Klick auf das rote Icon befinden Sie sich bei den Einstellungen des gesamten Blocks . Klicken Sie nochmals f\u00fcr 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.<\/p>\n\n\n<\/jgu-base-tabsitem>\n\n\n \n\n

Schachteln Sie keine Schachteln! Hier als Inhalt nur Texte und Bilder. <\/p>\n\n\n<\/jgu-base-tabsitem>\n\n\n \n\n

Eine gute Idee! Dies passiert automatisch sobald zu wenig Platz in dem Browserfenster ist.<\/p>\n\n\n\n

Sind es allerdings sehr viele Registerkarten, dann ist das mobil auch nicht bedienerfreundlich.<\/p>\n\n\n