Translating with AI

Translate entire website

With the bulk action 'Translate website', you can translate an entire website at once. This process takes place in two phases: preparation and execution. During the preparation phase, all translations are done using AI. The translations of meta titles and meta descriptions can be viewed per page. You cannot preview the translations of the pages themselves. Therefore, it is recommended to make a backup of the site before translating so that you can easily restore it if things are not to your liking. You can make backups in the website overview under the 'Backup' tab.

Step 1: Within your website, click on the icon with the three dots and then on 'Translate website'.
Contextmenu website vertalen

Step 2: A pop-in will now appear where you can start the translation process.
Popin vertaling starten

Step 3: After preparation, you can execute or reject the translation.

 
Translate specific content

Through the AI assistant, you can translate existing texts, titles, meta titles, and meta descriptions.

Step 1: Click on the 'AI assistant' icon at the element you want to translate.
Ai assistent 1 Ai assistent 2

Step 2: A pop-in will now appear where you can start the translation process and insert it after it has been executed.
Ai assistent 3 Ai assistent 4

*To use the AI translation features, the 'Multilingual AI' package worth €49 per month is required, contact us for more information.

Website overview

  • Log in to the CMS with the password you created (click here to log in)
  • On the left of the screen you see the menu, click on 'Websites'
  • Click on the line of the website you want to edit
  • You will now see an overview of all the pages on your website
    • Opening pages is done by clicking on the line of the page
    • This will enter the 'Editor mode'

Filemanager

  • You can open the file manager by first opening the website you would like to edit in the website overview. (see the previous manual how the overview works)
  • Click on the 'folder'  icon at the top right of the screen
  • A new window will appear, on the left is the menu with created folders
    • Navigating between folders can be done by simply clicking on the preferred folder

Uploading files such as images can be done here. (in the correct folder) Curious about how images can best be stored?

Create folder

  • In the CMS, open the website for which you want to create a folder
  • Open the file manager
  • In the left menu, hover your mouse over the folder you want to add a folder to
  • Click on the 3 dots
  • Click on 'Add folder'
  • Enter a name
  • The folder has been added!

Upload files

  • In the CMS, open the website where you want to upload a file to
  • Open the file manager (open the previous manual on how to open the file manager)
  • Open the folder where you want to upload the new files
  • Click on the blue button 'Upload files', then click on the 'Browse' button
  • Select the filed you would like to upload
  • Click on the green button
  • In the file manager, click the newly uploaded file and give it a description (this can be entered on the right side of your screen)
  • The files are now ready to be used on your website!

Curious about how images can best be stored?

Collection overview

  • In the CMS, open your website (see Website overview)
  • Open the tab 'Collections'
  • You will see an overview of the available collections (better known as Blogs, News)
  • By openening a collection you will see an overview of all the articles in this collection
  • Preview articles, editing, duplicating or deleting an item is done by clicking one of the icons on the right
    • Eye = preview
    • Pencil = edit
    • Papers = copy
    • Trashcan = delete
  • Adding an article is done by clicking on the blue button 'Add item'

Add page

  • In the CMS, open the website for which you want to create a page for (website overview)
  • Click on the blue button 'Add page'
  • Would you like to create a nested page? Select the parent page
  • The page has been added
  • Drag the page to the correct position by hovering your mouse over the line of the page clicking and holding the left mouse button on the 3 dot icon to the left

Copy page

  • In the CMS, open the website (see Website overview) where you would like to copy an existing page
  • On the line of the page that needs to be copied, click on the 'copy icon'
  • Edit the 'Page name'
  • If necessary, give the copied page a parent (see Nested pages)
  • Or if you would like to hide this page in the menu? (see Hide page in menu)
    • Open the tab 'Visibility' and turn ON the option 'Hide in menus'

Nested pages

A 'nested page' means that a page falls under an existing page. E.g. When adding a 'Project' it is more logical that the newly created project falls under the 'Project' page, so that the page structure remains clear.

  • In the CMS, open the website for which you want edit a 'nested page'
  • Click on the gear icon on the line of the page you would like to edit
  • Select the preferred parent page
  • Click on the green button 'Save'
  • Drag the page to the right position if necessary

Hide page in menu

  • In the CMS, open the website for which you want edit a 'nested page'
  • Click on the gear icon on the line of the page you would like to edit
  • Open the tab 'Visibility'
  • Turn ON 'Hide in menus'
  • Click on the green button 'Save'

Link page to an external URL

Instead of displaying a page, it may sometimes happen that a page needs to be added to the menu, which in turn links to an external website/page, such as a Client portal or a document.

Making this possible is very simple and can be done as follows:

  • In the overview page (see website overview)
  • Edit an existing page or add a new page (see adding a page)
  • In the settings, open the tab: 'Link'
  • Uncheck the option: 'Standard'
  • Indicate what type of link it is by clicking on the icon
  • After selecting the link type, add a URL or select a page, article or document
    • It is recommended to open external links in a new tab
  • Save the changes you just made

Adding blocks

  • In the CMS, open your website
  • Open the page where you want to add a block
  • On the left side, click on the type of block you would like to edit
  • You will see a selection of various blocks
  • Drag the block on your currently opened page
    • Changing the position can be done by dragging the block again to the desired position

Deleting blocks

  • In the CMS, open the website (and page) where you would like to delete a block in
  • Click and hold the left mousebutton on the block you would like to delete
  • Drag to left side of the screen
  • You should see a large red square, drag the block inside of this square
  • By releasing the mousebutton the block should be deleted

Using global blocks

Global blocks, for example include the navigation menu, footer, cookie notification. Editing a global block will be visible on the entire website.

Especially for newly added pages is it useful to add the previously mentioned global blocks.

  • In the CMS, open the website and page where you want to add a global to
  • In the left menu, open 'Global'
  • Select and drag the global block you would like to add to the page

Shifting blocks

  • In the CMS, open your website
  • Open the page you would like to shift a block
  • Click and hold the left mousebutton on the block you would like to rearrange
  • Drag to the desired position

Columns

You can change the order of columns inside a block by hovering the mouse on a column and using the left or right arrows above the column.

See example above

Adding an element

Blocks contain different elements. By openening a block (double click on it, or click on the pencil icon) you can select elements inside the block.

Hovering with your mouse on an element will show you a border, this way you know which element you are about to select. Click on the element, in the right menu on top, you will notice the element you just selected.

Also by hovering your mouse on an element, an icon with 3 dots will appear. By clicking on this icon a menu will pop-up.

  • Click on 'Add element' and select if you would like to add the element before or after this one
  • A new screen will open up, there are lots of elements that you can use
  • Simply select the element type you would like to add and click on the green button 'Add'
  • The element has been added, was it a text element you just added? You can edit the text by click on the element and edit it right in the Editor

Adding an image

Adding images is done the same way how you would normally add other types of elements. (see Adding an element)

  • During the element selection, open the tab 'Media'. Choose between 'Content media' or 'Item media'.
  • After you have inserted an image, click the newly placed image.
  • In the right menu, open the tab 'Settings'
  • Change the image by clicking on the folder icon
  • In the file manager, select the image you would like to place on the website
  • Click on the green button 'Insert'

Curious about how images can best be stored?

Adding and using buttons

Adding buttons is done the same way how you would normally add other types of elements. (see Adding an element)

After adding a button you can change the content by clicking on the text and then edit it.

  • In the right menu, open the tab 'Settings'
  • You can change the link type by clicking the icon next to 'Link'
  • You can insert/edit the actual link by changing the field next to it, for example by selecting a page or inserting an URL. (depending on the link type you selected)
  • You can change the 'Link target' so the link opens in a new tab or remains on the same tab

Editing text

Hovering with your mouse on an element will show you a border, this way you know which element you are about to select. Click on the element, in the right menu on top, you will notice the element you just selected.

After you have selected a text/heading element, you can edit the content straight away. 

Change images

Hovering with your mouse on an element will show you a border, this way you know which element you are about to select. Click on the element, in the right menu on top, you will notice the element you just selected.

  • After you have selected an image element, in the right menu, open the tab 'Settings'
  • Change the image by clicking on the folder icon
  • In the file manager, select the image you would like to place on the website
  • Click on the green button 'Insert'

Curious about how images can best be stored?

Inserting and adjusting links

Hovering with your mouse on an element will show you a border, this way you know which element you are about to select. Click on the element, in the right menu on top, you will notice the element you just selected.

  • After selecting a text element, select a word or line that you want to insert a link into
  • Click on the 'Link' icon (see example above)
  • Select the desired link type, actual link and target
  • Click on the green button 'Save'

Replacing documents

  • In the page overview (see website overview) open the page on which you want to replace a file
  • Double-click on the block in which you want to replace a file (e.g. an image or document).
  • Click on the element (see elements)
  • Is it an image?
    • In the right menu open the tab: 'Settings'
    • Adjust the field: 'Image' by clicking on the folder icon
    • In the file manager, the current image is automatically selected, in the right menu of the file manager edit the field: 'File' by clicking on the folder icon
    • Select the new image to replace the current one
    • Click on the green button: 'Save' close the file manager
  • Is it a document (PDF)?
    • In the right menu open the tab: 'Settings'
    • Adjust the field: 'Link' by clicking on the folder icon
    • In the file manager, the current document is automatically selected, in the right menu of the file manager edit the field: 'File' by clicking on the folder icon
    • Select the new document
    • Click on the green button: 'Save' and close the file manager

Adding items

  • In the CMS, open the website and collection (see Collection overview) to which you want to add an article
  • Click on the blue button 'Add item'
  • Fill in the required fields and if necessary, place the images here
  • Save the changes by clicking on the green button 'Add'

Edit items

  • In the CMS, open the website and collection (see Collection overview) to which you want to edit an article
  • Click on the pencil icon, on the same line of the article you would like to edit
  • Edit the article settings here
  • Save the changes by clicking on the green button 'Save'

Re-arrange/sort items

  • In the CMS, open the website and collection (see Collection overview) to which you want to edit the order of articles
  • Scroll with your mouse over the item you would like to move
  • Click on the 3 dots (left side on the same line) and hold the left mousebutton
  • Drag the article to the right position 

Deleting items

  • In the CMS, open the website and collection (see Collection overview) in which you would like to delete an article in
  • Click on the trashcan icon of the article you would like to delete
  • Then click on the red button 'Delete'

Publish website

Changes to the website are not automatically published, this proves to be quite handy for when you would like to edit the contents of a page without visitors experiencing any inconvenience.

Have you made any changes and is everything  good to go? Then the website should be 'Published' for any changes to take effect.

Before publishing the website, carefully check the 'Preview' mode whether the changes have been made correctly!

  • In the CMS, open the website you would like to publish (see Website overview)
  • At the top right of the screen, click the green button 'Publish
  • A new screen will open, lick on the button 'Publish'
  • The website is published, any changes made are now live!

Usage of WebP and SVG

Websites are evaluated, among other factors, based on speed; the faster the website, the better!

Images play a significant role in this, especially when a page contains a large number of images, which can slow down the page.

Traditional file formats such as jpg, png, bmp, and tiff are now considered outdated, with modern alternatives like WebP and SVG offering better performance.

Depending on the content of the image, a choice can be made between WebP or SVG formats.

  • For example, if it's a photo, you would opt for WebP.
  • Graphic elements such as logos or icons are best saved as SVG.

By consciously choosing file formats, the website will perform better without compromising on quality!

How to save/export images as WebP

Save New Images as WebP:

Saving images in WebP format can be done in various ways, depending on the image editing software being used.

Adobe Photoshop:

  1. Open the image in Photoshop.
  2. Click on "File" in the top-left menu
  3. Then click on "Save As."
    • If asked whether to save the image locally or not, choose to save it locally.
  4. Under "File Name," select the file format, click on it, and choose WebP.
  5. Save the image using the default settings.

GIMP:

  1. Open the image in GIMP
  2. Go to the "File" menu and select "Export As."
  3. In the export window, under "Select File Type" choose "WebP Image" from the list of formats
  4. Maintain the default settings and export the image

Converting Existing Images:

There are numerous online services available; here, we'll use AnyWebP:

  1. Open the provided link and drag the existing images into the indicated box or click on 'Select Images' button and select the images you would like to convert
    • You can convert multiple images at once.
  2. After uploading, a new page will open.
  3. Adjust the settings on the left of the screen if needed.
    • The default settings are usually sufficient.
  4. Click the yellow 'Convert All Images' button.
  5. The images will now be downloaded.

If the above link doesn’t work, you can try:

All three options will have similar steps that are easy to follow.