Page elements

Page elements are the building blocks of your page. You will need to add them to your page and manage the content within them to create your website or candidate journeys for your campaigns. On this page we’ve highlighted 3 different page elements that are used to make up the larger story:

The page elements used in order of appearance:

Category overview 1 page element (highlighted in orange)
Simple job search form page element (highlighted in grey)
Jobs list page element (highlighted in green)

In this article, we’ll show you how to create these page elements, style them to your liking and manage them so you can set up your pages.

Creating a page element
Setting up a page element: content tab
Setting up a page element: design tab
Setting up a page element: tab
Managing page elements
Conclusion

Creating a page element

Creating and managing page elements can be done in the page elements section. Go to your page elements:

Click content > page elements

You will go to the page elements overview page which will look something like this:

The page elements listed here are ready to be used when setting up your pages. More on managing your page elements in the ‘managing page elements’ chapter.

In this chapter, we’ll focus on creating a new page element, and subsequently, we will look at the different sections a page element consists of.

There are 2 ways to create a new page element:

Create a new page element - by clicking the create button top right
Copy an existing page element - by clicking the copy icon of an existing page element

Note that, no matter if you create a new page element or coping an existing one; the page element is always based on a ‘page element template’. The page element template is provided by Booston (and cannot be altered) and dictates the general structure of the page element. When setting up a page element this structure can be complemented to your liking with custom content, design, animations and so forth to suit your overall brand and website requirements. The page element template’s function is best illustrated by giving two examples.

In the example below a page element is created using the template ‘Category overview 1’:

Now the same page element template ‘Category overview 1’ is used to set up a second-page element:

Some minor differences can be noted: more slides are used, the second element is set to full page width, different color schemes, different animations are used and different content is inserted. Depending on the page element template the visual differences per page element can be made even more significant.

The advantage of creating your page elements before setting up your website is that it will speed up your creation process. For that reason; every Booston installation’s page element list is pre-setup with many variations often making the creation process of creating new page elements unnecessary.

In this example we are setting up a new page element with the page element template ‘Category overview 1’ as a base:

Go to: content > page elements > create > select your language or languages > select a page element template > click continue > start managing the page element (more on this in the following chapters)

Alternatively, you can copy an existing page element and alter the new version to your liking. The advantage of doing so is often a speedier process when the new page element needs to have commonalities with the old version, but with some alterations. If you want to copy a page element go to:

Content > page elements > click the copy icon of the page element you wish to duplicate > give the new page element a new (unique) name > (optionall) make your content changes > click save.

Setting up a page element: content tab

Every page element consists out of 3 tabs: a content tab, a design tab, and a settings tab.

The content tab can consist out of the following sections: The first section controls the general page element settings such as the used page element template, the languages, and the name (description) of the page element. Note that this section also contains an ‘eye’ icon per language which can be used to preview the page element:

The next sections are optional, meaning not every page element uses them.

The first optional content tab section is the ‘Main settings’. This section is used to set up the general settings for your page element. In this case, we are looking at an application form. Options that can be set here are: form settings and to which job the application form should be attached. Note that the options in this section are set for all languages.

The second optional section on the content tab is the ‘Main content’ settings. These range from images to text editors used to provide custom content to your page element. Note that the content in this section is set per language individually.

The third section on the content tab is the ‘follow-up’ section. Here you can set up follow-up actions such as click troughs to another page, page element, or a custom URL (e.g. linking an action to an external website).

Finally the element usage and usage with custom content sections display on which pages this page element is used or used with custom content. More on this in the page creation article.

Setting up a page element: design tab

The design tab manages the look & feel of the page element for everything outside of the images and text editor mark up as set on the content tab.

The design tab consists out of 2 sections: the general page element design settings and the design content section.

The settings in the general section are the same for every page element, we discuss the attributes found here in more detail.

The first settings are the margins and paddings of the page element.

Padding controls the space at the edges of the page element which can increase the look when for instance a background color is used. An example of padding in a page element:

respectively. Note that the grey background set to the page element will increase as well.

Margin controls the ‘gap’ between 2 page elements. Note that in this example the margin is set to 0 (rem) and therefore directly merges over into the black background of the follow-up page element. When you add margin a gap will appear and the underlying background color of the page will be visible in that case.

An example of 2 page elements, one with a grey background and one with a black background, using 0 (rem) for their top and bottom margins:

The element width setting will control the width of the page element as used on the page. There are 4 settings that will determine how they will behave in the page section they are placed in (more on this in the pages article):

Shrink – will make it smaller
In column – will make it fit
Expand – will make it a bit bigger
Full page – will make it go the full width of the page

An example of a page element set to shrink:

An example of the same page element set to expand:

Finally, different animations can be set using the ‘element animation’ attribute. Be sure to experiment with this making your website feel more dynamic.

Setting up a page element: settings tab

Advanced users should have a look at the settings tab as well, for novice users this section can be skipped in most use cases. The settings tab contains a schedule option, for instance showing a page element when a certain date and time is reached.

Another option for some page elements is the widget data section.

The widget data section can be used to fire data layers when a page element follow-up action (check the content tab chapter in this article for more information) is triggered. In the case of an application form this could mean triggering data layers, something marketers might love to ‘feed’ their Google Analytics, Google Tag Manager, or other 3^rd party apps. More on this in the Marketing & data article.

Managing page elements

Now that we have created a page element by creating a new one, or copying an existing one and setting up said page element with content, design elements, and other settings, we can have a look at what we have.

To check all your page elements go to:

Content > page elements

Note that all page elements have a title that consists of the page element template name and the unique custom description given by you creating your page element.

Per language, an eye icon is visible with which you can quickly check how the page element looks. The edit button can be used to edit the page element’s content, design, and settings tab. The copy button can be used to copy an existing page element. The delete button can be used to delete a page element completely. Note that you cannot delete a page element used on a page, in this case you are notified on which pages the page element is used and you will need to detach the page element from those pages before being able to delete it.

Conclusion

Now that you are ready to use your page elements you can start using them on your pages. Be sure to read the pages article for all you need to know on managing pages in the Booston platform.