De basis van een page is een Page template. Om je op gang te helpen hebben we een standaard page template beschikbaar gemaakt genaamd 'Default Page Template'. Hier kan je veel aan aanpassen, zoals de vormgeving door middel van een CSS sheet, de codering van de vormgeving van bijvoorbeeld je website. De template is gemaakt op het bootstrap framework. Wanneer je website hier ook op gebaseerd is, kan je jouw CSS locatie toevoegen aan het template wat er automatisch voor zorgt dat het geheel in jouw huisstijl is. Natuurlijk is er ook de optie om zelf een template te maken. Het standaard template heeft veel opties om het voor iedereen werkbaar te maken, we kunnen ons voorstellen dat je liever een simpeler template hebt. Dit kan je zelf (laten) bouwen op basis van deze handleiding. Heb je hulp nodig bij het bouwen van je eigen template? Laat het ons weten via 030 - 698 8080. 

Maken van de body het template

Templates zijn gebaseerd op een basis template format, waarbinnen objecten komen om de content te verzorgen. Deze objecten komen in zogenoemde zones en je kan per zone instellen waar bepaalde objecten mogen komen. Zo kan je configuratie objecten, zoals stijling objecten, alleen bovenin in de config zone komen, header objecten alleen in de bovenste zone en footer objecten alleen in de laatste zone. Op die manier dwing je een bepaald format af voor al je collega's, zodat je altijd dezelfde webpagina's maakt, ongeacht wie het maakt. Bij het bouwen van het template kan je natuurlijk altijd terugvallen op het 'Default Pages Template' om te kijken hoe bepaalde elementen daar zijn gemaakt.

Begin met het bouwen van je template bij Pagina's en klik linksboven op 'Nieuw' > 'Paginatemplate'. 

Je komt dan direct in het volgende HTML- scherm.

Dit is de basis van je template, hier kan je styling en je framework toevoegen. Ga met je cursor op de gewenste plek in het template staan en met de button 'Invoegen' kan je variabelen toevoegen aan je template. Zo ook kan je hier zones toevoegen waar straks jouw objecten in passen. Wil je niet met objecten werken, maar heb je een HTML klaar staan die jouw pagina in zijn geheel vormgeeft, dan kan je dit ook hierin plakken. Heb je hier formulier elementen instaan? Zorg dan dat je die via invoegen vervangt door de Deployteq formulier elementen. Dan zorg je er meteen voor dat deze goed worden opgeslagen in de juiste Deployteq velden. 

Wanneer je een zone toevoegt, geef deze een duidelijke naam, dit maakt het toewijzen van objecten straks een stuk makkelijker. 

Er komt een stukje smarty in jouw HTML te staan, die de zone aanduidt {{zone name='Header'}}. Wanneer je erin gaat staan met je cursor, krijg je aan de rechterkant de objecten te zien die je al hebt aangemaakt, of die globaal zijn gemaakt en dus in andere templates gebruikt kunnen worden. Door de objecten aan te vinken, voeg je die objecten toe aan de toegestane objecten voor die zone. Er komt dan een stukje extra in je zone te staan {{zone name='Header' allowed_layouts='XXXX[*]'}}. Hier zijn meerdere objecten mogelijk en die worden er komma-gescheiden toegevoegd. 

Het resultaat wordt dan als volgt:

Onderin je scherm zie je een voorbeeld van je template. Wanneer je hier op bijvoorbeeld een zone klikt, ga je direct naar dat stuk code die de zone laat zien. Op die manier kan je gemakkelijk naar een specifiek stuk code, ondanks dat je wellicht een hele lap code hebt om je template vorm te geven. Wanneer je tevreden bent met de basis van je template, kan je nieuwe objecten toevoegen, zodat iedereen straks een pagina kan opmaken zonder een stukje HTML code te zien. 

Objecten maken

Nu het template in de basis staat, ga je objecten aanmaken om in de zones te kunnen slepen. De eerste mogelijkheid om objecten aan te maken is, om direct in de HTML designer bovenin op 'Genereer object' te klikken. Echter maakt hij hier direct ook een zone bij aan.

Wil je alleen een nieuw object aanmaken, ga dan met je cursor weer in de zone staan. Aan de rechterkant zie je de bibliotheek van objecten aan jouw template onder het tabje 'Lay-outs'. Onder de bibliotheek vind je een plusje '+'. Wanneer je hier klikt krijg je meteen een pop-up waar je een nieuw object kan maken. Zorg voor een unieke naam. Wat we bij het default template hebben gedaan om alle objecten gesorteerd te tonen zijn nullen voor de naam te zetten. Hier kan je natuurlijk elk voorvoegsel gebruiken om ze logisch te structureren. De objecten komen namelijk alfabetisch in de bibliotheek terecht. Je kan ook voorvoegsels als header -, content -, formulier - gebruiken om de elementen bij elkaar te houden. 

Binnen het aanmaken van het object heb je ook meerdere keuzes. Zo kan je een object lokaal of globaal opslaan. Lokaal betekent dat het object alleen voor dit template beschikbaar is. Wil je een object over meerdere templates beschikbaar hebben? Dan kies je voor globaal. Dit kan bijvoorbeeld zijn omdat je verschillende stylings hebt over diverse templates, maar dat het object zich daaraan aanpast. Dan hoef je ook maar één keer het object aan te passen en is het direct in alle templates doorgevoerd. 

Ten slotte kan je nog kiezen of een object voor e-mail en/of pagina beschikbaar is. Wanneer je weet dat een object ook mooi zal tonen in de e-mail, dan kan je hem ook globaal beschikbaar stellen voor een e-mail template. Vaak wordt het andersom gebruikt, aangezien e-mail HTML wel aanzienlijk anders is dan web HTML.

Jouw object is nu toegevoegd aan de bibliotheek. Door er dubbel op te klikken ga je naar de HTML van dit object. Hier kan je jouw HTML voor enkel dit stuk van het template toevoegen.

Hierbij kan je ervoor kiezen om bepaalde elementen te laten invullen door de marketeer. Dit doe je door Eigenschappen toe te voegen aan het object. Dit doe je linksonder door op het plusje te klikken. Hier kan je de naam van de eigenschap, het type, aangeven of het verplicht moet worden ingevuld, een omschrijving van het in te vullen en eventueel een standaardwaarde wanneer het niet wordt ingevuld. Zo kan je bijvoorbeeld een placeholder neerzetten als een afbeelding niet wordt ingevuld, zodat je ziet hoe het eruit komt te zien met de afbeelding.   

Wanneer je hebt gekozen om een omschrijving toe te voegen krijg je een zogenaamde tooltip naast het invulveld. Op die manier kan je instructies toevoegen aan je template die ervoor zorgen dat het altijd correct wordt ingevuld en dus er mooi uit komt te zien. 

Wanneer een object soortgelijk is met de in te vullen eigenschappen, maar qua vormgeving net iets anders is, kan je ook layouts aanmaken. Bij het inslepen van een object krijg je een pop-up met de verschillende opties. Bijvoorbeeld een tekst met een afbeelding links of rechts. De eigenschappen zijn hetzelfde, maar de vormgeving is net iets anders. Bij het inputveld in het 'Default Page Template' hebben we hier ook meerdere lay-outs, omdat het toetsenbord op mobiele devices anders is bij een e-mail invulveld dan een nummer invulveld. Verder ziet het er allemaal hetzelfde uit. 

Binnen de layout kan je ook een afbeelding toevoegen als thumbnail van je object. Zo weten de anderen ook wat ze kunnen verwachten wanneer het object er wordt ingesleept. Plus het ziet er een stuk mooier uit, toch?

Onder het tabblad 'Voorbeeld' kan je het resultaat zien van het object en de verschillende lay-outs. Dit is uiteraard nog niet met de gehele opmaak van het template, maar alleen dit object zonder overige styling. 

Standaard objecten voorinvullen

Wanneer je een pagina gaat maken op basis van het template, kan je alvast een aantal objecten geconfigureerd hebben. Bijvoorbeeld configuratie objecten en footers veranderen over het algemeen niet veel. Hiervoor gaan we naar het tabblad 'Designer'.

Hier kan je alvast een aantal objecten in slepen op de correcte plaats en de eigenschappen alvast invullen. Wanneer je dan een pagina aanmaakt op basis van dit template, zullen deze objecten met hun configuratie er al in staan. Dit  kan ook als je meerdere variaties vaak gebruikt, zoals talen. Uiteraard zijn deze aan te passen per pagina, maar het kan een heleboel tijd schelen als deze er al standaard in staan.