{"id":112295,"date":"2023-05-03T10:03:25","date_gmt":"2023-05-03T08:03:25","guid":{"rendered":"https:\/\/cms-test.zdv.uni-mainz.de\/demo-module\/?page_id=112295"},"modified":"2026-05-08T12:46:52","modified_gmt":"2026-05-08T10:46:52","slug":"uebersicht","status":"publish","type":"page","link":"https:\/\/cms.zdv.uni-mainz.de\/modul-demo\/uebersicht\/","title":{"rendered":"WordPress Demo Layout 2023"},"content":{"rendered":"<\/jgu-base-heading>\n\n\n\n

Hier finden Sie Beispiele zur Verwendung und Kombination der Bl\u00f6cke, dem grundlegenden Element des Layouts 2023.<\/p>\n\n\n\n

<\/p>\n\n\n<\/jgu-base-heading>\n\n\n\n

Alle Bl\u00f6cke jeweils in einer Ansicht. Mit dem Pfeil-Button sehen Sie alle weiteren Einstellm\u00f6glichkeiten (Auspr\u00e4gungen) des jeweiligen Blocks.<\/p>\n\n\n\n

    \n
  1. Ankernavigation, Abschnitt, Akkordeon, Alert Box, Aufklappbarer Bereich, Beitragsseite, Beitragsarchiv, Beitragsauflistung, Beitragsfu\u00df, Bild, Bildergalerie<\/li>\n\n\n\n
  2. Button, Events-Slider, Gravity-Forms, JGU Fis, JGU IdM, Jogustine, Key Facts, Kontakt, Listen<\/li>\n\n\n\n
  3. Logoraster, Modal\/Info-Popup, Numberbox, Prozessablauf<\/li>\n\n\n\n
  4. Registerkarten, Schwerpunkte, Slider, Seiteneinstieg<\/li>\n\n\n\n
  5. Step by Step Form, Teaserbox, Testimonial, \u00dcberschrift, Video<\/li>\n<\/ol>\n\n\n\n

    Im Gutenberg-Editor Core existieren noch viel mehr Bl\u00f6cke, die aber nicht zum JGU Style passen oder nicht funktionieren. Die Bl\u00f6cke im JGU Style erkennen Sie an der roten Farbe in der Bl\u00f6cke-\u00dcbersicht. Demo-Seite des Gutenberg-Editors.<\/a><\/p>\n\n\n\n

    <\/jgu-base-heading>\n\n\n\n

    2 Bl\u00f6cke, um zwischen verschiedenen Abschnitten innerhalb einer Seite zu navigieren, die Ankernavigation, die man \u00fcblicherweise nur einmal oben auf der Seite ben\u00f6tigt und der Ankerpunkt:<\/p>\n\n\n\n \n<\/jgu-base-anchornavigation><\/div>\n\n\n\n

    <\/div>\n\n\n\n \n<\/jgu-base-buttonitem>\n\n<\/jgu-base-button>\n\n<\/div>\n\n\n\n
    <\/div>\n\n\n\n
    \n

    Ankernavigation, Abschnitt, Akkordeon, Alert Box, Aufklappbarer Bereich, Bildergalerie<\/p>\n\n\n<\/jgu-base-heading>\n\n\n\n

    \n

    L\u00e4ngere Webseiten durch Abschnitte mit farbigem Hintergrund versehen. Dadurch wird auch das Layout darin liegender Bl\u00f6cke farblich automatisch angepasst. Zus\u00e4tzlich werden Abst\u00e4nde zu den anderen Abschnitten eingef\u00fcgt.<\/p>\n<\/div><\/div>\n<\/jgu-base-section>\n\n\n

    <\/div>\n\n\n\n \n<\/jgu-base-buttonitem>\n\n<\/jgu-base-button><\/div>\n\n\n\n
    <\/div>\n\n\n\n
    <\/jgu-base-heading>\n\n\n\n

    Geschachtelter Block Akkordeon, welcher einzelne Akkordeon-Elemente beinhaltet. Mit Suchfunktion.<\/p>\n\n\n\n \n\n \n\n

    \n
    \n

    Hier in die Akkordeon-Falte kommt der eigentliche Inhalt. Hier sollte nichts stehen, was jemand suchen k\u00f6nnte, sonst verstecken Sie dies.<\/p>\n<\/div>\n<\/div>\n\n\n<\/jgu-base-accordionitem>\n\n\n \n\n

    Beliebige Inhalte m\u00f6glich, aber halten Sie es einfach.<\/p>\n\n\n<\/jgu-base-accordionitem>\n\n<\/jgu-base-accordion>\n\n\n\n

    <\/div>\n\n\n\n \n<\/jgu-base-buttonitem>\n\n<\/jgu-base-button><\/div>\n\n\n\n
    <\/div>\n\n\n\n
    <\/jgu-base-heading>\n\n\n\n

    <\/p>\n\n\n\n\t\n\n \n\n \n<\/jgu-base-listitem>\n\n\n \n<\/jgu-base-listitem>\n\n<\/jgu-base-alertbox>\n\n\n \n\n \n<\/jgu-base-listitem>\n\n\n \n<\/jgu-base-listitem>\n\n<\/jgu-base-alertbox>\n\n<\/jgu-base-alertboxgrid>\n\n\n\n

    <\/div>\n\n\n\n \n<\/jgu-base-buttonitem>\n\n<\/jgu-base-button><\/div>\n\n\n\n
    <\/div>\n\n\n\n
    <\/jgu-base-heading>\n\n\n<\/jgu-base-collapsiblearea>\n\n\n
    <\/div>\n\n\n\n \n<\/jgu-base-buttonitem>\n\n<\/jgu-base-button><\/div>\n\n\n<\/jgu-base-heading>\n\n\n\n
    Block<\/strong><\/th>Alle Beitr\u00e4ge?<\/th>integrierte Suche<\/th>Darstellung fix<\/th>featured Image<\/th>auf Kategorien einschr\u00e4nkbar<\/th>>100?<\/th><\/tr><\/thead>
    Archive (core)<\/td>ja, \u00fcber Monatsliste<\/td>nein<\/td>ja<\/td>nein<\/td>nein<\/td>Ja<\/td><\/tr>
    Beitrags-Archiv<\/td>ja, mit mehr laden-Button<\/td>ja<\/td>ja<\/td>ja<\/td>nein<\/td>ja<\/td><\/tr>
    Blog Archive<\/td>Ja<\/td>nein<\/td>ja<\/td>ja<\/td>ja<\/td>Ja<\/td><\/tr>
    Magazin<\/td>ja<\/td>ja<\/td>ja<\/td>ja<\/td>nein, in jedem Reiter werden alle angezeigt<\/td>ja<\/td><\/tr>
    Post Listing<\/td>nur die ersten 20<\/td>nein<\/td>verschiedene Layouts<\/td>ja<\/td>ja<\/td>nein<\/td><\/tr>
    Beitragsseite<\/td>ja<\/td>ja<\/td>ja<\/td>ja<\/td>ja<\/td>ja<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

    Beitrags-Archiv<\/strong>: Alle Beitr\u00e4ge mit Suche (Zeit, Kategorien) aus verschiedenen Subsites der Multisite gemeinsam in einer festen Darstellung.<\/p>\n\n\n\n

    Blog Archive<\/strong>: Alle Beitr\u00e4ge in fester Darstellung. Sie k\u00f6nnen auf eine Kategorie einschr\u00e4nken.<\/p>\n\n\n\n

    Magazin<\/strong>: Blendet eine Suchmaske zum Filtern von Beitr\u00e4gen ein, die Reiter mit den Kategorien funktionieren noch nicht.<\/p>\n\n\n\n

    Post Listing<\/strong>: Ein Archiv der Beitr\u00e4ge verschiedener Subsites anzeigen in Form einer Auflistung, mit in Fokus Beitr\u00e4gen als Raster oder Slider. Die eierlegende Wollmilchsau: aus verschiedenen Subsites nach Kategorie eingeschr\u00e4nkt w\u00e4hlen Sie unter verschiedenen Layouts.<\/p>\n\n\n\n

    Die Beitragsseite<\/strong> ist KEIN Block! Sondern der Standard, der alternativ zur statischen Startseite im Customizer > Homepage-Einstellungen > Deine Startseite zeigt > Deine letzten Beitr\u00e4ge ausgew\u00e4hlt ist. Die ausgew\u00e4hlte Seite sollte bis auf die \u00dcberschrift leer sein und enth\u00e4lt eine Beitragsauflistung.<\/p>\n\n\n\n

    Beitragsfu\u00df: Am Ende eines Beitrags ein Men\u00fc zum Teilen und Drucken des Beitrags.<\/p>\n\n\n\n \n<\/jgu-base-buttonitem>\n\n<\/jgu-base-buttonitem>\n\n<\/jgu-base-buttonitem>\n\n<\/jgu-base-buttonitem>\n\n<\/jgu-base-buttonitem>\n\n<\/jgu-base-buttonitem>\n\n<\/jgu-base-buttonitem>\n\n<\/jgu-base-button>\n\n\n

    <\/div>\n\n\n<\/div>\n\n\n\n
    \n

    Button, Key Facts, Lightbox, Liste<\/p>\n<\/div>\n\n\n\n

    <\/div>\n\n\n\n
    <\/jgu-base-heading>\n\n\n\n

    Mit der Lightbox f\u00fcgen Sie Bilder ein, die anschlie\u00dfend bei Klick vollfl\u00e4chig in einer Lightbox angezeigt werden.<\/p>\n\n\n\n

    Mehr zum Urheberrecht und dem Recht am eigenen Bild <\/a><\/p>\n\n\n\n \n<\/jgu-base-image>\n\n\n

    <\/div>\n\n\n\n \n<\/jgu-base-buttonitem>\n\n<\/jgu-base-button><\/div>\n\n\n\n
    <\/jgu-base-heading>\n\n\n\n

    Bilder mit Beschreibungstext in einer Galerie mit Sliderfunktion. Bei Klick vollfl\u00e4chig mit Lightbox. Zus\u00e4tzliche M\u00f6glichkeit, Thumbnails der weiteren Slides einzublenden.<\/p>\n\n\n\n

    Mehr zum Urheberrecht und dem Recht am eigenen Bild <\/a><\/p>\n\n\n\n\n<\/jgu-base-imagegallery>\n\n\n\n

    <\/div>\n\n\n\n \n<\/jgu-base-buttonitem>\n\n<\/jgu-base-button><\/div>\n\n\n\n
    <\/jgu-base-heading>\n\n\n\n

    Button in unterschiedlicher Darstellung, mit Icon\/ohne etc.<\/p>\n\n\n\n \n<\/jgu-base-buttonitem>\n\n<\/jgu-base-buttonitem>\n\n<\/jgu-base-buttonitem>\n\n<\/jgu-base-button><\/div>\n\n\n<\/jgu-base-heading>\n\n\n\n

    Noch experimentelle, nicht fl\u00e4chendeckend ausgerollter \u00f6ffentlicher Veranstaltungskalender.<\/p>\n\n\n<\/jgu-base-eventsslider>\n\n\n\n \n<\/jgu-base-buttonitem>\n\n<\/jgu-base-button>\n\n<\/jgu-base-heading>\n\n\n\n

    Gravity Forms ist die proprit\u00e4re Softwarel\u00f6sung f\u00fcr<\/p>\n\n\n\n \n<\/jgu-base-buttonitem>\n\n<\/jgu-base-button>\n\n<\/jgu-base-heading>\n\n\n\n

    Uni-Bibliografie<\/a> einblenden: Bibliografische Daten sind die Butter auf dem Brot der Wissenschaft. F\u00fcr Wissenschaftler der Uni Mainz stellt die Universit\u00e4tsbibliothek daher eine eigene Bibliografie zur Verf\u00fcgung, deren Inhalte WordPress ebenfalls anzeigen kann. Bibliografische Informationen m\u00fcssen auf diese Weise nicht doppelt erfasst werden.<\/p>\n\n\n\n \n<\/jgu-base-buttonitem>\n\n<\/jgu-base-button>\n\n<\/jgu-base-heading>\n\n\n\n

    Kontakt- und Einrichtungsinfos anzeigen lassen (JGU IdM): binden Sie freigegebene Kontakt- und Einrichtungsinfos aus dem Personen- und Einrichtungsverzeichnis der JGU ein f\u00fcr einzelne Kontakte<\/a> oder ganze Organisationen<\/a><\/p>\n\n\n\n \n<\/jgu-base-buttonitem>\n\n<\/jgu-base-buttonitem>\n\n<\/jgu-base-button>\n\n<\/jgu-base-heading>\n\n\n\n

    JOGUStINe Lehrveranstaltungen einblenden: Die zentrale Verwaltung der Lehrveranstaltungen l\u00e4uft  \u00fcber JOGUStINe. WordPress kann die Lehrveranstaltungen eines Instituts oder eines Dozenten einblenden.<\/p>\n\n\n\n \n<\/jgu-base-buttonitem>\n\n<\/jgu-base-button>\n\n\n

    <\/jgu-base-heading>\n\n\n\n

    Einf\u00fcgen eines oder mehrerer Key Facts mit Icons, Headlines und Copytexten.<\/p>\n\n\n\n\n \n<\/jgu-base-keyfactsitem>\n\n\n \n<\/jgu-base-keyfactsitem>\n\n\n \n<\/jgu-base-keyfactsitem>\n\n\n \n<\/jgu-base-keyfactsitem>\n\n\n \n<\/jgu-base-keyfactsitem>\n\n\n \n<\/jgu-base-keyfactsitem>\n<\/jgu-base-keyfacts>\n\n\n

    <\/div>\n\n\n\n \n<\/jgu-base-buttonitem>\n\n<\/jgu-base-button><\/div>\n\n\n\n
    <\/div>\n\n\n\n
    <\/jgu-base-heading>\n\n\n\n

    Block zur Darstellung der Kontaktdaten einer Person, die sich nicht in personen.uni-mainz.de befindet.<\/p>\n\n\n\n

    IdM ist aus datenschutzrechtlichen Gr\u00fcnden immer vorzuziehen, denn dort ist der Nutzung des eigenen Bilds bereits zugestimmt worden. \u00a0Es d\u00fcrfen dort nur Fotos hochgeladen werden, f\u00fcr die die Person auch die Bildrechte besitzt. Mehr zum Urheberrecht und dem Recht am eigenen Bild <\/a><\/p>\n\n\n\n

    Der Kontakt-Block ist eigentlich eine Alertbox mit Zusatzfunktionen, Sie k\u00f6nnten Sie also auch so verwenden:<\/p>\n\n\n\n \n\n \n<\/jgu-base-listitem>\n\n\n \n<\/jgu-base-listitem>\n\n\n \n<\/jgu-base-listitem>\n\n\n \n<\/jgu-base-listitem>\n\n\n \n<\/jgu-base-listitem>\n\n\n \n<\/jgu-base-listitem>\n\n<\/jgu-base-contactcard>\n\n\n

    <\/div>\n\n\n\n

    Kontakt Raster<\/strong><\/p>\n\n\n\n

    Einf\u00fcgen der Kontaktdaten einer Person im Raster: <\/p>\n\n\n\n\t\n\n \n\n \n<\/jgu-base-listitem>\n\n\n \n<\/jgu-base-listitem>\n\n\n \n<\/jgu-base-listitem>\n\n\n \n<\/jgu-base-listitem>\n\n\n \n<\/jgu-base-listitem>\n\n\n \n<\/jgu-base-listitem>\n\n\n \n<\/jgu-base-listitem>\n\n\n \n<\/jgu-base-listitem>\n\n\n \n<\/jgu-base-listitem>\n\n\n \n<\/jgu-base-listitem>\n\n\n \n<\/jgu-base-listitem>\n\n<\/jgu-base-contactcard>\n\n\n \n\n \n<\/jgu-base-listitem>\n\n\n \n<\/jgu-base-listitem>\n\n\n \n<\/jgu-base-listitem>\n\n\n \n<\/jgu-base-listitem>\n\n\n \n<\/jgu-base-listitem>\n\n\n \n<\/jgu-base-listitem>\n\n\n \n<\/jgu-base-listitem>\n\n\n \n<\/jgu-base-listitem>\n\n<\/jgu-base-contactcard>\n\n\n \n\n \n<\/jgu-base-listitem>\n\n\n \n<\/jgu-base-listitem>\n\n\n \n<\/jgu-base-listitem>\n\n\n \n<\/jgu-base-listitem>\n\n\n \n<\/jgu-base-listitem>\n\n\n \n<\/jgu-base-listitem>\n\n<\/jgu-base-contactcard>\n\n<\/jgu-base-contactcardgrid>\n\n\n

    <\/div>\n\n\n\n \n<\/jgu-base-buttonitem>\n\n<\/jgu-base-button><\/div>\n\n\n\n
    <\/div>\n\n\n\n
    <\/jgu-base-heading>\n\n\n\n

    Liste mit Punkten oder Zahlen.<\/p>\n\n\n\n