Textüberlagerung

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

Überblick

Textüberlagerung ist eine Funktion in AEM Screens, mit der Sie in einem Sequenzkanal für ein überzeugendes Erlebnis sorgen können, indem Sie einen Titel oder eine Beschreibung auf einem Bild einfügen.

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

Im folgenden Abschnitt wird die Verwendung von Textüberlagerung in AEM Screens-Projekten beschrieben.

Voraussetzungen

Bevor Sie mit der Implementierung der Funktion beginnen, stellen Sie sicher, dass Sie als Voraussetzung ein Projekt 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:

1. Navigieren Sie zu TextOverlayDemo > Kanäle > TextSample und klicken Sie in der Aktionsleiste auf Bearbeiten, um den Editor zu öffnen.

   

2. Wählen Sie das Bild aus und klicken Sie auf Konfigurieren (Schraubenschlüsselsymbol), um das Dialogfeld „Eigenschaften“ zu öffnen.

   

3. Wählen Sie in der Navigationsleiste des Dialogfelds die Option Textüberlagerung, wie in der folgenden Abbildung dargestellt.

   

Verstehen der Eigenschaften von Textüberlagerung

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

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 datengesteuerter 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:

1. Navigieren Sie zu TextOverlayDemo > Kanäle > TextSample und klicken Sie in der Aktionsleiste auf Eigenschaften.

2. Wählen Sie die Registerkarte Personalisierung, um die ContextHub-Konfigurationen einzurichten.

   1. Wählen Sie unter ContextHub-Pfad den Wert libs > settings > cloudsettings > default > ContextHub Konfigurationen aus und klicken Sie auf Auswählen.

   2. Wählen Sie unter Segmentpfad den Wert conf > screens > settings > wcm > segments aus und klicken Sie auf Auswählen.

   3. Klicken Sie auf Speichern und schließen.

      HINWEIS

      Verwenden Sie den ContextHub- und den Segmentpfad, in dem Sie Ihre Kontexthub-Konfigurationen und -Segmente anfänglich gespeichert haben.

      

3. Navigieren Sie zu TextOverlayDemo > Kanäle > TextSample und klicken Sie in der Aktionsleiste auf Bearbeiten, um den Editor zu öffnen.

   

4. Fügen Sie eine Bild- und eine Textüberlagerungskomponente zu Ihrem Bild hinzu, wie im Abschnitt Verwenden von Textüberlagerung auf dieser Seite beschrieben.

5. Klicken Sie auf Konfigurieren (Schraubenschlüsselsymbol), um das Dialogfeld Bild zu öffnen.

   

6. Navigieren Sie zur Registerkarte ContextHub im Dialogfeld Bild. Klicken Sie auf Hinzufügen.

   HINWEIS

   Wenn Sie Ihre ContextHub-Konfigurationen nicht eingerichtet haben, ist diese Option für Ihr Projekt deaktiviert.

7. Geben Sie den Wert in das Feld Platzhalter ein. Wählen Sie in ContextHub-Variable die Zeile aus, für die Sie den Wert aus Ihrem Google-Blatt abrufen möchten. In diesem Fall wird der Wert aus Zeile 2 und Spalte 1 des Google-Blatts 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.

   

   HINWEIS

   Für Ihre Referenz zeigt das folgende Bild den Wert an, der aus den Google-Tabellen abgerufen wird:

   

8. 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.

   

9. Klicken Sie auf Vorschau, um die gewünschte Ausgabe anzuzeigen.

   

Ressourcen für Business.Adobe.com

Content Insights Auto Text Summarization Embedded Charts Version History Dynamic Forms Content Management