In jouw marketingcampagnes kan het handig zijn om landingspagina's op te nemen. Heb je bijvoorbeeld een tijdelijke actiecampagne waar klanten zich voor kunnen aanmelden? Of wil je nadat iemand in de mail heeft geklikt op een landingspagina terechtkomt met meer informatie? Dit kan door middel van onze Pagina's (of Pages) binnen Deployteq. Hier kan je gemakkelijk aanmeldformulieren, enquetes of zelfs kleine mini websites maken buiten jullie eigen website.

Binnen Deployteq is er altijd een standaard template voor Pages beschikbaar. Bij een nieuwe brand staat deze onder 'Default Pages' in jouw filemanager. Hier staan ook een paar pages al opgemaakt, zodat je daar kan kijken hoe bepaalde objecten en instellingen gebruikt worden. Het standaard template is volledig responsive en gemaakt op basis van het Bootstrap Framework. Is jouw website hier ook op gemaakt? Dan kan je makkelijk de styling van jouw website hierin integreren. Bekijk de pagina voor het maken van een template om te zien waar je dit kan aanpassen, zodat het template er helemaal uit komt te zien naar jullie huisstijl.

Aanmaken van een pagina

Om te beginnen met een nieuw formulier ga je rechtsboven naar 'Nieuw' en kies je voor de optie 'Pagina'

Vervolgens krijg je de optie om een unieke naam te geven en het template te kiezen waar deze pagina op wilt baseren. 

Gelijk aan de opmaak van een e-mail gebaseerd op een template, zie je de bibliotheek van de objecten aan de rechterkant van je scherm en kan je door middel van slepen deze op de gewenste plek in je pagina zetten. 

Opmaak van je pagina

Uiteraard wil je dat je pagina compleet in jouw huisstijl is, of juist misschien een nieuwe opmaak voor de tijdelijke actie die gevoerd wordt. Hiervoor hebben we een aantal stijlobjecten voor je gemaakt die ervoor zorgen dat jouw pagina eruit ziet zoals je wilt. Hier kan je kleuren, lettertypes, groottes van de objecten en ronde hoeken ('border-radius') instellen.

Deze stijling objecten beginnen allemaal met '0000'. De styling layouts objecten zijn:

• Styling: Default layout
• Styling Buttons: Default layout
• Styling: Errors Default layout
• Datepicker Script: Default layout
• Checkbox Radio Styling: Default layout

In het betreffende object bepaal je de eigenschappen van de stijl van je page. Bij de 'Styling: Default layout' zijn bijvoorbeeld de volgende eigenschappen in te stellen:

Bovenstaand zie je onder andere dat je je pagina een titel kan geven (dit zie je in je browsertab), de achtergrondkleuren kan instellen, het lettertype, letter kleur, eventueel afgeronde hoeken ('Form Upper/Lower Border Radius') etc.

Bij de instellingen waarbij in de eigenschappen de grootte, breedte, en hoogte kan instellen (zoals velden, randen en achtergronden) kan je gebruik maken van procentuele of fysieke waardes. Door het toevoegen van een % teken na de waarde wordt de dynamische verhouding ten opzichte van de achtergrond bepaalt. Wil je liever een vaste verhouding gebruiken, dan hoef je er niets achter te zetten, maar de toevoeging van 'PX' kan je toevoegen achter de gewenste waarde.

Voor het instellen van je gewenste lettertype kan je je je eigen lettertype instellen bij 'Font:' Hierbij voer je het gewenste lettertype in met quotes en spatie 'ms', zoals voorbeeld het voorbeeld lettertype "comic sans ms".  

Bij het instellen van het zichtbaar maken van de 'Grid'  ('Show Grid' checkbox als laatste instelling van de eigenschappen) zie je in het voorbeeld van je pagina de kolommen van je pagina terugkomen, zodat je eenvoudig je velden en content kan uitlijnen.

Standaard zijn er 12 kolommen in de default pagina. Wil je twee velden horizontaal in een pagina opnemen, dan kan je bij het betreffende object aangeven over hoeveel kolommen het object gebruikt mag worden. In bovenstaand voorbeeld is er gekozen voor een 3-kolommen view voor de velden 'Voornaam' (First name) en 'Achternaam' in de eigenschappen van het object.

In het 'Styling Buttons: Default Layout', 'Styling: Errors Default Layout' en het 'Checkbox Radio Styling: Default Layout' stijl object, bepaal je de gewenste eigenschappen voor de (radio) buttons, checkboxen en de foutmeldingen in de pagina. In het 'Datepicker Script: Default Layout' bepaal je de taalinstelling voor het Datumprikker object in je pagina. Je kan kiezen uit vier verschillende taal-instellingen.

Content in je pagina verzorgen

Nu je de stijl van je pagina is ingericht is ingericht, kunnen we de pagina gaan vullen met content. 

Allereerst heb je content blokken, zoals de header objecten, zoals'0 - Title block' en '0 - Title block with buttons'), tekst objecten, zoals '000 - Content (modern)' en '000 - Divider'. ten slotte heb je objecten om formulieren mee te maken, zoals inputs, radio buttons en datumprikkers. Deze beginnen allemaal met een '00'.

Header objecten

Laten we beginnen met de header en content objecten, deze geven je pagina natuurlijk de opmaak en intro zoals die nodig is. 

De header objecten zijn een grote afbeelding met daaroverheen tekst en eventueel een button. De header zal over de breedte van de pagina gaan en ook op mobiel de volle breedte in beslag nemen, zij het dan kleiner. In het object kan je weer door middel van het tandwieltje de configuratie doen. Je begint met de header en de tekst: hoe wil je die uitgelijnd hebben (links, rechts of gecentreerd) en wat moet erin staan. Daarna ga je een afbeelding toevoegen, of alleen een achtergrondkleur. Ook als je een afbeelding gebruikt kan je een achtergrondkleur instellen, deze wordt getoond als de afbeeldingen niet meteen worden geladen. Moet er witruimte onder het object komen? Dan stel je dit in met de 'margin bottom' en als laatste kan je nog afronding van de hoeken instellen met de 'border radius'. 

Content objecten

Voor de contentobjecten heb je bijna dezelfde instellingen. Het verschil is, dat als je '000 - Content' in je pagina sleept, krijg je de keuze tot verschillende layouts:

Op die manier kan je zelf bepalen hoe je je tekst in wilt delen. Wanneer je een tekst en afbeelding wilt naast elkaar wilt, maak je gebruik de 'Image Only' en de 'Text Only'. Daarnaast kan je dan gebruik maken van het 12 kolommen grid, zoals hierboven uitgelegd. Wil je ze in een 50/50 verdeling zet je in beide objecten de kolommen op 6, liever een 25/75 verdeling dan kan gebruik je de 3 en 9 kolomindeling. De afbeelding zal automatisch schalen naar de ruimte die gebruikt wordt. 

Het '000 - Content modern' heeft een afbeelding met een tekst erin. Anders dan het header object, waar de tekst er recht overheen komt, komt hier de tekst in een tekstvak over de afbeelding heen. 

Wanneer je een pagina een beetje wilt opdelen, zodat het makkelijker leest, kan je een lijn, ofwel divider, in je pagina opnemen. Hiervoor is '000 - Spacer/divider' object en daar krijg je de volgende keuzes:

Je stel dan in of je de ruimte met of zonder een lijn (dan wel of niet gestippeld, dikte en gewenste kleur) wilt opvullen of dat er alleen lege ruimte moet komen te staan. Daarbij of de gekozen lijn wel of niet zichtbaar moet worden op een mobiele weergave.

Formulier objecten

Tekst velden

Voor het maken van formulieren hebben we ook verschillende objecten voor je gemaakt. Zo heb je verschillende input velden om gegevens op te vragen. Het type input veld kan je kiezen wanneer je het object erin sleept. Dit bepaalt bijvoorbeeld het toetsenbord op mobiel, zoals nummers of e-mail toetsenbord. 

Voor het instellen van een object doorloop je de eigenschappen van het betreffende object zoals in onderstaand voorbeeld van het 'Input: E-mail' object. De velden met een '*' zijn verplichte velden.

Bij het instellen van het 'E-mail object' geef je een naam aan het veld dmv 'Label Text'. Vervolgens koppel je het formulierveld aan een van de Deployteq-velden, je kiest dan een van de onderstaande mogelijkheden.

Door een waarde bij de 'Placeholder' in te voeren, kan je een voorbeeld tonen in het formulier. Je kan dit ook gebruiken als label en dan het label weglaten. Zoals eerder aangegeven, als je hier de e-mail layout hebt gebruikt krijg je automatisch het e-mail toetsenbord op de mobiele devices. Je krijgt dan de toetsen '@' en '.com' in je toetsenbord te zien.

Door het aanvinken van de 'Required' checkbox, maak je het veld verplicht en de 'Unique' checkbox geeft aan dat je op dit veld wilt ontdubbelen. Bij het invoeren van, in dit geval, het e-mailadres, gaat Deployteq kijken of dit e-mailadres al bestaat in Deployteq en zal op basis daarvan een bestaande klant updaten of toevoegen.

Keuzevelden

Wil je je klanten een keuze geven, dan is zijn er meerdere objecten beschikbaar om jouw keuzes aan de klant te tonen. 

• 00 - Checkbox
  Hierbij heb je één keuze, bijvoorbeeld, 'Ik heb de voorwaarden gelezen en ga akkoord' of 'Ja, ik wil graag de nieuwsbrief ontvangen' 
• 00 - Checkboxes x6
  Je krijgt zes keuzes. Alleen als je een keuze invult, zal deze tonen. Zo kan je ook vier keuzes opgeven, of door er twee onder elkaar te zetten. Dit is handig als je bijvoorbeeld interesses wilt uitvragen bij je klant.
• 00 - Radio - Gender
  Deze radiobutton is specifiek voor het kiezen van een geslacht. Je kan een derde optie tonen, voor als mensen het niet willen aangeven. Standaard staat het eerste veld geselecteerd. Wil je dit niet en mogen mensen dit leeg laten, kies dan bij het inslepen van dit object voor de layout 'No pre-select'. Dit zorgt ervoor dat er geen radiobutton is geselecteerd bij het laden van de pagina.
• 00 - Radio 
  Hier kan je vijf eigen radiobuttons mee ingeven, waarbij één keuze mogelijk is. Wanneer je er een niet invult, zal deze niet tonen, zo kan je er ook 4 tonen. Ook hier kan je kiezen voor de lay-out 'No pre-select' zodat geen van de velden is geselecteerd bij het laden van de pagina. Anders zal de eerste keuze geselecteerd zijn bij het laden van de pagina. 
• 00 - Yes/No Radio
  Hierbij heb je direct een keuze met ja en nee. Hier kan je je eigen veld en label aan hangen. Zo kan je aangeven of je wel of niet aanwezig zal zijn bij een evenement, bijvoorbeeld. 
• 00 - Selectbox
  Hiermee heb je vijf keuzes die uit een dropdown komen. Hierbij is één keuze mogelijk. Dit is nagenoeg gelijk aan de radiobuttons, maar neemt minder ruimte in. 

Indien een klant de keuze maakt voor de 'Other' waarde wordt er automatisch een opmerkingsveld veld in de pagina getoond waar bij de klant zijn toelichting kan geven. Deze kan je dan ook instellen met een placeholder, eventueel verplicht stellen en koppelen aan een bestaand Deployteq veld ('Textarea Deployteq Field').

Variaties aanmaken

Ook bij de pagina's kan je variaties aanmaken die worden getoond als een klant aan bepaalde voorwaarden voldoet. Net als bij e-mail templates heb je drie buttons bij de objecten waar je mee kan dupliceren, bewerken of verwijderen. Bij dupliceren komt het gekopieerde object eronder. Dit is handig, wanneer je diverse tekst-invulvelden moet hebben met dezelfde instellingen, dan hoef je alleen de labels te vervangen. 

Je kan ook hetzelfde blok als variatie kopiëren. Je ziet dan voor de naam welke versie je ziet in het voorbeeld: 

Ga naar het object waar je meerdere variaties van wilt laten zien. Handig is vaak wel eerst dit object volledig in te vullen aangezien het details zijn die je aanpast in je variatie. Vervolgens klik je bovenin op 'Dupliceer variatie' om het blok te kopiëren als extra variatie op dit object. 

Door de naam aan te passen in Variatie, zie je goed welke variatie welke inhoud bevat. Helemaal onderin vind je dan de 'Vertoningvoorwaarden' waar je de condities kan instellen voor het tonen van deze variatie.  Deployteq leest de variaties van links naar rechts. Wanneer je altijd iets wilt tonen, ongeacht de voorwaarden, kies dan in de laatste (meest rechtse) variatie 'Altijd tonen'.

Nadat je de pagina klaar hebt, kan je deze opnemen in je campagne flows door middel van het object 'Pagina weergeven'.