Textüberlagerung text-overlay
In diesem Abschnitt werden folgende Themen behandelt:
- Überblick
- Verwenden von Textüberlagerung
- Verstehen der Eigenschaften von Textüberlagerung
- Verwenden von ContextHub-Werten in Textüberlagerung
Übersicht overview
Textüberlagerung ist eine in AEM Screens verfügbare Funktion, mit der Sie in einem Sequenzkanal ein überzeugendes Erlebnis erstellen können, indem Sie einen Titel oder eine Beschreibung angeben, die über einem Bild überlagert ist.
Informationen zum Erstellen einer eigenen benutzerdefinierten Komponente finden Sie unter Erweitern einer AEM Screens-Komponente.
In diesem Abschnitt wird nur gezeigt, wie die Poster-Komponente in einem AEM Screens-Projekt verwendet und als Textüberlagerung in einem Ihrer Sequenzkanäle eingesetzt werden kann.
Verwenden von Textüberlagerung using-text-overlay
Im folgenden Abschnitt wird die Verwendung von Textüberlagerung in AEM Screens-Projekten beschrieben.
Voraussetzungen
Bevor Sie diese Funktion implementieren, stellen Sie sicher, dass Sie ein Projekt als Voraussetzung für die Implementierung der Textüberlagerung eingerichtet haben. Beispiel:
-
Erstellen Sie ein AEM Screens-Projekt (in diesem Beispiel TextOverlayDemo)
-
Erstellen eines Sequenzkanals als TextSample im Ordner Kanäle
-
Fügen Sie Inhalte zu Ihrem Kanal TextSample hinzu
Die folgende Abbildung zeigt das Projekt TextOverlayDemo mit dem Kanal TextSample im Ordner Kanäle.
Gehen Sie wie folgt vor, um die Textüberlagerung in einem AEM Screens-Kanal zu verwenden:
-
Navigieren Sie zu TextOverlayDemo > Kanäle > TextSample und klicken Bearbeiten in der Aktionsleiste aus.
-
Wählen Sie das Bild aus und klicken Sie auf Konfigurieren (Schraubenschlüsselsymbol), um das Dialogfeld „Eigenschaften“ zu öffnen.
-
Wählen Sie in der Navigationsleiste des Dialogfelds die Option Textüberlagerung, wie in der folgenden Abbildung dargestellt.
Verstehen der Eigenschaften von Textüberlagerung understanding-text-overlay-properties
Mit den Eigenschaften der Textüberlagerung können Sie zu jeder Komponente in Ihrem Screens-Projekt Text hinzufügen. Im folgenden Abschnitt erhalten Sie eine Übersicht über die Eigenschaften, die in der Textüberlagerung verfügbar sind:
Sie können dem Textfeld einen Text hinzufügen und typografische Hervorhebungen wie fett, kursiv und unterstrichen hinzufügen.
Farbvariante: Mit dieser Option kann der Text entweder dunkel (Text in schwarzer Farbe) oder hell (Text in weißer Farbe) dargestellt werden.
Größe und Anordnung: Mit dieser Option können Benutzende den Text horizontal oder vertikal ausrichten oder zusätzlich fein abgestufte Werkzeuge für die Textausrichtung verwenden.
Verwenden von ContextHub-Werten in Textüberlagerung using-text-overlay-context-hub
Im folgenden Abschnitt wird die Verwendung von Werten aus einem Datenspeicher beschrieben, z. B. Google-Tabellen in der Komponente für Textüberlagerung.
Voraussetzungen
Erstellen Sie ContextHub-Konfigurationen für Ihr AEM Screens-Projekt.
Informationen zum Einrichten und Verwalten von datengesteuerten Asset-Änderungen mithilfe eines Datenspeichers finden Sie unter Konfigurieren von ContextHub in AEM Screens.
Nachdem Sie die erforderlichen Konfigurationen für Ihr Projekt eingerichtet haben, führen Sie die folgenden Schritte aus, um Werte aus den Google Tabellen zu verwenden:
-
Navigieren Sie zu TextOverlayDemo > Kanäle > TextSample und wählen Eigenschaften in der Aktionsleiste aus.
-
Wählen Sie die Personalisierung -Registerkarte, damit Sie die ContextHub-Konfigurationen einrichten können.
-
Wählen Sie die ContextHub-Pfad as libs > settings > cloudsettings > default > ContextHub-Konfigurationen und wählen Auswählen.
-
Wählen Sie die Segmentpfad as conf > screens > settings > wcm > Segmente und wählen Auswählen.
-
Klicken Sie auf Speichern und schließen.
note note NOTE Verwenden Sie den ContextHub- und den Segmentpfad, in dem Sie Ihre Kontexthub-Konfigurationen und -Segmente anfänglich gespeichert haben. 
-
-
Navigieren Sie zu TextOverlayDemo > Kanäle > TextSample und klicken Bearbeiten in der Aktionsleiste aus.
-
Fügen Sie eine Bild- und eine Textüberlagerungskomponente zu Ihrem Bild hinzu, wie im Abschnitt Verwenden von Textüberlagerung auf dieser Seite beschrieben.
-
Wählen Sie aus Konfigurieren (Schraubenschlüsselsymbol), um die Bild Dialogfeld.
-
Navigieren Sie zur Registerkarte ContextHub im Dialogfeld Bild. Wählen Sie Hinzufügen.
note note NOTE Wenn Sie Ihre ContextHub-Konfiguration nicht eingerichtet haben, ist diese Option für Ihr Projekt deaktiviert. -
Eingabe Wert im Platzhalter -Feld. Wählen Sie die Zeile aus, die Sie aus Ihrem Google-Blatt abrufen möchten in ContextHub-Variable. In diesem Fall wird der Wert aus Zeile 2 und Spalte 1 aus den Google-Arbeitsblättern abgerufen. Geben Sie nun den Standardwert als 20 ein, wie in der folgenden Abbildung dargestellt. Wenn Sie fertig sind, klicken Sie auf das Häkchen.
note note NOTE Für Ihre Referenz zeigt die folgende Abbildung den Wert, der aus den Google Tabellen abgerufen wird: 
-
Gehen Sie im Dialogfeld „Bild“ zurück zur Registerkarte Textüberlagerung und fügen Sie den Text Aktuelle Temperatur {Wert} hinzu, wie in der nachstehenden Abbildung dargestellt.
-
Wählen Sie Vorschau.
