In dit artikel wordt beschreven wat ProDesign (ontwerpinstellingen) 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 gespecificeerde 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|Variant_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>}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. Standaard is het binnen CSS al mogelijk om met calc() en var() berekeningen uit te voeren zoals in dit voorbeeld:
:root {
--myVar: ##numeric:Mijn_variabele{10}px;
--myColor: ##color:Mijn_kleur{#ff0000};
}
.myClass {
width: var(--myVar);
height: calc(var(--myVar) + 5px); /* Eenheden gebruiken bij optellen of aftrekken */
border: calc(var(--myVar) / 2) solid var(--myColor);
}Maar ook op plaatsen waar deze CSS functies niet toegepast kunnen worden kun je met een numeriek token berekeningen uitvoeren door de berekening op de plek van het subtype te plaatsen. Zie onderstaand voorbeeld:
.myClass {
width: ##numeric:Logo_breedte{200}px;
background-image: url(http://www.example.com/logo.png?width=##numeric|*2:Logo_breedte{400});
}Let hierbij op dat de berekening niet wordt toegepast op de standaard waarde die tussen de accolades staat.
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>Keuze HTML (optionalselect)
Dit token wordt alleen gebruikt in de HTML, binnen de <body> van het document. Hiermee kan gekozen worden tussen het ene blok HTML of het andere. Alle code tussen de haakjes wordt dan wel of niet gerenderd (geplaatst in de uiteindelijk getoonde HTML). Elke variant naam zorgt voor een optie in het keuze menu in de instellingen. De eerste variant in het HTML wordt gebruikt als standaard.
Voorbeeld
##optionalselect:Mijn_opties|Optie_1{<div class=’options’>Deze tekst is keuze 1</div>}
##optionalselect:Mijn_opties|Optie_2{<div class=’options’>Deze tekst is keuze 2</div>}Output:
<div class=’options’>Deze tekst is keuze 1</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)Keuzemenu (selectbox)
Dit token wordt alleen gebruikt in de HTML, binnen de <body> van het document. De 1e optie wordt als standaard gebruikt en spaties zijn mogelijk. In onderstaand voorbeeld is "Blauwe kleur" dus de standaard waarde en body--blue is de classname die je in de code kunt gebruiken.
##select:Achtergrondkleur{"body--blue": "Blauwe kleur", "body--red": "Rood", "body--green": "Groene achtergrondkleur"}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.
Categoriseren
Standaard worden tokens getoond in een formulier getoond in secties per type. Dus, alle kleuren bij elkaar, alle numerieke velden bij elkaar, alle teksten bij elkaar, enz.
In de info.yml van de template kun je zorgen dat het formulier anders ingedeeld wordt zodat je alle tokens die bij elkaar horen ook bij elkaar kunt zetten. Dit maakt het terugvinden van alle mogelijkheden voor de gebruiker een stuk makkelijker.
Dat ziet er zo uit:
designTokenPresentation:
Header: [
Header_Top_Ribbon,
Header_Boxed,
Logo_Image,
Header_Padding,
Header_Background_Color,
]
Header_Ribbon: [
Header_Ribbon_Font_Color,
Header_Ribbon_Icon_Color,
Header_Ribbon_Background_Color,
]
Heading_1: [
Heading_1_Color,
Heading_1_Font_Size,
Heading_1_Font_Weight,
]Je maakt hier nieuwe secties, met een unieke naam (Header, Header_Ribbon, Heading_1). Daarin plaats je een array met de gewenste token namen in de gewenste volgorde. Deze moeten exact overeenkomen met de token namen die je in de template gebruikt hebt (hoofdlettergevoelig).
Het formulier in het CMS zal de ProDesign waarde nu in deze volgorde in deze secties weergeven. Alle tokennamen die niet in de info.yml staan zullen daaronder op de oude manier worden weergegeven in secties per type.
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.
