{"id":3300,"date":"2022-09-13T14:11:20","date_gmt":"2022-09-13T12:11:20","guid":{"rendered":"https:\/\/cms-test.zdv.uni-mainz.de\/demo-module\/?page_id=3300"},"modified":"2026-04-21T11:44:12","modified_gmt":"2026-04-21T09:44:12","slug":"bild","status":"publish","type":"page","link":"https:\/\/cms.zdv.uni-mainz.de\/modul-demo\/bild\/","title":{"rendered":"Bilder"},"content":{"rendered":"<jgu-base-heading react-props=\"{\n    &quot;index&quot;: &quot;Die Technik&quot;,\n    &quot;tags&quot;: {\n        &quot;htmlTag&quot;: &quot;h1&quot;,\n        &quot;classTag&quot;: &quot;&quot;,\n        &quot;tag&quot;: &quot;h1&quot;\n    },\n    &quot;heading&quot;: &quot;Bilder&quot;,\n    &quot;textAlign&quot;: &quot;left&quot;,\n    &quot;anchor&quot;: &quot;&quot;,\n    &quot;color&quot;: &quot;red&quot;\n}\"><\/jgu-base-heading>\n\n\n\n<p class=\"has-big-font-size\">Hier lernen Sie alles Wissenswerte rund um den Einsatz von Bildern auf den Webseiten im JGU Layout 2023. <\/p>\n\n\n<jgu-base-accordion react-props=\"{&quot;selected&quot;:8,&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;Bildgr\\u00f6\\u00dfe&quot;,&quot;slug&quot;:&quot;bildgro\\u00dfe&quot;,&quot;align&quot;:&quot;wide&quot;,&quot;init&quot;:true,&quot;customSlug&quot;:false}\">\n    \n\n<p class=\"has-big-font-size\">Der Block Bild stellt ein in die Mediathek hochgeladene Bild maximal gro\u00df in dem zur Verf\u00fcgung stehenden Raum an.<\/p>\n\n\n\n<p class=\"has-big-font-size\">Bei besonders kleinen Bildern kann das unscharf werden.<\/p>\n\n\n\n<p class=\"has-big-font-size\">Bei Originalen, die Breiter als 2560&nbsp;Pixel sind, wird das Bild bereits beim Hochladen von WordPress auf diesen Wert verkleinert und beim Namen &#8222;scaled&#8220; angeh\u00e4ngt.<\/p>\n\n\n\n<p class=\"has-big-font-size\">Mit dem Width-Parameter setzen Sie die Gr\u00f6\u00dfe fest. Dieses Bild ist eigentlich 640 Pixel breit und mit der JGU Startseite verlinkt.<\/p>\n\n\n\n<p class=\"has-big-font-size\">Dabei wird die Width  beispielsweise in Spalten wichtiger genommen als der Spaltenprozentwert!<\/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\\\/2025\\\/01\\\/thumbnails\\\/145027281-cf3e3e047a52e2210b26bbcf42fcde909a80a7dd023a757b95af01936d065ec0-d_640.jpg&quot;,\n        &quot;id&quot;: 116553,\n        &quot;title&quot;: &quot;Es gibt einen Title in den Medien, den \\u00fcberschreiben Sie in den Einstellungen der Seitenleiste&quot;,\n        &quot;width&quot;: 640,\n        &quot;height&quot;: 480,\n        &quot;srcset&quot;: &quot;https:\\\/\\\/cms.zdv.uni-mainz.de\\\/modul-demo\\\/wp-content\\\/uploads\\\/sites\\\/22\\\/2025\\\/01\\\/thumbnails\\\/145027281-cf3e3e047a52e2210b26bbcf42fcde909a80a7dd023a757b95af01936d065ec0-d_640.jpg 640w, https:\\\/\\\/cms.zdv.uni-mainz.de\\\/modul-demo\\\/wp-content\\\/uploads\\\/sites\\\/22\\\/2025\\\/01\\\/thumbnails\\\/145027281-cf3e3e047a52e2210b26bbcf42fcde909a80a7dd023a757b95af01936d065ec0-d_640-300x225.jpg 300w&quot;\n    },\n    &quot;caption&quot;: &quot;Width: 100 &quot;,\n    &quot;imgWidth&quot;: 100,\n    &quot;width&quot;: 0,\n    &quot;link&quot;: {\n        &quot;url&quot;: &quot;https:\\\/\\\/www.uni-mainz.de&quot;,\n        &quot;target&quot;: &quot;&quot;,\n        &quot;rel&quot;: &quot;&quot;\n    },\n    &quot;align&quot;: &quot;&quot;,\n    &quot;hasLightbox&quot;: false\n}\" class=\"align-\">\n    \n<\/jgu-base-image>\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\\\/2025\\\/01\\\/thumbnails\\\/145027281-cf3e3e047a52e2210b26bbcf42fcde909a80a7dd023a757b95af01936d065ec0-d_640.jpg&quot;,\n        &quot;id&quot;: 116553,\n        &quot;caption&quot;: &quot;Site-intern mit der Bildergalerie verlinkt&quot;,\n        &quot;title&quot;: &quot;Sternenhimmel originalgr\\u00f6\\u00dfe&quot;,\n        &quot;width&quot;: 640,\n        &quot;height&quot;: 480,\n        &quot;srcset&quot;: &quot;https:\\\/\\\/cms.zdv.uni-mainz.de\\\/modul-demo\\\/wp-content\\\/uploads\\\/sites\\\/22\\\/2025\\\/01\\\/thumbnails\\\/145027281-cf3e3e047a52e2210b26bbcf42fcde909a80a7dd023a757b95af01936d065ec0-d_640.jpg 640w, https:\\\/\\\/cms.zdv.uni-mainz.de\\\/modul-demo\\\/wp-content\\\/uploads\\\/sites\\\/22\\\/2025\\\/01\\\/thumbnails\\\/145027281-cf3e3e047a52e2210b26bbcf42fcde909a80a7dd023a757b95af01936d065ec0-d_640-300x225.jpg 300w&quot;\n    },\n    &quot;caption&quot;: &quot;Width: 640. Das Bild misst 640x480 Pixel&quot;,\n    &quot;imgWidth&quot;: 640,\n    &quot;width&quot;: 0,\n    &quot;link&quot;: {\n        &quot;url&quot;: &quot;https:\\\/\\\/cms.zdv.uni-mainz.de\\\/modul-demo\\\/bildergalerie\\\/&quot;,\n        &quot;target&quot;: &quot;&quot;,\n        &quot;rel&quot;: &quot;&quot;\n    },\n    &quot;align&quot;: &quot;&quot;,\n    &quot;hasLightbox&quot;: false\n}\" class=\"align-\">\n    \n<\/jgu-base-image>\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\\\/2025\\\/01\\\/thumbnails\\\/145027281-cf3e3e047a52e2210b26bbcf42fcde909a80a7dd023a757b95af01936d065ec0-d_640.jpg&quot;,\n        &quot;id&quot;: 116553,\n        &quot;title&quot;: &quot;Sternenhimmel&quot;,\n        &quot;width&quot;: 640,\n        &quot;height&quot;: 480,\n        &quot;srcset&quot;: &quot;https:\\\/\\\/cms.zdv.uni-mainz.de\\\/modul-demo\\\/wp-content\\\/uploads\\\/sites\\\/22\\\/2025\\\/01\\\/thumbnails\\\/145027281-cf3e3e047a52e2210b26bbcf42fcde909a80a7dd023a757b95af01936d065ec0-d_640.jpg 640w, https:\\\/\\\/cms.zdv.uni-mainz.de\\\/modul-demo\\\/wp-content\\\/uploads\\\/sites\\\/22\\\/2025\\\/01\\\/thumbnails\\\/145027281-cf3e3e047a52e2210b26bbcf42fcde909a80a7dd023a757b95af01936d065ec0-d_640-300x225.jpg 300w&quot;\n    },\n    &quot;caption&quot;: &quot;Width ist leer, dieses Bild ist nicht verlinkt&quot;,\n    &quot;align&quot;: &quot;&quot;,\n    &quot;hasLightbox&quot;: false,\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\">Auch Bl\u00f6cke wie Medien und Text kontrollieren die Bildgr\u00f6\u00dfe.<\/p>\n\n\n\n<p class=\"has-big-font-size\">Verwalten Sie in den Blockeinstellungen Bildnachweis, Beschriftung, Hintergrund und ob sie das Bild bei Klick separat \u00f6ffnen wollen (=Lightbox)<\/p>\n\n\n<\/jgu-base-accordionitem>\n\n<jgu-base-accordionitem react-props=\"{&quot;title&quot;:&quot;Erweiterte Einstellungen&quot;,&quot;slug&quot;:&quot;erweiterte-einstellungen&quot;,&quot;align&quot;:&quot;wide&quot;,&quot;init&quot;:true,&quot;customSlug&quot;:false}\">\n    \n\n<p class=\"has-big-font-size\">Bild-Alternativtext: nur, wenn es sich um ein inhaltlich f\u00fcr die Seite relevantes Bild handelt, tragen Sie hier etwas ein.<br>Bildbeschriftung: wird nicht angezeigt.<br>Bildnachweis: bei wem liegen die Bildrechte? Wer hat das Foto gemacht? Taucht bei dem kleinen i rechts unten am Bildrand auf<br>Bildnachweis ausblenden: wenn sie das Bildcredit-i ausblenden wollen<br>Bildbeschriftung ausblenden: damit ist die Caption gemeint, die sich direkt unter dem Bild eintragen k\u00f6nnen<br>Dunkler Hintergrund: f\u00fcr manche Bilder sch\u00f6ner<br>Bildbeschreibung: wird nicht angezeigt<br>Bild-Titel (aus Mediathek): dies ist nur eine Anzeige<br>Bild-Titel: wenn Sie hier nichts eintragen, wird bei Mouseover der Bild-Titel der Mediathek angezeigt.<\/p>\n\n\n\n<p class=\"has-big-font-size\"> <a href=\"https:\/\/recht.verwaltung.uni-mainz.de\/urheberrecht\/\">Mehr zum Urheberrecht und dem Recht am eigenen Bild <\/a><\/p>\n\n\n<\/jgu-base-accordionitem>\n\n<jgu-base-accordionitem react-props=\"{&quot;title&quot;:&quot;Medien wiederfinden&quot;,&quot;slug&quot;:&quot;medien-wiederfinden&quot;,&quot;align&quot;:&quot;wide&quot;,&quot;init&quot;:true,&quot;customSlug&quot;:false}\">\n    \n<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;Organisation von Bildern&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\">Medien organisieren<\/p>\n\n\n\n<p class=\"has-big-font-size\">Bevor Sie anfangen, Bilder hochzuladen, \u00fcberlegen Sie sich eine Strategie, wie Sie Bilder, die zusammengeh\u00f6ren, immer wiederfinden. Da Sie in der Mediathek keine eigene Ordnerstruktur haben, lohnt sich eine Systematik gleich von Anfang an. Hier unsere Vorschl\u00e4ge gegen einen Mediathek-Dateien-Dschungel:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Bilder und Dateien nicht \u00fcber Dashboard \u2192 Medien hochladen, sondern IMMER aus der Seite! Dann hat man in der Mediathek die Verkn\u00fcpfung &#8222;Hochgeladen zu&#8220;<\/li>\n\n\n\n<li>Bilder&nbsp;vor dem Hochladen sprechend nennen (vor allem bei Bildergalerien, anstelle des von der Kamera vergebenen kryptischen Namens). Zusammengeh\u00f6rende Bilder haben am besten den gleichen Dateinamensanfang. Danach k\u00f6nnen sie in der Mediathek auch einschr\u00e4nken und suchen.<\/li>\n\n\n\n<li>Das geht auch im Nachhinein: Verwenden Sie die Felder Beschriftung und Beschreibung. Nach denen k\u00f6nnen Sie in der Mediathek ebenfalls suchen!<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/presse.uni-mainz.de\/files\/2023\/01\/JGU_corporate_design_manual_print.pdf\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/presse.uni-mainz.de\/files\/2023\/01\/JGU_corporate_design_manual_print.pdf<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/presse.uni-mainz.de\/files\/2023\/01\/JGU_bilderwelten_leitlinien_visuelle_kommunikation.pdf\">https:\/\/presse.uni-mainz.de\/files\/2023\/01\/JGU_bilderwelten_leitlinien_visuelle_kommunikation.pdf<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/teamweb.uni-mainz.de\/sites\/zd\/Verwaltungsverfgungen\/2014-02.pdf\">Verwaltungsverf\u00fcgung 2014-02: Abmahnungen wegen Urheberrechtsverletzungen<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/teamweb.uni-mainz.de\/sites\/Rechtsangelegenheiten\/SitePages\/Datenschutz.aspx\">Vorlagen: Einverst\u00e4ndniserkl\u00e4rungen, Hinweisschilder Fotos u.a.m Rechtsangelegenheiten<\/a><\/li>\n<\/ul>\n\n\n<\/jgu-base-accordionitem>\n\n<jgu-base-accordionitem react-props=\"{&quot;title&quot;:&quot;Vorlagen Illustrationen&quot;,&quot;slug&quot;:&quot;vorlagen-illustrationen&quot;,&quot;align&quot;:&quot;wide&quot;,&quot;init&quot;:true,&quot;customSlug&quot;:false}\">\n    \n<jgu-base-heading react-props=\"{\n    &quot;tags&quot;: {\n        &quot;htmlTag&quot;: &quot;h3&quot;,\n        &quot;classTag&quot;: &quot;&quot;,\n        &quot;tag&quot;: &quot;h3&quot;\n    },\n    &quot;heading&quot;: &quot;Gemeinsame Medien&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\">Sie erhalten mit Ihrer neuen Website einen mit Illustrationen vorgef\u00fcllten Medienbereich. Auch die Bildrechte sind bereits ausgef\u00fcllt. Das Format SVG steht f\u00fcr scalable vector graphic und garantiert glasklare Abbildungen.<\/p>\n\n\n<jgu-base-button style=\"display: flex; flex-wrap: wrap; column-gap: 30px; max-width: 100%; flex-direction: row; justify-content: left\">\n  \n<jgu-base-buttonitem react-props=\"{\n    &quot;text&quot;: &quot;SVG- Illustrationen&quot;,\n    &quot;styling&quot;: &quot;default&quot;,\n    &quot;link&quot;: {\n        &quot;url&quot;: &quot;https:\\\/\\\/jgumainz.sharepoint.com\\\/:f:\\\/s\\\/IntranetCMSWordPress\\\/ElgkzLcXxdhDhDHyXRF5Df8BXwhwtj6WJKxiC3CfejIgyA?e=fKu0oH&quot;,\n        &quot;linkTarget&quot;: &quot;&quot;,\n        &quot;rel&quot;: &quot;&quot;,\n        &quot;opensInNewTab&quot;: true\n    },\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;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>\n\n<\/jgu-base-accordionitem>\n\n<jgu-base-accordionitem react-props=\"{&quot;title&quot;:&quot;Kriterien Bildsprache&quot;,&quot;slug&quot;:&quot;kriterien-bildsprache&quot;,&quot;align&quot;:&quot;wide&quot;,&quot;init&quot;:true,&quot;customSlug&quot;:false}\">\n    \n<jgu-base-heading react-props=\"{\n    &quot;index&quot;: &quot;&lt;br&gt;&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;Inhalte von Bildern und Grafiken&quot;,\n    &quot;textAlign&quot;: &quot;left&quot;,\n    &quot;anchor&quot;: &quot;&quot;,\n    &quot;color&quot;: &quot;red&quot;\n}\"><\/jgu-base-heading>\n\n\n\n<p class=\"has-big-font-size\">Die auf den Webseiten verwendeten Bilder und Grafiken sollen folgenden Kriterien entsprechen:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Sie sollen Kernzielgruppen ansprechen<\/li>\n\n\n\n<li>Sie sollen zum Inhalt passen und diesen erg\u00e4nzen<\/li>\n\n\n\n<li>Sie sollen DSGVO-konform und diversit\u00e4tssensibel sein<\/li>\n\n\n\n<li><\/li>\n<\/ul>\n\n\n<jgu-base-heading react-props=\"{\n    &quot;index&quot;: &quot;Bildsprache &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;Situative Einblicke&quot;,\n    &quot;textAlign&quot;: &quot;left&quot;,\n    &quot;anchor&quot;: &quot;&quot;,\n    &quot;color&quot;: &quot;red&quot;\n}\"><\/jgu-base-heading>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Reportageartig<\/li>\n\n\n\n<li>Authentische Situationen<\/li>\n\n\n\n<li>Nat\u00fcrliche Lichtverh\u00e4ltnisse<\/li>\n\n\n\n<li>Spiel mit \n<ul class=\"wp-block-list\">\n<li>Perspektive<\/li>\n\n\n\n<li>Bildtiefe<\/li>\n\n\n\n<li>Sch\u00e4rfe und Unsch\u00e4rfe<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>dokumentarischer Einblick in die JGU<\/li>\n<\/ul>\n\n\n<jgu-base-heading react-props=\"{\n    &quot;index&quot;: &quot;Bildsprache &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;Belebter Campus&quot;,\n    &quot;textAlign&quot;: &quot;left&quot;,\n    &quot;anchor&quot;: &quot;&quot;,\n    &quot;color&quot;: &quot;red&quot;\n}\"><\/jgu-base-heading>\n\n\n\n<p class=\"has-big-font-size\">Ausgew\u00e4hlte Pl\u00e4tze des Campus werden belebt und unbelebt abgebildet. Dabei ist auch die Anzeige von \u201enur\u201c stark herangezoomten Bildfragmenten m\u00f6glich. Diese lassen sich variabel einsetzen und f\u00fchren zu einer Beruhigung und Fokussierung im Seitenverlauf.<\/p>\n\n\n<jgu-base-heading react-props=\"{\n    &quot;index&quot;: &quot;Bildsprache &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;Strukturbilder&quot;,\n    &quot;textAlign&quot;: &quot;left&quot;,\n    &quot;anchor&quot;: &quot;&quot;,\n    &quot;color&quot;: &quot;red&quot;\n}\"><\/jgu-base-heading>\n\n\n\n<p class=\"has-big-font-size\">Zu Themengebieten werden passende fl\u00e4chige Aufnahmen ausgesucht die Mikro- und Makrostrukturen abbilden. Dabei sind auch \u201enur\u201c stark herangezoomte Bildfragmente m\u00f6glich.<\/p>\n\n\n\n<p class=\"has-big-font-size\">Diese lassen sich variabel einsetzen und f\u00fchren zu einer Beruhigung und Fokussierung im Seitenverlauf.<\/p>\n\n\n\n<p class=\"has-big-font-size\">Sie sind zudem leicht \u00fcber Bilddatenbanken wie https:\/\/stock.adobe.com\/de\/ zu beziehen.<\/p>\n\n\n<jgu-base-heading react-props=\"{\n    &quot;index&quot;: &quot;Bildsprache &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;Illustrationen&quot;,\n    &quot;textAlign&quot;: &quot;left&quot;,\n    &quot;anchor&quot;: &quot;&quot;,\n    &quot;color&quot;: &quot;red&quot;\n}\"><\/jgu-base-heading>\n\n\n\n<p class=\"has-big-font-size\">Ein Satz von Illustrationen und eine Anleitung, wie sie selbst weitere Illustrationen erstellen, steht Ihnen im <a href=\"https:\/\/jgumainz.sharepoint.com\/sites\/IntranetCMSWordPress\/Freigegebene%20Dokumente\/Forms\/AllItems.aspx?id=%2Fsites%2FIntranetCMSWordPress%2FFreigegebene%20Dokumente%2FGeneral&amp;p=true&amp;ga=1\">Intranet CMS Sharepoint WP <\/a> zur Verf\u00fcgung. Dort wird auch auf eine passende Farbpallette eingegangen.<\/p>\n\n\n\n<p class=\"has-big-font-size\">Die Illustrationen (alle quadratisch) unterteilen sich in detaillierte und vereinfachte Illustrationen, reine Silhouetten und Icon Illustrationen (2 Farben, sehr reduziert)<\/p>\n\n\n<\/jgu-base-accordionitem>\n\n<jgu-base-accordionitem react-props=\"{&quot;title&quot;:&quot;Barrierefreiheit&quot;,&quot;slug&quot;:&quot;barrierefreiheit&quot;,&quot;align&quot;:&quot;wide&quot;,&quot;init&quot;:true,&quot;customSlug&quot;:false}\">\n    \n\n<p class=\"has-big-font-size\">Ganz allgemein gilt: oft sind Bilder f\u00fcr das Verst\u00e4ndnis des Inhaltes der Website nicht n\u00f6tig (=dekorativ). Diese sollen nicht per Text erkl\u00e4rt werden. Der Alt-Text bleibt also komplett leer. Gibt man ein Leerzeichen ein, dann liest z.B. das VoiceOver von Apple &#8222;Leerzeichen&#8220; vor&#8230;<br>Sind die Bilder f\u00fcr das Verst\u00e4ndnis wichtig, m\u00fcssen Sie den Inhalt per Text erkl\u00e4ren. Da gibt es dann abh\u00e4ngig vom&nbsp;<br>Format und Layout verschiedene Stellen, an denen Sie diesen Text einf\u00fcllen, aber meist ist es der alt = alternative Text.<\/p>\n\n\n\n<p class=\"has-big-font-size\">Ganz allgemein mu\u00df einfach alles, was nicht Text ist auf der Webseite, wenn es denn inhaltlich relevant und keine Dekoration ist, per Text erkl\u00e4rt werden.<\/p>\n\n\n<\/jgu-base-accordionitem>\n\n<jgu-base-accordionitem react-props=\"{&quot;title&quot;:&quot;Rechtliches&quot;,&quot;slug&quot;:&quot;rechtliches&quot;,&quot;align&quot;:&quot;wide&quot;,&quot;init&quot;:true,&quot;customSlug&quot;:false}\">\n    \n\n<p class=\"has-big-font-size\">Nicht alles, was Sie im Internet an Bildern finden, d\u00fcrfen Sie hochladen!<\/p>\n\n\n\n<p class=\"has-big-font-size\">F\u00fcr den Upload oder die Wiedergabe&nbsp;<em>fremder Inhalte<\/em>&nbsp;(z.B. fremder Bilder, PDF-Dateien) auf den Internetseiten Ihres Projektes&nbsp;muss in der Regel die Zustimmung des Urhebers eingeholt werden!<\/p>\n\n\n<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;Bildmaterial im Impressum&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\">\n<li><strong>F\u00fcr Fotos und Abbildungen, die verwendet werden, m\u00fcssen die Nutzungsrechte des jeweiligen Urhebers (z.B. Fotograf, Illustrator) bzw. Rechteinhabers (z.B. Bilddatenbanken, Adobe Stock, Verlage) vorliegen.<\/strong><\/li>\n\n\n\n<li><strong>Bildhinweise der verwendeten Fotografien und Abbildungen entsprechend der vereinbarten bzw. vom Urheber genannten Nutzungsbedingungen hinterlegen.<\/strong><\/li>\n\n\n\n<li><strong>Betrifft die Illustrationen:<\/strong><br>&#8211;&nbsp;<strong>Sofern ausschlie\u00dflich Illustrationen von Rebekka Weimer (Sch\u00f6nefu\u00df) verwendet werden, ist eine Nennung im Impressum ausreichend<\/strong>. Die Urheberrechtsangaben (Bildnachweise) sind in der Quelldatei in der Mediathek bei der Illustration zu hinterlegen (im Template bereits eingerichtet), auf der jeweiligen Seite kann auf die Ver\u00f6ffentlichung des Bildnachweises verzichtet werden.<br>&#8211; Sofern Illustrationen zus\u00e4tzlich von anderen Illustratoren*innen verwendet werden, muss mit dem\/der weiteren Illustrator*in abgestimmt werden, ob sie\/er (im g\u00fcnstigsten Fall) mit einer Nennung in dieser Weise einverstanden w\u00e4re oder ggfls. eine andere Nennung gew\u00fcnscht wird.<br><strong>Hinterlegung des Urhebers in den Dateiinformationen in der Mediathek:<\/strong><br>Dieser Urheberrechtsvermerk ist in den einzelnen (!) Dateien als Info in der Mediathek zu hinterlegen<br>Die&nbsp;<strong>Anzeige des Copyright-Vermerks&nbsp;<\/strong>an den einzelnen Illustrationen kann in diesem Fall in Word-Press bei der Verwendung auf der jeweiligen Seite deaktiviert werden.<br>Die Bilder in der Mediathek behalten \u00fcber diesen Weg zur Nachvollziehbarkeit den hinterlegten Vermerk bzw. die hinterlegte Information.<br>Falls dies anders gehandhabt w\u00fcrde, bitte den Bildnachweis bei jeder Illustration sichtbar lassen.<br><strong>Verwendungshinweise:<\/strong><br>Generell sollten die Illustrationen nach dem urspr\u00fcnglichen Konzept eingesetzt werden, d.h. z.B. NICHT im Seiteneinstieg, etc.<br>Die Verwendung der unterschiedlichen Illustrationstypen (detailliert\/roter Rahmen\/Silhouette) wird in der&nbsp;<a href=\"https:\/\/jgumainz.sharepoint.com\/sites\/IntranetCMSWordPress\/Freigegebene%20Dokumente\/Forms\/AllItems.aspx?id=%2Fsites%2FIntranetCMSWordPress%2FFreigegebene%20Dokumente%2FGeneral%2FIllustrationen%2D%C2%A9%2DRebekka%20Sch%C3%B6nefu%C3%9F%20Grafikdesign%2DIllustration%2FAnleitung%5FIllustrationen%2Epdf&amp;viewid=9edbe68e%2D5e79%2D4c1f%2Dbfb9%2Db04a029ba4c5&amp;parent=%2Fsites%2FIntranetCMSWordPress%2FFreigegebene%20Dokumente%2FGeneral%2FIllustrationen%2D%C2%A9%2DRebekka%20Sch%C3%B6nefu%C3%9F%20Grafikdesign%2DIllustration\">Anleitung zur Erstelllung von Illustrationen<\/a>&nbsp;erl\u00e4utert. Diese ist f\u00fcr alle Personen mit JGU-Account zug\u00e4nglich.<\/li>\n<\/ul>\n\n\n\n<p class=\"has-big-font-size\">Mehr dazu in der Verwaltungsverf\u00fcgung: Abmahnungen wegen Urheberrechtsverletzungen<\/p>\n\n\n\n<p class=\"has-big-font-size\">Das Zentrum&nbsp;f\u00fcr Datenverarbeitung ist&nbsp;nicht verantwortlich f\u00fcr Urheberrechtsverletzungen, welche durch den nicht-autorisierten Upload fremder Inhalte entstehen.Nicht alles, was Sie selbst fotografiert haben, d\u00fcrfen Sie hochladen!<\/p>\n\n\n\n<p class=\"has-big-font-size\">Das Recht am eigenen Bild, welches sowohl durch \u00a7 22 KUG (Kunst-Urheber-Gesetz) als auch durch das allgemeine Pers\u00f6nlichkeitsrecht (Art. 2 Abs. 1 GG \u2013als Auffangtatbestand) gesch\u00fctzt wird, macht es<br>erforderlich, dass in Werken abgebildete Personen der Nutzung zustimmen. Wird in einem<br>Werk eine Person abgebildet, muss daher neben der Einverst\u00e4ndniserkl\u00e4rung der Urheberin<br>\/ des Urhebers auch die Einverst\u00e4ndniserkl\u00e4rung der abgebildeten Person eingeholt werden.<br>Dies gilt nur, wenn die Person (auch unter Einbeziehung der weiteren \u00e4u\u00dferen Umst\u00e4nde)<br>erkennbar ist. Hierbei ist auf den n\u00e4heren Bekanntenkreis der \/ des Abgebildeten<br>abzustellen.Personen aus Zeitgeschichte, oder als Beiwerk<\/p>\n\n\n\n<p class=\"has-big-font-size\">Ausnahme: Abbildungen d\u00fcrfen ohne Einwilligung genutzt werden, wenn es sich um Bildnisse<br>aus dem Bereich der Zeitgeschichte handelt oder Bilder, auf denen die Personen nur als<br>Beiwerk erscheinen (\u00a723 KUG). Dies ist jedoch ausgeschlossen, wenn berechtigte Interessen<br>des Abgebildeten hierdurch verletzt werden.<\/p>\n\n\n\n<p class=\"has-big-font-size\">Werden die Bilder nicht von einer Mitarbeiterin oder einem Mitarbeiter (weisungsabh\u00e4ngig)<br>im Rahmen ihrer oder seiner Dienstaufgaben gemacht, m\u00fcsste zus\u00e4tzlich noch eine<br>Rechteeinr\u00e4umung durch die Fotografin oder den Fotografen erfolgen. Der Fotograf oder die<br>Fotografin m\u00fcsste das Recht einr\u00e4umen, die Fotos \u00f6ffentlich zug\u00e4nglich zu machen. Sollten<br>weitere Nutzungen vorgesehen werden, m\u00fcssten diese in die Rechteeinr\u00e4umung aufgenommen<br>werden.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/teamweb.uni-mainz.de\/sites\/zd\/Verwaltungsverfgungen\/2014-02.pdf\">Verwaltungsverf\u00fcgung 2014-02: Abmahnungen wegen Urheberrechtsverletzungen<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/teamweb.uni-mainz.de\/sites\/Rechtsangelegenheiten\/SitePages\/Datenschutz.aspx\">Vorlagen: Einverst\u00e4ndniserkl\u00e4rungen, Hinweisschilder Fotos u.a.m Rechtsangelegenheiten<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.gesetze-im-internet.de\/kunsturhg\/__22.html\">\u00a7 22 KunstUrheberGesetz<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.gesetze-im-internet.de\/kunsturhg\/__23.html\">\u00a7 23 KunstUrheberGesetz<\/a><\/li>\n<\/ul>\n\n\n\n<p class=\"has-big-font-size\"><\/p>\n\n\n\n<p class=\"has-big-font-size\"><\/p>\n\n\n<\/jgu-base-accordionitem>\n\n<jgu-base-accordionitem react-props=\"{&quot;title&quot;:&quot;Farben&quot;,&quot;slug&quot;:&quot;farben&quot;,&quot;align&quot;:&quot;wide&quot;,&quot;init&quot;:true,&quot;customSlug&quot;:false}\">\n    \n\n<p class=\"has-big-font-size\"><\/p>\n\n\n<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;Farben&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\">\n<li><a href=\"https:\/\/jgumainz.sharepoint.com\/sites\/IntranetCMSWordPress\/Freigegebene%20Dokumente\/Forms\/AllItems.aspx?ga=1&amp;id=%2Fsites%2FIntranetCMSWordPress%2FFreigegebene%20Dokumente%2FGeneral%2FIllustrationen%2D%C2%A9%2DRebekka%20Sch%C3%B6nefu%C3%9F%20Grafikdesign%2DIllustration%2FAnleitung%5FIllustrationen%2Epdf&amp;viewid=9edbe68e%2D5e79%2D4c1f%2Dbfb9%2Db04a029ba4c5&amp;parent=%2Fsites%2FIntranetCMSWordPress%2FFreigegebene%20Dokumente%2FGeneral%2FIllustrationen%2D%C2%A9%2DRebekka%20Sch%C3%B6nefu%C3%9F%20Grafikdesign%2DIllustration\">Illustrationen und Farben<\/a><\/li>\n<\/ul>\n\n\n\n<p class=\"has-big-font-size\">$primary: #c1002a; (Teaserbox Standard)<\/p>\n\n\n\n<p class=\"has-big-font-size\">$red-hover: #a33135;<\/p>\n\n\n\n<p class=\"has-big-font-size\">$red-light: #d02c31;<\/p>\n\n\n\n<p class=\"has-big-font-size\">$beige-2-teaser: #d0c7b6;<\/p>\n\n\n\n<p class=\"has-big-font-size\">$orange-1: #d17f00; (Teaser Orange)<\/p>\n\n\n\n<p class=\"has-big-font-size\">$orange-2: #ff5500;<\/p>\n\n\n\n<p class=\"has-big-font-size\">$green: #489b7d;<\/p>\n\n\n\n<p class=\"has-big-font-size\">$green-dark: #183339;<\/p>\n\n\n\n<p class=\"has-big-font-size\">$swamp: #2b3331;<\/p>\n\n\n\n<p class=\"has-big-font-size\">$blau-teaser-notification: #004358; (Teaser Blau)<\/p>\n\n\n\n<p class=\"has-big-font-size\">$gold-notification: #eac58c; (Teaser Gold)<\/p>\n\n\n\n<p class=\"has-big-font-size\">$white-blau: #eceef2;<\/p>\n\n\n\n<p class=\"has-big-font-size\">$asphaltblau-hintergrund: #f4f5f5;<\/p>\n\n\n\n<p class=\"has-big-font-size\">$asphaltblau-10: #f0f1f2;<\/p>\n\n\n\n<p class=\"has-big-font-size\">$asphaltblau-15: #cbcfd0;<\/p>\n\n\n\n<p class=\"has-big-font-size\">$asphaltblau-25: #c8cdce;<\/p>\n\n\n\n<p class=\"has-big-font-size\">$asphaltblau-35: #b2b9bb; (Teaser &#8222;Dark Blue&#8220;, tats\u00e4chlich ist die Farbe ein hellgrau)<\/p>\n\n\n\n<p class=\"has-big-font-size\">$asphaltblau-50: #919b9d;<\/p>\n\n\n\n<p class=\"has-big-font-size\">$asphaltblau-55: #869194;<\/p>\n\n\n\n<p class=\"has-big-font-size\">$asphaltblau-50: #768083;<\/p>\n\n\n\n<p class=\"has-big-font-size\">$asphaltblau-60: #6d7c80;<\/p>\n\n\n\n<p class=\"has-big-font-size\">$asphaltblau-65: #707d80; (Teaser Grau)<\/p>\n\n\n\n<p class=\"has-big-font-size\">$asphaltblau-70: #546266;<\/p>\n\n\n\n<p class=\"has-big-font-size\">$asphaltblau-80: #4f5f63; (Teaser Blaugrau)<\/p>\n\n\n\n<p class=\"has-big-font-size\">$asphaltblau: #23373c; (Teaser Dark)<\/p>\n\n\n\n<p class=\"has-big-font-size\">$white-gray: #ededee;<\/p>\n\n\n\n<p class=\"has-big-font-size\">$blue-event-title: #184256;<\/p>\n\n\n\n<p class=\"has-big-font-size\">$gray-event-title: #303a3e;<\/p>\n\n\n\n<p class=\"has-big-font-size\">$gray: #e4e4e5;<\/p>\n\n\n\n<p class=\"has-big-font-size\">$link-color: #475258;<\/p>\n\n\n<\/jgu-base-accordionitem>\n\n<jgu-base-accordionitem react-props=\"{&quot;title&quot;:&quot;Header Icon&quot;,&quot;slug&quot;:&quot;header-icon&quot;,&quot;align&quot;:&quot;wide&quot;,&quot;init&quot;:true,&quot;customSlug&quot;:false}\">\n    \n\n<p class=\"has-big-font-size\">Das Header-Icon ist ein Spezialfall bei dem man einiges falsch machen kann:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>optimieren Sie die Gr\u00f6\u00dfe vor dem Upload<\/li>\n<\/ul>\n\n\n<\/jgu-base-accordionitem>\n\n<\/jgu-base-accordion>\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\\\/2024\\\/01\\\/spillplaz.jpg&quot;,\n        &quot;id&quot;: 114816,\n        &quot;caption&quot;: &quot;das ist die bildbesrchriftung&quot;,\n        &quot;credit&quot;: &quot;der Bildnachweis&quot;,\n        &quot;description&quot;: &quot;die Bildbeschreibung in den Block-Einstellungen&quot;,\n        &quot;title&quot;: &quot;Schild eines Spielplatz in Holland&quot;,\n        &quot;alt&quot;: &quot;OPGEPASST - Keng effentlech Spillplaz&quot;,\n        &quot;hideCredit&quot;: false,\n        &quot;darkBackground&quot;: true,\n        &quot;width&quot;: 1024,\n        &quot;height&quot;: 768,\n        &quot;srcset&quot;: &quot;https:\\\/\\\/cms.zdv.uni-mainz.de\\\/modul-demo\\\/wp-content\\\/uploads\\\/sites\\\/22\\\/2024\\\/01\\\/spillplaz.jpg 1024w, https:\\\/\\\/cms.zdv.uni-mainz.de\\\/modul-demo\\\/wp-content\\\/uploads\\\/sites\\\/22\\\/2024\\\/01\\\/spillplaz-300x225.jpg 300w, https:\\\/\\\/cms.zdv.uni-mainz.de\\\/modul-demo\\\/wp-content\\\/uploads\\\/sites\\\/22\\\/2024\\\/01\\\/spillplaz-768x576.jpg 768w&quot;\n    },\n    &quot;hasLightbox&quot;: true,\n    &quot;caption&quot;: &quot;Bild mit Lightbox&quot;,\n    &quot;imgWidth&quot;: 200,\n    &quot;width&quot;: 0,\n    &quot;link&quot;: {\n        &quot;url&quot;: &quot;&quot;\n    },\n    &quot;align&quot;: &quot;&quot;\n}\" class=\"align-\">\n    \n<\/jgu-base-image>    <div style=\"display: none\">\n        \n    <\/div>","protected":false},"excerpt":{"rendered":"<p>Hier lernen Sie alles Wissenswerte rund um den Einsatz von Bildern auf den Webseiten im JGU Layout 2023.<\/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-3300","page","type-page","status-publish","hentry"],"content_raw":"<!-- wp:jgu\/heading {\"index\":\"Die Technik\",\"tags\":{\"htmlTag\":\"h1\",\"classTag\":\"\",\"tag\":\"h1\"},\"heading\":\"Bilder\"} \/-->\n\n<!-- wp:paragraph -->\n<p class=\"has-big-font-size\">Hier lernen Sie alles Wissenswerte rund um den Einsatz von Bildern auf den Webseiten im JGU Layout 2023. <\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:jgu\/accordion {\"selected\":8} -->\n<!-- wp:jgu\/accordion-item {\"title\":\"Bildgr\u00f6\u00dfe\",\"slug\":\"bildgro\u00dfe\"} -->\n<!-- wp:paragraph {\"className\":\"has-big-font-size\"} -->\n<p class=\"has-big-font-size\">Der Block Bild stellt ein in die Mediathek hochgeladene Bild maximal gro\u00df in dem zur Verf\u00fcgung stehenden Raum an.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph {\"className\":\"has-big-font-size\"} -->\n<p class=\"has-big-font-size\">Bei besonders kleinen Bildern kann das unscharf werden.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph {\"className\":\"has-big-font-size\"} -->\n<p class=\"has-big-font-size\">Bei Originalen, die Breiter als 2560&nbsp;Pixel sind, wird das Bild bereits beim Hochladen von WordPress auf diesen Wert verkleinert und beim Namen \"scaled\" angeh\u00e4ngt.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph {\"className\":\"has-big-font-size\"} -->\n<p class=\"has-big-font-size\">Mit dem Width-Parameter setzen Sie die Gr\u00f6\u00dfe fest. Dieses Bild ist eigentlich 640 Pixel breit und mit der JGU Startseite verlinkt.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p class=\"has-big-font-size\">Dabei wird die Width  beispielsweise in Spalten wichtiger genommen als der Spaltenprozentwert!<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:jgu\/image {\"image\":{\"url\":null,\"id\":116553,\"title\":\"Es gibt einen Title in den Medien, den \u00fcberschreiben Sie in den Einstellungen der Seitenleiste\"},\"caption\":\"Width: 100 \",\"imgWidth\":100,\"width\":0,\"link\":{\"url\":\"https:\/\/www.uni-mainz.de\",\"target\":\"\",\"rel\":\"\"}} \/-->\n\n<!-- wp:jgu\/image {\"image\":{\"url\":null,\"id\":116553,\"caption\":\"Site-intern mit der Bildergalerie verlinkt\",\"title\":\"Sternenhimmel originalgr\u00f6\u00dfe\"},\"caption\":\"Width: 640. Das Bild misst 640x480 Pixel\",\"imgWidth\":640,\"width\":0,\"link\":{\"url\":\"https:\/\/cms.zdv.uni-mainz.de\/modul-demo\/bildergalerie\/\",\"target\":\"\",\"rel\":\"\"}} \/-->\n\n<!-- wp:jgu\/image {\"image\":{\"url\":null,\"id\":116553,\"title\":\"Sternenhimmel\"},\"caption\":\"Width ist leer, dieses Bild ist nicht verlinkt\"} \/-->\n\n<!-- wp:paragraph {\"className\":\"has-big-font-size\"} -->\n<p class=\"has-big-font-size\">Auch Bl\u00f6cke wie Medien und Text kontrollieren die Bildgr\u00f6\u00dfe.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph {\"className\":\"has-big-font-size\"} -->\n<p class=\"has-big-font-size\">Verwalten Sie in den Blockeinstellungen Bildnachweis, Beschriftung, Hintergrund und ob sie das Bild bei Klick separat \u00f6ffnen wollen (=Lightbox)<\/p>\n<!-- \/wp:paragraph -->\n<!-- \/wp:jgu\/accordion-item -->\n\n<!-- wp:jgu\/accordion-item {\"title\":\"Erweiterte Einstellungen\",\"slug\":\"erweiterte-einstellungen\"} -->\n<!-- wp:paragraph -->\n<p class=\"has-big-font-size\">Bild-Alternativtext: nur, wenn es sich um ein inhaltlich f\u00fcr die Seite relevantes Bild handelt, tragen Sie hier etwas ein.<br>Bildbeschriftung: wird nicht angezeigt.<br>Bildnachweis: bei wem liegen die Bildrechte? Wer hat das Foto gemacht? Taucht bei dem kleinen i rechts unten am Bildrand auf<br>Bildnachweis ausblenden: wenn sie das Bildcredit-i ausblenden wollen<br>Bildbeschriftung ausblenden: damit ist die Caption gemeint, die sich direkt unter dem Bild eintragen k\u00f6nnen<br>Dunkler Hintergrund: f\u00fcr manche Bilder sch\u00f6ner<br>Bildbeschreibung: wird nicht angezeigt<br>Bild-Titel (aus Mediathek): dies ist nur eine Anzeige<br>Bild-Titel: wenn Sie hier nichts eintragen, wird bei Mouseover der Bild-Titel der Mediathek angezeigt.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:block {\"ref\":115034} \/-->\n<!-- \/wp:jgu\/accordion-item -->\n\n<!-- wp:jgu\/accordion-item {\"title\":\"Medien wiederfinden\",\"slug\":\"medien-wiederfinden\"} -->\n<!-- wp:jgu\/heading {\"tags\":{\"htmlTag\":\"h2\",\"classTag\":\"\",\"tag\":\"h2\"},\"heading\":\"Organisation von Bildern\"} \/-->\n\n<!-- wp:paragraph -->\n<p class=\"has-big-font-size\">Medien organisieren<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p class=\"has-big-font-size\">Bevor Sie anfangen, Bilder hochzuladen, \u00fcberlegen Sie sich eine Strategie, wie Sie Bilder, die zusammengeh\u00f6ren, immer wiederfinden. Da Sie in der Mediathek keine eigene Ordnerstruktur haben, lohnt sich eine Systematik gleich von Anfang an. Hier unsere Vorschl\u00e4ge gegen einen Mediathek-Dateien-Dschungel:<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:list -->\n<ul class=\"wp-block-list\"><!-- wp:list-item -->\n<li>Bilder und Dateien nicht \u00fcber Dashboard \u2192 Medien hochladen, sondern IMMER aus der Seite! Dann hat man in der Mediathek die Verkn\u00fcpfung \"Hochgeladen zu\"<\/li>\n<!-- \/wp:list-item -->\n\n<!-- wp:list-item -->\n<li>Bilder&nbsp;vor dem Hochladen sprechend nennen (vor allem bei Bildergalerien, anstelle des von der Kamera vergebenen kryptischen Namens). Zusammengeh\u00f6rende Bilder haben am besten den gleichen Dateinamensanfang. Danach k\u00f6nnen sie in der Mediathek auch einschr\u00e4nken und suchen.<\/li>\n<!-- \/wp:list-item -->\n\n<!-- wp:list-item -->\n<li>Das geht auch im Nachhinein: Verwenden Sie die Felder Beschriftung und Beschreibung. Nach denen k\u00f6nnen Sie in der Mediathek ebenfalls suchen!<\/li>\n<!-- \/wp:list-item --><\/ul>\n<!-- \/wp:list -->\n\n<!-- wp:list -->\n<ul class=\"wp-block-list\"><!-- wp:list-item -->\n<li><a href=\"https:\/\/presse.uni-mainz.de\/files\/2023\/01\/JGU_corporate_design_manual_print.pdf\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/presse.uni-mainz.de\/files\/2023\/01\/JGU_corporate_design_manual_print.pdf<\/a><\/li>\n<!-- \/wp:list-item -->\n\n<!-- wp:list-item -->\n<li><a href=\"https:\/\/presse.uni-mainz.de\/files\/2023\/01\/JGU_bilderwelten_leitlinien_visuelle_kommunikation.pdf\">https:\/\/presse.uni-mainz.de\/files\/2023\/01\/JGU_bilderwelten_leitlinien_visuelle_kommunikation.pdf<\/a><\/li>\n<!-- \/wp:list-item -->\n\n<!-- wp:list-item -->\n<li><a href=\"https:\/\/teamweb.uni-mainz.de\/sites\/zd\/Verwaltungsverfgungen\/2014-02.pdf\">Verwaltungsverf\u00fcgung 2014-02: Abmahnungen wegen Urheberrechtsverletzungen<\/a><\/li>\n<!-- \/wp:list-item -->\n\n<!-- wp:list-item -->\n<li><a href=\"https:\/\/teamweb.uni-mainz.de\/sites\/Rechtsangelegenheiten\/SitePages\/Datenschutz.aspx\">Vorlagen: Einverst\u00e4ndniserkl\u00e4rungen, Hinweisschilder Fotos u.a.m Rechtsangelegenheiten<\/a><\/li>\n<!-- \/wp:list-item --><\/ul>\n<!-- \/wp:list -->\n<!-- \/wp:jgu\/accordion-item -->\n\n<!-- wp:jgu\/accordion-item {\"title\":\"Vorlagen Illustrationen\",\"slug\":\"vorlagen-illustrationen\"} -->\n<!-- wp:jgu\/heading {\"tags\":{\"htmlTag\":\"h3\",\"classTag\":\"\",\"tag\":\"h3\"},\"heading\":\"Gemeinsame Medien\"} \/-->\n\n<!-- wp:paragraph {\"className\":\"has-big-font-size\"} -->\n<p class=\"has-big-font-size\">Sie erhalten mit Ihrer neuen Website einen mit Illustrationen vorgef\u00fcllten Medienbereich. Auch die Bildrechte sind bereits ausgef\u00fcllt. Das Format SVG steht f\u00fcr scalable vector graphic und garantiert glasklare Abbildungen.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:jgu\/button -->\n<!-- wp:jgu\/button-item {\"text\":\"SVG- Illustrationen\",\"styling\":\"default\",\"link\":{\"url\":\"https:\/\/jgumainz.sharepoint.com\/:f:\/s\/IntranetCMSWordPress\/ElgkzLcXxdhDhDHyXRF5Df8BXwhwtj6WJKxiC3CfejIgyA?e=fKu0oH\",\"linkTarget\":\"\",\"rel\":\"\",\"opensInNewTab\":true}} \/-->\n<!-- \/wp:jgu\/button -->\n<!-- \/wp:jgu\/accordion-item -->\n\n<!-- wp:jgu\/accordion-item {\"title\":\"Kriterien Bildsprache\",\"slug\":\"kriterien-bildsprache\"} -->\n<!-- wp:jgu\/heading {\"index\":\"\\u003cbr\\u003e\",\"tags\":{\"htmlTag\":\"h2\",\"classTag\":\"\",\"tag\":\"h2\"},\"heading\":\"Inhalte von Bildern und Grafiken\"} \/-->\n\n<!-- wp:paragraph -->\n<p class=\"has-big-font-size\">Die auf den Webseiten verwendeten Bilder und Grafiken sollen folgenden Kriterien entsprechen:<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:list -->\n<ul class=\"wp-block-list\"><!-- wp:list-item -->\n<li>Sie sollen Kernzielgruppen ansprechen<\/li>\n<!-- \/wp:list-item -->\n\n<!-- wp:list-item -->\n<li>Sie sollen zum Inhalt passen und diesen erg\u00e4nzen<\/li>\n<!-- \/wp:list-item -->\n\n<!-- wp:list-item -->\n<li>Sie sollen DSGVO-konform und diversit\u00e4tssensibel sein<\/li>\n<!-- \/wp:list-item -->\n\n<!-- wp:list-item -->\n<li><\/li>\n<!-- \/wp:list-item --><\/ul>\n<!-- \/wp:list -->\n\n<!-- wp:jgu\/heading {\"index\":\"Bildsprache \",\"tags\":{\"htmlTag\":\"h2\",\"classTag\":\"\",\"tag\":\"h2\"},\"heading\":\"Situative Einblicke\"} \/-->\n\n<!-- wp:list -->\n<ul class=\"wp-block-list\"><!-- wp:list-item -->\n<li>Reportageartig<\/li>\n<!-- \/wp:list-item -->\n\n<!-- wp:list-item -->\n<li>Authentische Situationen<\/li>\n<!-- \/wp:list-item -->\n\n<!-- wp:list-item -->\n<li>Nat\u00fcrliche Lichtverh\u00e4ltnisse<\/li>\n<!-- \/wp:list-item -->\n\n<!-- wp:list-item -->\n<li>Spiel mit <!-- wp:list -->\n<ul class=\"wp-block-list\"><!-- wp:list-item -->\n<li>Perspektive<\/li>\n<!-- \/wp:list-item -->\n\n<!-- wp:list-item -->\n<li>Bildtiefe<\/li>\n<!-- \/wp:list-item -->\n\n<!-- wp:list-item -->\n<li>Sch\u00e4rfe und Unsch\u00e4rfe<\/li>\n<!-- \/wp:list-item --><\/ul>\n<!-- \/wp:list --><\/li>\n<!-- \/wp:list-item -->\n\n<!-- wp:list-item -->\n<li>dokumentarischer Einblick in die JGU<\/li>\n<!-- \/wp:list-item --><\/ul>\n<!-- \/wp:list -->\n\n<!-- wp:jgu\/heading {\"index\":\"Bildsprache \",\"tags\":{\"htmlTag\":\"h2\",\"classTag\":\"\",\"tag\":\"h2\"},\"heading\":\"Belebter Campus\"} \/-->\n\n<!-- wp:paragraph -->\n<p class=\"has-big-font-size\">Ausgew\u00e4hlte Pl\u00e4tze des Campus werden belebt und unbelebt abgebildet. Dabei ist auch die Anzeige von \u201enur\u201c stark herangezoomten Bildfragmenten m\u00f6glich. Diese lassen sich variabel einsetzen und f\u00fchren zu einer Beruhigung und Fokussierung im Seitenverlauf.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:jgu\/heading {\"index\":\"Bildsprache \",\"tags\":{\"htmlTag\":\"h2\",\"classTag\":\"\",\"tag\":\"h2\"},\"heading\":\"Strukturbilder\"} \/-->\n\n<!-- wp:paragraph -->\n<p class=\"has-big-font-size\">Zu Themengebieten werden passende fl\u00e4chige Aufnahmen ausgesucht die Mikro- und Makrostrukturen abbilden. Dabei sind auch \u201enur\u201c stark herangezoomte Bildfragmente m\u00f6glich.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p class=\"has-big-font-size\">Diese lassen sich variabel einsetzen und f\u00fchren zu einer Beruhigung und Fokussierung im Seitenverlauf.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p class=\"has-big-font-size\">Sie sind zudem leicht \u00fcber Bilddatenbanken wie https:\/\/stock.adobe.com\/de\/ zu beziehen.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:jgu\/heading {\"index\":\"Bildsprache \",\"tags\":{\"htmlTag\":\"h2\",\"classTag\":\"\",\"tag\":\"h2\"},\"heading\":\"Illustrationen\"} \/-->\n\n<!-- wp:paragraph -->\n<p class=\"has-big-font-size\">Ein Satz von Illustrationen und eine Anleitung, wie sie selbst weitere Illustrationen erstellen, steht Ihnen im <a href=\"https:\/\/jgumainz.sharepoint.com\/sites\/IntranetCMSWordPress\/Freigegebene%20Dokumente\/Forms\/AllItems.aspx?id=%2Fsites%2FIntranetCMSWordPress%2FFreigegebene%20Dokumente%2FGeneral&amp;p=true&amp;ga=1\">Intranet CMS Sharepoint WP <\/a> zur Verf\u00fcgung. Dort wird auch auf eine passende Farbpallette eingegangen.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p class=\"has-big-font-size\">Die Illustrationen (alle quadratisch) unterteilen sich in detaillierte und vereinfachte Illustrationen, reine Silhouetten und Icon Illustrationen (2 Farben, sehr reduziert)<\/p>\n<!-- \/wp:paragraph -->\n<!-- \/wp:jgu\/accordion-item -->\n\n<!-- wp:jgu\/accordion-item {\"title\":\"Barrierefreiheit\",\"slug\":\"barrierefreiheit\"} -->\n<!-- wp:paragraph -->\n<p class=\"has-big-font-size\">Ganz allgemein gilt: oft sind Bilder f\u00fcr das Verst\u00e4ndnis des Inhaltes der Website nicht n\u00f6tig (=dekorativ). Diese sollen nicht per Text erkl\u00e4rt werden. Der Alt-Text bleibt also komplett leer. Gibt man ein Leerzeichen ein, dann liest z.B. das VoiceOver von Apple \"Leerzeichen\" vor...<br>Sind die Bilder f\u00fcr das Verst\u00e4ndnis wichtig, m\u00fcssen Sie den Inhalt per Text erkl\u00e4ren. Da gibt es dann abh\u00e4ngig vom&nbsp;<br>Format und Layout verschiedene Stellen, an denen Sie diesen Text einf\u00fcllen, aber meist ist es der alt = alternative Text.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p class=\"has-big-font-size\">Ganz allgemein mu\u00df einfach alles, was nicht Text ist auf der Webseite, wenn es denn inhaltlich relevant und keine Dekoration ist, per Text erkl\u00e4rt werden.<\/p>\n<!-- \/wp:paragraph -->\n<!-- \/wp:jgu\/accordion-item -->\n\n<!-- wp:jgu\/accordion-item {\"title\":\"Rechtliches\",\"slug\":\"rechtliches\"} -->\n<!-- wp:paragraph -->\n<p class=\"has-big-font-size\">Nicht alles, was Sie im Internet an Bildern finden, d\u00fcrfen Sie hochladen!<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p class=\"has-big-font-size\">F\u00fcr den Upload oder die Wiedergabe&nbsp;<em>fremder Inhalte<\/em>&nbsp;(z.B. fremder Bilder, PDF-Dateien) auf den Internetseiten Ihres Projektes&nbsp;muss in der Regel die Zustimmung des Urhebers eingeholt werden!<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:jgu\/heading {\"tags\":{\"htmlTag\":\"h2\",\"classTag\":\"\",\"tag\":\"h2\"},\"heading\":\"Bildmaterial im Impressum\"} \/-->\n\n<!-- wp:list -->\n<ul class=\"wp-block-list\"><!-- wp:list-item -->\n<li><strong>F\u00fcr Fotos und Abbildungen, die verwendet werden, m\u00fcssen die Nutzungsrechte des jeweiligen Urhebers (z.B. Fotograf, Illustrator) bzw. Rechteinhabers (z.B. Bilddatenbanken, Adobe Stock, Verlage) vorliegen.<\/strong><\/li>\n<!-- \/wp:list-item -->\n\n<!-- wp:list-item -->\n<li><strong>Bildhinweise der verwendeten Fotografien und Abbildungen entsprechend der vereinbarten bzw. vom Urheber genannten Nutzungsbedingungen hinterlegen.<\/strong><\/li>\n<!-- \/wp:list-item -->\n\n<!-- wp:list-item -->\n<li><strong>Betrifft die Illustrationen:<\/strong><br>-&nbsp;<strong>Sofern ausschlie\u00dflich Illustrationen von Rebekka Weimer (Sch\u00f6nefu\u00df) verwendet werden, ist eine Nennung im Impressum ausreichend<\/strong>. Die Urheberrechtsangaben (Bildnachweise) sind in der Quelldatei in der Mediathek bei der Illustration zu hinterlegen (im Template bereits eingerichtet), auf der jeweiligen Seite kann auf die Ver\u00f6ffentlichung des Bildnachweises verzichtet werden.<br>- Sofern Illustrationen zus\u00e4tzlich von anderen Illustratoren*innen verwendet werden, muss mit dem\/der weiteren Illustrator*in abgestimmt werden, ob sie\/er (im g\u00fcnstigsten Fall) mit einer Nennung in dieser Weise einverstanden w\u00e4re oder ggfls. eine andere Nennung gew\u00fcnscht wird.<br><strong>Hinterlegung des Urhebers in den Dateiinformationen in der Mediathek:<\/strong><br>Dieser Urheberrechtsvermerk ist in den einzelnen (!) Dateien als Info in der Mediathek zu hinterlegen<br>Die&nbsp;<strong>Anzeige des Copyright-Vermerks&nbsp;<\/strong>an den einzelnen Illustrationen kann in diesem Fall in Word-Press bei der Verwendung auf der jeweiligen Seite deaktiviert werden.<br>Die Bilder in der Mediathek behalten \u00fcber diesen Weg zur Nachvollziehbarkeit den hinterlegten Vermerk bzw. die hinterlegte Information.<br>Falls dies anders gehandhabt w\u00fcrde, bitte den Bildnachweis bei jeder Illustration sichtbar lassen.<br><strong>Verwendungshinweise:<\/strong><br>Generell sollten die Illustrationen nach dem urspr\u00fcnglichen Konzept eingesetzt werden, d.h. z.B. NICHT im Seiteneinstieg, etc.<br>Die Verwendung der unterschiedlichen Illustrationstypen (detailliert\/roter Rahmen\/Silhouette) wird in der&nbsp;<a href=\"https:\/\/jgumainz.sharepoint.com\/sites\/IntranetCMSWordPress\/Freigegebene%20Dokumente\/Forms\/AllItems.aspx?id=%2Fsites%2FIntranetCMSWordPress%2FFreigegebene%20Dokumente%2FGeneral%2FIllustrationen%2D%C2%A9%2DRebekka%20Sch%C3%B6nefu%C3%9F%20Grafikdesign%2DIllustration%2FAnleitung%5FIllustrationen%2Epdf&amp;viewid=9edbe68e%2D5e79%2D4c1f%2Dbfb9%2Db04a029ba4c5&amp;parent=%2Fsites%2FIntranetCMSWordPress%2FFreigegebene%20Dokumente%2FGeneral%2FIllustrationen%2D%C2%A9%2DRebekka%20Sch%C3%B6nefu%C3%9F%20Grafikdesign%2DIllustration\">Anleitung zur Erstelllung von Illustrationen<\/a>&nbsp;erl\u00e4utert. Diese ist f\u00fcr alle Personen mit JGU-Account zug\u00e4nglich.<\/li>\n<!-- \/wp:list-item --><\/ul>\n<!-- \/wp:list -->\n\n<!-- wp:paragraph -->\n<p class=\"has-big-font-size\">Mehr dazu in der Verwaltungsverf\u00fcgung: Abmahnungen wegen Urheberrechtsverletzungen<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p class=\"has-big-font-size\">Das Zentrum&nbsp;f\u00fcr Datenverarbeitung ist&nbsp;nicht verantwortlich f\u00fcr Urheberrechtsverletzungen, welche durch den nicht-autorisierten Upload fremder Inhalte entstehen.Nicht alles, was Sie selbst fotografiert haben, d\u00fcrfen Sie hochladen!<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p class=\"has-big-font-size\">Das Recht am eigenen Bild, welches sowohl durch \u00a7 22 KUG (Kunst-Urheber-Gesetz) als auch durch das allgemeine Pers\u00f6nlichkeitsrecht (Art. 2 Abs. 1 GG \u2013als Auffangtatbestand) gesch\u00fctzt wird, macht es<br>erforderlich, dass in Werken abgebildete Personen der Nutzung zustimmen. Wird in einem<br>Werk eine Person abgebildet, muss daher neben der Einverst\u00e4ndniserkl\u00e4rung der Urheberin<br>\/ des Urhebers auch die Einverst\u00e4ndniserkl\u00e4rung der abgebildeten Person eingeholt werden.<br>Dies gilt nur, wenn die Person (auch unter Einbeziehung der weiteren \u00e4u\u00dferen Umst\u00e4nde)<br>erkennbar ist. Hierbei ist auf den n\u00e4heren Bekanntenkreis der \/ des Abgebildeten<br>abzustellen.Personen aus Zeitgeschichte, oder als Beiwerk<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p class=\"has-big-font-size\">Ausnahme: Abbildungen d\u00fcrfen ohne Einwilligung genutzt werden, wenn es sich um Bildnisse<br>aus dem Bereich der Zeitgeschichte handelt oder Bilder, auf denen die Personen nur als<br>Beiwerk erscheinen (\u00a723 KUG). Dies ist jedoch ausgeschlossen, wenn berechtigte Interessen<br>des Abgebildeten hierdurch verletzt werden.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p class=\"has-big-font-size\">Werden die Bilder nicht von einer Mitarbeiterin oder einem Mitarbeiter (weisungsabh\u00e4ngig)<br>im Rahmen ihrer oder seiner Dienstaufgaben gemacht, m\u00fcsste zus\u00e4tzlich noch eine<br>Rechteeinr\u00e4umung durch die Fotografin oder den Fotografen erfolgen. Der Fotograf oder die<br>Fotografin m\u00fcsste das Recht einr\u00e4umen, die Fotos \u00f6ffentlich zug\u00e4nglich zu machen. Sollten<br>weitere Nutzungen vorgesehen werden, m\u00fcssten diese in die Rechteeinr\u00e4umung aufgenommen<br>werden.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:list -->\n<ul class=\"wp-block-list\"><!-- wp:list-item -->\n<li><a href=\"https:\/\/teamweb.uni-mainz.de\/sites\/zd\/Verwaltungsverfgungen\/2014-02.pdf\">Verwaltungsverf\u00fcgung 2014-02: Abmahnungen wegen Urheberrechtsverletzungen<\/a><\/li>\n<!-- \/wp:list-item -->\n\n<!-- wp:list-item -->\n<li><a href=\"https:\/\/teamweb.uni-mainz.de\/sites\/Rechtsangelegenheiten\/SitePages\/Datenschutz.aspx\">Vorlagen: Einverst\u00e4ndniserkl\u00e4rungen, Hinweisschilder Fotos u.a.m Rechtsangelegenheiten<\/a><\/li>\n<!-- \/wp:list-item -->\n\n<!-- wp:list-item -->\n<li><a href=\"https:\/\/www.gesetze-im-internet.de\/kunsturhg\/__22.html\">\u00a7 22 KunstUrheberGesetz<\/a><\/li>\n<!-- \/wp:list-item -->\n\n<!-- wp:list-item -->\n<li><a href=\"https:\/\/www.gesetze-im-internet.de\/kunsturhg\/__23.html\">\u00a7 23 KunstUrheberGesetz<\/a><\/li>\n<!-- \/wp:list-item --><\/ul>\n<!-- \/wp:list -->\n\n<!-- wp:paragraph -->\n<p class=\"has-big-font-size\"><\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p class=\"has-big-font-size\"><\/p>\n<!-- \/wp:paragraph -->\n<!-- \/wp:jgu\/accordion-item -->\n\n<!-- wp:jgu\/accordion-item {\"title\":\"Farben\",\"slug\":\"farben\"} -->\n<!-- wp:paragraph -->\n<p class=\"has-big-font-size\"><\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:jgu\/heading {\"tags\":{\"htmlTag\":\"h2\",\"classTag\":\"\",\"tag\":\"h2\"},\"heading\":\"Farben\"} \/-->\n\n<!-- wp:list -->\n<ul class=\"wp-block-list\"><!-- wp:list-item -->\n<li><a href=\"https:\/\/jgumainz.sharepoint.com\/sites\/IntranetCMSWordPress\/Freigegebene%20Dokumente\/Forms\/AllItems.aspx?ga=1&amp;id=%2Fsites%2FIntranetCMSWordPress%2FFreigegebene%20Dokumente%2FGeneral%2FIllustrationen%2D%C2%A9%2DRebekka%20Sch%C3%B6nefu%C3%9F%20Grafikdesign%2DIllustration%2FAnleitung%5FIllustrationen%2Epdf&amp;viewid=9edbe68e%2D5e79%2D4c1f%2Dbfb9%2Db04a029ba4c5&amp;parent=%2Fsites%2FIntranetCMSWordPress%2FFreigegebene%20Dokumente%2FGeneral%2FIllustrationen%2D%C2%A9%2DRebekka%20Sch%C3%B6nefu%C3%9F%20Grafikdesign%2DIllustration\">Illustrationen und Farben<\/a><\/li>\n<!-- \/wp:list-item --><\/ul>\n<!-- \/wp:list -->\n\n<!-- wp:paragraph -->\n<p class=\"has-big-font-size\">$primary: #c1002a; (Teaserbox Standard)<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p class=\"has-big-font-size\">$red-hover: #a33135;<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p class=\"has-big-font-size\">$red-light: #d02c31;<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p class=\"has-big-font-size\">$beige-2-teaser: #d0c7b6;<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p class=\"has-big-font-size\">$orange-1: #d17f00; (Teaser Orange)<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p class=\"has-big-font-size\">$orange-2: #ff5500;<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p class=\"has-big-font-size\">$green: #489b7d;<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p class=\"has-big-font-size\">$green-dark: #183339;<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p class=\"has-big-font-size\">$swamp: #2b3331;<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p class=\"has-big-font-size\">$blau-teaser-notification: #004358; (Teaser Blau)<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p class=\"has-big-font-size\">$gold-notification: #eac58c; (Teaser Gold)<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p class=\"has-big-font-size\">$white-blau: #eceef2;<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p class=\"has-big-font-size\">$asphaltblau-hintergrund: #f4f5f5;<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p class=\"has-big-font-size\">$asphaltblau-10: #f0f1f2;<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p class=\"has-big-font-size\">$asphaltblau-15: #cbcfd0;<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p class=\"has-big-font-size\">$asphaltblau-25: #c8cdce;<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p class=\"has-big-font-size\">$asphaltblau-35: #b2b9bb; (Teaser \"Dark Blue\", tats\u00e4chlich ist die Farbe ein hellgrau)<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p class=\"has-big-font-size\">$asphaltblau-50: #919b9d;<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p class=\"has-big-font-size\">$asphaltblau-55: #869194;<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p class=\"has-big-font-size\">$asphaltblau-50: #768083;<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p class=\"has-big-font-size\">$asphaltblau-60: #6d7c80;<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p class=\"has-big-font-size\">$asphaltblau-65: #707d80; (Teaser Grau)<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p class=\"has-big-font-size\">$asphaltblau-70: #546266;<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p class=\"has-big-font-size\">$asphaltblau-80: #4f5f63; (Teaser Blaugrau)<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p class=\"has-big-font-size\">$asphaltblau: #23373c; (Teaser Dark)<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p class=\"has-big-font-size\">$white-gray: #ededee;<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p class=\"has-big-font-size\">$blue-event-title: #184256;<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p class=\"has-big-font-size\">$gray-event-title: #303a3e;<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p class=\"has-big-font-size\">$gray: #e4e4e5;<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p class=\"has-big-font-size\">$link-color: #475258;<\/p>\n<!-- \/wp:paragraph -->\n<!-- \/wp:jgu\/accordion-item -->\n\n<!-- wp:jgu\/accordion-item {\"title\":\"Header Icon\",\"slug\":\"header-icon\"} -->\n<!-- wp:paragraph -->\n<p class=\"has-big-font-size\">Das Header-Icon ist ein Spezialfall bei dem man einiges falsch machen kann:<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:list -->\n<ul class=\"wp-block-list\"><!-- wp:list-item -->\n<li>optimieren Sie die Gr\u00f6\u00dfe vor dem Upload<\/li>\n<!-- \/wp:list-item --><\/ul>\n<!-- \/wp:list -->\n<!-- \/wp:jgu\/accordion-item -->\n<!-- \/wp:jgu\/accordion -->\n\n<!-- wp:jgu\/image {\"image\":{\"url\":null,\"id\":114816,\"caption\":\"das ist die bildbesrchriftung\",\"credit\":\"der Bildnachweis\",\"description\":\"die Bildbeschreibung in den Block-Einstellungen\",\"title\":\"Schild eines Spielplatz in Holland\",\"alt\":\"OPGEPASST - Keng effentlech Spillplaz\",\"hideCredit\":false,\"darkBackground\":true},\"hasLightbox\":true,\"caption\":\"Bild mit Lightbox\",\"imgWidth\":200,\"width\":0,\"link\":{\"url\":\"\"}} \/-->","_links":{"self":[{"href":"https:\/\/cms.zdv.uni-mainz.de\/modul-demo\/wp-json\/wp\/v2\/pages\/3300","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=3300"}],"version-history":[{"count":15,"href":"https:\/\/cms.zdv.uni-mainz.de\/modul-demo\/wp-json\/wp\/v2\/pages\/3300\/revisions"}],"predecessor-version":[{"id":119688,"href":"https:\/\/cms.zdv.uni-mainz.de\/modul-demo\/wp-json\/wp\/v2\/pages\/3300\/revisions\/119688"}],"wp:attachment":[{"href":"https:\/\/cms.zdv.uni-mainz.de\/modul-demo\/wp-json\/wp\/v2\/media?parent=3300"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cms.zdv.uni-mainz.de\/modul-demo\/wp-json\/wp\/v2\/categories?post=3300"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cms.zdv.uni-mainz.de\/modul-demo\/wp-json\/wp\/v2\/tags?post=3300"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}