ProDesign

Volgen

In dit artikel wordt beschreven wat ProDesign is, wat de mogelijkheden zijn en hoe we aanraden het te gebruiken. We gaan er vanuit dat je voldoende kennis hebt van HTML en CSS.

Terminologie

  • ProDesign: Module waarmee gespecifiëerde HTML en CSS op een gebruiksvriendelijke manier aangepast kan worden door een gebruiker
  • Module:  bepaalde functionaliteit in het Procurios Webplatform
  • Template: uiterlijk van de website in de vorm van HTML, CSS en andere bestanden
  • Tokens: Element dat vervangen wordt door inhoud uit een module. Te herkennen aan de dubbele hekjes, bijvoorbeeld: ##content##

Wat is ProDesign

Het Procurios Webplatform is zo gebouwd dat HTML en CSS vast staan in de template. Tijdens het gebruik van de website (het toevoegen van artikelen en gebruiken van andere snippets) hoeft de gebruiker zich niet druk te maken over styling. Toch zijn er gevallen waar je een gebruiker wél de mogelijkheid zou willen geven om HTML of CSS in te stellen. Daarvoor is er ProDesign.

Met ProDesign kan de gebruiker, gecontroleerd door de maker van de template, invloed uitoefenen op de HTML en CSS. De maker van de template bepaald wát er op wélke plek door de gebruiker aan te passen is. Dit doet hij door het toevoegen van ProDesign tokens aan de template, zoals deze er bijvoorbeeld ook zijn voor inhoud (##content##) en menu’s (##menu##).

ProDesign is te vinden in het CMS. Onder de pagina-eigenschappen vind je een knop 'Ontwerp'. Dit is de toegang tot ProDesign voor de gebruiker.

Token opbouw

Er is veel in te stellen met ProDesign zoals kleuren, afbeeldingen en maten. Daarvoor moeten de gewenste ProDesign tokens in de HTML of CSS staan. Een ProDesign token ziet er in de basis als volgt uit:

##Type|Subtype:Token_naam{Waarde}

De beschikbare token-types

Hieronder vind je een lijst van de beschikbare token-types in ProDesign. De naam van het token dat je moet gebruiken in de template staat telkens tussen haakjes in de titel. Tenzij anders vermeld, kan het token zowel in HTML als CSS gebruikt worden.

Afbeelding (image)

Met dit token kan een afbeelding vervangen worden door een afbeelding uit Documenten.

Voorbeeld

#header { width: ##numeric:Header_breedte{900}px; height: ##numeric:Header_hoogte{130}px; background-image: url(##image:Header{##pathui##/img/header.png}); }

Output:

#header { width: 900px; height: 130px; background-image:url(##pathui##/img/header.png); }

Artikel (article)

Dit token kan enkel in HTML gebruikt worden. Met dit token kan de gebruiker een artikel selecteren. Aan dit token kan je geen standaard artikel meegeven. Eventueel wel 'platte tekst' die getoond wordt indien geen artikel is geselecteerd door de gebruiker. Zet deze tekst tussen de accolades. Dit token is handig voor artikelen die op (bijna) elke pagina voorkomen.

Voorbeeld

##article:Artikel_in_de_footer{}
##article:Footer_artikel_volledige_breedte{<div class="footer-bottom clearfix">**</div>}

De output:

<div>De HTML output van je 'Artikel in de footer'</div>
<div class="footer-bottom clearfix">
	<div>De HTML output van je 'Footer artikel volledige breedte'</div>
</div>

CSS (css)

Dit token kan enkel in HTML gebruikt worden. Het voegt een veld toe waar de gebruiker zelf CSS in kan schrijven. Dit veld wordt alleen gebruikt als er echt geen andere oplossing is, omdat het vaak lastig is om te achterhalen waarom allerlei CSS aanwezig is. In de meeste templates is dit token overbodig. Dit token kan door een gebruiker enkel ingesteld worden op site niveau. Niet op pagina niveau.

Voorbeeld

##css:CSS_van_de_gebruiker{}

Eénregelige tekst (singleline)

Wanneer de editor te veel mogelijkheden geeft aan de gebruiker, kun je in plaats daarvan dit token gebruiken.

Voorbeeld

##singleline:Pagina_subtitel{<h2>**</h2>}

Flash (flash)

Dit token wordt alleen gebruikt in de HTML, binnen de <body> van het document. Het wordt gebruikt om zelf een bestaande flash-animatie toe te voegen.

Kleur (color)

Dit token wordt gebruikt om een kleur aanpasbaar te maken. Dit token kan bijvoorbeeld gebruikt voor het aanpassen van een achtergrond kleur, tekst kleur of border kleur. Bij het invullen van een waarde in het ProDesign token moet een hexadecimale of een rgba (in geval van transparantie) waarde gebruikt worden.

Voorbeeld

html, body { background-color: ##color:Achtergrond{#fff}; }
html, body { background-color: ##color:Achtergrond{rgba(255,255,255,0.5)}; }

De output:

html, body { background-color: #fff; }
html, body { background-color: rgba(255,255,255,0.5); }

Lettertype (font)

Dit token wordt gebruikt om een ander lettertype te kiezen. Dit token kan alleen gebruikt worden in combinatie met de font-family eigenschap. Er is een beperkt aantal fonts beschikbaar.

Voorbeeld

p, h1, h2, h3 , h4 { font-family: ##font:Basis_font{Helvetica, Arial, sans-serif}; }

De output:

p, h1, h2, h3 , h4 { font-family: Helvetica, Arial, sans-serif; }

Link (url)

Dit token wordt alleen gebruikt in de HTML, binnen de <body> van het document. Het levert een 'eenregelig invoerveld' op en voert een controle uit op de invoer van de gebruiker. Je kunt hier een volledige of relatieve URL opgeven, net zoals de link bij een pagina in het CMS.

Voorbeeld

##url:Link_voor_Terug_knop{<a href="**" class="aa-back-button">Terug</a>}

Numeriek (numeric)

Met dit token wordt een numerieke waarde aangepast. Er kunnen dus bijvoorbeeld hoogtes, breedtes, paddings en border-sizes aangepast worden.

Rekenen met CSS waardes

Het numerieke ProDesign token heeft extra mogelijkheden; er kan ook mee gerekend worden. Hiermee kan er dus voor gezorgd worden dat als er een bepaalde waarde aangepast wordt een andere waarde ook automatisch wordt aangepast. Hiervoor moeten de variabelen bovenin het grid.css document staan. Deze variabelen kunnen dan op hun gebruikelijke plaats in ditzelfde document gebruikt worden.

Voorbeeld

@variables {
	myVar: ##numeric:Mijn_variabele{10};
	myColor: ##color:Mijn_kleur{##ff0000};
}
.myClass {
	width: var(myVar);
	height: calc(var(myVar)px + 5px); /* Eenheden gebruiken bij optellen of aftrekken */
	border: calc(var(myVar)px/2) solid var(myColor);
}

Bovenaan worden de variabele waardes gedefinieerd. Deze kunnen vervolgens door de gehele grid.css gebruikt worden. Om met deze waardes te rekenen gebruik je calc() waar tussen de haakjes de berekening wordt geplaatst. Er kunnen ook meerdere variabelen binnen deze berekening geplaatst worden. Let op dat je steeds dezelfde eenheden gebruikt bij het rekenen!

Optionele HTML (optionalon of optionaloff)

Dit token wordt alleen gebruikt in de HTML, binnen de <body> van het document. Hiermee kan ervoor gekozen worden om HTML wel of niet te tonen. Alle code tussen de haakjes wordt dan wel of niet gerenderd (geplaatst in de uiteindelijk getoonde HTML). Er zijn hier twee typen mogelijk:

  • optionalon: HTML staat standaard uit en kan optioneel aangezet worden
  • optionaloff: HTML staat standaard aan en kan optioneel uitgezet worden

Voorbeeld

##optionaloff:Extra_tekst{ <div class=’extra-text’>Deze tekst kan ook weg</div> }

Output:

<div class=’extra-text’>Deze tekst kan ook weg</div>

Slideshow (slideshow)

Dit token wordt alleen gebruikt in de HTML, binnen de <body> van het document. Het wordt gebruikt om een Flash-slideshow toe te voegen aan de template. Hier kunnen in ProDesign afbeeldingen gekozen worden. Het resultaat is hetzelfde als het plaatsen van het 'Flash slideshow' snippet (uit Documenten).

Tekst (text)

Dit token wordt alleen gebruikt in de HTML, binnen de <body> van het document. Het toont de inhoud van een eenvoudige versie van de tekst editor. Onderdelen als lijsten, linkjes, bold, italic en underlined kunnen hier gebruikt worden.

Voorbeeld

##text:Eigen_tekst{<p>Plaats <a href=’#hier’>hier</a> je <i>eigen</i> tekst!</p>}
##text:Mogelijke_tekst{<li>**</li>} (Tekst die hier geplaatst wordt komt op de plek van de sterretjes. De <li>’s blijven)

Subtypes

Sommige types hebben een subtype. Zo kun je bij een afbeelding ook de titel tonen door in de alt met de zelfde naam het subtype toe te voegen. Dit ziet er dan zo uit:

<img src=’##image:Logo{./img/logo.png}’ alt=’##image|title:Logo{Logo}’ />

Voor afbeeldingen (image) en de Flash-animatie (flash) zijn de volgende subtypes beschikbaar:

  • title: De titel zoals ingevoerd in Documenten
  • desc: De omschrijving van de afbeelding
  • keywords: De keywords die zijn ingevoerd bij de afbeelding

Token naam

Dit is de naam van het token dat de gebruiker zal zien als hij de waarde wil aanpassen. De naam van een token moet uniek zijn binnen de template en mag dus maximaal bij één ProDesign token gebruikt worden. Dit token mag wel op meerdere plekken in de HTML of CSS terug komen als de waarde op die plekken hetzelfde moet zijn.

Een token naam moet geschreven worden met underscores in plaats van spaties. Bijvoorbeeld: 'Logo_hoogte' zal voor de gebruiker te zien zijn als 'Logo hoogte'.

Waarde

Hier staat de standaard waarde als er niets in ProDesign is aangepast. Hier staat een voor het token logische waarde. Zo staat er bij text tekst, bij numeric getallen en bij image een pad naar de juiste afbeelding.

Gebruik van ProDesign

Het gebruiken van ProDesign kan heel handig zijn om de gebruiker extra mogelijkheden te geven waar hij anders geen toegang toe zou hebben. Het is belangrijk om er bij stil te staan wat de gevolgen zouden kunnen zijn bij het invullen van onverwachte informatie (bijvoorbeeld: veel grotere of kleinere getallen dan bedoeld).

Ook kan het zo zijn dat de gebruiker doordat hij de mogelijkheid heeft één onderdeel aan te kunnen passen ook andere dingen aan wil passen (omdat het anders snel niet meer bij elkaar klopt, of omdat hij geïnspireerd raakt).

Het aantal ProDesign velden kan snel oplopen. Daarom is het belangrijk goede en duidelijke namen te geven aan de verschillende velden. Als de naam van een veld in een later stadium veranderd wordt, gaan de in ProDesign ingestelde waardes verloren. Afhankelijk van het gebruik (op losse pagina’s of dezelfde template op meerdere websites) kan dit voor een hoop onverwachte effecten zorgen.

ProDesign in het CMS

ProDesign vind je onder de knop Ontwerp bij de pagina of categorie eigenschappen van pagina’s, categorieën of de website-root ('Site: jouwsite'). Hier vind je de ProDesign instellingen die van toepassing zijn op de geselecteerde template. De opties die je hier vindt zijn onafhankelijk van de gekozen variant.

Wij raden aan om ProDesign aanpassingen altijd zo hoog mogelijk in de site structuur toe te passen. Behalve dat het minder werk is om op deze manier opties in te stellen is het ook makkelijker terug te vinden waar (en waarom) iets is aangepast.

ProDesign opties vernieuwen

Het kan zijn dat in ProDesign nieuw toegevoegde opties niet getoond worden. Dan is het nodig om opnieuw te controleren op ProDesign waardes. Dat kan door middel van de link bovenaan de ProDesign pagina.

ProDesign opties vernieuwen
Hebt u meer vragen? Een aanvraag indienen

Opmerkingen

Mogelijk gemaakt door Zendesk