Client Guide

BouMatic B·U·T
Extra info

Content Builder

Our Content Builder was created to give you some creative freedom to layout your websites pages without needing any technical knowledge. This allows you to add some variety in your website instead of being stuck with the same old templates. It can be a challenge to hammer your information into the same template over and over again. Sometimes your information just needs to be structured differently or needs to stand out a bit more. Now, with our Content Builder, you have that power yourself!

We created our Content Builder in such a way that you can add a whole range of assets, create a layout with them that suits you best without the fear of breaking anything on the page!

The Content Builder consists of a variety "building blocks" which you can order by drag and drop, position them on the page and nest in each other. Using this together with the Live Preview option makes for a wonderful tool to layout your own page!

The building blocks you can start with are:

  • Text
  • Image
  • Accordion
  • Blockquote
  • Video
  • Full width section
  • Multilingual files

To add a Text building block for example, click + Text. To change the order of a building block, drag and drop the block by dragging its handle 

Clicking the gear icon to the left of it, you can collapse the block for easier handling (especially when there are multiple building blocks), add a new block before the current one, enable/disable the block or delete it.

Text

A text building block has the following fields:

  • Header: A title that is put above the text.
  • Subheader: A sub title that is put between the title and the text.
  • Body (required): The text itself in paragraphs. You can use some layout elements such as bold and italic text, (un)ordered lists, tables, links, super- and subscript and text alignment.
  • Width: This defines how wide a block must be. All blocks float next to each other, so if you want to have two blocks side by side with both blocks taking up half the width of the page, you would set both blocks' width to half. Possible values are full, half, one third and two thirds.

Image

A image building block has the following fields:

  • Image (required): Obvious :)
  • Image caption: A caption that will be shown underneath the image.
  • Image position: Vertically alignment of the image, top, middle or bottom.
  • Width: This defines how wide a block must be. All blocks float next to each other, so if you want to have two blocks side by side with both blocks taking up half the width of the page, you would set both blocks' width to half. Possible values are full, half, one third and two thirds.

Accordion

An accordion is a vertically stacked list of items. Each item can be "expanded" to reveal the content associated with that item.

When adding an accordion to the page, you will first need to set the

  • Accordion title: This is a title set above the stacked items.
  • Width: This defines how wide a block must be. All blocks float next to each other, so if you want to have two blocks side by side with both blocks taking up half the width of the page, you would set both blocks' width to half. Possible values are full, half, one third and two thirds.

Than you can click + Accordion item to add multiple items to the accordion. Each item has the following fields:

  • Header (required): This is the title of the stacked item and will be clicked by the website user to view the underlying content.
  • Body (required): The textual content in paragraphs. You can use some layout elements such as bold and italic text, (un)ordered lists, tables, links, super- and subscript and text alignment.

To change the order of a stacked item, drag and drop the item by dragging its handle 

Clicking the gear icon to the left of it, you can collapse the item for easier handling, add a new item before the current one, enable/disable the item or delete it.

Blockquote

This allows to show a quote from a customer for example. It is visually different than any other text to stand out more on the page.

  • Quote: The quote itself.
  • Quoter: Who originally said or wrote these words.
  • Width: This defines how wide a block must be. All blocks float next to each other, so if you want to have two blocks side by side with both blocks taking up half the width of the page, you would set both blocks' width to half. Possible values are full, half, one third and two thirds.

Video

Videos need to be uploaded to the BouMatic Vimeo account first. This account is linked to the CMS so you can only select videos from that specific account. Videos need to be public or private with the boumatic.com and boumaticrobotics.com domains whitelisted.

Just click Browse videos... and a pop-up will open showing all videos available on the BouMatic Vimeo account. You can also copy/paste the Vimeo video URL in the input field.

Full width section

This is a special building block because it does not do anything by itself. It's a container for a limited selection of other building blocks. As you will notice, all building blocks, except video, are contained within the frame of the website, even when you set their width field to full. This means that on larger screens with a resolution larger than 1200px wide the website stops horizontally expanding and light gray bars to the left and right appear. This is an intentional design choice.

However, if you have information you would like to emphasize or you'd just like to make your page a bit more dynamic, the full width section is your magic trick! It will expand itself to the full browser width to catch the attention of the website visitor while still keeping the building blocks inline with the rest of the content.

The following options are available that have an influence on the Full width building block itself:

  • Image: This will be used as a background image for the block.
  • Background color: If no image is set, this color will be used instead. Colors are limited to the BouMatic color scheme.

The Full width section can contain a limited selection of other building blocks with a maximum of 2. This is done to avoid having a cluttered page. This building block is meant to add some variety or emphasize information so should be used with care!

Building blocks allowed within a Full width section are:

  • Text
  • Accordion
  • Blockquote
  • Callout

The Callout building block is unique for a Full width section and is used for a call to action, it has the following fields:

  • Header (required): The callout of the building block.
  • Subheader: A secondary callout text.
  • Body: Some more informative text. You can use some layout elements such as bold and italic text, (un)ordered lists, tables, links, super- and subscript and text alignment.
  • Width: This defines how wide a block must be. All blocks float next to each other, so if you want to have two blocks side by side with both blocks taking up half the width of the page, you would set both blocks' width to half. Possible values are full, half, one third and two thirds.

You can also add a link button to a Callout building block. It can be an internal link (to a page on the website) or an external link (to another website). One of those two can be added by clicking the + Internal link or + External link button. Both have 2 fields:

  • Button label: The label for the button.
  • Internal or external link: The link to the page or website desired. For an internal link you can select the correct page from a pop-up. For an external link you will have to manually enter the correct website URL you want to link to.

Multilingual files

The Multilingual files block allows you to add a list of assets with various translations. Let's say you have 3 PDF brochures translated into 6 languages each, that makes 18 PDF files you want to upload to the website, you can do this with this building block.

The Multilingual files block works in such a way that there will only be 3 files shown in the list, but when a user clicks a file he'll see a pop-up with all available translations for that file ready for download.

The block itself has only one field and one extra building block:

  • Width: This defines how wide a block must be. All blocks float next to each other, so if you want to have two blocks side by side with both blocks taking up half the width of the page, you would set both blocks' width to half. Possible values are full, half, one third and two thirds.

Click + File availability list to add a new file group (which will contain 1 brochure translated into 6 languages so 6 files in total). 

  • File label (required): This is the name of the group of files that a website visitor will see.

Click + Add a row to add a file translation. The following fields will become available to you:

  • Add an asset (required): This is the actual asset you would like to upload to the website.
  • File language (required): This is the language the asset is translated to. Attention: languages need to be unique for every single file group.

Add every translated asset of the same file by adding more rows. Add a new File availability list for the other brochures. So you'll have 3 file groups with 6 rows each.