Leer hoe u een aangepast thema maakt, afzonderlijke componenten opmaakt en weblettertypen in een thema gebruikt
Deze zelfstudie is een stap in de serie Uw eerste adaptieve vorm maken. 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.
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:
Het formulier ziet er ongeveer als volgt uit nadat u de zelfstudie hebt voltooid:
Download de koptekst- en logo-afbeeldingen hieronder op uw lokale computer. De koptekst van het aangepaste formulier shipping-address-add-update-form
gebruikt de koptekst- en logoafbeeldingen. De koptekstafbeelding wordt rechts van de koptekst weergegeven.
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:
Open het aangepaste formulier voor bewerking.
http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html
Open eigenschappen van Aangepaste formuliercontainer. Navigeer in de eigenschappenbrowser naar Basic > Adaptief formulierthema. In het veld Adaptief formulierthema worden alle kant-en-klare en aangepaste thema's weergegeven. Standaard wordt het thema Canvas toegepast.
Selecteer een thema in het veld Adaptief formulierthema. Bijvoorbeeld Beoordelingsthema. Tik om het geselecteerde thema toe te passen.
Afbeelding: Adaptief formulier met standaardthema
Afbeelding: Adaptief formulier met het thema Beoordeling
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:
Wijzig het bestaande logo en de tekst van de koptekst. Het logo verwijderen:
Open het formulier in de formuliereditor.
http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html
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.
Tik op Uploaden, selecteer het bestand logo.png en tik op om de wijzigingen op te slaan. De afbeelding is gedownload in de sectie Voordat u start.
Tik op koptekst, We.Retail
en tik edit. Wijzig de koptekst in
we retail
. Pas vette opmaak alleen toe op we
in we retail
.
Titel verwijderen en plaatsaanduidingstekst toevoegen:
U kunt themaeditor gebruiken 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:
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.
Tik Create en selecteer 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:
Tik Maken. Er wordt een thema gemaakt en er verschijnt een dialoogvenster waarin u het formulier kunt openen om het te bewerken. Tik Open om het zojuist gemaakte 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 Ongeveer de themaredacteur.
Tik Thema-opties > Configure. Selecteer in het veld Voorvertoning van formulier het adaptieve formulier Verzendadres-add-update-form, tik
op Opslaan. De themaeditor is nu geconfigureerd voor het gebruik van uw eigen adaptieve formulier in plaats van het standaard adaptieve formulier. Tik op Annuleren om terug te keren naar de themaeditor.
Afbeelding: Thema-editor met het adaptieve formulier voor het verzendadres-add-update
Afbeelding: Adaptief formulier met standaardformulier
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:
Navigeer de optie Koptekst > Tekst in het deelvenster Kiezers. Het deelvenster Kiezers bevindt zich links van de themaeditor. Tik Zijpaneel in-/uitschakelen als het deelvenster niet zichtbaar is.
Stel de volgende eigenschappen in de accordeon Text in en tik .
Eigenschap | Waarde |
---|---|
Lettertypefamilie | Arial |
Lettertypekleur | FFFFFF |
Fontgrootte | 54 px |
Tik op de koptekstwidget en tik Koptekst. De opties voor het opmaken van de koptekstwidget worden links weergegeven. Breid Dimension & Positie accordeon uit, plaats Hoogte aan 120px
, en tik .
Breid de achtergrondaccordeon van de kopbalwidget uit, plaats Achtergrondkleur aan F6921E.
Houd de cursor boven Afbeelding en verloop > + Toevoegen, tik Afbeelding. Stel de volgende eigenschappen in en tik op .
Eigenschap | Waarde |
---|---|
afbeelding | Upload header-style.png. De afbeelding is gedownload in de sectie Voordat u start. |
Positie | Rechts onder |
Naast elkaar | Niet herhalen |
Tik in de themaeditor op het logo in de koptekst en tik Koptekstlogo. Vouw de accordeon Dimension en positie uit, stel de volgende eigenschappen in en tik .
Marge | Waarde |
Marge |
Tip: Tik op het |
Hoogte | 4.75 rem |
F6921E
, en tik 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:
Accordeon | Eigenschap | Waarde |
Rand | Randkleur | A7A9AC |
Rand | Straal rand |
|
Tekst | Lettertypefamilie | Arial |
Tekst | Lettertypekleur | 939598 |
Tekst | Fontgrootte | 18 px |
Dimension en positie | Breedte | 60% |
Dimension en positie | Marge |
|
Tik op het lege gebied boven het veld Customer ID en tik op Responsive Panel Container. Stel de Achtergrond > Achtergrondkleur in op F1F2F2. Tik .
U kunt een aangepast thema gebruiken om een identieke stijl toe te passen op alle knoppen van het adaptieve formulier en inline styling om een stijl toe te passen op een specifieke knop. De knoppen opmaken:
Accordeon | Eigenschap | Waarde |
Achtergrond | Achtergrondkleur | F6921E |
Rand |
Randkleur | F6921E |
Rand | Straal rand |
|
Tekst |
Lettertypefamilie | Arial |
Tekst | Lettertypekleur | FFFFFF |
Tekst | Fontgrootte | 18 px |
Pas het aangepaste thema Global Theme toe op het aangepaste formulier. Als de stijl niet op het adaptieve formulier wordt weerspiegeld, maakt u de cache van de browser leeg en probeert u het opnieuw.
Sommige stijlen zijn alleen van toepassing op een bepaalde component. Dergelijke componenten worden opgemaakt in de editor voor adaptieve formulieren.
Open het aangepaste formulier voor bewerking. http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html
Selecteer op de bovenste balk de optie Stijl.
Tik op de knop Koppelen en tik op het pictogram . Stel de volgende eigenschappen in de accordeon Dimension en Position in:
Eigenschap | Waarde |
---|---|
Zwevend | Links |
Breedte | 10% |
Tik op de optie Door de overheid goedgekeurde adresproef en tik op het pictogram . Stel de volgende eigenschappen in:
Accordeon | Eigenschap | Waarde |
Dimension en positie | Zwevend | Links |
Dimension en positie | Breedte | 73% |
Dimension en positie | Opvulling |
|
Dimension en positie | Hoogte | 40 px |
Dimension en positie |
Marge |
|
Achtergrond | Achtergrondkleur | FFFFFF |
Rand | Randbreedte | 1 px |
Rand | Randstijl | Een ononderbroken lijn |
Rand | Randkleur | A7A9AC |
Rand | Straal rand | 7 px |
Tekst | Lettertypefamilie | Arial |
Tekst | Lettertypekleur | BCBEC0 |
Tekst | Fontgrootte | 18 px |
Tekst | Lijnhoogte | 2 |
Accordeon | Eigenschap | Waarde |
Dimension en positie | Zwevend | Rechts |
Dimension en positie | Marge |
|
Achtergrond | Achtergrondkleur | F6921E |
Rand | Randkleur | F6921E |
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:
fontsTypekit wordt nu Adobe Fonts genoemd en wordt geleverd bij Creative Cloud- en andere abonnementen. Meer informatie.
Maak een Adobe Typekit-account, maak een kit, voeg Myriad Pro-lettertype toe aan de kit, publiceer de kit en verkrijg de kit-id. U hebt Adobe Typekit-lettertypen (weblettertypen) in een adaptieve vorm nodig.
Navigeer op de AEM Forms-server naar Adobe Experience Manager > Tools
> Deployment > Cloud Services. Navigeer op de pagina Cloud Services naar Services van derden > Typekit en klik Configure nu onder Typekit. Als er al een configuratie beschikbaar is, klikt u op de knop + om een nieuwe instantie te maken.
Voor de Create dialoog van de Configuratie, specificeer Titel voor de configuratie, en klik Create. U wordt opnieuw gericht aan de configuratiepagina. Geef in het dialoogvenster Component bewerken dat wordt weergegeven uw kit-id op en klik OK.
Vorm uw thema om de configuratie te gebruiken TypeKit. Voor de auteurinstantie, open Globaal Thema in de themaredacteur. Navigeer in de themaeditor naar Thema-opties > Configure. Selecteer de kit in het veld Typekit Configuration en klik op Save.
De lettertypen die aan de Typekit worden toegevoegd, zijn beschikbaar voor selectie in de accordeon Text van alle componenten.