Creating content (OSB)

Introduction

Your website can consist of multiple pages, all able to be structured entirely according to your wishes. The layout of these pages is made up of sections, which are made up columns. You can think of a section as a container for the columns. You can create multiple sections on a page, and these sections will be placed below eachother. For content that you want placed side by side, you can use columns. each section can contain a total of 12 columns. To help you with this, you can choose certain layouts. These are shown visually to give you an idea of what things will look like.

Site → Pages → Sections → Column(s) → Widget(s)

Good to know: once you start working in the settings (and in many other places), [i] icons will appear that will help you through the process, explaining what everything does.

Creating a page

To create a new page, go to the “Pages” section of the CMS and click on either the “Plus icon” (1) or on the “Add new page +” button (2)

When you have clicked either of those buttons, you will get a popup modal asking you for a page title:

1. The page title, you can always change it later trough page settings

2. The page URL, it will generated automatically, but you can change it if you want to

3. The “Add page” button, it will create the page, and redirect you to it.

Sorting & defining the website navigation

You website will have a navigation menu in the top right, making it possible for users to navigate your website easily. By dragging and dropping pages, you can make up the structure of this navigation menu.

Just click, hold and drag any page to add it as a “child” page to another, or change the order of pages.

Special pages & quick actions

1. Homepage, a special page, as it will always exist, and be the default page people land when they enter your URL. You can’t remove it, neither unpublish it.

2. Vacancies, another special one, as it will always exist, here we expect you to have the your main vacancies listing.

3. The quick actions for pages

   1. “Trashcan icon”  > Deleting this page will remove it and it’s contents indefinitely

   2. “Plus icon” > Add a new page below this one

   3. “Eye icon” > Toggle this page’s publication by simply clicking it.

Page structure

When you open a page, the first thing you see is it’s structure, you will get a quick overview of what sections, columns & widgets are on this page. You are able to change the order of sections & widgets, add new sections & widgets and delete sections & widgets.

Page settings

When you switch to the “Settings” tab you are able to change things about the page, like title, url, navigation behaviour and seo related settings

1. Title (The page title)

2. URL (The url it can be visited on)

3. Use an external URL (You can use another URL for this page, redirect visitors to another website)

4. Hide in navigation (The page does not show up in your navigation bar)

5. Block from indexing (Block search-engines like Google from indexing this page)

6. Meta description (The short description of a page for search-engine results)

7. Meta keywords (Comma separated keywords, telling search-engines what this page is about)

8. OG Image (an 1200×629 image that will be shown when sharing this page)

Section options

When you are in the editor of a page, you can add a section by clicking the large ‘Add New Section’ button or by clicking the plus (+) icon above an existing section. When adding a section, you can choose from different layouts. Each layout represents a specific column structure. Depending on how you want to organize your content, choose the desired layout. For example, if you want to place two texts evenly side by side, you would choose a 6/6 structure.

When creating a section, you can choose from the following section layouts:

Section configuration

Each section can be configured to display differently. How much space inside or outside should there be? What background & text color would you like, how should multiple columns align horizontally?

You can edit the configuration of a section by clicking the “cog wheel” icon in the page structure:

If you click that icon, you will go to this sections configuration, and that will look something like this.

• Fullwidth (disabled by default)

  • Disabled: The column(s) of this section are contained within a invisible container

  • Enabled: The column(s) of this section will take up to full width of the page

• Center content (disabled by default)

  • Disabled: The columns are horizontally aligned to top top of the section

  • Enabled: The columns are horizontally centered based upon each others width

• Background color: The color of the section background, make sure to contrast with the text

• Text color: The color of the text within the section, make sure to contrast with the background

• Space outside: The amount of space a section will make both above and below it

• Space inside: The amount of space a section will make within it self (top and bottom)

Widgets

When you are going to add a widget to the column of a section, you will be shown this popup. And you pick which widget you want.

Have a look at the widgets page to learn about these widgets, how they work and what is possible. Read more

The text editor

Some of the widgets allow you to write formatted content, using a so called: “WYSIWYG Editor (What you see is what you get editor)“

This editor allows you to write texts, and use common format options for the web. It also contains the OTYS Ai Assistant, helping you (re)write content and translate.

The basics, what are all the options

Below a brief explanation of the different options

1. Headings: Headings helps you make more readable content, and improves SEO

2. Font style: Highlight text by applying Bold, Italic or Underlined style

3. Lists: Make lists with our without numbering

4. Quote: Adds a background to a quote

5. Text align: Options are, left, center, right and stretch

6. Increase/Decrease the indentation of paragraphs, or lists

7. Remove format: Sometimes when you copy/past text it has unwanted formatting

8. Add a link/reference to another page, also allows you to make a button. A link can exist in a running text, but if you wish to turn it into a button, please make sure you’ve pressed enter between your text and your button.

9. The AI Assistant, check the guide below on how it works.

The Ai Assistant

The OTYS Ai Assistant, as you might already know it in OTYS Go! helps you write, rewrite, format, translate and more.

When there is already text within the text editor, the prompts will apply upon that text, when there is no text yet, you can ask the assistant to write some for you.

1. The ON/OFF toggle: Open or close the assistant

2. Prompt input: Write your own prompts to tell the assistant what to do.

3. Monthly token usage: Track how many tokens you have used by hovering on the percentage

4. Send: When you are done writing a prompt, send it to the assistant.

5. Quick actions: These suggestions are made contextually and help you perform actions without writing your own prompt

Device specific settings

Some widgets have special settings/inputs that allow you to use a different value on Desktop, Tablet & Phone.

When you switch between devices for the preview mode, some settings/inputs will also change, you can recognize them by having the same device icon as you are currently previewing.

Below an example of the “Aspect ratio” setting in the “Header Shapes” widget, as you might want to have another aspect ratio on different screen sizes

1. The device switch

2. The input, with that extra icon matching the current preview device

Translate content

You might want to have a so called “Multilingual” website, so users from different nationalities can visit your website and read content in their own language.

In the configuration part of the CMS, you can pick which languages you want to publish on your website, the list of possible languages is based upon your OTYS Go! system. If you want more languages here you will have to contact OTYS support, keep in mind that we copy the content languages you have in Go! and that you will also need to have jobs published and written in those languages.

Using the flag on the right side in the topbar of the CMS, you can switch between languages, and translate the current page in another language. Note that pages will have the same layout, structure and widgets, translating a page is only translation certain fields in widgets. So it is not possible to have different widgets on the same page in another language. To fully understand how it works, read the example situation below:

The concept explained with an example situation:
Your OTYS Go! environment’s default language is English, and you have created a nice website in the English language, and didn’t worry about supporting multiple languages yet. Now you are ready to translate, so you are going to switch to the Dutch environment, as you will then see the English page is fully there and all the values are automatically there, and you can just replace them with a Dutch translation, and save.

To make translation easier, we have decided which fields can be translated and which can’t. You can recognize them by this icon: (1)
As you can see below, we decided that for this Employee overview widget, you probably only want to translate the widget title and the employee’s role title. Other fields like phone number, name, linkedin and mail will stay the same in all languages.

Keep in mind that the AI Assistant, can easily translate content for you!

Media gallery

Every website will have images & videos. Using the media picker you can organize these files, and more! The gallery will automaticly open when you click an image.

Below an impression of what the media gallery looks like

1. The folder menu, click on a folder to go there

2. The “Plus icon” will allow you to create a new folder

3. Upload files by clicking this button, or drag them into the Media gallery

4. If you have selected an media item, you can use this button to select it and use it.

5. The “X icon” will close the gallery, and discard the selection

The item context menu

When you right click on one of the uploaded items, or click the “Dots … icon” on a item, you can open the context menu, and make the following actions

1. Deleting an item, this will definitely remove the item. This is only possible when it’s not used anywhere anymore

2. Open, this will go to the detail of the media item, where you can change its name, alt-text, focal-point, and see where it is used.

3. Move to folder, if you want to better organize, and thus move this item to another folder that’s possible to

Updating an existing media item

If you have successfully uploaded an image or video, you can open it’s details by clicking on the name of the item in the list.

In this detail you can do various changes, below they are explained:

1. The item’s name, this wont appear on your website, but can be usefull for organizing your media items

2. The Alternative text, the “ALT” text, this will be shown to the user when the resource can’t be loaded on your website, and is used by search engines to understand what the content is about

3. Create date, when this item was first uploaded in the CMS

4. Last updated, when you make changes, this date changes

5. Connections, see exactly where this item is used, this can be usefull if you want to remove it, so you know what is effected

6. Open in new tab, have a quick view of the resource in a new browser tab

7. A very useful way of telling our system what is the  main “subject” in the item, so we can make sure to keep it in view when the item is being cropped. Read more below

8. The save changes button, saving any mutations you may have done

Media item “Focal point”

A common frustration is having to upload the same image or video in different “formats” on your website. So it can be used in multiple spots, and in multiple aspect ratios
We can partially solve this, by setting this “Focal point”, and telling our system what is the subject of the image or video. We will then make sure that if we are cropping parts of the item, your subject will be in view.

To help explain this concept, we’ll expain it with an example of this video of Amsterdam. This video is much ‘taller’ than the space we have for it. The video has an aspect ratio of 16:9, but in the header it will be reduced to be 7:1.

As you can see the focal point, is by default set to the center of the video, cropping it to focus there. Now when we use it in a Header with an aspect ratio of 7/1. The top and bottom will be cut off. However, in this case I think the top part of the video is much nicer then the center, and I want the focus to be on the church in the background. So let’s, change the “Focal point” / “Subject” to the top. You can do this in the ‘media’ section by moving the blue dot on the video.

Now when we load it in again, and the aspect ration cuts off a large part of the video, you can see that the focal point has moved where we crop the video on you page. This way, you can easily add video headers without needing to go in and crop in another software, or mess around with the video settings.

Troubleshooting

If you have any questions that can not be solved using the helpdesk, the site builder tour, or the individual information icons, please reach out to us by opening a support ticket.