Hinzufügen von Text und Bildern

Mitglieder des Kernteams einer Initiative oder Site können einer Site mit den folgenden Kacheln Bilder und Text hinzufügen:

• Zeilen-Kachel: Dies sind die Bausteine der Site. Jede Kachel muss innerhalb einer Zeilen-Kachel verschachtelt sein. Sie können Zeilen-Kacheln Bilder und Hintergrundfarben hinzufügen.
• Text-Kachel: Fügen Sie an einer beliebigen Stelle in der Site Text hinzu, indem Sie diese Kachel auf eine Zeilen-Kachel ziehen. Mithilfe dieser Kachel können Sie der Site auch Schaltflächen, Listen, Tabellen und benutzerdefinierten Code hinzufügen.
• Bild-Kachel: Fügen Sie einer Zeilen-Kachel an einer beliebigen Stelle auf der Site eigenständige Bilder hinzu.

Melden Sie sich zunächst bei ArcGIS Hub an, und wählen Sie auf der Seite Überblick die Option Sites aus, um eine Liste Ihrer Sites anzuzeigen. Wenn Ihre Organisation eine Lizenz für ArcGIS Hub Premium besitzt, werden die Sites unter Initiativen aufgeführt.

Tipp:

Sie können eine Site auch bearbeiten, während sie in einem Browser angezeigt wird. Melden Sie sich bei ArcGIS Hub an und suchen Sie nach der Schaltfläche "Bearbeiten" links auf der Site.

Hinzufügen und Formatieren von Text

Sie können der Site überall dort Text hinzufügen, wo sich eine Zeilen-Kachel befindet.

1. Öffnen Sie die gewünschte Site oder Seite im Bearbeitungsmodus.
2. Fügen Sie einer Zeile eine Text-Kachel hinzu, und geben Sie Text ein.
3. Wählen Sie den zu formatierenden Text aus. Zu den Optionen gehören "Style" ("Normal", "Code", "Kopfzeilen" usw.), "Fett", "Kursiv" und "Links".
4. Um die Textgröße anzupassen, wählen Sie die Schaltfläche "Style" aus, und wählen Sie eine Kopfzeilengröße aus.
5. Um die Textausrichtung anzupassen, wählen Sie die Absatzoptionen und dann eine der Optionen aus. Um eine Textzeile zu verschieben, können Sie die Absatzoption auswählen und "Negativer Einzug" oder "Einzug" auswählen.

   Tipp:

   Wenn Sie einen Fehler machen, drücken Sie BEFEHL+Z oder Strg+Z auf der Tastatur, um die Änderungen zurückzusetzen.

6. Wählen Sie Speichern aus.

Hinweis:

Für Texte in Basisschriftart wurde 2021/2022 auf allen Sites und Seiten eine größere Schriftart eingeführt, um die Lesbarkeit zu verbessern und Webinhalte für Menschen mit verschiedenen Beeinträchtigungen zugänglich zu machen.Einzelheiten hierzu finden Sie im Blogbeitrag FAQ: Upcoming changes to base font size and rem units in ArcGIS Hub sites.

Ändern der Textfarbe

Um die gleiche Farbe auf den gesamten Text auf Ihrer Site anzuwenden, ändern Sie die Textfarbe über die Designeinstellungen der Site. Sie können die Textfarbe auch mit den Zeileneinstellungen anpassen.

1. Öffnen Sie die gewünschte Site oder Seite im Bearbeitungsmodus.
2. Um eine Farbe für den gesamten Text auf Ihrer Site oder Seite festzulegen, öffnen Sie den Seitenbereich, und erweitern Sie das Menü Design. Weitere Informationen zu Designs finden Sie unter Hinzufügen eines Branding zu einer Site mit Kopfzeile und Designoptionen.
3. Um für eine bestimmte Zeile eine Farbe festzulegen, wählen Sie in der entsprechenden Zeile den Bearbeitungsstift aus.
4. Ändern Sie die Farbe, indem Sie einen Hexadezimal-Farbcode eingeben oder eine Farbe in der Farbauswahl auswählen.

   Tipp:

   Hexadezimalcodes sind hilfreich, um ein konsistentes Branding der Ressourcen Ihrer Organisation zu gewährleisten. Wenn Sie die Details bezüglich des Branding Ihrer Organisation nicht genau kennen, überprüfen Sie, ob sie entsprechende Dokumentation oder Markenrichtlinien bereitstellt.

5. Wählen Sie Speichern aus.

Ändern der Schriftart

Sie können die Schriftart für Textüberschriften und Basistext anhand von Google Fonts ändern. Der Basistext umfasst allen Text in Ihrem Site-Layout. Die Schriftart wird ebenfalls auf Seiten, die Ihrer Site hinzugefügt wurden, auf Elementdetailseiten, auf die über die Suche der Site zugegriffen wird, und auf Event-Ansichten angewendet.

Hinzufügen einer Liste mit Aufzählung oder Nummerierung

Führen Sie zum Erstellen einer Liste die folgenden Schritte aus.

1. Öffnen Sie die gewünschte Site oder Seite im Bearbeitungsmodus.
2. Fügen Sie einer Zeile eine Text-Kachel hinzu.
3. Fügen Sie Text hinzu oder wählen Sie einen vorhandenen Text aus.
4. Wählen Sie Ungeordnete Liste aus, um eine Aufzählung zu erstellen, oder Geordnete Liste, um eine nummerierte Liste zu erstellen.
5. Wählen Sie Speichern aus.

Hinzufügen eines eigenständigen Bildes

Sie können einer beliebigen Zeilen-Kachel eigenständige Bilder hinzufügen. Intern freigegebene Bilder sind nur für angemeldete Benutzer sichtbar, die zum Kernteam oder zur Organisation gehören.

1. Öffnen Sie die gewünschte Site oder Seite im Bearbeitungsmodus.
2. Fügen Sie einer Zeile eine Bild-Kachel hinzu.
3. Wählen Sie unter Bild eine Bildquelle aus. Von beiden Optionen werden unter anderem JPG, JPEG und PNG unterstützt.
   • Um eine Bild-URL anzugeben, wählen Sie Bild-URL aus, und fügen Sie einen unterstützten Link zu einem Bild im Feld URL ein.
   • Wählen Sie zum Hochladen einer Datei die Option Bild hochladen aus. Ziehen Sie die Datei auf das Feld, oder klicken Sie auf Bild suchen, um das Bild hinzuzufügen (maximale Dateigröße: 3 MB).
4. Um ein hochgeladenes Bild anzupassen, wählen Sie die Schaltfläche Bild zuschneiden aus, und ziehen Sie einen Ziehpunkt, um die Größe des Zuschneiderahmens zu ändern. Um den Zuschneiderahmen neu zu positionieren, wählen Sie die gepunktete Linie aus, und ziehen Sie sie. Um den Zoom anzupassen, verwenden Sie den Schieberegler unter dem Bild.
5. Geben Sie im Menü Optionen alternativen Bildtext an, um sehbehinderten Benutzern zu helfen und die Barrierefreiheit Ihrer Site zu verbessern.
6. Geben Sie gegebenenfalls einen Bild-Hyperlink an, und legen Sie fest, ob der Link auf derselben Registerkarte oder auf einer neuen Registerkarte geöffnet werden soll.

   Hinweis:

   Die Richtlinien für barrierefreie Webinhalte (3.2.2 Bei Eingabe und Technik G201) empfehlen, dass Sie das Öffnen von Links in neuen Registerkarten oder Fenstern vermeiden, es sei denn, Sie stellen eine erweiterte Warnung bereit.

7. Geben Sie Text für die Bildunterschrift an, und wählen Sie die Textausrichtung aus.
8. Wählen Sie optional Bild auf volle Größe skalieren aus, um einen Mittelpunkt für das Bild festzulegen. Über den Mittelpunkt wird sichergestellt, dass das Bild auch dann an der gewünschten Stelle fokussiert bleibt, wenn es an verschiedene Bildschirmgrößen angepasst wird.
9. Wählen Sie Speichern aus.

Hinzufügen von Hintergrundbildern und Farbe

Mithilfe der Zeilen-Kachel können Sie Bilder hinter anderen Kacheln hinzufügen.

Tipp:

Sollte Text oder Inhalt über einem Bild angezeigt werden, wählen Sie eine kontrastierende Hintergrundfarbe aus. Wenn Sie beispielsweise hellen Text verwenden oder eine helle Karte anzeigen, wählen Sie eine dunkle Hintergrundfarbe aus, z. B. Schwarz, um sicherzustellen, dass der Text deutlich sichtbar bleibt. Passen Sie dann die Transparenz der Farbe an, sodass das Bild sichtbar bleibt.

1. Öffnen Sie die gewünschte Site oder Seite im Bearbeitungsmodus.
2. Fügen Sie dem Layout eine Zeilen-Kachel hinzu, und legen Sie unter Aussehen das Format fest.
3. Wählen Sie unter Hintergrundbild eine Bildquelle aus. Von beiden Optionen werden unter anderem JPG, JPEG und PNG unterstützt.
   • Um eine Bild-URL anzugeben, wählen Sie Bild-URL aus, und fügen Sie einen unterstützten Link zu einem Bild im Feld URL ein.
   • Wählen Sie zum Hochladen einer Datei die Option Bild hochladen aus. Ziehen Sie die Datei auf das Feld, oder klicken Sie auf Bild suchen, um das Bild hinzuzufügen (maximale Dateigröße: 3 MB).
4. Wählen Sie eine Hintergrundfarbe aus, indem Sie einen Hexadezimal-Farbcode eingeben oder eine Farbe in der Farbauswahl auswählen.

   Hinweis:

   Nur Zeilen-Kacheln unterstützen Hintergrundfarben.

5. Zum Anpassen der Bildtransparenz können Sie den Schieberegler verwenden oder einen Wert in das Prozentsatz-Feld eingeben. Auf diese Weise wird die Hintergrundfarbe heller oder dunkler eingestellt, wodurch sichergestellt werden kann, dass Bild und Text für sehbehinderte Benutzer zugänglich bleiben.
6. Wählen Sie Speichern aus.

Auswählen eines Bild-Layouts auf einer Zeilen-Kachel

Jede Zeilen-Kachel verfügt über zwei Layout-Optionen, mit denen Sie die Bildanzeige festlegen können.

1. Nachdem Sie einer Zeilen-Kachel ein Bild hinzugefügt haben, können Sie ein festes oder breites Layout für das Bild und andere in der Kachel angezeigte Inhalte auswählen.
   • Wählen Sie Box aus, wenn das Bild seine Größe beibehalten soll.
   • Wählen Sie Breit aus, wenn das Bild sich über die Breite der Site erstrecken soll.
2. Legen Sie Bildmittelpunkt fest, um sicherzustellen, dass das Bild auch dann an der gewünschten Stelle fokussiert bleibt, wenn es an verschiedene Bildschirmgrößen angepasst wird.
3. Wählen Sie Speichern aus.

Erstellen einer Schaltfläche

Eine Schaltfläche mit einem Link zu einer anderen Position, wie z. B. zu einem Abschnitt oder einer Seite, ist ein hilfreiches Navigationswerkzeug. Schaltflächen können zudem einen Call To Action enthalten.

1. Öffnen Sie die gewünschte Site oder Seite im Bearbeitungsmodus.
2. Fügen Sie dem Layout eine Text-Kachel hinzu.
3. Wählen Sie die Schaltfläche Einfügen aus, und wählen Sie Schaltfläche.
4. Wählen Sie </>In HTML bearbeiten aus.
5. Ersetzen Sie im 'href'-Tag '#' durch die URL und 'Button' durch den Link-Text (Anleitung für Calcite-Komponenten).
6. Wählen Sie Übernehmen und Speichern aus.
Informationen zu Schaltflächenfarben finden Sie unter Erstellen eines Designs.

Erstellen eines Accordion-Menüs

Fügen Sie ein ausblendbares Menü hinzu. Dabei handelt es sich um eine hilfreiche Option zum Hinzufügen häufig gestellter Fragen.

1. Öffnen Sie die gewünschte Site oder Seite im Bearbeitungsmodus.
2. Fügen Sie dem Layout eine Text-Kachel hinzu.
3. Wählen Sie die Schaltfläche Einfügen aus, und wählen Sie Accordion aus.
4. Klicken Sie auf </>In HTML bearbeiten, um Text hinzuzufügen und zu formatieren (Anleitung für Calcite-Komponenten).
5. Wählen Sie Übernehmen und Speichern aus.

Siehe unterstützte Calcite-Komponenten

Die Kachel Text bietet Unterstützung für die folgenden Komponenten des Calcite Design System. Beschreibungen, Verwendungsempfehlungen, Beispiele usw. sind einem Katalog aller Calcite-Komponenten zu entnehmen.

'calcite-action' 'calcite-accordion' 'calcite-accordion-item' 'calcite-avatar' 'calcite-block' 'calcite-button' 'calcite-card' 'calcite-chip' 'calcite-dropdown-group'

'calcite-dropdown-item' 'calcite-fab' 'calcite-flow' 'calcite-icon' 'calcite-link' 'calcite-modal' 'calcite-panel' 'calcite-rating' 'calcite-split-button'

'calcite-stepper' 'calcite-stepper-item' 'calcite-tab' 'calcite-tab-nav' 'calcite-tab-title' 'calcite-tabs' 'calcite-tile' calcite-tip' 'calcite-tooltip'

Konfigurieren von Text mit HTML

Passen Sie den Text mithilfe der nachfolgenden HTML-Elemente und -Attribute an.

1. Öffnen Sie die gewünschte Site oder Seite im Bearbeitungsmodus.
2. Fügen Sie dem Layout eine Text-Kachel hinzu.
3. Klicken Sie auf </>In HTML bearbeiten, um Text hinzuzufügen und zu formatieren (Anleitung für Calcite-Komponenten).
4. Wählen Sie Übernehmen und Speichern aus.

Vorsicht:

Aus Sicherheitsgründen bieten Text-Kacheln keine Unterstützung für eingebettetes JavaScript. Skript-Tags werden ignoriert.

Zulässige HTML-Elemente

'a' 'abbr' 'acronym' 'address' 'article' 'audio' 'b' 'bdi' 'bdo' 'big' 'blockquote' 'br' 'caption' 'center' 'cite' 'code' 'col'

'colgroup' 'datalist' 'dd' 'del' 'details' 'dfn' 'div' 'dl' 'dt' 'em' 'embed' 'fieldset' 'figcaption' 'figure' 'font' 'footer' 'frameset'

'h1' 'h2' 'h3' 'h4' 'h5' 'h6' 'head' 'header' 'hgroup' 'hr' 'i' 'image' 'input' 'ins' 'kbd' 'keygen' 'li'

'link' 'main' 'map' 'mark' 'menu' 'meter' 'nav' 'ol' 'optgroup' 'option' 'output' 'br' 'p' 'param' 'pre' 'progress' 'q'

'rp' 'rt' 'ruby' 's' 'samp' 'section' 'small' 'source' 'span' 'strike' 'strong' 'style' 'sub' 'summary' 'sup' 'table' 'tbody'

'td' 'tfoot' 'textarea' 'th' 'thead' 'time' 'title' 'tr' 'track' 'tt' 'u' 'ul'

Für diese Elemente sind folgende Attribute zulässig. ['class', 'style'] sind für alle unterstützten HTML-Elemente zulässig.

• 'a' : ['href', 'title', 'data-toggle', 'data-target', 'data-toggle' 'name', 'rel', 'style', 'target']
• 'audio' : ['autoplay', 'controls', 'loop', 'muted', 'preload']
• 'blockquote': ['cite']
• 'button' : ['name', 'value', 'data-toggle', 'data-target', 'data-dismiss']
• 'col' : ['span', 'width']
• 'colgroup' : ['span', 'width']
• 'div' : ['style', 'align', 'data-show', 'data-target', 'data-toggle']
• 'font': ['size', 'color', 'style']
• 'img' : ['align', 'alt', 'border', 'height', 'style', 'src', 'title', 'width']
• 'ol' : ['align', 'start', 'type']
• 'p' : ['style']
• 'q' : ['cite']
• 'source' : ['media', 'src', 'type']
• 'span' : [style]
• 'table' : ['border', 'cellspacing', 'cellpadding', 'class', 'height' 'style', 'summary', 'width']
• 'td' : ['abbr', 'align', 'axis', 'colspan', 'height', 'nowrap', 'rowspan', 'style', 'valign', 'width']
• 'th' : ['abbr', 'align', 'axis', 'colspan', 'height', 'nowrap', 'rowspan', 'style', 'valign', 'width']
• 'tr' : [alignt, 'height', style', valign']
• 'ul' : ['type']