Knowledge base

WordPress and Site Creator are two completely different site creation tools and unfortunately it is not possible to use components from one with the other.

This guide explains how to connect a site created with Infomaniak's Site Creator to a domain name present on your Manager.

Connect Site Creator to a Domain Name

To connect Site Creator to an existing domain name in your Infomaniak account:

1. Log in to the Infomaniak Manager (manager.infomaniak.com) from a web browser like Brave or Edge.
2. Click on the icon at the top right of the interface (or navigate through the left sidebar menu, for example).
3. Choose Hosting (Web & Domain universe).
4. Click on the name of the relevant object in the displayed table.
5. Click on Site Creator in the left sidebar menu.
6. Click on Connect my site to a domain to start the setup wizard below:
   

Manage Site Creator Domain(s)

To manage the domain name(s) used with Site Creator:

1. Log in to the Infomaniak Manager (manager.infomaniak.com) from a web browser like Brave or Edge.
2. Click on the icon at the top right of the interface (or navigate through the left sidebar menu, for example).
3. Choose Hosting (Web & Domain universe).
4. Click on the name of the relevant object in the displayed table.
5. Click on Site Creator in the left sidebar menu.

At the top of the page, any messages regarding problems with Site Creator and domains are displayed.

Below, you can manage your domains if there are any:

Temporary Address, Preview URL

Several domain names can be linked to Site Creator, deleted, or swapped and switched if necessary:

However, the preview URL, of the type abcd.infomaniak.site and distinct in the list of Site Creator domains, can never be deleted for the proper functioning of your site:

This guide details the use of media in Infomaniak's Site Creator.

It's worth noting that it's also possible to insert other elements such as, for example, a newsletter signup form from Infomaniak.

Adding an Image

Media is managed in the file library:

1. Log in to the Infomaniak Manager (manager.infomaniak.com) from a web browser like Brave or Edge
2. Click on the icon in the top right corner of the interface (or navigate through the left side menu)
3. Select Hosting (Web & Domain universe)
4. Click on the name of the relevant object in the displayed table
5. Click on Site Creator in the left side menu
6. Click on Customize my site

Once in Site Creator:

1. Add a new content block containing images that you can then replace or supplement
2. Click on the Content button in the left side menu
3. Click on Objects in the list to insert a single image
4. Click on the IMAGE block on the right

Once the image is added, you can also make it clickable or resize it:

You can also add images as a Photo Gallery module.

Changing an Image

To replace an inserted image:

1. Click on an image to edit it
2. Click on the photo frame type button on the image thumbnail to select a new image that will replace the previous one:
   
   

Adding a Video

To add a video:

1. Click on the Content button in the left side menu
2. Click on Objects in the list
3. Click on the VIDEO block on the right to insert a full-width video

You can also link an image using a YouTube video as the URL: this will automatically create a PLAY icon that, when clicked, will open the video in a lightbox.

Adding an Audio File

To add a sound file:

1. Click on the Content button in the left side menu
2. Click on Applications at the bottom
3. The available content is displayed on the right
4. Click on the audio player to insert it into the page

You can customize it extensively through HTML editing.

Adding a Downloadable File

To easily offer a file for download:

1. Click on the Content button in the left side menu
2. Click on Applications at the bottom
3. The available content is displayed on the right
4. Click on the File Download widget to insert it into the page
5. Select from the library the file that can be downloaded by your visitors

This guide for Infomaniak's Site Creator covers the topic of browser cookies.

By default, when your website is new, no cookies should be stored on your visitors' devices, and there is no tracking functionality for advertisements or marketing purposes.

As a website administrator, some data is stored in your own cookies (such as information indicating that you are a website administrator).

If you add integrated applications/modules to your website, cookies may be used. For example, with the Survey Form: if you add a survey module to your website, it will use cookies when the website visitor votes (to remember that they have already voted).

Notification for Visitors

You can enable a cookie consent message that will appear in a small pop-up window at the bottom of the screen for all new visitors to your site:

1. In the left sidebar, click on the Settings button
2. Click on Contact Details under Website Configuration
3. Enable the cookie information option to configure the brief message and URL for additional information
4. Adjust the display type, expanded or not (read below)
5. Save the changes at the bottom of the page
   
   
   

Additional Settings

The consent message can be set as default or expanded, when you click on Display. The result is as follows:

• Default:
  
• Expanded:
  

This guide explains how to customize the source code, modify CSS, and edit the HEAD or BODY section of a website created with Infomaniak's Site Creator.

Adding Custom Code

To access Site Creator:

1. Log in to the Infomaniak Manager (manager.infomaniak.com) from a web browser like Brave or Edge
2. Click on the icon at the top right of the interface (or navigate through the left sidebar menu)
3. Choose Hosting (Web & Domain universe)
4. Click on the name of the relevant item in the displayed table
5. Click on Site Creator in the left sidebar menu
6. Click on Customize my site

Once in Site Creator:

1. Click on Design in the left sidebar menu
   
2. Click on More settings
3. Click on Custom code at the bottom
   
4. Enter HTML, JavaScript (with its script tags), or custom CSS (with its style tags) - read below for some examples
5. Save the changes at the bottom of the page

Metadata in HEAD & BODY

To add JavaScript code or any other code to the HEAD or BODY section of your website's source code:

1. Click on Settings in the left sidebar menu
2. Click on SEO & Metadata in the Website Configuration section
3. Scroll down to Custom code
4. Choose to add under the HEAD or under BODY tabs
5. Save the changes at the bottom of the page
   

Examples of CSS Customization

These examples allow you to start advanced customization of website pages. However, there is a risk depending on the modifications made of not being able to access the editor itself, which will force you to start over from scratch.

Customize the Website Background

To set the image of your choice (to be uploaded in the file library) as the page background and customize its display:

1. Go to point 3 visible in the first image at the top of this guide
2. Insert the code <style> to indicate that you want to modify the CSS code
3. Then body { to indicate that you want to modify the page body and "{" to open the space for inserting commands
4. Then background-image: url("../data/files/fond01.jpg"); with the precise path & name of the image loaded in the library, without forgetting the semicolon to insert the next command
5. background-repeat: repeat; to repeat the inserted image
6. background-attachment: fixed; to make the background image fixed even if the visitor scrolls the page up or down to read its content
7. } to close the space opened previously for insertion
8. </style> to indicate that the code ends here

Space Out the Letters of All Site Links

To spread (a lot) the letters apart on clickable words (links):

1. Go to point 3 visible in the first image at the top of this guide
2. Insert the code (if not already present) <style> to indicate that you want to modify the CSS code
3. Then .container div a { to indicate that you want to modify the blocks of the page and more specifically the links ("a") and "{" to open the space for inserting commands
4. Then letter-spacing:1em; by decreasing the value (e.g., 0.9em) without forgetting the semicolon to insert the next command or terminate
5. } to close the space opened previously for insertion
6. </style> to indicate that the code ends here

See other examples of CSS code to insert on your site.

This guide details the behavior of Infomaniak's Site Creator and the site created with it, regarding different screen formats and resolutions.

Viewing the Site on Different Devices

Sites created with Site Creator are automatically adapted to browsers regardless of their platform (computer, mobile device, tablet, large and small screens, etc.). However, they may react differently depending on certain settings that you can adjust by accessing Site Creator:

1. Log in to the Infomaniak Manager (manager.infomaniak.com) from a web browser like Brave or Firefox
2. Click on the icon in the top right corner of the interface (or navigate through the left side menu, for example)
3. Choose Hosting (Web & Domain universe)
4. Directly click on the name of the relevant item in the displayed table
5. Click on Site Creator in the left side menu
6. Click on Customize my site

Once in Site Creator, to preview the site version based on the viewing device, click on the blue  …  button at the bottom of the left side menu to expand the publication and preview options.

Click on Preview then at the top of the page, click on the action menu to the right of Preview to change the type of viewing device.

Displaying Your Site with Reduced Width

You can reduce the width of your site. However, this display within a "container" or "box" will only be visible on large screens like desktop computers:

1. In the left side menu, click on the Design button
2. Click on More settings
   
   
3. Save the changes at the bottom of the page

Hiding Content Blocks Based on Device Type

In the options of a content block, you can set it to display only on certain types of devices (e.g., mobile devices):

This guide explains how to embed video / audio files imported to an Infomaniak VOD / AOD service on web pages.

This integration code is unique and corresponds to the settings you are specifying on the page. It allows you to embed the same video with different display configurations according to your needs.

Later, you can modify the settings of this integration by adjusting them from the integration history page on Manager Infomaniak.

Generate and Copy Integration Code

The integration code that allows you to insert your media into desired locations (blog, website, etc.) is found on your VOD interface:

1. Log in to Manager Infomaniak (manager.infomaniak.com) from a web browser like Brave or Edge
2. Click on the ‍ icon at the top right of the interface (or navigate through the left sidebar menu, for example)
3. Choose VOD/AOD (Streaming universe)
4. Click on the name of the relevant item in the displayed table
5. Click on Media in the left sidebar menu
6. Click on Media Management in the left sidebar menu
7. Click on the relevant media in the displayed table
8. Click on the blue Share button
9. Click on Create Integration
10. Customize the media integration
11. Click the button to Generate Integration Code
12. Copy the code to embed it in your chosen location

Modify a Previous Integration

To customize a previously made integration of your media and keep the corresponding code without having to insert it again:

1. Log in to Manager Infomaniak (manager.infomaniak.com) from a web browser like Brave or Edge
2. Click on the ‍ icon at the top right of the interface (or navigate through the left sidebar menu, for example)
3. Choose VOD/AOD (Streaming universe)
4. Click on the name of the relevant item in the displayed table
5. Click on Media in the left sidebar menu
6. Click on Media Management in the left sidebar menu
7. Click on the relevant media in the displayed table
8. Click on the blue Share button
9. Click on Edit Integration
10. Click on the action menu ⋮ on the right of the relevant item in the displayed table
11. Click on the desired item to obtain / modify integration / sharing codes:

Paste Integration Code

On the webpage of your choice, paste the code in the desired location.

For SiteCreator, for example, generate a “Fixed” integration code (not “Responsive”):

Then paste this code on Site Creator within a “Custom HTML Code” block.

Here is an example of copy-pasting from the media integration page:

This guide helps you understand how to create and edit pages in Infomaniak Site Creator.

Simple Page Editing

To access Site Creator:

1. Log in to the Infomaniak Manager (manager.infomaniak.com) using a web browser like Brave or Firefox.
2. Click on the icon at the top right of the interface (or navigate through the left side menu, for example).
3. Select Hosting (in the Web & Domaine category).
4. Click directly on the name of the relevant object in the displayed table.
5. Click on Site Creator in the left side menu.
6. Click on Customize my site.

Page editing occurs in real-time, and your changes are automatically saved as you edit the content of your blocks.

Create a Link

Create a link from an image or text by selecting the object.

Then, click on the chain icon to open the section that allows you to specify the link type and associated options:

Turn a Link into a Button

In the link settings, you can choose the style (rounded button, solid, etc.), associated icon, and more:

Edit a Link

Edit a link by clicking on it:

Create a Link to a File

To allow your visitors to download a file from a link on an object, choose the "File" type in your link settings:

Create a Link to an Email

Choose the "Email address" type in your link settings. Clicking the link will open the visitor's default email application and begin composing an email with the pre-written address.

To prevent the email address from being visible on the page, we recommend using a contact form.

Create a Link to a Specific Section

To direct visitors to a specific section of your site or another, you should use the anchor system.

Create a Link from an Image

When you click on an image to edit it, simply activate the "This is a link" button below the image to specify the URL that should be displayed when a visitor clicks on it:

If you enter a YouTube video URL, the video will open in a lightbox-style window.

Create a List, Insert an Emoji...

The different text formatting options are located above the text selection, and additional options (bullet lists, alignment, emojis, etc.) are accessible with the arrow:

Change website name

Click the Settings button in the left sidebar, then click Site Title .

Company details

Click the Settings button in the left sidebar, then click Contact Information under Website Setup .

This guide concerns the "Applications" and "modules" available in Infomaniak's Site Creator, to create a showcase website, a blog, or an online store that is 100% customizable, without any technical knowledge.

Different modules

In addition to the content blocks offering various preformatted layouts, you can also insert blocks in the form of modules, each with a specific function:

1. Video
2. Audio player
3. Image slider / slideshow
4. File download
5. Location on map
6. Survey
7. Knowledge base
8. Questions and answers
9. Calendar
10. Calendly
11. Sub-page menu
12. Site map (sitemap)
13. Add to Google
14. Custom HTML code
15. Contact form
16. Blog
17. Shop
18. RSS feed reader
19. Restaurant menu

Inserting a module on a page

To insert a module:

1. Log in to the Infomaniak Manager (manager.infomaniak.com) from a web browser like Brave or Edge.
2. Click on the icon at the top right of the interface (or navigate through the left side menu, for example).
3. Select Hosting (universe Web & Domain).
4. Click on the name of the relevant object in the displayed table.
5. Click on Site Creator in the left side menu.
6. Click on Customize my site.

Once in Site Creator:

1. Click on the Content button in the left side menu.
2. Click on Applications at the bottom and the content available will appear on the right.
3. Click on one of these applications to insert it into the page:
   
4. Once inserted, hover over the module to access its settings:
   

Multiple module or missing module

If you delete one of your modules (such as the one for conducting a survey) that is already configured and want to revert back, press Undo immediately.

You can also reinsert the module, which should come back with its previous settings.

You cannot insert multiple modules of the same type to customize them independently of each other.

Other integrations & widgets

Click on the APPLICATIONS button in the left sidebar of Site Creator:

Insert a countdown

To add a counter for displaying a countdown:

1. In the left side menu, click on the Content button.
2. Click on Objects in the list and the content available will appear on the right:
   
3. Click on one of these objects to insert it into the page and customize it: