Hinzufügen von Text und Bildern

Site-Editoren können einer Site mit den folgenden Kacheln Bilder und Text hinzufügen:

• Zeile: 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. Weitere Informationen zum Formatieren von Zeilen finden Sie unter Entwerfen des Site-Layouts.
• Text: 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: Fügen Sie einer Zeilen-Kachel unter Verwendung einer Bild-Kachel an einer beliebigen Stelle auf der Site eigenständige Bilder hinzu.

Hinzufügen und Formatieren von Text

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

Führen Sie die folgenden Schritte aus, um Text hinzuzufügen und zu formatieren:

1. Bearbeiten Sie eine Site oder ein Seiten-Layout.
2. Klicken Sie im Fenster Anpassen auf Layout.
3. Ziehen Sie eine Text-Kachel auf eine Zeile im Layout.
4. Wählen Sie den zu formatierenden Text aus.

   Zu den Optionen gehören "Style" ("Normal", "Code", "Kopfzeilen" usw.), "Fett", "Kursiv" und "Links".

5. Um die Textgröße anzupassen, 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. Um eine Textzeile zu verschieben, können Sie die Absatzoption auswählen dann und "Negativer Einzug" oder "Einzug" auswählen.
7. Klicken Sie auf Layout speichern.

Ändern der Textfarbe

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

Führen Sie die folgenden Schritte aus, um die Textfarbe zu ändern:

1. Bearbeiten Sie eine Site oder ein Seiten-Layout.
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, klicken Sie auf die Schaltfläche Bearbeiten zu der Zeile.
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. Klicken Sie auf Layout speichern.

Ä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 die folgenden Schritte aus, um eine Aufzählung oder nummerierte Liste hinzuzufügen:

1. Bearbeiten Sie eine Site oder ein Seiten-Layout.
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. Klicken Sie auf Layout speichern.

Hinzufügen eines eigenständigen Bildes

Führen Sie die folgenden Schritte aus, um ein eigenständiges Bild zu einer Zeilen-Kachel hinzuzufügen:

1. Bearbeiten Sie eine Site oder ein Seiten-Layout.
2. Ziehen Sie eine Bild-Kachel auf eine Zeile im Layout.
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 Bild-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 ein Bild hinzuzufügen (die maximale Dateigröße ist 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. Klicken Sie auf Layout speichern.

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.

Führen Sie die folgenden Schritte aus, um Hintergrundbilder und -farben hinzuzufügen:

1. Bearbeiten Sie eine Site oder ein Seiten-Layout.
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 Bild-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 ein Bild hinzuzufügen (die maximale Dateigröße ist 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. Klicken Sie auf Layout speichern.

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.

Führen Sie die folgenden Schritte aus, um ein Bild-Layout auszuwählen:

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 wie folgt 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. Klicken Sie auf Layout speichern.

Hinzufügen 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 auch Calls To Action enthalten, die Personen dazu anregen, etwas zu tun, z. B. sich anzumelden, weitere Informationen anzufordern oder an einem Survey teilzunehmen. Für Schaltflächen werden die Einstellungen Link-Farbe des Textes und die Texthintergrundfarbe verwendet, um sicherzustellen, dass diese für alle Benutzer barrierefrei sind. Nähere Informationen finden Sie im Community-Beitrag Update to Hub button theme colors.

Führen Sie die folgenden Schritte aus, um eine Schaltfläche hinzuzufügen:

1. Bearbeiten Sie eine Site oder ein Seiten-Layout.
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 dann Layout speichern aus.

Hinzufügen 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.

Führen Sie die folgenden Schritte aus, um ein Accordion-Menüs hinzuzufügen:

1. Bearbeiten Sie eine Site oder ein Seiten-Layout.
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 dann Layout speichern aus.

Suchen von unterstützten 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-dialog'

'calcite-dropdown-group' 'calcite-dropdown-item' 'calcite-fab' 'calcite-flow' 'calcite-icon' 'calcite-link' '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-tooltip'

Konfigurieren von Text mit HTML

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

Führen Sie die folgenden Schritte aus, um Text mithilfe von HTML zu konfigurieren:

1. Bearbeiten Sie eine Site oder ein Seiten-Layout.
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. Verwenden Sie den <a>-Tag, um einen Link zu einer Seite zu erstellen. Fügen Sie den Platzhalter für die Seite zwischen dem Attribut href="" des <a>-Tags ein. Beispiel: <a href="/pages/target-page">Visit the linked page</a>.

Tipp:

Wenn Sie im Tag <a> statt des absoluten Pfades einen relativen Pfad verwenden, verhindern Sie eine vollständige Seitenaktualisierung, wenn der Link ausgewählt wird. Wenn der Link in einer neuen Registerkarte geöffnet werden soll, hängen Sie target="_blank" direkt an das Attribut href im Tag <a> an.

5. Wählen Sie Übernehmen und dann Layout speichern aus.

Hinweis:

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']

Weiterführende Links

Weitere Informationen finden Sie unter:

• Bearbeiten einer Site
• Anleitung für Calcite-Komponenten