Strukturkomponenten structure-components
Verwenden Sie die Strukturkomponenten im visuellen Design-Bereich, um die Struktur Ihrer Inhalte zu definieren. Durch das Hinzufügen und Verschieben von strukturellen Elementen mit einfachem Drag-and-Drop können Sie die Struktur Ihres Inhalts-Layouts schnell definieren. Jede Strukturkomponente erstreckt sich über den horizontalen Bereich und Sie können sie stapeln, um das Layout vertikal zu erstellen. Um jeden benötigten Inhaltsblock zu bilden, unterteilen Sie jede Komponente in Spalten.
Strukturbibliothek
Oben in der Komponenten werden im Abschnitt Strukturen die verfügbaren Strukturkomponenten angezeigt:
Hinzufügen von Strukturkomponenten
Wenn Sie den Inhalt für Ihre E-Mail, Landingpage oder Ihr Fragment entwerfen, fügen Sie jede Strukturkomponente hinzu, um das Layout zu erstellen. Ziehen Sie ein Element aus dem Abschnitt Strukturen auf der linken Seite und legen Sie es auf der Arbeitsfläche ab. Sie können die Symbolleiste verwenden, um eine Spalte auszuwählen, und die Registerkarten Einstellungen und Stile im rechten Bedienfeld verwenden, um die Parameter für die ausgewählte Komponente oder Spalte zu definieren.
Komponenten-Symbolleiste
Die Symbolleiste wird auf der Arbeitsfläche angezeigt, wenn Sie sie auf der Arbeitsfläche auswählen. Die verfügbaren Tools bieten eine einfache Möglichkeit, eine Spalte auszuwählen und Komponentenfunktionen anzuwenden.
Einstellungen der Komponente
Nachdem Sie eine Komponente hinzugefügt haben, wird sie im visuellen Design-Bereich ausgewählt und ihre Eigenschaften werden im rechten Bedienfeld angezeigt. Das System zeigt standardmäßig Registerkarte Einstellungen“ an. Sie können auch jederzeit eine Strukturkomponente auswählen, um die Einstellungen zu ändern.
Anzeigeoptionen
Wenn Sie die Komponente von der Desktop- oder Mobilgeräteanzeige ausschließen möchten, ändern Sie die Einstellung Anzeigeoptionen. Die Standardeinstellung (auf allen Geräten anzeigen aktiviert die Anzeige auf allen Geräten.
Wählen Sie eine andere Einstellung aus, um die Komponente nach Gerätetyp auszuschließen:
- Nur auf Desktop-Geräten anzeigen - Wählen Sie diese Einstellung, wenn Sie die Komponente auf Desktop-Geräten anzeigen und für Mobilgeräte ausschließen möchten.
- Nur auf Mobilgeräten anzeigen - Wählen Sie diese Einstellung, wenn Sie die Komponente auf Mobilgeräten (wie Smartphones und Tablets) anzeigen und von Desktop-Geräten ausschließen möchten.
Kopf- und Fußzeile
Sie können eine Strukturkomponente als Kopf- oder Fußzeile von HTML in der E-Mail-Nachricht oder Landingpage festlegen. Klicken Sie bei ausgewählter Strukturkomponente auf der Arbeitsfläche auf die Option Kopfzeile oder Fußzeile. Es kann nur eine Kopf- oder Fußzeile geben, und die Option ist nicht verfügbar, wenn eine andere Komponente zugewiesen ist.
Sie können die Kopf- oder Fußzeilenbezeichnung entfernen, indem Sie die Komponente auswählen und auf die Option klicken, um sie zu entfernen.
Gestapelte Spalten
Bei kleineren Bildschirmen oder Anzeigefenstern werden die Spalten in der Strukturkomponente als gestapelt angezeigt, es sei denn, Sie ändern die Standardeinstellung. Wenn Sie die mehrspaltige Strukturkomponente ausgewählt haben, ändern Sie die Einstellung Spalten auf Mobilgeräten nicht stapeln indem Sie den Schieberegler nach rechts verschieben.
Komponentenstile
Nachdem Sie eine Komponente hinzugefügt haben, wird sie im visuellen Design-Bereich ausgewählt und ihre Eigenschaften werden im rechten Bedienfeld angezeigt. Sie können auch jederzeit eine Komponente auswählen, um die Einstellungen und Stile zu ändern.
Hintergrund
Wenn Sie die Stile im rechten Bereich ausgewählt haben, verwenden Sie den Abschnitt Hintergrund, um die Farbe und das optionale Bild zu definieren, die als Hintergrund für die Strukturkomponente verwendet werden sollen.
Hintergrundfarbe
Aktivieren Sie das Kontrollkästchen und klicken Sie auf das Farbfeld, um eine Farbe aus der Auswahl auszuwählen. Sie können eine Farbe auswählen, indem Sie einen bekannten RGB-, HSL-, HSB- oder Hexadezimalwert eingeben. Sie können auch den Farbregler und das Farbfeld verwenden, um die Farbe auszuwählen.
Hintergrundbild background-image
Um die Einstellungen für das Hintergrundbild zu aktivieren, verschieben Sie den Umschalter.
Wählen Sie den Asset-Quelltyp und wählen Sie die Bilddatei aus:
Wählen Sie diesen Typ aus, um ein Bild-Asset aus der Journey Optimizer B2B edition-Bibliothek oder der verbundenen Market Engage-Instanz zu durchsuchen und auszuwählen.
Im Dialogfeld können Sie ein Bild aus dem ausgewählten Repository auswählen. Klicken Sie auf Auswählen, um das Asset hinzuzufügen.
Es stehen Tools zur Verfügung, mit denen Sie das benötigte Asset finden können:
-
Klicken Sie oben links auf Filter), um die angezeigten Elemente nach Ihren Kriterien zu filtern.
-
Geben Sie Text in das Suchen-Feld ein, um die angezeigten Elemente nach einer Übereinstimmung mit dem Asset-Namen zu filtern.
Wählen Sie diesen Typ aus, um ein Bild-Asset aus einem konfigurierten Experience Manager Assets-Repository“ zu durchsuchen und .
Wählen Sie im Dialogfeld Assets auswählen ein Bild mit den verfügbaren Tools aus, um das benötigte Asset zu finden, und klicken Sie auf Auswählen.:
-
Ändern Sie Repository oben rechts.
-
Klicken Sie oben rechts auf Assets verwalten“, um das Assets-Repository in einer anderen Browser-Registerkarte zu öffnen und AEM Assets-Verwaltungstools zu verwenden.
-
Klicken Sie oben rechts auf Ansichtstyp, um die Anzeige in Listenansicht, Rasteransicht, Galerieansicht oder Wasserfallansicht zu ändern.
-
Klicken Sie auf Symbol „Sortierreihenfolge, um die Sortierreihenfolge zwischen aufsteigender und absteigender Reihenfolge zu ändern.
-
Klicken Sie auf Menüpfeil Sortieren nach“, um die Sortierkriterien in Name, Size oder Modified zu ändern.
-
Klicken Sie oben links auf Filter), um die angezeigten Elemente nach Ihren Kriterien zu filtern.
-
Geben Sie Text in das Suchen-Feld ein, um die angezeigten Elemente nach einer Übereinstimmung mit dem Asset-Namen zu filtern.
Wählen Sie diesen Typ aus, um eine Datei aus Ihrem System auszuwählen und in die Journey Optimizer B2B edition Asset-Bibliothek zu importieren.
Ziehen im Dialogfeld Bild hochladen“ eine Datei aus dem System per Drag-and-Drop in das Feld „Datei“. Die maximale Dateigröße beträgt 100 MB.
Die Dateinamen der ausgewählten Bilder werden im Dialogfeld angezeigt. Asset-Dateinamen müssen eindeutig sein (in allen Ordnern). Wenn bereits eine Datei mit dem Namen vorhanden ist, wird eine Meldung angezeigt. Namen dürfen maximal 100 Zeichen lang sein und keine Sonderzeichen enthalten (beispielsweise ;, :, \ und |).
Klicken Sie Importieren.
Verwenden Sie die Option Bildplatzierung, um festzulegen, wie das Bild die Strukturkomponente ausfüllt. Die Platzierungseinstellungen entsprechen den standardmäßigen HTML-Hintergrundbildfüllungs- und -ausrichtungsattributen.
Andere Stile
Um die Anzeige in der E-Mail-Nachricht oder Landingpage anzupassen, können Sie andere Strukturkomponentenstile anwenden.
-
Erweitern Sie im rechten Bedienfeld mit ausgewählten Registerkarte den Abschnitt Rahmen und legen Sie die Optionen zum Anzeigen eines Rahmens für die Komponente fest:
-
Schieben Sie den Umschalter nach rechts, um die Anzeigeoptionen für den Rahmen zu aktivieren und sie entsprechend Ihren Entwurfskriterien festzulegen:
- Um die Rahmenfarbe festzulegen, aktivieren Sie das Kontrollkästchen und klicken Sie auf das Farbfeld, um eine Farbe aus der Auswahl auszuwählen. Sie können eine Farbe auswählen, indem Sie einen bekannten RGB-, HSL-, HSB- oder Hexadezimalwert eingeben. Sie können auch den Farbregler und das Farbfeld verwenden, um die Farbe auszuwählen.
-
Zum Festlegen der Rahmengröße (Linienbreite) klicken Sie auf die Pfeilsymbole nach oben und unten, um die Anzahl der Pixel zu erhöhen oder zu verringern.
-
Um den Rahmenstil“ festzulegen wählen Sie einen Wert aus der Liste der standardmäßigen CSS-
border-styleaus. -
Um zu bestimmen, wo der Rahmen angezeigt wird, aktivieren Sie jedes Kontrollkästchen Rahmenposition.
-
Legen Sie für Rahmenradius den numerischen Wert entsprechend der gewünschten Kurve für die Ecken fest.
Ein Wert von 0 (Standard) ergibt eine quadratische Ecke.
Erweitern Sie im rechten Bedienfeld mit ausgewählten Registerkarte Stile“ den Abschnitt Rand und legen Sie die Optionen für den Randabstand in der Strukturkomponente fest. Dieser Stil repliziert den CSS-margin, der den Bereich außerhalb eines Komponentenrahmens steuert und ihn von anderen Komponenten trennt. Dadurch wird eine Lücke um die Komponente geschaffen, um ihre Positionierung und das Layout des umgebenden Inhalts zu beeinflussen.
Legen Sie die Randwerte in Pixeln entsprechend Ihren Design-Anforderungen fest. Sie können den Rand für alle Seiten, für das obere untere, das linke oder das rechte Ende oder für jede Seite der Komponente unabhängig voneinander festlegen:
-
Alle Seiten - Wenn Sie einen Wert festlegen möchten, der auf alle Seiten angewendet werden soll, deaktivieren das Kontrollkästchen „Unterschiedlicher Rand für jede Seite. Klicken Sie auf die Pfeilsymbole nach oben und unten, um die Anzahl der Pixel zu erhöhen oder zu verringern.
-
Oben unten - Um die oberen und unteren Ränder auf denselben Wert festzulegen, legen Sie das Symbol Gesperrt zwischen den oberen und unteren Einstellungen fest. Klicken Sie auf die Pfeilsymbole nach oben bzw. unten, um die Anzahl der Pixel zu erhöhen oder zu verringern.
-
Links-: Um die linken und rechten Ränder auf denselben Wert festzulegen, legen Sie das Symbol Gesperrt zwischen den linken und rechten Einstellungen fest. Klicken Sie auf die Pfeilsymbole nach oben bzw. unten, um die Anzahl der Pixel zu erhöhen oder zu verringern.
-
Unabhängig - Um jeden Rand auf einen unabhängigen Wert festzulegen, legen Sie das Symbol Entsperrt zwischen den oberen und unteren Einstellungen sowie zwischen der linken und rechten Einstellung fest. Klicken Sie für jede Einstellung auf die Pfeilsymbole nach oben und unten, um die Anzahl der Pixel zu erhöhen oder zu verringern.
Verwenden Sie die Stileinstellungen Erweitert, um zusätzliche CSS-kompatible Attribute mit Werten anzuwenden. Sie können die Werte der vorhandenen Attribute ändern oder neue hinzufügen. Die Formatierung wird mithilfe des CSS-Vererbungsmodells für über- und untergeordnete Komponenten (Elemente) auf die Komponente angewendet.
Die angezeigten Attribute spiegeln die Stile wider, die derzeit für die Komponente definiert sind. Sie können die Werte entsprechend den CSS-Definitionen ändern. Klicken Sie auf Hinzufügen (+), um ein neues Stilattribut für die Komponente hinzuzufügen.
Spalten
Wählen Sie mit dem Spalte auswählen in der Komponenten-Symbolleiste eine Spalte aus. Anschließend können Sie die Spaltensymbolleiste verwenden, um die Spaltenauswahl zu ändern, die Spalte zu entfernen oder bedingte Inhaltsvarianten für die Spalte anzuwenden. Die Parameter für die Spalte werden auf den Registerkarten Einstellungen und Stile auf der rechten Seite angezeigt.
Ändern von n:n Spalten
Die Spaltenbreiten sind für die meisten Strukturkomponenten statisch. Wenn Sie die Komponente n:n Column hinzufügen, können Sie die Anzahl der Spalten und die Spaltengröße ändern. Die n:n-Spaltenkomponente beginnt mit fünf Spalten gleicher Breite (20 %).
Wenn die Komponente auf der Arbeitsfläche ausgewählt ist, verwenden Sie die Option Spaltennummer im rechten Bedienfeld, um die Anzahl der Spalten zu ändern. Klicken Sie auf die Pfeilsymbole nach oben und unten, um die Anzahl der Spalten zu erhöhen oder zu verringern, oder geben Sie die Zahl in das Feld ein.
Verschieben Sie auf der Arbeitsfläche das Symbol für die Spaltengröße, um die Breite der ausgewählten Spalte anzupassen. Beim Erhöhen oder Verringern der Breite wird die angrenzende Spalte auch so angepasst, dass alle Spalten 100 % der Komponentenbreite einnehmen.
Spaltenstile
Um Stile festzulegen, die auf diese Spalte angewendet werden sollen, wählen Sie die Spalte auf der Arbeitsfläche aus.
-
Hintergrundfarbe - Aktivieren Sie das Kontrollkästchen und klicken Sie auf das Farbfeld, um eine Farbe aus der Auswahl auszuwählen. Sie können eine Farbe auswählen, indem Sie einen bekannten RGB-, HSL-, HSB- oder Hexadezimalwert eingeben. Sie können auch den Farbregler und das Farbfeld verwenden, um die Farbe auszuwählen.
-
Hintergrundbild - Um die Einstellungen für das Hintergrundbild zu aktivieren, verschieben Sie die Umschaltauswahl.
Wählen Sie den Asset-Quelltyp und wählen Sie eine Bilddatei aus.
-
Erweitern Sie im rechten Bedienfeld mit ausgewählten Registerkarte den Abschnitt Rahmen und legen Sie die Optionen zum Anzeigen eines Rahmens für die Komponente fest:
-
Schieben Sie den Umschalter nach rechts, um die Anzeigeoptionen für den Rahmen zu aktivieren und sie entsprechend Ihren Entwurfskriterien festzulegen:
- Um die Rahmenfarbe festzulegen, aktivieren Sie das Kontrollkästchen und klicken Sie auf das Farbfeld, um eine Farbe aus der Auswahl auszuwählen. Sie können eine Farbe auswählen, indem Sie einen bekannten RGB-, HSL-, HSB- oder Hexadezimalwert eingeben. Sie können auch den Farbregler und das Farbfeld verwenden, um die Farbe auszuwählen.
-
Zum Festlegen der Rahmengröße (Linienbreite) klicken Sie auf die Pfeilsymbole nach oben und unten, um die Anzahl der Pixel zu erhöhen oder zu verringern.
-
Um den Rahmenstil“ festzulegen wählen Sie einen Wert aus der Liste der standardmäßigen CSS-
border-styleaus. -
Um zu bestimmen, wo der Rahmen angezeigt wird, aktivieren Sie jedes Kontrollkästchen Rahmenposition.
-
Legen Sie für Rahmenradius den numerischen Wert entsprechend der gewünschten Kurve für die Ecken fest.
Ein Wert von 0 (Standard) ergibt eine quadratische Ecke.
Erweitern Sie den Ausrichtung und wählen Sie die vertikale Ausrichtung aus, die Sie verwenden möchten: oben, Mitte oder unten. Dieser Stil wird in einen standardmäßigen vertical-align-CSS-Stil übersetzt und wirkt sich auf die Positionierung innerhalb der enthaltenden Komponente aus.
Erweitern Sie im rechten Bedienfeld mit ausgewählten Registerkarte Stile“ den Abschnitt Rand und legen Sie die Optionen für den Randabstand in der Strukturkomponente fest. Dieser Stil repliziert den CSS-margin, der den Bereich außerhalb eines Komponentenrahmens steuert und ihn von anderen Komponenten trennt. Dadurch wird eine Lücke um die Komponente geschaffen, um ihre Positionierung und das Layout des umgebenden Inhalts zu beeinflussen.
Legen Sie die Randwerte in Pixeln entsprechend Ihren Design-Anforderungen fest. Sie können den Rand für alle Seiten, für das obere untere, das linke oder das rechte Ende oder für jede Seite der Komponente unabhängig voneinander festlegen:
-
Alle Seiten - Wenn Sie einen Wert festlegen möchten, der auf alle Seiten angewendet werden soll, deaktivieren das Kontrollkästchen „Unterschiedlicher Rand für jede Seite. Klicken Sie auf die Pfeilsymbole nach oben und unten, um die Anzahl der Pixel zu erhöhen oder zu verringern.
-
Oben unten - Um die oberen und unteren Ränder auf denselben Wert festzulegen, legen Sie das Symbol Gesperrt zwischen den oberen und unteren Einstellungen fest. Klicken Sie auf die Pfeilsymbole nach oben bzw. unten, um die Anzahl der Pixel zu erhöhen oder zu verringern.
-
Links-: Um die linken und rechten Ränder auf denselben Wert festzulegen, legen Sie das Symbol Gesperrt zwischen den linken und rechten Einstellungen fest. Klicken Sie auf die Pfeilsymbole nach oben bzw. unten, um die Anzahl der Pixel zu erhöhen oder zu verringern.
-
Unabhängig - Um jeden Rand auf einen unabhängigen Wert festzulegen, legen Sie das Symbol Entsperrt zwischen den oberen und unteren Einstellungen sowie zwischen der linken und rechten Einstellung fest. Klicken Sie für jede Einstellung auf die Pfeilsymbole nach oben und unten, um die Anzahl der Pixel zu erhöhen oder zu verringern.
Verwenden Sie die Stileinstellungen Erweitert, um zusätzliche CSS-kompatible Attribute mit Werten anzuwenden. Sie können die Werte der vorhandenen Attribute ändern oder neue hinzufügen. Die Formatierung wird mithilfe des CSS-Vererbungsmodells für über- und untergeordnete Komponenten (Elemente) auf die Komponente angewendet.
Die angezeigten Attribute spiegeln die Stile wider, die derzeit für die Komponente definiert sind. Sie können die Werte entsprechend den CSS-Definitionen ändern. Klicken Sie auf Hinzufügen (+), um ein neues Stilattribut für die Komponente hinzuzufügen.
Navigationsbaum
Im visuellen Design können Sie über den Navigationsbaum auf die Strukturkomponenten, einschließlich Spalten und Inhalten, zugreifen. Klicken Sie links auf das Symbol Navigationsbaum
Das body-Element ist der Stamm der Baumstruktur. Klicken Sie auf eine der Komponenten oder untergeordneten Spaltenelemente in der Baumstruktur, um sie auf der Arbeitsfläche auszuwählen. Die Einstellungen und Stile auf der rechten Seite zeigen die Parameter für diese Komponente oder Spalte an.
