Every page on your website is a stack of blocks. A cover at the top, a search form below it, then a list of vacancies, a form at the bottom. Each of those blocks is a page element. You fill it once, give it the right look, and then place it on as many pages as you like.

Below you see a page with three page elements, in the order they appear on the page: a category overview (highlighted in orange), a simple job search form (grey) and a job list (green).

The goal of this article: you build your pages from elements you fill once and reuse everywhere, and with every change you know which pages it lands on.

After this article you can create or copy a page element, fill in the content per language, set the spacing, width and visibility, schedule an element, and find and clean up your elements. You find the screen via Menu → Content → Page elements. How you then place an element on a page is explained in Pages.

Before you start

• You need access to Content → Page elements. Which role can do what is explained in Users: giving access, choosing roles and logging in via your ATS. If you see the message This section is deactivated for your account at the top, your user cannot work here.
• At delivery, Booston already set up your pages and elements. So you will mostly be adjusting them. Start from a copy if you want to change something big, so the original stays intact. What you still fill in yourself after delivery is in Setting up after delivery.
• Images and videos in an element come from your file browser. How to put them there is in Images and files: uploading, optimising and reusing.
• The colours, fonts and default spacing of your whole site live in Settings → Design. A page element follows those settings unless you choose something else for that element.

How page elements work

Every page element is built on a template: a fixed shape such as Paragraph, Cover element, Jobs, Job form or FAQ. The template decides which fields you fill in and which design options you get. You cannot change the shape of a template yourself, but you can change the content and design of every element you build on it.

In the overview, each element is named after its template, followed by the description you give it. Pick a description that says what the element is for, such as "Application form open application". Six months from now you will still know which one you need.

One element can sit on several pages. Change it, and it changes on all of those pages at once. A page can also have its own version of an element, with content that only applies to that page. That version does not change along. Which pages use which version is shown at the bottom of the Content tab, see The Content tab.

There are two kinds of elements:

• Static: the Navigation bar, the Footer and Social media. These appear on every page of your site. You can edit and copy them, but not delete them.
• Dynamic: all other elements. You place these yourself on the pages where you want them.

A few dynamic elements fill themselves, such as Job description, Job attributes and Recruiter description. They show the details of the vacancy, recruiter, location, story or blog of the page they are on. What appears in Job attributes is therefore not set in the element but in your attribute values, see Managing attributes for jobs and candidates. In the overview you recognise these elements by a cube icon.

Something similar applies to the search form and the job list: which filters and search fields a visitor gets is mostly set outside the element. That is covered in Searching on your jobs page: the search bar, the filters and what you set yourself.

Creating a page element

1. Go to Content → Page elements and click Create at the top right.
2. On a multilingual site, switch on Version for every language the element should appear in.
3. At Template name, choose the kind of element.
4. Click Continue. The edit screen opens, with the tabs Content, Design and a tab with a wrench.
5. Enter a recognisable name at Description and fill in the content.
6. Click Save.

To copy an element that is already right, use the copy icon in the overview. You get a new element with the same content, design and settings. Handy for a second variant, such as an application form for open applications next to one for vacancies.

The Content tab

Every page element has three tabs: Content for the content, Design for the look and the wrench tab for publication and tracking. The Content tab consists of one fixed block and a few blocks that only appear when the template uses them.

Element preview

Every element has this block. Here you pick the Template version, switch the Version per language on or off, and fill in the Description. At the top right there is an eye icon per language that shows the element the way a visitor sees it.

A template often has more than one version: a different layout of the same kind of element. Below you see the same category overview in two versions.

When you switch versions, check the element again with the eye icon. Not every version uses the same fields.

Main Settings

These are the settings that apply to all languages at once. For an application form, for example, you choose which fields are required or visible, and at Application type which vacancy the form links the application to.

Main Content

This is the content itself: texts, buttons, images and videos. Every field appears once per language, with the language code after the label. That way you fill in the Dutch and English text side by side.

Follow up

Here you set what happens after a visitor does something, for example after sending a form. The visitor then goes to another page, to another page element or to a URL of your own, such as an external website.

Element usage and Template usage with custom content

At the bottom you see where the element is used, with a link per page to the page on your site and to the page in the admin:

• Element usage: the pages that use this element. A change here shows up on all of these pages.
• Template usage with custom content: the pages that use the same template with their own content. They do not change along. Edit them via the page itself, see Pages.

The Design tab

The Design tab decides how the element looks: the space around it, its width, which device it appears on and how it comes into view. The content from the Content tab does not change. The tab has two blocks: Page element, which is the same for every element, and Content, with the design options of this template.

Spacing: padding and margin

You enter distances in rem, such as 4rem. If a value sits between double brackets, such as [[page_el_margin__top]], the element follows the default spacing from your design. Change that default, and every element with that value moves along. Via Click here for design variables at the top of the block you see which variables exist.

Padding top and Padding bottom control the space inside the edges of the element. You notice it most on an element with its own background colour.

The grey background of the element grows with the padding. More padding means a bigger grey area.

Margin top and Margin bottom control the distance between two elements. Below, the margin is set to 0 rem, so one element runs straight into the black background of the next. Add a margin between them and you see the background colour of the page there.

Width: Element Width

With Element Width you decide how wide the element is. There are four options:

• Shrink: narrower than the normal column.
• In Column (Normal View): fits the column exactly, like the rest of your text.
• Expand: a little wider than the column.
• Full Page: fills the full width of the screen.

Below, the same element first on Shrink and then on Expand.

If you edit an element from a page and it sits in a side column there, you do not see this option. The side column decides the width there.

Visibility and animation

With Element visibility you choose which device the element appears on: Show on desktop and mobile, Show only on desktop or Show only on mobile. For example, show a wide table on desktop only and a short version on mobile only.

With Element Animation you give the element an animation as it comes into view, such as Fade In from Bottom or Slide In Left. The default is None. Pick one or two calm animations for your whole site. A different animation on every element distracts from your vacancies.

Content

The second block has its own options per template, such as background colours, text colours and button style. The same rule applies here: a value between double brackets comes from Settings → Design and changes along when you adjust your design.

The wrench tab: publication and datalayer

The third tab has no name, only a wrench. For day-to-day work you usually do not need it.

Publication

With Publication start date and Publication end date you schedule an element. It appears from the start date and stays up to and including the end date. Handy for an open day banner or a temporary campaign: you prepare it in advance and it disappears by itself. In the overview, the period is shown in the Publication date column, in orange when there is an end date.

Datalayer

An element with a form, such as an application, contact or newsletter form, has a Datalayer block. It holds a script that passes an event to Google Tag Manager when the form is sent, so you can see in Google Analytics, for example, how many visitors apply. You only need this for your own tracking. Which channel brings in your applicants is visible in Booston without any script, see Analytics: seeing which channel brings in your applicants.

Below the script you find the Available variables, such as {page_title} and {job_id}, and the Runtime variables, such as application_id. Click a variable to add it to the script. The default script per kind of element lives under Settings → Marketing & Data. If you change it here, the change only applies to this element. The green recycle icon resets it to the default.

Finding and managing your page elements

Under Content → Page elements all your elements sit in two lists: Static page elements overview and Dynamic page elements overview. The search bar at the top right searches by description and by template.

For each element you see:

You cannot delete an element that is still on a page. You then get the Element usage window with the pages it is on. Remove it there first, then delete it. Not sure whether an element is still needed somewhere? Switch it off with Status first.

Solving problems

My element does not show on the site

Check four things. Is Status on? Is today between the Publication start date and the Publication end date? Is Version switched on for the language you are viewing? And are you looking on the device that matches Element visibility? If all of that is right, check under Element usage whether the element really is on that page.

My change does not show on one page

That page uses its own version of the element. You find it under Template usage with custom content. Edit the element there, via the page.

I cannot delete an element

It is still on one or more pages, or it is a static element such as the navigation or the footer. Static elements always stay. Remove a dynamic element from the pages in the Element usage window first.

I cannot see my colleagues' elements

Your user is then set to see only its own content. That is set per user, see Users: giving access, choosing roles and logging in via your ATS.

Frequently asked questions

Can I fill an element differently in each language?

Yes, for the content. The fields under Main Content appear per language. Main Settings, the design and the publication dates apply to all languages at once.

Can I create a new kind of element myself?

No. You choose from the existing templates and give them your own content and design. Missing a shape for your site? Get in touch with us.

What is the difference between switching an element off and deleting it?

Switching it off with Status takes the element off your site, but it still exists and stays on the same pages. Switch it back on and everything is back. Deleting is only possible once the element is no longer on any page.

Need help?

Stuck, or not sure how best to build a page? Email support@booston.io or call 085 0044 215 and mention:

• the name of your environment;
• what you want to achieve;
• the message you see, if there is an error.

Would you rather go through the settings together? Book a free 30 minute online demo, and we will go through it with you. Job Done!