Erfahren Sie, wie Sie ein benutzerdefiniertes Design erstellen, einzelne Komponenten formatieren und Webfonts in einem Design verwenden
Diese Schulung ist ein Schritt in der Serie Erstellen Sie Ihr erstes adaptives Formular. Es wird empfohlen, der Serie in chronologischer Reihenfolge zu folgen, um den vollständigen Anwendungsfall zu verstehen, auszuführen und zu demonstrieren.
Sie können Themen verwenden, um einem adaptiven Formular eine eindeutige Darstellung und einen einzigartigen Stil zu geben. Sie können Standarddesigns anwenden, die mit dem adaptiven Formulareditor bereitgestellt werden, oder eigene Designs erstellen. AEM Forms bietet einen Design-Editor zum Erstellen benutzerdefinierter Designs. Ein einzelnes Design kann das gleiche Aussehen auf Mobilgeräten, Tablets oder Desktops bieten. Vorkenntnisse von CSS oder LESS sind nicht erforderlich, um den Designeditor zu verwenden, aber sie sind erwünscht.
Am Ende der Schulung lernen Sie Folgendes:
Nach dem Abschließen des Lernprogramms sieht das Formular wie folgt aus:
Laden Sie die unten abgebildeten kopfzeilenartigen und Logo-Bilder auf Ihrem lokalen Computer herunter. Die Kopfzeile des adaptiven Formulars shipping-address-add-update-form
verwendet die kopfzeilenartigen und Logo-Bilder. Das kopfzeilenartige Bild erscheint auf der rechten Seite der Kopfzeile.
Der Adaptive Forms Editor bietet mehrere Standarddesigns. Wenn Sie beabsichtigen, keinen benutzerdefinierten Stil für Ihr adaptives Formular zu verwenden, können Sie Ihre adaptiven Formulare auch mit einem Standarddesign veröffentlichen. Designs sind unabhängig von adaptiven Formularen. Sie können dasselbe Design auf mehrere adaptive Formulare anwenden. So wenden Sie ein Design auf ein adaptives Formular an:
Öffnen Sie Ihr adaptives Formular zum Bearbeiten.
http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html
Öffnen Sie die Eigenschaften von Adaptive Form - Container. Navigieren Sie im Eigenschaften-Browser zu Standard > Adaptives Formulardesign. Das Feld Adaptives Formulardesign listet alle vordefinierten und benutzerdefinierten Designs auf. Standardmäßig wird das Canvas-Design angewendet.
Wählen Sie ein Design aus dem Feld Adaptives Formulardesign. Zum Beispiel: Umfragedesign. Tippen , um das ausgewählte Design anzuwenden.
Abbildung: Adaptives Formular mit dem Standarddesign
Abbildung: Adaptives Formular mit dem Umfragedesign
Das oben angezeigte Design erfordert Änderungen am Platzhaltertext und Logo des vorhandenen adaptiven Formulars. Führen Sie die folgenden Schritte aus, um die erforderlichen Änderungen vorzunehmen:
Ändern Sie das vorhandene Logo und den Text der Kopfzeile. Entfernen des Logos:
Öffnen Sie das Formular im Formulareditor.
http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html
Tippen Sie auf das Logo-Bild in der Kopfzeilenkomponente und tippen Sie auf Eigenschaften. Tippen Sie in der Bildeigenschaft auf X, um das vorhandene Logobild zu entfernen.
Tippen Sie auf "Hochladen", wählen Sie logo.png aus und tippen Sie auf , um die Änderungen zu speichern. Das Bild wurde im Vorbereitung Abschnitt.
Tippen auf Kopfzeilentext, We.Retail
und tippen Sie auf edit. Ändern des Kopfzeilentextes in
we retail
. Fettformatierung nur auf anwenden we
in we retail
.
Entfernen Sie Titel und fügen Sie Platzhaltertext hinzu:
Sie können den Design-Editor verwenden, um benutzerdefinierte Designs zu erstellen. Der Design-Editoreditor ist ein leistungsstarker WYSIWYG-Editor. Es ist eine visuelle Methode, um CSS auf verschiedene Komponenten eines adaptiven Formulars anzuwenden. Es bietet bessere Steuerelemente, um Komponenten und Bereiche eines adaptiven Formulars zu gestalten.
Ein Design ist eine separate Entität wie adaptive Formulare. Es enthält Stile (CSS) für die Komponenten und Bereiche eines adaptiven Formulars. Die Stile umfassen Eigenschaften wie Hintergrundfarben, Statusfarben, Transparenz, Ausrichtung und Größe. Wenn Sie ein Design anwenden, wird der angegebene Stil auf die entsprechenden Komponenten eines adaptiven Formulars angewendet.
In diesem Lernprogramm werden Kopf- und Fußzeilen, Text- und numerische Komponenten, Anhangskomponenten und Schaltflächen formatiert. Beginnen wir mit dem Erstellen eines Designs:
Melden Sie sich bei der AEM-Autoreninstanz an und navigieren Sie zu Adobe Experience Manager > Forms > Designs. Die Standard-URL lautet http://localhost:4502/aem/forms.html/content/dam/formsanddocuments-themes.
Tippen Sie auf Erstellen und wählen Sie Design. Die Seite „Design erstellen“ mit den Feldern zum Erstellen eines Designs wird angezeigt. Die Felder „Titel“ und „Name“ sind obligatorisch.
Tippen Sie auf Erstellen. Ein Design wird erstellt und es wird ein Dialogfeld zum Öffnen des Formulars zur Bearbeitung angezeigt. Tippen Öffnen , um das neu erstellte Design in einer neuen Registerkarte zu öffnen. Design wird im Design-Editor geöffnet. Zum Formatieren verwendet der Design-Editor ein Standardformular, das mit AEM Forms geliefert wird.
Informationen zur Verwendung der Benutzeroberfläche des Design-Editors finden Sie unter Über den Design-Editor.
Tippen Designoptionen > Konfigurieren. Im Vorschau des Formulars ein, wählen Sie die shipping-address-add-update-form Adaptives Formular, tippen Sie auf
Tippen Sie auf Speichern. Jetzt ist der Design-Editor konfiguriert, um Ihr eigenes adaptives Formular anstelle des adaptiven Standardformulars zu benutzen. Tippen Sie auf Abbrechen, um zum Design-Editor zurückzukehren.
Abbildung: Design-Editor mit dem adaptiven Formular shipping-address-add-update-form
Abbildung: Adaptives Formular mit dem Standardformular
Kopf- und Fußzeile bieten einem adaptiven Formular ein konsistentes und unverwechselbares Aussehen. Im Allgemeinen enthält die Kopfzeile das Logo und den Namen der Organisation. Die Fußzeile enthält Copyright-Informationen, die in allen Formularen einer Organisation identisch bleiben. So formatieren Sie Kopf- und Fußzeile des adaptiven Formulars „shipping-address-add-update-form adaptive form“:
Navigieren Sie im Bereich „Auswahl“ zur Option Kopfzeile > Text. Der Bereich „Auswahl“ befindet sich auf der linken Seite des Design-Editors. Wenn das Bedienfeld nicht sichtbar ist, tippen Sie auf Seitliches Bedienfeld ein/aus.
Legen Sie die folgenden Eigenschaften in der Text Akkordeon und tippen .
Eigenschaft | Wert |
---|---|
Schriftfamilie | Arial |
Schriftfarbe | FFFFFF |
Schriftgrad | 54px |
Tippen Sie auf das Kopfzeilen-Widget und tippen Sie auf Kopfzeile. Die Optionen zum Formatieren des Kopfzeilen-Widgets werden auf der linken Seite angezeigt. Erweitern Sie die Dimensionen und Position Akkordeon festlegen Höhe nach 120px
und tippen Sie auf .
Erweitern Sie das Akkordeon „Hintergrund“-des Kopfzeilen-Widgets und stellen Sie die Hintergrundfarbe auf F6921E.
ein.
Bewegen Bild und Verlauf > + Hinzufügen Tippen Sie auf Bild. Legen Sie die folgenden Eigenschaften fest und tippen Sie auf .
Eigenschaft | Wert |
---|---|
image | Laden Sie header-style.png hoch. Das Bild wurde im Vorbereitung Abschnitt. |
Position | Rechts unten |
Anordnung | Keine Wiederholung |
Tippen Sie im Design-Editor auf das Logo in der Kopfzeile und tippen Sie auf Kopfzeilen-Logo. Erweitern Sie das Akkordeon Dimensionen und Position , legen Sie die folgenden Eigenschaften fest und tippen Sie auf .
Rand | Wert |
Rand |
Tipp: Tippen Sie auf das Link-Symbol |
Höhe | 4.75rem |
F6921E
und tippen Sie auf Sie können mehrere Komponenten in einem adaptiven Formular verwenden, um Daten zu erfassen. Zum Beispiel Textfeld und Zahlenfeld. Sie können für jede Komponente einen identischen Stil wie alle Datenerfassungskomponenten oder einen separaten Stil bereitstellen. In diesem Lernprogramm wird ein identischer Stil auf numerische Felder (Kunden-ID, Postleitzahl) und Textfelder (Kunden-ID, Name, Lieferadresse, Status, E-Mail) angewendet. So gestalten Sie die Datenerfassungskomponenten:
Akkordeon | Eigenschaft | Wert |
Rahmen | Rahmenfarbe | A7A9AC |
Rahmen | Rahmenradius |
|
Text | Schriftfamilie | Arial |
Text | Schriftfarbe | 939598 |
Text | Schriftgrad | 18px |
Abmessungen und Position | Breite | 60% |
Abmessungen und Position | Rand |
|
Tippen Sie auf den leeren Bereich über dem Feld Kunden-ID und tippen Sie auf Responsive Bereichscontainer. Legen Sie den Hintergrund > Hintergrundfarbe auf F1F2F2 fest. Tippen .
Sie können ein benutzerdefiniertes Design verwenden, um einen identischen Stil auf alle Schaltflächen des adaptiven Formulars anzuwenden und Inline-Stil , um einen Stil auf eine bestimmte Schaltfläche anzuwenden. So gestalten Sie die Schaltflächen:
Akkordeon | Eigenschaft | Wert |
Hintergrund | Hintergrundfarbe | F6921E |
Rahmen |
Rahmenfarbe | F6921E |
Rahmen | Rahmenradius |
|
Text |
Schriftfamilie | Arial |
Text | Schriftfarbe | FFFFFF |
Text | Schriftgrad | 18 px |
Wenden Sie das benutzerdefinierte Design, Globales Design, auf Ihr adaptives Formular an. Wenn der Stil nicht im adaptiven Formular übernommen wird, leeren Sie den Browser-Cache und versuchen Sie es erneut.
Einige Stile gelten nur für eine bestimmte Komponente. Solche Komponenten werden im adaptiven Formulareditor gestaltet.
Öffnen Sie Ihr adaptives Formular zum Bearbeiten. http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html
Wählen Sie in der oberen Leiste die Option Stil.
Tippen Sie auf Attach und tippen Sie auf Symbol. Legen Sie die folgenden Eigenschaften in der Dimensionen und Position Akkordeon:
Eigenschaft | Wert |
---|---|
Gleitkomma | Links |
Breite | 10% |
Tippen Sie auf Von Behörden anerkannter Adressnachweis und tippen Sie auf Symbol. Legen Sie die folgenden Eigenschaften fest:
Akkordeon | Eigenschaft | Wert |
Abmessungen und Position | Gleitkomma | Links |
Abmessungen und Position | Breite | 73% |
Abmessungen und Position | Erweiterte Umrandung |
|
Abmessungen und Position | Höhe | 40px |
Abmessungen und Position |
Rand |
|
Hintergrund | Hintergrundfarbe | FFFFFF |
Rahmen | Rahmenbreite | 1px |
Rahmen | Rahmenstil | Durchgezogen |
Rahmen | Rahmenfarbe | A7A9AC |
Rahmen | Rahmenradius | 7px |
Text | Schriftfamilie | Arial |
Text | Schriftfarbe | BCBEC0 |
Text | Schriftgrad | 18 px |
Text | Zeilenhöhe | 2 |
Akkordeon | Eigenschaft | Wert |
Abmessungen und Position | Gleitkomma | Rechts |
Abmessungen und Position | Rand |
|
Hintergrund | Hintergrundfarbe | F6921E |
Rahmen | Rahmenfarbe | F6921E |
Sie können verschiedene Schriftarten verwenden, um ein adaptives Formular zu entwerfen. Alle Geräte, auf denen das adaptive Formular angezeigt wird, verfügen möglicherweise nicht über die zum Entwerfen des adaptiven Formulars verwendeten Schriftarten. Sie können einen Web-Schriftartdienst verwenden, um die erforderlichen Schriftarten an das Zielgerät bereitzustellen.
Adobe Typekit ist ein Webschriftartdienst. Sie können den Dienst mit adaptiven Formularen konfigurieren und verwenden. So verwenden Sie Adobe Typekit in einem adaptiven Formular:
Typekit wird jetzt als Adobe Fonts bezeichnet und ist in Creative Cloud- und anderen Abonnements enthalten. Weitere Informationen
Erstellen Sie eine Adobe Typekit , erstellen Sie ein Kit, fügen Sie dem Kit die Schriftart Myriad Pro hinzu, veröffentlichen Sie das Kit und erhalten Sie die Kit-ID. Es ist erforderlich, Adobe Typekit-Schriftarten (Webfonts) in einem adaptiven Formular zu verwenden.
Navigieren Sie auf dem AEM Forms-Server zu Adobe Experience Manager > Instrumente
> Implementierung > Cloud Services. Navigieren Sie auf der Seite "Cloud Services"zu Drittanbieterdienste > Typekit und klicken Sie auf Konfigurieren Jetzt unter "Typekit". Wenn eine Konfiguration bereits zur Verfügung steht, klicken Sie auf die Schaltfläche +, um eine neue Instanz zu erstellen.
Geben Sie im Dialogfeld "Konfiguration erstellen"eine Titel für die Konfiguration und klicken Sie auf Erstellen. Daraufhin werden Sie zur Seite „Konfiguration“ geleitet. Geben Sie im angezeigten Dialogfeld Komponente bearbeiten Ihre Kit-ID und klicken Sie auf OK.
Konfigurieren Sie Ihr Design für die Verwendung der TypeKit-Konfiguration. Öffnen Sie in der Autoreninstanz Globales Design im Design-Editor. Navigieren Sie im Design-Editor zu Themenoptionen > Konfigurieren. In Typekit-Konfiguration ein, wählen Sie das Kit aus und klicken Sie auf Speichern.
Die Schriftarten, die dem Typekit hinzugefügt wurden, können im Abschnitt Text Akkordeon aller Komponenten.