Stijl uw adaptieve formulier

Leer hoe u een aangepast thema maakt, afzonderlijke componenten opmaakt en weblettertypen in een thema gebruikt

Deze zelfstudie is een stap in de Uw eerste adaptieve formulier maken reeks. U wordt aangeraden de reeks in chronologische volgorde te volgen om het volledige gebruik van de zelfstudie te begrijpen, uit te voeren en aan te tonen.

Over de zelfstudie

U kunt thema's gebruiken om een adaptief formulier een unieke vormgeving en stijl te geven. U kunt thema's uit de doos toepassen die van de adaptieve redacteur van vormen worden voorzien of douanethema's van uw tot stand brengen. AEM Forms biedt een themaeditor om aangepaste thema's te maken. Met één thema kunt u hetzelfde adaptieve formulier weergeven dat u op mobiele apparaten, tablets of desktops hebt geopend. Eerdere kennis van CSS of LESS is niet vereist voor het gebruik van de themaeditor, maar is wel gewenst.

Aan het einde van de zelfstudie leert u:

• Een thema uit het vak toepassen op een adaptief formulier
• Een thema maken voor een adaptief formulier met de themaeditor
• Afzonderlijke componenten opmaken
• Bonussectie: Weblettertypen gebruiken in een aangepast thema

Het formulier ziet er ongeveer als volgt uit nadat u de zelfstudie hebt voltooid:

Voordat u begint

Download de koptekst- en logo-afbeeldingen hieronder op uw lokale computer. De koptekst van de shipping-address-add-update-form Het adaptieve formulier gebruikt de koptekst- en logo-afbeeldingen. De koptekstafbeelding wordt rechts van de koptekst weergegeven.

Bestand ophalen

Bestand ophalen

Stap 1: Een thema toepassen op het aangepaste formulier

De adaptieve vormenredacteur verstrekt veelvoudige uit-van-de-doos thema's. Als u geen aangepaste stijl wilt gebruiken voor het aangepaste formulier, kunt u ook uw aangepaste formulieren publiceren met een thema dat buiten de verpakking valt. Thema's zijn onafhankelijk van adaptieve vormen. U kunt hetzelfde thema toepassen op meerdere adaptieve formulieren. Een thema toepassen op een adaptief formulier:

1. Open het aangepaste formulier voor bewerking.

   http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html

2. Open eigenschappen van Container voor adaptieve vorm. Navigeer in de eigenschappenbrowser naar Basis > Aangepast formulierthema. De Aangepast formulierthema worden alle kant-en-klare thema's en aangepaste thema's weergegeven. Standaard wordt het thema Canvas toegepast.

3. Selecteer een thema in het menu Aangepast formulierthema veld. Bijvoorbeeld: Onderzoeken. Tikken om het geselecteerde thema toe te passen.

Afbeelding: Aangepast formulier met het standaardthema

Afbeelding: Aangepast formulier met het thema Beoordeling

Stap 2: Het aangepaste formulier bijwerken

Voor het hierboven weergegeven ontwerp zijn wijzigingen vereist in de plaatsaanduidingstekst en het logo van het bestaande adaptieve formulier. Voer de volgende stappen uit om de vereiste wijzigingen aan te brengen:

1. Wijzig het bestaande logo en de tekst van de koptekst. Het logo verwijderen:

   1. Open het formulier in de formuliereditor.

      http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html

   2. Tik op de afbeelding met het logo in de koptekstcomponent en tik op eigenschappen. Tik in de afbeeldingseigenschap op X om de bestaande logoafbeelding te verwijderen.

   3. Tik op Uploaden, selecteer het bestand logo.png en tik op om de wijzigingen op te slaan. De afbeelding is gedownload in het dialoogvenster Voordat u begint sectie.

   4. Tikkoptekst, We.Retailen tikken bewerken. Koptekst wijzigen in we retail. Alleen vette opmaak toepassen op wein we retail.

   

2. Titel verwijderen en plaatsaanduidingstekst toevoegen:

   1. Tik op het veld Customer ID en tik op eigenschappen.
   2. Kopieer de inhoud van de Titel aan de Plaatsaanduidingstekst veld.
   3. De inhoud van het dialoogvenster Titel veld en tik .
   4. Herhaal de vorige drie stappen voor alle tekstvakken, het numerieke vak en het e-mailveld in het formulier.

   

Stap 3: Een aangepast thema maken voor uw aangepaste formulier

U kunt themaeditor om aangepaste thema's te maken. De themaredacteur is een almachtige redacteur WYSIWYG. Het is een visuele methode om CSS op diverse componenten van een adaptieve vorm toe te passen. Het biedt fijnere besturingselementen voor stijlcomponenten en deelvensters van een adaptieve vorm.

Een thema is een afzonderlijke entiteit, zoals adaptieve formulieren. Deze bevat stijlen (CSS) voor de componenten en deelvensters van een adaptief formulier. Stijlen omvatten CSS-eigenschappen zoals achtergrondkleuren, statuskleuren, transparantie, uitlijning en grootte. Wanneer u een thema toepast, wordt de opgegeven stijl toegepast op de corresponderende componenten van een adaptief formulier.

In deze zelfstudie maakt u een stijl van de kop- en voettekst, tekst en numerieke componenten, de bijlage en knoppen. Laten we beginnen met het maken van een thema:

Een thema maken

1. Meld u aan bij de AEM auteur en navigeer naar Adobe Experience Manager > Forms > Thema's. De standaard-URL is http://localhost:4502/aem/forms.html/content/dam/formsanddocuments-themes.

2. Tikken Create en selecteert u Theme. De pagina Thema maken met de velden die nodig zijn om een thema te maken, wordt weergegeven. De velden Titel en Naam zijn verplicht:

   • Titel: Geef een titel van het thema op. Bijvoorbeeld: Globaal thema. Met de titel kunt u het thema herkennen aan de lijst met thema's.
   • Naam: Geef de naam van het thema op. Bijvoorbeeld: Globaal thema. Er wordt een knooppunt met de opgegeven naam gemaakt in de repository. Wanneer u een titel begint te typen, wordt automatisch een waarde voor het naamveld gegenereerd. U kunt de voorgestelde waarde wijzigen. Het naamveld mag alleen alfanumerieke tekens, afbreekstreepjes en onderstrepingstekens bevatten. Alle ongeldige invoer wordt vervangen door een afbreekstreepje.

3. Tikken Maken. Er wordt een thema gemaakt en er verschijnt een dialoogvenster waarin u het formulier kunt openen om het te bewerken. Tikken Openen om het nieuwe thema op een nieuw tabblad te openen. Het thema wordt geopend in de themaeditor. Voor het opmaken gebruikt de themaeditor een adaptief formulier dat niet in de doos bij AEM Forms wordt geleverd.

   Voor informatie over het gebruiken van thema redacteur UI, zie Informatie over de themaeditor.

4. Tikken Themaopties > Configureren. In de Voorbeeld van formulier veld selecteert u de verzendadres-add-update-form adaptief formulier, tikken , tikken Opslaan. De themaeditor is nu geconfigureerd voor het gebruik van uw eigen adaptieve formulier in plaats van het standaard adaptieve formulier. Tikken Annuleren om terug te keren naar de themaeditor.

   

   Afbeelding: Thema-editor met het adaptieve formulier voor het verzendadres-add-update

   

   Afbeelding: Adaptief formulier met het standaardformulier

Stijlkop- en voettekst

Koptekst en voettekst geven een consistent en duidelijk beeld van een adaptief formulier. Over het algemeen bevat de koptekst het logo en de naam van de organisatie, bevat de voettekst copyrightinformatie en deze blijven in meerdere vormen van een organisatie identiek. De kop- en voettekst van het adaptieve formulier voor het verzendadres-add-update-formulier opmaken:

1. Navigeren door de Koptekst > Tekst in het deelvenster Kiezers. Het deelvenster Kiezers bevindt zich links van de themaeditor. Tik op Zijpaneel in-/uitschakelen.

2. Stel de volgende eigenschappen in in het dialoogvenster Tekst accordeon en tik .

   Eigenschap	Waarde
   Lettertypefamilie	Arial
   Lettertypekleur	FFFFFF
   Tekengrootte	54px

3. Tik op de koptekstwidget en tik op Koptekst. De opties voor het opmaken van de koptekstwidget worden links weergegeven. Breid uit Dimension en positie accordeon instellen Hoogte tot 120pxen tikken .

4. Breid de Achtergrondaccordeon van de kopbalwidget uit, plaats Achtergrondkleur tot F6921E.

   Overslaan Afbeelding en verloop > + Toevoegen, tikken Afbeelding. Stel de volgende eigenschappen in en tik op .

   Eigenschap	Waarde
   afbeelding	Upload header-style.png. De afbeelding is gedownload in het dialoogvenster Voordat u begint sectie.
   Positie	Rechts onder
   Naast elkaar	Niet herhalen

5. Tik in de themaeditor op het logo in de koptekst en tik op Koptekstlogo. Breid de Dimension en Positie accordeon uit, plaats de volgende eigenschappen en tik .

1. Tik op de voettekstwidget en tik op Voettekst. Breid uit Achtergrond accordeon instellen Achtergrondkleur tot F6921Een tikken .

De component voor gegevensvastlegging opmaken en een achtergrond op het adaptieve formulier toepassen

U kunt meerdere componenten in een adaptief formulier gebruiken om gegevens vast te leggen. Bijvoorbeeld tekstvak en numeriek vak. U kunt identieke stijl aan alle gegevens verstrekken vangt componenten of afzonderlijke stijl voor elke component. In deze zelfstudie wordt een identieke stijl toegepast op numerieke vakken (Customer ID, ZIP Code) en tekstvakken (Customer ID, Name, Shipping Address, State, Email). De componenten voor gegevensvastlegging opmaken:

1. Tik op het veld Customer ID en tik op Widget veld optie. Stel de volgende eigenschappen in en tik op .

1. Tik op het lege gebied boven het veld Customer ID en tik op Container voor responsieve deelvensters. Stel de Achtergrond > Achtergrondkleur tot F1F2F2. Tikken .

   

De knoppen opmaken

U kunt een aangepast thema gebruiken om een identieke stijl toe te passen op alle knoppen van het aangepaste formulier en inline styling om een stijl op een specifieke knoop toe te passen. De knoppen opmaken:

1. Tik op de knop Verzenden en tikken op Knop optie. Stel de volgende eigenschappen in en tik op .

1. Het aangepaste thema toepassen, Global Theme, in uw adaptieve vorm. Als de stijl niet op het adaptieve formulier wordt weerspiegeld, maakt u de cache van de browser leeg en probeert u het opnieuw.

   

Stap 4: Afzonderlijke componenten opmaken

Sommige stijlen zijn alleen van toepassing op een bepaalde component. Dergelijke componenten worden opgemaakt in de editor voor adaptieve formulieren.

1. Open het aangepaste formulier voor bewerking. http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html

2. Selecteer op de bovenste balk de optie Stijl optie.

   

3. Tik op de knop Koppelen en tikken op pictogram. Stel de volgende eigenschappen in in het dialoogvenster Dimension en positie accordeon:

   Eigenschap	Waarde
   Float	Links
   Breedte	10%

4. Tik op de knop Door de overheid goedgekeurd adresbewijs tikken en tikken op de knop pictogram. Stel de volgende eigenschappen in:

1. Tik op de knop Verzenden en tikken op pictogram. Stel de volgende eigenschappen in:

Stap 5: Bonussectie: Weblettertypen gebruiken in een aangepast thema

U kunt verschillende lettertypen gebruiken om een adaptief formulier te ontwerpen. Op alle apparaten waarop het adaptieve formulier wordt weergegeven, worden mogelijk niet de fonts gebruikt om het adaptieve formulier te ontwerpen. U kunt een service voor weblettertypen gebruiken om de vereiste lettertypen aan het doelapparaat te leveren.

Adobe Typekit is een service voor weblettertypen. U kunt de service configureren en gebruiken met adaptieve formulieren. Adobe Typekit in een adaptieve vorm gebruiken:

1. Een Adobe Typekit -account, een kit maken, lettertype Myriad Pro aan de kit toevoegen, de kit publiceren en de kit-id ophalen. U hebt Adobe Typekit-lettertypen (weblettertypen) in een adaptieve vorm nodig.

2. Navigeer op de AEM Forms-server naar Adobe Experience Manager > Gereedschappen > Implementatie > Cloud Services. Navigeer op de pagina Cloud Services naar Services van derden > Typekit en klik op Configureren Nu onder Typekit. Als er al een configuratie beschikbaar is, klikt u op de knop + om een nieuwe instantie te maken.

   Geef in het dialoogvenster Configuratie maken een Titel voor de configuratie en klik op Maken. U wordt opnieuw gericht aan de configuratiepagina. Geef in het dialoogvenster Component bewerken dat wordt weergegeven uw Kit-id en klik op OK.

3. Vorm uw thema om de configuratie te gebruiken TypeKit. Open in de instantie van de auteur Globaal thema in de themaeditor. Navigeer in de themaeditor naar Thema-opties > Configureren. In Typekit-configuratie , selecteert u de kit en klikt u op Opslaan.

   De lettertypen die aan de Typekit zijn toegevoegd, kunnen worden geselecteerd in het dialoogvenster Tekst van alle componenten.

Business.Adobe.com-bronnen

Cms Cloud Personalized Experiences Embedded Charts Mobile Forms Dynamic Media Customer Experience Management