Elke pagina op je website is een stapel blokken. Bovenaan een cover, daaronder een zoekformulier, dan een lijst met vacatures, onderaan een formulier. Elk van die blokken is een pagina-element. Je vult het één keer, je geeft het de juiste vorm en daarna zet je het op zoveel pagina's als je wil.
Hieronder zie je een pagina met drie pagina-elementen, in de volgorde waarin ze op de pagina staan: een categorie-overzicht (oranje gemarkeerd), een eenvoudig zoekformulier voor vacatures (grijs) en een vacaturelijst (groen).
Het einddoel van dit artikel: je bouwt je pagina's uit elementen die je één keer vult en overal hergebruikt, en je weet bij elke wijziging op welke pagina's die terechtkomt.
Na dit artikel kun je een pagina-element maken of kopiëren, de inhoud per taal invullen, de ruimte, breedte en zichtbaarheid instellen, een element inplannen en je elementen terugvinden en opruimen. Je vindt het scherm via Menu → Content → Page elements. Hoe je een element vervolgens op een pagina zet, staat in Pagina's.
Voordat je begint
- Je hebt toegang nodig tot Content → Page elements. Welke rol wat mag, staat in Users: toegang geven, rollen kiezen en inloggen via je ATS. Zie je bovenaan de melding This section is deactivated for your account, dan kun je hier met jouw gebruiker niet werken.
- Bij de oplevering heeft Booston je pagina's en elementen al ingericht. Je past ze dus vooral aan. Begin bij een kopie als je iets groots wil omgooien, dan blijft het origineel staan. Wat je na de oplevering zelf nog invult, staat in Zelf inrichten na oplevering.
- Afbeeldingen en video's in een element komen uit je file browser. Hoe je ze daar zet, lees je in Afbeeldingen en bestanden: uploaden, optimaliseren en hergebruiken.
- De kleuren, lettertypes en standaardafstanden van je hele site staan in Settings → Design. Een pagina-element volgt die instellingen, tenzij je per element iets anders kiest.
Hoe pagina-elementen werken
Elk pagina-element is gemaakt op een template: een vaste vorm zoals Paragraph, Cover element, Jobs, Job form of FAQ. Het template bepaalt welke velden je invult en welke designopties je krijgt. Je kunt de vorm van een template niet zelf veranderen, wel de inhoud en het design van elk element dat je erop bouwt.
In het overzicht heet elk element naar zijn template, gevolgd door de beschrijving die je zelf geeft. Kies een beschrijving die zegt waar het element voor is, zoals "Sollicitatieformulier open sollicitatie". Over een half jaar weet je dan nog welke je moet hebben.
Eén element kan op meerdere pagina's staan. Pas je het aan, dan verandert het op al die pagina's tegelijk. Een pagina kan ook een eigen versie van een element hebben, met inhoud die alleen voor die pagina geldt. Die versie verandert niet mee. Welke pagina's welke versie gebruiken, zie je onderaan het tabblad Content, zie Het tabblad Content.
Er zijn twee soorten elementen:
- Static: de Navigation bar, de Footer en Social media. Die staan op elke pagina van je site. Je kunt ze bewerken en kopiëren, maar niet verwijderen.
- Dynamic: alle andere elementen. Die zet je zelf op de pagina's waar je ze wil hebben.
Een paar dynamische elementen vullen zichzelf, zoals Job description, Job attributes en Recruiter description. Ze tonen de gegevens van de vacature, recruiter, locatie, het verhaal of de blog van de pagina waarop ze staan. Wat er in Job attributes verschijnt, regel je dus niet in het element maar bij je attribuutwaarden, zie Attributen beheren voor vacatures en kandidaten. In het overzicht herken je deze elementen aan een kubusicoon.
Voor het zoekformulier en de vacaturelijst geldt iets vergelijkbaars: welke filters en zoekvelden een bezoeker krijgt, stel je grotendeels buiten het element in. Dat staat in Zoeken op je vacaturepagina: de zoekbalk, de filters en wat je zelf instelt.
Een pagina-element maken
- Ga naar Content → Page elements en klik rechtsboven op Create.
- Zet bij een meertalige site de schakelaar Version aan voor elke taal waarin het element moet verschijnen.
- Kies bij Template name het soort element.
- Klik op Continue. Het bewerkscherm opent, met de tabbladen Content, Design en een tabblad met een moersleutel.
- Vul bij Description een herkenbare naam in en vul de inhoud in.
- Klik op Save.
Een element dat al goed staat, kopieer je met het kopieericoon in het overzicht. Je krijgt dan een nieuw element met dezelfde inhoud, hetzelfde design en dezelfde instellingen. Handig voor een tweede variant, zoals een sollicitatieformulier voor open sollicitaties naast een voor vacatures.
Het tabblad Content
Elk pagina-element heeft drie tabbladen: Content voor de inhoud, Design voor de vormgeving en het tabblad met de moersleutel voor de publicatie en meting. Het tabblad Content bestaat uit een vast blok en een paar blokken die alleen verschijnen als het template ze gebruikt.
Element preview
Dit blok heeft elk element. Je kiest hier de Template version, zet per taal de Version aan of uit en vult de Description in. Rechtsboven staat per taal een oogicoon waarmee je het element bekijkt zoals een bezoeker het ziet.
Een template heeft vaak meer dan één versie: een andere opbouw van hetzelfde soort element. Hieronder hetzelfde categorie-overzicht in twee versies.
Wissel je van versie, controleer dan het element opnieuw met het oogicoon. Niet elke versie gebruikt dezelfde velden.
Main Settings
Hier staan de instellingen die voor alle talen tegelijk gelden. Bij een sollicitatieformulier kies je bijvoorbeeld welke velden verplicht of zichtbaar zijn, en bij Application type aan welke vacature het formulier de sollicitatie koppelt.
Main Content
Dit is de inhoud zelf: teksten, knoppen, afbeeldingen en video's. Elk veld staat er per taal, met de taalcode achter het label. Zo vul je de Nederlandse en Engelse tekst naast elkaar in.
Follow up
Hier stel je in wat er gebeurt nadat een bezoeker iets doet, bijvoorbeeld na het versturen van een formulier. De bezoeker gaat dan naar een andere pagina, naar een ander pagina-element of naar een eigen url, zoals een externe website.
Element usage en Template usage with custom content
Onderaan zie je waar het element gebruikt wordt, met per pagina een link naar de pagina op je site en naar de pagina in de admin:
- Element usage: de pagina's die dit element gebruiken. Een wijziging hier zie je op al deze pagina's terug.
- Template usage with custom content: de pagina's die hetzelfde template gebruiken met eigen inhoud. Die veranderen niet mee. Pas ze aan via de pagina zelf, zie Pagina's.
Het tabblad Design
Het tabblad Design bepaalt hoe het element eruitziet: de ruimte eromheen, de breedte, op welk apparaat het verschijnt en hoe het in beeld komt. De inhoud uit het tabblad Content verandert er niet door. Het tabblad heeft twee blokken: Page element, dat bij elk element hetzelfde is, en Content, met de designopties van dit template.
Ruimte: padding en margin
Afstanden vul je in rem in, zoals 4rem. Staat er een waarde tussen dubbele haken, zoals [[page_el_margin__top]], dan volgt het element de standaardafstand uit je design. Pas je die standaard aan, dan schuiven alle elementen met die waarde mee. Via Click here for design variables bovenaan het blok zie je welke variabelen er zijn.
Padding top en Padding bottom regelen de ruimte binnen de randen van het element. Dat zie je vooral bij een element met een eigen achtergrondkleur.
De grijze achtergrond van het element groeit mee met de padding. Meer padding betekent dus een groter grijs vlak.
Margin top en Margin bottom regelen de afstand tussen twee elementen. Hieronder staat de marge op 0 rem, waardoor het ene element direct overgaat in de zwarte achtergrond van het volgende. Zet je er marge tussen, dan zie je daar de achtergrondkleur van de pagina.
Breedte: Element Width
Met Element Width bepaal je hoe breed het element is. Er zijn vier opties:
- Shrink: smaller dan de normale kolom.
- In Column (Normal View): past precies in de kolom, zoals de rest van je tekst.
- Expand: iets breder dan de kolom.
- Full Page: vult de hele breedte van het scherm.
Hieronder hetzelfde element eerst op Shrink en daarna op Expand.
Bewerk je een element vanuit een pagina en staat het daar in een zijkolom, dan zie je deze keuze niet. De zijkolom bepaalt daar de breedte.
Zichtbaarheid en animatie
Met Element visibility kies je op welk apparaat het element verschijnt: Show on desktop and mobile, Show only on desktop of Show only on mobile. Zo zet je bijvoorbeeld een brede tabel alleen op desktop en een korte versie alleen op mobiel.
Met Element Animation geef je het element een animatie waarmee het in beeld komt, zoals Fade In from Bottom of Slide In Left. Standaard staat hij op None. Kies voor je hele site één of twee rustige animaties. Elk element een andere animatie leidt af van je vacatures.
Content
Het tweede blok heeft per template eigen opties, zoals achtergrondkleuren, tekstkleuren en de stijl van knoppen. Ook hier geldt: een waarde tussen dubbele haken komt uit Settings → Design en verandert mee als je je design aanpast.
Het tabblad met de moersleutel: publicatie en datalayer
Het derde tabblad heeft geen naam, alleen een moersleutel. Voor het dagelijkse werk heb je het meestal niet nodig.
Publication
Met Publication start date en Publication end date plan je een element in. Het verschijnt vanaf de startdatum en blijft staan tot en met de einddatum. Handig voor een banner voor een open dag of een tijdelijke actie: je zet hem van tevoren klaar en hij verdwijnt vanzelf. In het overzicht staat de periode in de kolom Publication date, in oranje als er een einddatum is.
Datalayer
Een element met een formulier, zoals een sollicitatie-, contact- of nieuwsbriefformulier, heeft een blok Datalayer. Daarin staat een script dat bij het versturen van het formulier een gebeurtenis doorgeeft aan Google Tag Manager, zodat je in bijvoorbeeld Google Analytics ziet hoeveel bezoekers solliciteren. Dit heb je alleen nodig voor je eigen metingen. Welk kanaal je sollicitanten oplevert, zie je ook zonder script in Booston, zie Analytics: zien welk kanaal je sollicitanten oplevert.
Onder het script staan de Available variables, zoals {page_title} en {job_id}, en de Runtime variables, zoals application_id. Klik op een variabele om hem aan het script toe te voegen. Het standaardscript per soort element staat onder Settings → Marketing & Data. Pas je het hier aan, dan geldt dat alleen voor dit element. Met het groene recycle-icoon zet je het terug naar de standaard.
Je pagina-elementen terugvinden en beheren
Onder Content → Page elements staan al je elementen in twee lijsten: Static page elements overview en Dynamic page elements overview. Met de zoekbalk rechtsboven zoek je op beschrijving en op template.
Per element zie je:
| Kolom | Wat het je vertelt |
|---|---|
| Status | Schakelaar om het element aan of uit te zetten. Staat hij uit, dan verdwijnt het element van elke pagina waar het op staat. |
| Title and description | De naam van het template, gevolgd door je eigen beschrijving. Klik erop om het element te bewerken. |
| Author | Wie het element heeft gemaakt. |
| Template | Het template waarop het element gebouwd is. |
| Publication date | De startdatum, en de einddatum als die er is. |
| Visibility | Op welk apparaat het element verschijnt: desktop, mobiel of allebei. |
| Per taal | Een oogicoon voor een snel voorbeeld in die taal. |
| Manage | Bewerken, kopiëren en, bij dynamische elementen, verwijderen met de prullenbak. |
Een element dat nog op een pagina staat, kun je niet verwijderen. Je krijgt dan het venster Element usage met de pagina's waar het op staat. Haal het daar eerst weg en verwijder het daarna. Twijfel je of een element nog ergens nodig is, zet het dan eerst uit met Status.
Problemen oplossen
Mijn element staat niet op de site
Loop vier dingen na. Staat Status aan? Ligt vandaag tussen de Publication start date en de Publication end date? Staat de Version aan voor de taal die je bekijkt? En kijk je op het apparaat dat bij Element visibility past? Klopt dat allemaal, controleer dan onder Element usage of het element echt op die pagina staat.
Mijn wijziging is op één pagina niet te zien
Die pagina gebruikt een eigen versie van het element. Je vindt hem onder Template usage with custom content. Pas het element daar via de pagina aan.
Ik kan een element niet verwijderen
Het staat nog op een of meer pagina's, of het is een statisch element zoals de navigatie of de footer. Statische elementen blijven altijd bestaan. Een dynamisch element haal je eerst van de pagina's in het venster Element usage.
Ik zie de elementen van mijn collega's niet
Dan is jouw gebruiker ingesteld om alleen eigen content te zien. Dat wordt per gebruiker geregeld, zie Users: toegang geven, rollen kiezen en inloggen via je ATS.
Veelgestelde vragen
Kan ik een element in elke taal anders vullen?
Ja, voor de inhoud. De velden onder Main Content staan er per taal. Main Settings, het design en de publicatiedata gelden voor alle talen tegelijk.
Kan ik zelf een nieuw soort element maken?
Nee. Je kiest uit de templates die er zijn en geeft die je eigen inhoud en design. Mis je een vorm voor je site, neem dan contact met ons op.
Wat is het verschil tussen een element uitzetten en verwijderen?
Uitzetten met Status haalt het element van je site, maar het blijft bestaan en staat nog op dezelfde pagina's. Zet je het weer aan, dan staat alles terug. Verwijderen kan pas als het element nergens meer op staat.
Hulp nodig?
Kom je er niet uit, of twijfel je hoe je een pagina het best opbouwt? Mail support@booston.io of bel 085 0044 215 en vermeld:
- de naam van je omgeving;
- wat je wil bereiken;
- de melding die je ziet, als er een foutmelding is.
Wil je liever samen door de instellingen lopen? Boek een gratis online demo van 30 minuten, dan lopen we het samen door. Job Done!
