Skip To Content

Hinzufügen von Text und Bildern

    Mitglieder des Kernteams 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. Zudem sind Sie in der Lage, mit dieser Kachel einen Parallaxeneffekt zu erzeugen.
    • Text-Kachel: Fügen Sie an einer beliebigen Stelle in der Site Text hinzu, indem Sie diese Kachel auf einer Zeilen-Kachel ablegen. 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 Enterprise an, und wählen Sie auf der Seite Überblick die Option Sites aus, um eine Liste Ihrer Sites anzuzeigen.

    Tipp:

    Sie können eine Site auch bearbeiten, während sie in einem Browser angezeigt wird. Vergewissern Sie sich, dass Sie angemeldet sind, 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.
    3. Fügen Sie Text hinzu.
    4. Wählen Sie den zu formatierenden Text aus. Zu den Formatoptionen gehören Style (Normal, Code, Kopfzeilen usw.), Fett, Kursivschrift und Links.
    5. Um die Textgröße zu ändern, wählen Sie die Schaltfläche "Style" aus, und wählen Sie eine Kopfzeilengröße aus.
    6. Um die Textausrichtung anzupassen, wählen Sie die Absatzoptionen und dann eine der Optionen aus. Sie können eine Textzeile auch verschieben, indem 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.

    7. 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 Enterprise 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. Alternativ können Sie die Textfarbe 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 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, und auf Inhaltsvorschau-Seiten, auf die über die Suche der Site zugegriffen wird, angewendet.

    Weitere Informationen finden Sie unter Formatting text on your ArcGIS Hub and ArcGIS Enterprise Sites.

    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 einem Site- oder Seitenlayout 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.

    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. Fügen Sie Text hinzu und formatieren Sie ihn.
    5. Wählen Sie Speichern aus.

    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'

    Hinzufügen eines eigenständigen Bildes

    Fügen Sie Bilder hinzu, indem Sie sie aus einer Datei hochladen oder eine URL für ein gehostetes Bild angeben. 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 eine Bild-Kachel zu einer vorhandenen Zeile hinzu.
    3. Wählen Sie im Layout-Editor eine Bildquelle aus. Sie können eine Bild-URL angeben oder eine Bilddatei hochladen. Von beiden Optionen wird 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.
      • Um eine Datei hochzuladen, wählen Sie Bild hochladen aus, und ziehen Sie die Datei auf das Feld, oder klicken Sie auf Bild suchen, um die Datei zu suchen und hinzuzufügen. Die maximale Dateigröße liegt bei 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, und setzen Sie die Neupositionierung des Bildes fort, indem Sie in den Zuschneiderahmen klicken.
    5. Geben Sie im Menü Optionen alternativen Bildtext an, um sehbehinderten Benutzern zu helfen und die Barrierefreiheit Ihrer Site zu verbessern.
    6. Geben Sie einen Bild-Hyperlink an, und legen Sie fest, ob der Link in derselben Registerkarte oder in 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.

    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. Bearbeiten Sie den Text auf der Schaltfläche, um den Call To Action hinzuzufügen.
    5. Wählen Sie die soeben hinzugefügte Schaltfläche aus und dann die Link-Schaltfläche.
    6. Geben Sie im Textfeld Anzuzeigender Text ggf. Text ein.
    7. Fügen Sie im Textfeld "URL" den Link ein, an den die Benutzer weitergeleitet werden sollen, wenn sie die Schaltfläche auswählen.
    8. Wählen Sie Link einfügen aus, um die Änderungen zu bestätigen.
    9. Wählen Sie Speichern aus.
    10. Informationen zu Schaltflächenfarben finden Sie unter Erstellen eines Designs.

    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. Sie können eine Bild-URL angeben oder eine Bilddatei hochladen. Von beiden Optionen wird 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.
      • Um eine Datei hochzuladen, wählen Sie Bild hochladen aus, und ziehen Sie die Datei auf das Feld, oder klicken Sie auf Bild suchen, um die Datei zu suchen und hinzuzufügen. Die maximale Dateigröße liegt bei 3 MB.
    4. Nachdem Sie ein Bild hinzugefügt haben, wählen Sie eine Hintergrundfarbe aus, indem Sie einen Hexadezimalcode eingeben oder die Farbauswahl verwenden.
      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 kann die Hintergrundfarbe heller oder dunkler eingestellt werden. So kann sichergestellt werden, 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 auswählen können, wie das Bild angezeigt wird.

    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.

    Konfigurieren von Text mit HTML

    Wenn Sie Text mithilfe von HTML anpassen möchten, können Sie die folgenden HTML-Elemente verwenden:

    1. Öffnen Sie die gewünschte Site oder Seite im Bearbeitungsmodus.
    2. Fügen Sie dem Layout eine Text-Kachel hinzu, und wählen Sie </> In HTML bearbeiten aus.
    3. Geben Sie den Code ein, und wählen Sie Speichern aus.

    Vorsicht:

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

    Folgende HTML-Elemente sind zulässig:

    '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', 'img', 'input', 'ins', 'kbd', 'keygen', 'li', 'link', 'main', 'map',
    	'mark', 'menu', 'meter', 'nav', 'ol', 'optgroup', option', 'output', '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',

    Folgende Attribute für diese HTML-Elemente sind zulässig:

    
     All supported HTML elements allow : ['class', 'style'],
     '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']