{"id":1960,"date":"2022-06-03T13:24:35","date_gmt":"2022-06-03T11:24:35","guid":{"rendered":"https:\/\/cms-test.zdv.uni-mainz.de\/demo-module\/?page_id=1960"},"modified":"2026-05-06T15:52:15","modified_gmt":"2026-05-06T13:52:15","slug":"section","status":"publish","type":"page","link":"https:\/\/cms.zdv.uni-mainz.de\/modul-demo\/section\/","title":{"rendered":"Abschnitt"},"content":{"rendered":"<jgu-base-heading react-props=\"{\n    &quot;tags&quot;: {\n        &quot;htmlTag&quot;: &quot;h2&quot;,\n        &quot;classTag&quot;: &quot;&quot;,\n        &quot;tag&quot;: &quot;h2&quot;\n    },\n    &quot;heading&quot;: &quot;Abschnitte&quot;,\n    &quot;textAlign&quot;: &quot;left&quot;,\n    &quot;anchor&quot;: &quot;&quot;,\n    &quot;index&quot;: &quot;&quot;,\n    &quot;color&quot;: &quot;red&quot;\n}\"><\/jgu-base-heading>\n\n\n\n<ul class=\"wp-block-list has-big-font-size\">\n<li>Mit Abschnitte gliedern Sie lange Seiten in verschiedenen Farbt\u00f6nen. So f\u00e4llt ein neues Thema auf der Seite eher auf.<\/li>\n\n\n\n<li>Verwenden Sie Abschnitte ausschlie\u00dflich auf der obersten Ebene. Damit ist gemeint, da\u00df Sie Abschnitte nicht in Spalten oder andere Container schachteln.<\/li>\n\n\n\n<li>Abschnitte enthalten automatisch einen Abstand nach oben. Dieser ist so gesetzt, da\u00df in Verbindung mit Ankerpunkten der korrekte Sprungort angesteuert wird.<\/li>\n\n\n\n<li>Damit die Seiten im Editor schnell bedienbar sind, sind Abschnitte ausgeblendet.<\/li>\n\n\n\n<li>\u00d6ffnen Sie mehrere Abschnitte zeitgleich, indem Sie im ge\u00f6ffneten Abschnitt oben rechts auf den Pin klicken.<\/li>\n<\/ul>\n\n\n\n<ol class=\"wp-block-list\">\n<li>In der Dokumenten\u00fcbersicht, erreichbar \u00fcber das verschobener Stapel-Icon, <\/li>\n\n\n\n<li>geben Sie dem Abschnitt <\/li>\n\n\n\n<li>durch rechter Mausklick &#8211;<\/li>\n\n\n\n<li> umbenennen einen Namen, so haben sie eine schnelle \u00dcbersicht<\/li>\n\n\n\n<li>Speichern Sie die Umbenennung<\/li>\n<\/ol>\n\n\n\n<p class=\"has-big-font-size\">.<\/p>\n\n\n<jgu-base-image react-props=\"{\n    &quot;image&quot;: {\n        &quot;url&quot;: &quot;https:\\\/\\\/cms.zdv.uni-mainz.de\\\/modul-demo\\\/wp-content\\\/uploads\\\/sites\\\/22\\\/2026\\\/02\\\/abschnitt-umbenennen.png&quot;,\n        &quot;id&quot;: 118371,\n        &quot;title&quot;: &quot;abschnitt-umbenennen&quot;,\n        &quot;width&quot;: 782,\n        &quot;height&quot;: 509,\n        &quot;srcset&quot;: &quot;https:\\\/\\\/cms.zdv.uni-mainz.de\\\/modul-demo\\\/wp-content\\\/uploads\\\/sites\\\/22\\\/2026\\\/02\\\/abschnitt-umbenennen.png 782w, https:\\\/\\\/cms.zdv.uni-mainz.de\\\/modul-demo\\\/wp-content\\\/uploads\\\/sites\\\/22\\\/2026\\\/02\\\/abschnitt-umbenennen-300x195.png 300w, https:\\\/\\\/cms.zdv.uni-mainz.de\\\/modul-demo\\\/wp-content\\\/uploads\\\/sites\\\/22\\\/2026\\\/02\\\/abschnitt-umbenennen-768x500.png 768w&quot;\n    },\n    &quot;align&quot;: &quot;&quot;,\n    &quot;hasLightbox&quot;: false,\n    &quot;caption&quot;: &quot;&quot;,\n    &quot;imgWidth&quot;: 0,\n    &quot;link&quot;: {\n        &quot;url&quot;: &quot;&quot;,\n        &quot;target&quot;: &quot;&quot;,\n        &quot;rel&quot;: &quot;&quot;\n    }\n}\" class=\"align-\">\n    \n<\/jgu-base-image>\n\n\n<p class=\"has-big-font-size\"> Mit dem Pin oben rechts halten Sie ge\u00f6ffnete Abschnitte offen. So sind die Inhalte auch Abschnitt\u00fcbergreifend \u00fcbersichtlich. Beim n\u00e4chsten \u00d6ffnen des Editors sind diese Abschnitte wieder geschlossen, weil die Bearbeitungsgeschwindigkeit uns sehr wichtig ist.<\/p>\n\n\n<jgu-base-section react-props=\"{&quot;color&quot;:&quot;white-dark-text&quot;,&quot;metadata&quot;:{&quot;name&quot;:&quot;Standardfarbe&quot;},&quot;align&quot;:&quot;wide&quot;,&quot;padding&quot;:&quot;medium&quot;}\">\n<div class=\"jgu-bgsection bg bg-white-dark-text \"><div class=\"content padding-medium\">\n<p class=\"has-big-font-size\">Ein neu angelegter Abschnitt wird standardm\u00e4\u00dfig in wei\u00df angelegt und mit einem Absatz gef\u00fcllt und ge\u00f6ffnet.<\/p>\n<\/div><\/div>\n<\/jgu-base-section>\n\n<jgu-base-section react-props=\"{&quot;color&quot;:&quot;dark&quot;,&quot;metadata&quot;:{&quot;name&quot;:&quot;Button in Asphaltblau&quot;},&quot;align&quot;:&quot;wide&quot;,&quot;padding&quot;:&quot;medium&quot;}\">\n<div class=\"jgu-bgsection bg bg-dark \"><div class=\"content padding-medium\"><jgu-base-heading react-props=\"{\n    &quot;index&quot;: &quot;Man mu\\u00df selbst nichts einstellen, die Bl\\u00f6cke reagieren auf den andersfarbigen Abschnitt mit Farbanpassungen&quot;,\n    &quot;color&quot;: &quot;default&quot;,\n    &quot;tags&quot;: {\n        &quot;htmlTag&quot;: &quot;h2&quot;,\n        &quot;classTag&quot;: &quot;&quot;,\n        &quot;tag&quot;: &quot;h2&quot;\n    },\n    &quot;heading&quot;: &quot;Abschnitt mit asphaltblauem Hintergrund&quot;,\n    &quot;textAlign&quot;: &quot;left&quot;,\n    &quot;anchor&quot;: &quot;&quot;\n}\"><\/jgu-base-heading>\n\n\n\n<p class=\"has-big-font-size\">So sehen  Button-Bl\u00f6cke damit aus<\/p>\n\n\n\n<div class=\"wp-block-columns alignwide is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><jgu-base-button style=\"display: flex; flex-wrap: wrap; column-gap: 30px; max-width: 100%; flex-direction: column; align-items: flex-start\">\n  \n<jgu-base-buttonitem react-props=\"{\n    &quot;text&quot;: &quot;Button in Asphaltblau&quot;,\n    &quot;align&quot;: &quot;left&quot;,\n    &quot;styling&quot;: &quot;primary&quot;,\n    &quot;icon&quot;: &quot;arrow-right-solid&quot;,\n    &quot;type&quot;: &quot;default&quot;,\n    &quot;link&quot;: {\n        &quot;url&quot;: &quot;&quot;,\n        &quot;linkTarget&quot;: &quot;&quot;,\n        &quot;rel&quot;: &quot;&quot;\n    },\n    &quot;iconBefore&quot;: false,\n    &quot;isSmall&quot;: false,\n    &quot;fullWidth&quot;: false,\n    &quot;className&quot;: &quot;&quot;\n}\"><\/jgu-base-buttonitem>\n\n<jgu-base-buttonitem react-props=\"{\n    &quot;text&quot;: &quot;Button in Hellgrau (default)&quot;,\n    &quot;styling&quot;: &quot;default&quot;,\n    &quot;align&quot;: &quot;left&quot;,\n    &quot;icon&quot;: &quot;arrow-right-solid&quot;,\n    &quot;type&quot;: &quot;default&quot;,\n    &quot;link&quot;: {\n        &quot;url&quot;: &quot;&quot;,\n        &quot;linkTarget&quot;: &quot;&quot;,\n        &quot;rel&quot;: &quot;&quot;\n    },\n    &quot;iconBefore&quot;: false,\n    &quot;isSmall&quot;: false,\n    &quot;fullWidth&quot;: false,\n    &quot;className&quot;: &quot;&quot;\n}\"><\/jgu-base-buttonitem>\n\n<jgu-base-buttonitem react-props=\"{\n    &quot;text&quot;: &quot;Button im Stil Wei\\u00df (line)&quot;,\n    &quot;styling&quot;: &quot;line&quot;,\n    &quot;align&quot;: &quot;left&quot;,\n    &quot;icon&quot;: &quot;arrow-right-solid&quot;,\n    &quot;type&quot;: &quot;default&quot;,\n    &quot;link&quot;: {\n        &quot;url&quot;: &quot;&quot;,\n        &quot;linkTarget&quot;: &quot;&quot;,\n        &quot;rel&quot;: &quot;&quot;\n    },\n    &quot;iconBefore&quot;: false,\n    &quot;isSmall&quot;: false,\n    &quot;fullWidth&quot;: false,\n    &quot;className&quot;: &quot;&quot;\n}\"><\/jgu-base-buttonitem>\n\n<jgu-base-buttonitem react-props=\"{\n    &quot;text&quot;: &quot;Button in Asphaltblau (strict-color)&quot;,\n    &quot;styling&quot;: &quot;strict-color&quot;,\n    &quot;align&quot;: &quot;left&quot;,\n    &quot;icon&quot;: &quot;arrow-right-solid&quot;,\n    &quot;type&quot;: &quot;default&quot;,\n    &quot;link&quot;: {\n        &quot;url&quot;: &quot;&quot;,\n        &quot;linkTarget&quot;: &quot;&quot;,\n        &quot;rel&quot;: &quot;&quot;\n    },\n    &quot;iconBefore&quot;: false,\n    &quot;isSmall&quot;: false,\n    &quot;fullWidth&quot;: false,\n    &quot;className&quot;: &quot;&quot;\n}\"><\/jgu-base-buttonitem>\n\n<jgu-base-buttonitem react-props=\"{\n    &quot;text&quot;: &quot;Button (contrast)&quot;,\n    &quot;styling&quot;: &quot;contrast&quot;,\n    &quot;align&quot;: &quot;left&quot;,\n    &quot;icon&quot;: &quot;arrow-right-solid&quot;,\n    &quot;type&quot;: &quot;default&quot;,\n    &quot;link&quot;: {\n        &quot;url&quot;: &quot;&quot;,\n        &quot;linkTarget&quot;: &quot;&quot;,\n        &quot;rel&quot;: &quot;&quot;\n    },\n    &quot;iconBefore&quot;: false,\n    &quot;isSmall&quot;: false,\n    &quot;fullWidth&quot;: false,\n    &quot;className&quot;: &quot;&quot;\n}\"><\/jgu-base-buttonitem>\n\n<\/jgu-base-button><\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"has-big-font-size\">Dies ist das Aussehen von Buttons, wenn als Hintergrundfarbe des Abschnitts der Asphaltblaue Hintergrund gew\u00e4hlt wird. <\/p>\n<\/div>\n<\/div>\n\n\n\n<p class=\"has-big-font-size\">Schwerpunkte und Schwerpunkt-Elemente mit dem dunklen Hintergrund. Mu\u00df 100 % ergeben.<\/p>\n\n\n<div class=\"jgu_schwerpunkte theme-default\">\n\t\n<jgu-base-focusbarsitem react-props=\"{\n    &quot;value&quot;: &quot;30&quot;,\n    &quot;title&quot;: &quot;Test&quot;,\n    &quot;description&quot;: &quot;Test&quot;,\n    &quot;align&quot;: &quot;wide&quot;\n}\">\n    \n<\/jgu-base-focusbarsitem>\n\n\n<jgu-base-focusbarsitem react-props=\"{\n    &quot;value&quot;: &quot;50&quot;,\n    &quot;title&quot;: &quot;Test&quot;,\n    &quot;description&quot;: &quot;Test&quot;,\n    &quot;align&quot;: &quot;wide&quot;\n}\">\n    \n<\/jgu-base-focusbarsitem>\n\n\n<jgu-base-focusbarsitem react-props=\"{\n    &quot;value&quot;: &quot;20&quot;,\n    &quot;title&quot;: &quot;Test&quot;,\n    &quot;description&quot;: &quot;Test&quot;,\n    &quot;align&quot;: &quot;wide&quot;\n}\">\n    \n<\/jgu-base-focusbarsitem>\n\n\n<\/div>\n\n<jgu-base-accordion react-props=\"{&quot;selected&quot;:0,&quot;align&quot;:&quot;wide&quot;,&quot;hasAllOpenButton&quot;:true,&quot;onlyOne&quot;:false,&quot;initAllClosed&quot;:true,&quot;enableSearch&quot;:false}\">\n    \n<jgu-base-accordionitem react-props=\"{&quot;title&quot;:&quot;Akkordeon Falte 1&quot;,&quot;init&quot;:false,&quot;slug&quot;:&quot;akkordeon-falte-1&quot;,&quot;align&quot;:&quot;wide&quot;,&quot;customSlug&quot;:false}\">\n    \n\n<p class=\"has-big-font-size\">In die Akkordeonfalte schreiben Sie Dinge, die Ihre Besucher als Antwort erwarten. Schreiben Sie nichts hier hinein, nach dem ihre Besucher etwas suchen. Denn dies ist ja standardm\u00e4\u00dfig unsichtbar.<\/p>\n\n\n<\/jgu-base-accordionitem>\n\n<jgu-base-accordionitem react-props=\"{&quot;title&quot;:&quot;Akkordeon Falte 2&quot;,&quot;init&quot;:false,&quot;slug&quot;:&quot;akkordeon-falte-2&quot;,&quot;align&quot;:&quot;wide&quot;,&quot;customSlug&quot;:false}\">\n    \n\n<p class=\"has-big-font-size\">Ein Beispieltext . <\/p>\n\n\n<\/jgu-base-accordionitem>\n\n<\/jgu-base-accordion>\n<\/div><\/div>\n<\/jgu-base-section>\n\n<jgu-base-section react-props=\"{&quot;color&quot;:&quot;light&quot;,&quot;align&quot;:&quot;wide&quot;,&quot;padding&quot;:&quot;medium&quot;}\">\n<div class=\"jgu-bgsection bg bg-light \"><div class=\"content padding-medium\"><jgu-base-heading react-props=\"{\n    &quot;tags&quot;: {\n        &quot;htmlTag&quot;: &quot;h2&quot;,\n        &quot;classTag&quot;: &quot;&quot;,\n        &quot;tag&quot;: &quot;h2&quot;\n    },\n    &quot;heading&quot;: &quot;Abschnitt in Asphaltblau 5%.&quot;,\n    &quot;textAlign&quot;: &quot;left&quot;,\n    &quot;anchor&quot;: &quot;&quot;,\n    &quot;index&quot;: &quot;&quot;,\n    &quot;color&quot;: &quot;red&quot;\n}\"><\/jgu-base-heading>\n\n\n\n<p class=\"has-big-font-size\"> So ist dieser sehr helle Grauton beschriftet. Und so sehen Buttons damit aus:<\/p>\n\n\n\n<div class=\"wp-block-columns alignwide is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><jgu-base-button style=\"display: flex; flex-wrap: wrap; column-gap: 30px; max-width: 100%; flex-direction: column; align-items: flex-start\">\n  \n<jgu-base-buttonitem react-props=\"{\n    &quot;text&quot;: &quot;Button 1&quot;,\n    &quot;align&quot;: &quot;left&quot;,\n    &quot;styling&quot;: &quot;primary&quot;,\n    &quot;icon&quot;: &quot;arrow-right-solid&quot;,\n    &quot;type&quot;: &quot;default&quot;,\n    &quot;link&quot;: {\n        &quot;url&quot;: &quot;&quot;,\n        &quot;linkTarget&quot;: &quot;&quot;,\n        &quot;rel&quot;: &quot;&quot;\n    },\n    &quot;iconBefore&quot;: false,\n    &quot;isSmall&quot;: false,\n    &quot;fullWidth&quot;: false,\n    &quot;className&quot;: &quot;&quot;\n}\"><\/jgu-base-buttonitem>\n\n<jgu-base-buttonitem react-props=\"{\n    &quot;text&quot;: &quot;Button 2&quot;,\n    &quot;styling&quot;: &quot;default&quot;,\n    &quot;align&quot;: &quot;left&quot;,\n    &quot;icon&quot;: &quot;arrow-right-solid&quot;,\n    &quot;type&quot;: &quot;default&quot;,\n    &quot;link&quot;: {\n        &quot;url&quot;: &quot;&quot;,\n        &quot;linkTarget&quot;: &quot;&quot;,\n        &quot;rel&quot;: &quot;&quot;\n    },\n    &quot;iconBefore&quot;: false,\n    &quot;isSmall&quot;: false,\n    &quot;fullWidth&quot;: false,\n    &quot;className&quot;: &quot;&quot;\n}\"><\/jgu-base-buttonitem>\n\n<jgu-base-buttonitem react-props=\"{\n    &quot;text&quot;: &quot;Button 3&quot;,\n    &quot;styling&quot;: &quot;line&quot;,\n    &quot;align&quot;: &quot;left&quot;,\n    &quot;icon&quot;: &quot;arrow-right-solid&quot;,\n    &quot;type&quot;: &quot;default&quot;,\n    &quot;link&quot;: {\n        &quot;url&quot;: &quot;&quot;,\n        &quot;linkTarget&quot;: &quot;&quot;,\n        &quot;rel&quot;: &quot;&quot;\n    },\n    &quot;iconBefore&quot;: false,\n    &quot;isSmall&quot;: false,\n    &quot;fullWidth&quot;: false,\n    &quot;className&quot;: &quot;&quot;\n}\"><\/jgu-base-buttonitem>\n\n<jgu-base-buttonitem react-props=\"{\n    &quot;text&quot;: &quot;Button 4&quot;,\n    &quot;styling&quot;: &quot;strict-color&quot;,\n    &quot;align&quot;: &quot;left&quot;,\n    &quot;icon&quot;: &quot;arrow-right-solid&quot;,\n    &quot;type&quot;: &quot;default&quot;,\n    &quot;link&quot;: {\n        &quot;url&quot;: &quot;&quot;,\n        &quot;linkTarget&quot;: &quot;&quot;,\n        &quot;rel&quot;: &quot;&quot;\n    },\n    &quot;iconBefore&quot;: false,\n    &quot;isSmall&quot;: false,\n    &quot;fullWidth&quot;: false,\n    &quot;className&quot;: &quot;&quot;\n}\"><\/jgu-base-buttonitem>\n\n<jgu-base-buttonitem react-props=\"{\n    &quot;text&quot;: &quot;Button 5&quot;,\n    &quot;styling&quot;: &quot;contrast&quot;,\n    &quot;align&quot;: &quot;left&quot;,\n    &quot;icon&quot;: &quot;arrow-right-solid&quot;,\n    &quot;type&quot;: &quot;default&quot;,\n    &quot;link&quot;: {\n        &quot;url&quot;: &quot;&quot;,\n        &quot;linkTarget&quot;: &quot;&quot;,\n        &quot;rel&quot;: &quot;&quot;\n    },\n    &quot;iconBefore&quot;: false,\n    &quot;isSmall&quot;: false,\n    &quot;fullWidth&quot;: false,\n    &quot;className&quot;: &quot;&quot;\n}\"><\/jgu-base-buttonitem>\n\n<\/jgu-base-button><\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><jgu-base-button style=\"display: flex; flex-wrap: wrap; column-gap: 30px; max-width: 100%; flex-direction: column; align-items: flex-start\">\n  \n<jgu-base-buttonitem react-props=\"{\n    &quot;text&quot;: &quot;Button 1&quot;,\n    &quot;align&quot;: &quot;left&quot;,\n    &quot;styling&quot;: &quot;primary&quot;,\n    &quot;icon&quot;: &quot;arrow-right-solid&quot;,\n    &quot;type&quot;: &quot;default&quot;,\n    &quot;link&quot;: {\n        &quot;url&quot;: &quot;&quot;,\n        &quot;linkTarget&quot;: &quot;&quot;,\n        &quot;rel&quot;: &quot;&quot;\n    },\n    &quot;iconBefore&quot;: false,\n    &quot;isSmall&quot;: false,\n    &quot;fullWidth&quot;: false,\n    &quot;className&quot;: &quot;&quot;\n}\"><\/jgu-base-buttonitem>\n\n<jgu-base-buttonitem react-props=\"{\n    &quot;text&quot;: &quot;Button 2&quot;,\n    &quot;styling&quot;: &quot;default&quot;,\n    &quot;align&quot;: &quot;left&quot;,\n    &quot;icon&quot;: &quot;arrow-right-solid&quot;,\n    &quot;type&quot;: &quot;default&quot;,\n    &quot;link&quot;: {\n        &quot;url&quot;: &quot;&quot;,\n        &quot;linkTarget&quot;: &quot;&quot;,\n        &quot;rel&quot;: &quot;&quot;\n    },\n    &quot;iconBefore&quot;: false,\n    &quot;isSmall&quot;: false,\n    &quot;fullWidth&quot;: false,\n    &quot;className&quot;: &quot;&quot;\n}\"><\/jgu-base-buttonitem>\n\n<jgu-base-buttonitem react-props=\"{\n    &quot;text&quot;: &quot;Button 3&quot;,\n    &quot;styling&quot;: &quot;line&quot;,\n    &quot;align&quot;: &quot;left&quot;,\n    &quot;icon&quot;: &quot;arrow-right-solid&quot;,\n    &quot;type&quot;: &quot;default&quot;,\n    &quot;link&quot;: {\n        &quot;url&quot;: &quot;&quot;,\n        &quot;linkTarget&quot;: &quot;&quot;,\n        &quot;rel&quot;: &quot;&quot;\n    },\n    &quot;iconBefore&quot;: false,\n    &quot;isSmall&quot;: false,\n    &quot;fullWidth&quot;: false,\n    &quot;className&quot;: &quot;&quot;\n}\"><\/jgu-base-buttonitem>\n\n<jgu-base-buttonitem react-props=\"{\n    &quot;text&quot;: &quot;Button 4&quot;,\n    &quot;styling&quot;: &quot;strict-color&quot;,\n    &quot;align&quot;: &quot;left&quot;,\n    &quot;icon&quot;: &quot;arrow-right-solid&quot;,\n    &quot;type&quot;: &quot;default&quot;,\n    &quot;link&quot;: {\n        &quot;url&quot;: &quot;&quot;,\n        &quot;linkTarget&quot;: &quot;&quot;,\n        &quot;rel&quot;: &quot;&quot;\n    },\n    &quot;iconBefore&quot;: false,\n    &quot;isSmall&quot;: false,\n    &quot;fullWidth&quot;: false,\n    &quot;className&quot;: &quot;&quot;\n}\"><\/jgu-base-buttonitem>\n\n<jgu-base-buttonitem react-props=\"{\n    &quot;text&quot;: &quot;Button 5&quot;,\n    &quot;styling&quot;: &quot;contrast&quot;,\n    &quot;align&quot;: &quot;left&quot;,\n    &quot;icon&quot;: &quot;arrow-right-solid&quot;,\n    &quot;type&quot;: &quot;default&quot;,\n    &quot;link&quot;: {\n        &quot;url&quot;: &quot;&quot;,\n        &quot;linkTarget&quot;: &quot;&quot;,\n        &quot;rel&quot;: &quot;&quot;\n    },\n    &quot;iconBefore&quot;: false,\n    &quot;isSmall&quot;: false,\n    &quot;fullWidth&quot;: false,\n    &quot;className&quot;: &quot;&quot;\n}\"><\/jgu-base-buttonitem>\n\n<\/jgu-base-button><\/div>\n<\/div>\n<\/div><\/div>\n<\/jgu-base-section>\n\n<jgu-base-section react-props=\"{&quot;color&quot;:&quot;white&quot;,&quot;align&quot;:&quot;wide&quot;,&quot;padding&quot;:&quot;medium&quot;}\">\n<div class=\"jgu-bgsection bg bg-white \"><div class=\"content padding-medium\"><jgu-base-heading react-props=\"{\n    &quot;index&quot;: &quot;Test &quot;,\n    &quot;color&quot;: &quot;default&quot;,\n    &quot;tags&quot;: {\n        &quot;htmlTag&quot;: &quot;h2&quot;,\n        &quot;classTag&quot;: &quot;&quot;,\n        &quot;tag&quot;: &quot;h2&quot;\n    },\n    &quot;heading&quot;: &quot;Abschnitt in wei\\u00df&quot;,\n    &quot;textAlign&quot;: &quot;left&quot;,\n    &quot;anchor&quot;: &quot;&quot;\n}\"><\/jgu-base-heading>\n\n\n\n<p class=\"has-big-font-size\">Wei\u00df ist Standard.<\/p>\n<\/div><\/div>\n<\/jgu-base-section>    <div style=\"display: none\">\n        \n    <\/div>","protected":false},"excerpt":{"rendered":"<p>. Mit dem Pin oben rechts halten Sie ge\u00f6ffnete Abschnitte offen. So sind die Inhalte auch Abschnitt\u00fcbergreifend \u00fcbersichtlich. Beim n\u00e4chsten \u00d6ffnen des Editors sind diese Abschnitte wieder geschlossen, weil die Bearbeitungsgeschwindigkeit uns sehr wichtig ist.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":"[]"},"categories":[],"tags":[],"class_list":["post-1960","page","type-page","status-publish","hentry"],"content_raw":"<!-- wp:jgu\/heading {\"tags\":{\"htmlTag\":\"h2\",\"classTag\":\"\",\"tag\":\"h2\"},\"heading\":\"Abschnitte\"} \/-->\n\n<!-- wp:list {\"fontSize\":\"big\"} -->\n<ul class=\"wp-block-list has-big-font-size\"><!-- wp:list-item -->\n<li>Mit Abschnitte gliedern Sie lange Seiten in verschiedenen Farbt\u00f6nen. So f\u00e4llt ein neues Thema auf der Seite eher auf.<\/li>\n<!-- \/wp:list-item -->\n\n<!-- wp:list-item -->\n<li>Verwenden Sie Abschnitte ausschlie\u00dflich auf der obersten Ebene. Damit ist gemeint, da\u00df Sie Abschnitte nicht in Spalten oder andere Container schachteln.<\/li>\n<!-- \/wp:list-item -->\n\n<!-- wp:list-item -->\n<li>Abschnitte enthalten automatisch einen Abstand nach oben. Dieser ist so gesetzt, da\u00df in Verbindung mit Ankerpunkten der korrekte Sprungort angesteuert wird.<\/li>\n<!-- \/wp:list-item -->\n\n<!-- wp:list-item -->\n<li>Damit die Seiten im Editor schnell bedienbar sind, sind Abschnitte ausgeblendet.<\/li>\n<!-- \/wp:list-item -->\n\n<!-- wp:list-item -->\n<li>\u00d6ffnen Sie mehrere Abschnitte zeitgleich, indem Sie im ge\u00f6ffneten Abschnitt oben rechts auf den Pin klicken.<\/li>\n<!-- \/wp:list-item --><\/ul>\n<!-- \/wp:list -->\n\n<!-- wp:list {\"ordered\":true} -->\n<ol class=\"wp-block-list\"><!-- wp:list-item -->\n<li>In der Dokumenten\u00fcbersicht, erreichbar \u00fcber das verschobener Stapel-Icon, <\/li>\n<!-- \/wp:list-item -->\n\n<!-- wp:list-item -->\n<li>geben Sie dem Abschnitt <\/li>\n<!-- \/wp:list-item -->\n\n<!-- wp:list-item -->\n<li>durch rechter Mausklick -<\/li>\n<!-- \/wp:list-item -->\n\n<!-- wp:list-item -->\n<li> umbenennen einen Namen, so haben sie eine schnelle \u00dcbersicht<\/li>\n<!-- \/wp:list-item -->\n\n<!-- wp:list-item -->\n<li>Speichern Sie die Umbenennung<\/li>\n<!-- \/wp:list-item --><\/ol>\n<!-- \/wp:list -->\n\n<!-- wp:paragraph {\"className\":\"has-big-font-size\"} -->\n<p class=\"has-big-font-size\">.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:jgu\/image {\"image\":{\"url\":null,\"id\":118371}} \/-->\n\n<!-- wp:paragraph {\"className\":\"has-big-font-size\"} -->\n<p class=\"has-big-font-size\"> Mit dem Pin oben rechts halten Sie ge\u00f6ffnete Abschnitte offen. So sind die Inhalte auch Abschnitt\u00fcbergreifend \u00fcbersichtlich. Beim n\u00e4chsten \u00d6ffnen des Editors sind diese Abschnitte wieder geschlossen, weil die Bearbeitungsgeschwindigkeit uns sehr wichtig ist.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:jgu\/section {\"color\":\"white-dark-text\",\"metadata\":{\"name\":\"Standardfarbe\"}} -->\n<div class=\"jgu-bgsection bg bg-white-dark-text \"><div class=\"content padding-medium\"><!-- wp:paragraph -->\n<p class=\"has-big-font-size\">Ein neu angelegter Abschnitt wird standardm\u00e4\u00dfig in wei\u00df angelegt und mit einem Absatz gef\u00fcllt und ge\u00f6ffnet.<\/p>\n<!-- \/wp:paragraph --><\/div><\/div>\n<!-- \/wp:jgu\/section -->\n\n<!-- wp:jgu\/section {\"color\":\"dark\",\"metadata\":{\"name\":\"Button in Asphaltblau\"}} -->\n<div class=\"jgu-bgsection bg bg-dark \"><div class=\"content padding-medium\"><!-- wp:jgu\/heading {\"index\":\"Man mu\u00df selbst nichts einstellen, die Bl\u00f6cke reagieren auf den andersfarbigen Abschnitt mit Farbanpassungen\",\"color\":\"default\",\"tags\":{\"htmlTag\":\"h2\",\"classTag\":\"\",\"tag\":\"h2\"},\"heading\":\"Abschnitt mit asphaltblauem Hintergrund\"} \/-->\n\n<!-- wp:paragraph {\"className\":\"has-big-font-size\"} -->\n<p class=\"has-big-font-size\">So sehen  Button-Bl\u00f6cke damit aus<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:columns {\"className\":\"alignwide\"} -->\n<div class=\"wp-block-columns alignwide\"><!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:jgu\/button {\"layout\":{\"type\":\"flex\",\"flexWrap\":\"wrap\",\"justifyContent\":\"left\",\"orientation\":\"vertical\"}} -->\n<!-- wp:jgu\/button-item {\"text\":\"Button in Asphaltblau\"} \/-->\n\n<!-- wp:jgu\/button-item {\"text\":\"Button in Hellgrau (default)\",\"styling\":\"default\"} \/-->\n\n<!-- wp:jgu\/button-item {\"text\":\"Button im Stil Wei\u00df (line)\",\"styling\":\"line\"} \/-->\n\n<!-- wp:jgu\/button-item {\"text\":\"Button in Asphaltblau (strict-color)\",\"styling\":\"strict-color\"} \/-->\n\n<!-- wp:jgu\/button-item {\"text\":\"Button (contrast)\",\"styling\":\"contrast\"} \/-->\n<!-- \/wp:jgu\/button --><\/div>\n<!-- \/wp:column -->\n\n<!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:paragraph {\"className\":\"has-big-font-size\"} -->\n<p class=\"has-big-font-size\">Dies ist das Aussehen von Buttons, wenn als Hintergrundfarbe des Abschnitts der Asphaltblaue Hintergrund gew\u00e4hlt wird. <\/p>\n<!-- \/wp:paragraph --><\/div>\n<!-- \/wp:column --><\/div>\n<!-- \/wp:columns -->\n\n<!-- wp:paragraph {\"className\":\"has-big-font-size\"} -->\n<p class=\"has-big-font-size\">Schwerpunkte und Schwerpunkt-Elemente mit dem dunklen Hintergrund. Mu\u00df 100 % ergeben.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:jgu\/focus-bars {\"isInDarkSection\":true} -->\n<!-- wp:jgu\/focus-bars-item {\"value\":\"30\",\"title\":\"Test\",\"description\":\"Test\"} \/-->\n\n<!-- wp:jgu\/focus-bars-item {\"value\":\"50\",\"title\":\"Test\",\"description\":\"Test\"} \/-->\n\n<!-- wp:jgu\/focus-bars-item {\"value\":\"20\",\"title\":\"Test\",\"description\":\"Test\"} \/-->\n<!-- \/wp:jgu\/focus-bars -->\n\n<!-- wp:jgu\/accordion {\"selected\":0} -->\n<!-- wp:jgu\/accordion-item {\"title\":\"Akkordeon Falte 1\",\"init\":false,\"slug\":\"akkordeon-falte-1\"} -->\n<!-- wp:paragraph {\"className\":\"has-big-font-size\"} -->\n<p class=\"has-big-font-size\">In die Akkordeonfalte schreiben Sie Dinge, die Ihre Besucher als Antwort erwarten. Schreiben Sie nichts hier hinein, nach dem ihre Besucher etwas suchen. Denn dies ist ja standardm\u00e4\u00dfig unsichtbar.<\/p>\n<!-- \/wp:paragraph -->\n<!-- \/wp:jgu\/accordion-item -->\n\n<!-- wp:jgu\/accordion-item {\"title\":\"Akkordeon Falte 2\",\"init\":false,\"slug\":\"akkordeon-falte-2\"} -->\n<!-- wp:paragraph {\"className\":\"has-big-font-size\"} -->\n<p class=\"has-big-font-size\">Ein Beispieltext . <\/p>\n<!-- \/wp:paragraph -->\n<!-- \/wp:jgu\/accordion-item -->\n<!-- \/wp:jgu\/accordion --><\/div><\/div>\n<!-- \/wp:jgu\/section -->\n\n<!-- wp:jgu\/section {\"color\":\"light\"} -->\n<div class=\"jgu-bgsection bg bg-light \"><div class=\"content padding-medium\"><!-- wp:jgu\/heading {\"tags\":{\"htmlTag\":\"h2\",\"classTag\":\"\",\"tag\":\"h2\"},\"heading\":\"Abschnitt in Asphaltblau 5%.\"} \/-->\n\n<!-- wp:paragraph {\"className\":\"has-big-font-size\"} -->\n<p class=\"has-big-font-size\"> So ist dieser sehr helle Grauton beschriftet. Und so sehen Buttons damit aus:<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:columns {\"className\":\"alignwide\"} -->\n<div class=\"wp-block-columns alignwide\"><!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:jgu\/button {\"layout\":{\"type\":\"flex\",\"flexWrap\":\"wrap\",\"justifyContent\":\"left\",\"orientation\":\"vertical\"}} -->\n<!-- wp:jgu\/button-item {\"text\":\"Button 1\"} \/-->\n\n<!-- wp:jgu\/button-item {\"text\":\"Button 2\",\"styling\":\"default\"} \/-->\n\n<!-- wp:jgu\/button-item {\"text\":\"Button 3\",\"styling\":\"line\"} \/-->\n\n<!-- wp:jgu\/button-item {\"text\":\"Button 4\",\"styling\":\"strict-color\"} \/-->\n\n<!-- wp:jgu\/button-item {\"text\":\"Button 5\",\"styling\":\"contrast\"} \/-->\n<!-- \/wp:jgu\/button --><\/div>\n<!-- \/wp:column -->\n\n<!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:jgu\/button {\"layout\":{\"type\":\"flex\",\"flexWrap\":\"wrap\",\"justifyContent\":\"left\",\"orientation\":\"vertical\"}} -->\n<!-- wp:jgu\/button-item {\"text\":\"Button 1\"} \/-->\n\n<!-- wp:jgu\/button-item {\"text\":\"Button 2\",\"styling\":\"default\"} \/-->\n\n<!-- wp:jgu\/button-item {\"text\":\"Button 3\",\"styling\":\"line\"} \/-->\n\n<!-- wp:jgu\/button-item {\"text\":\"Button 4\",\"styling\":\"strict-color\"} \/-->\n\n<!-- wp:jgu\/button-item {\"text\":\"Button 5\",\"styling\":\"contrast\"} \/-->\n<!-- \/wp:jgu\/button --><\/div>\n<!-- \/wp:column --><\/div>\n<!-- \/wp:columns --><\/div><\/div>\n<!-- \/wp:jgu\/section -->\n\n<!-- wp:jgu\/section {\"color\":\"white\"} -->\n<div class=\"jgu-bgsection bg bg-white \"><div class=\"content padding-medium\"><!-- wp:jgu\/heading {\"index\":\"Test \",\"color\":\"default\",\"tags\":{\"htmlTag\":\"h2\",\"classTag\":\"\",\"tag\":\"h2\"},\"heading\":\"Abschnitt in wei\u00df\"} \/-->\n\n<!-- wp:paragraph {\"className\":\"has-big-font-size\"} -->\n<p class=\"has-big-font-size\">Wei\u00df ist Standard.<\/p>\n<!-- \/wp:paragraph --><\/div><\/div>\n<!-- \/wp:jgu\/section -->","_links":{"self":[{"href":"https:\/\/cms.zdv.uni-mainz.de\/modul-demo\/wp-json\/wp\/v2\/pages\/1960","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cms.zdv.uni-mainz.de\/modul-demo\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/cms.zdv.uni-mainz.de\/modul-demo\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/cms.zdv.uni-mainz.de\/modul-demo\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cms.zdv.uni-mainz.de\/modul-demo\/wp-json\/wp\/v2\/comments?post=1960"}],"version-history":[{"count":14,"href":"https:\/\/cms.zdv.uni-mainz.de\/modul-demo\/wp-json\/wp\/v2\/pages\/1960\/revisions"}],"predecessor-version":[{"id":119944,"href":"https:\/\/cms.zdv.uni-mainz.de\/modul-demo\/wp-json\/wp\/v2\/pages\/1960\/revisions\/119944"}],"wp:attachment":[{"href":"https:\/\/cms.zdv.uni-mainz.de\/modul-demo\/wp-json\/wp\/v2\/media?parent=1960"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cms.zdv.uni-mainz.de\/modul-demo\/wp-json\/wp\/v2\/categories?post=1960"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cms.zdv.uni-mainz.de\/modul-demo\/wp-json\/wp\/v2\/tags?post=1960"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}