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: Die Bausteine der Site. Mit Ausnahme der Banner-Kachel muss jede Kachel innerhalb einer Zeilen-Kachel verschachtelt sein. Sie können einer Zeilen-Kachel 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.
  • Banner-Kachel: Erstellen Sie Abschnitte, indem Sie Site-Elemente mithilfe dieser Kachel trennen. Diese Kachel verfügt zudem über eine optionale Suchleiste.
  • Bild-Kachel: Fügen Sie einer Zeilen-Kachel an einer beliebigen Stelle auf der Site eigenständige Bilder hinzu.

    Um zu beginnen, melden Sie sich bei Portal for ArcGIS an, und klicken Sie auf der Seite Übersicht auf Sites, um eine Liste der 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.

    Text hinzufügen und formatieren

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

    1. Ziehen Sie eine Text-Kachel auf eine vorhandene Zeile.
    2. Zeigen Sie mit der Maus auf die Kachel, und klicken Sie auf die Schaltfläche "Einstellungen", um in den Bearbeitungsmodus zu wechseln.
    3. Fügen Sie Text hinzu.
    4. Wählen Sie den zu formatierenden Text aus. Zu den Formatoptionen gehören Style (Kopfzeilen, Codeausschnitte und Anführungszeichen hinzufügen), Fett, Kursivschrift und Links.
    5. Um die Textausrichtung anzupassen, klicken Sie auf die Absatzoptionen und wählen Sie eine Ausrichtung aus. Sie können eine Textzeile auch einrücken oder ausrücken, indem Sie die Absatzoption und dann eine der Optionen auswählen.

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

    6. Klicken Sie auf Speichern.

    Ändern der Textfarbe

    Ändern Sie die Textfarbe, indem Sie die folgenden Schritte ausführen.

    1. Zeigen Sie mit der Maus auf die Zeilen-Kachel, in der die Text-Kachel verschachtelt ist, und klicken Sie auf die Schaltfläche "Einstellungen" für die Zeilen-Kachel.
    2. Ä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.

    3. Klicken Sie auf Speichern.

    Hinzufügen einer Liste mit Aufzählung oder Nummerierung

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

    1. Fügen Sie Text hinzu oder wählen Sie einen vorhandenen Text aus.
    2. Wählen Sie die unsortierte Liste aus, um eine Aufzählung zu erstellen.
    3. Wählen Sie die sortierte Liste aus, um eine nummerierte Liste hinzuzufügen.
    4. Klicken Sie auf Speichern.

    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. Ziehen Sie eine Bild-Kachel auf eine vorhandene Zeile.
    2. Zeigen Sie mit der Maus auf die Kachel, und klicken Sie auf die Schaltfläche "Einstellungen", um in den Bearbeitungsmodus zu wechseln.
    3. Wählen Sie eine Bildquelle aus. Sie können eine Bilddatei hochladen oder eine Bild-URL angeben. Von beiden Optionen wird JPG, JPEG und PNG unterstützt.
      • Um eine Bilddatei hochzuladen, wählen Sie Bild hochladen aus, und ziehen Sie die Datei auf das Feld im Site-Editor. Klicken Sie auf Bild suchen, um die Datei zu suchen und hinzuzufügen. Die maximale Dateigröße ist 3 MB.
      • Sie können auch eine Bild-URL angeben, indem Sie Bild-URL auswählen und einen unterstützten Link zu einem Bild im Feld URL einfügen.
    4. Wenn Sie eine Bilddatei verwenden, lassen sich hochgeladene Bilder anpassen, indem Sie auf die Schaltfläche "Zuschneiden" klicken und einen Ziehpunkt ziehen, um die Größe des Zuschneiderahmens zu ändern. Der Zuschneiderahmen lässt sich neu positionieren, indem auf die gepunktete Linie geklickt und diese gezogen wird. Sie können auch zoomen, indem Sie den Schieberegler unter dem Bild anpassen, und das Bild neu positionieren, 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 wählen Sie aus, 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. Klicken Sie optional auf Bild auf volle Größe skalieren, 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. Klicken Sie auf Speichern.

    Hinzufügen von Hintergrundbildern und Farbe

    Mithilfe der Zeilen- und Banner-Kacheln können Sie Bilder hinter anderen Kacheln hinzufügen. Wenn Sie diesen Bildern Farbe hinzufügen, ist der Text möglicherweise besser sichtbar.

    Tipp:

    Sollte Text oder Inhalt über einem Bild angezeigt werden, wählen Sie eine helle oder dunkle 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. Ziehen Sie eine Banner- oder Zeilen-Kachel auf die Site.
    2. Zeigen Sie mit der Maus auf die Kachel, und klicken Sie auf die Schaltfläche "Einstellungen", um in den Bearbeitungsmodus zu wechseln.
    3. Wählen Sie unter Hintergrundbild eine Bildquelle aus. Sie können eine Bilddatei hochladen oder eine Bild-URL angeben. Von beiden Optionen wird JPG, JPEG und PNG unterstützt.
      • Um eine Bilddatei hochzuladen, wählen Sie Bild hochladen aus, und ziehen Sie die Datei auf das Feld im Site-Editor. Klicken Sie auf Bild suchen, um die Datei zu suchen und hinzuzufügen. Die maximale Dateigröße ist 3 MB.
      • Sie können auch eine Bild-URL angeben, indem Sie Bild-URL auswählen und einen unterstützten Link zu einem Bild im Feld URL einfügen.
    4. Nachdem Sie ein Bild hinzugefügt haben, wählen Sie für Hintergrundfarbe unter Zeileneinstellungen eine Farbe aus, indem Sie einen Hexadezimalcode eingeben oder die Farbauswahl verwenden.
      Hinweis:

      Nur Zeilen-Kacheln unterstützen Hintergrundfarben.

    5. Passen Sie unter Aussehen die Transparenz des Bildes an, indem Sie den Schieberegler verwenden oder einen Wert im Prozentsatzfeld angeben. Indem Sie die Transparenz des Bildes anpassen, wird die Hintergrundfarbe heller oder dunkler, je nachdem, wie Sie sie angepasst haben. Dieses Verfahren ist hilfreich, um sicherzustellen, dass Bild und Text für sehende Benutzer zugänglich bleiben.
    6. Klicken Sie auf Speichern.

    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 ein Bild einer Zeilen-Kachel hinzugefügt haben, können Sie ein breites oder festes Layout für das Bild und den in der Kachel angezeigten Inhalt auswählen.
      • Wählen Sie Wide aus, wenn das Bild sich über die Breite der Site erstrecken soll.
      • Wählen Sie Fest aus, wenn das Bild seine Größe beibehalten soll.
    2. Legen Sie den Bildmittelpunkt fest, um für das Bild den gewünschten Mittelpunkt beizubehalten, wenn es an verschiedene Bildschirmgrößen angepasst wird.
    3. Klicken Sie auf Speichern.

    Konfigurieren von Text mit HTML

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

    1. Ziehen Sie eine Text-Kachel auf eine vorhandene Zeile.
    2. Zeigen Sie mit der Maus auf die Kachel, und klicken Sie auf die Schaltfläche "Einstellungen", um in den Bearbeitungsmodus zu wechseln.
    3. Klicken Sie auf die Option Codeansicht.
    4. Geben Sie den Code ein.
    5. Klicken Sie auf Speichern.

    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', 'b', 'blockquote', 'br', 'caption', 'cite', 'code', 'col',
     'colgroup', 'dd', 'dl', 'dt', 'em', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6',
     'i', 'img', 'li', 'ol', 'p', 'pre', 'q', 'small', 'strike', 'strong',
     'sub', 'sup', 'table', 'tbody', 'td', 'tfoot', 'th', 'thead', 'tr', 'u',
     'ul', 'center', 'style', 'div', 'span'

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

    All supported HTML elements allow : ['class', 'style'], 'a' : ['href', 'title', 'target', 'data-toggle', 'data-target', 'name'], 'blockquote': ['cite'],	'button'    : ['name', 'value', 'data-toggle', 'data-target', 'data-dismiss'], 'col' : ['span', 'width'], 'colgroup' : ['span', 'width'],	'div' : ['data-show', 'data-target', 'data-toggle'] 'img' : ['align', 'alt', 'height', 'src', 'title', 'width' ], 'ol' : ['start', 'type'], 'q' : ['cite'], 'table' : ['summary', 'width', 'class'], 'td' : ['abbr', 'axis', 'colspan', 'rowspan', 'width'], 'th' : ['abbr', 'axis', 'colspan', 'rowspan', 'scope', 'width'],
     'ul' : ['type']