Knowledge base

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

Note that it is also possible to insert other elements, such as an Infomaniak Newsletter subscription form.

Prerequisites

• Access Site Creator:
  1. Click here to access your product management in the Infomaniak Manager (need help?).
  2. Click directly on the name assigned to the relevant product.
  3. Click on Customize my site:
     

Add an image

Media are managed in the file library:

1. Add a new content block containing images that you can then replace or complete.
2. Click the Content button in the left sidebar 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 a clickable link or modify its size:

You can also add images as a Photo Gallery module.

Change 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:
   

Add a video

To add a video:

1. Click the Content button in the left sidebar 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 apply a link to an image using a YouTube video as the URL: this will automatically create a PLAY-type icon that, when clicked, will open the video in a "lightbox".
 

Add an audio file

To add a sound file:

1. Click the Content button in the left sidebar 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 in an advanced way via HTML editing.
 

Add a downloadable file

To easily offer a file for download:

1. Click the Content button in the left sidebar 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 the file from the library that your visitors will be able to download.

This guide details the behaviour of Site Creator Infomaniak and the site created with, facing different screen formats and resolutions.

Prerequisites

• Go to Site Creator:
  1. Click here in order to access the management of your product on the Manager Infomaniak (Need help?).
  2. Click directly on the nameallocated to the product concerned.
  3. Click on Customize my site:
     

View the site on different devices

The sites created with Site Creator are automatically adapted browsers regardless of their support (computer, mobile device, tablet, large and small screen, etc.). But they can react differently according to certain parameters that you can adjust. To preview the version of the site based on the playback media, click the button …  blue located at the bottom of the left side menu, to develop publishing and preview options:

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

Show your site in reduced width

You can reduce the width of your site. But this display within a "container" or "box" will only be visible on wide screens type desktop:

1. Click on the button Design in the left side menu.
2. Click on More parameters:
   ‍
3. Save the changes at the bottom of the page.

Hide a block of content depending on the device type

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

This guide explains how to customize the source code, modify the CSS, modify the HEAD or BODY part of a website made with Site Creator Infomaniak.

Prerequisites

• Go to Site Creator:
  1. Click here in order to access the management of your product on the Manager Infomaniak (Need help?).
  2. Click directly on the nameallocated to the product concerned.
  3. Click on Customize my site:
     

Add Custom Code

Once in Site Creator:

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

Metadata in HEAD & BODY

To add JavaScript code or any other code in the part HEAD or BODY the source code of your site:

1. Click on Adjustments in the left side menu.
2. Click on SEO & Metadata in the part Website Configuration.
3. Get down to Custom code.
4. Choose to add under the tabs HEAD or under BODY.
5. Save the changes at the bottom of the page:
   

Examples of CSS customization

These examples allow you to start the advanced customization of the website pages. However, there is a risk depending on the changes made that you will no longer be able to access the editor himself, which will force you to start over from scratch.

Customize the website wallpaper

To put the image of your choice (to load in the file library) at the bottom of the page and customize its display:

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

Space letters from all links on the site

To remove (many) the letters between them on the clickable words (links):

1. See point 3 on the first image at the top of this guide.
2. Insert the code (if not yet present) <style> to indicate that you want to change 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 the controls,
4. then letter-spacing:1em;by reducing the value (0.9em e.g.) without forgetting the comma point to be able to insert the next command or finish.
5. } to close the insertion space previously opened.
6. </style> to indicate that the code ends here.

Be aware of these other examples of CSS code to be inserted on your site.

This guide explains how to connect a site realized with Site Creator Infomaniak 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. Click here in order to access the management of your product on the Manager Infomaniak (Need help?).
2. Click directly on the nameallocated to the product concerned.
3. Click on Connecting my site to a domain to start the configuration wizard below:
   

Manage Domain Name(s) Site Creator

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

1. Click here in order to access the management of your product on the Manager Infomaniak (Need help?).
2. Click directly on the nameallocated to the product concerned.

At the top of the page are possible messages about problems regarding Site Creator and domains.

Below, you can manage your domains if there are:

 

Provisional address, preview URL

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

On the other hand, the preview URL, of 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 for Site Creator Infomaniak addresses the subject of browser cookies.

Preamble

• By default, when your website is new, no cookie should be stored on your visitors' devices, there is no tracking feature for ads or marketing.
• 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 applications/modules cookies can be used on your website; 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 he or she has already voted).

Notification for the visitor

Prerequisites

• Go to Site Creator:
  1. Click here in order to access the management of your product on the Manager Infomaniak (Need help?).
  2. Click directly on the nameallocated to the product concerned.
  3. Click on Customize my site:
     

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

1. Click on the button Adjustments in the left side menu.
2. Click on Contact details under Website Configuration.
3. Enable the option information on cookies to configure the short message and URL for additional information.
4. Adjust the type of expanded display or not (read below).
5. Save the changes at the bottom of the page:
   ‍
   
   ‍

Additional adjustments

The consent message can be resolved default or in a manner enlarged, when you click on View The result is as follows:

• default:
  
• enlarged:
  

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

Prerequisites

• Go to Site Creator:
  1. Click here in order to access the management of your product on the Manager Infomaniak (Need help?).
  2. Click directly on the nameallocated to the product concerned.
  3. Click on Customize my site:
     

Simple Page Editing

Editing a page happens live and your changes are saved as and when that you publish the content of your blocks You can cancel your modifications if necessary.

Create a link

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

Then click on the icon of chainon to open the part that will allow you to specify the type of link and associated options:

 

Transform a link into a button

In the settings of your link, you can choose the style (rounded button, full, etc.), associated icon, etc.:

 

Edit 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 to an object, choose the type " File" in the settings of your link:

 

Create a link to an e-mail

Choose the type " E-mail address" in the settings of your link. A click on the link will open the default email application at the visitor and start dialing an e-mail with the pre-written address.

To prevent the email address from being written hard on your page, insert a contact form.
 

Create a link to a specific section

To direct the visitor to a specific portion of your site or another, use theanchors.

Create a link from an image

When you click on an image to edit it, just activate the button " This is a link"below the image in order to be able to specify the URL that will have to be displayed when a visitor clicks on it:

You can alsoapply a link to an imageusing a YouTube video as a URL: this will automatically create a PLAY icon that will open the video in a type window lightbox.

Create a list, insert an emoticon...

The different formatting possibilities of your text are above the selection of your text and additional options (chiplists, alignment, emojis, etc.) are available with the arrow:

This guide is about setting up, Site Creator Infomaniak, from the icon displayed in the favorite bar of a web browser, the favicon.

Preamble

• The formats recommended by Microsoft for its browsers are 16 x 16, 32 x 32 and 48 x 48.
• Apple, on the other hand, recommends that the favicon's dimension be 180 x 180.

Set the Favicon Site Creator

Prerequisites

• Go to Site Creator:
  1. Click here in order to access the management of your product on the Manager Infomaniak (Need help?).
  2. Click directly on the nameallocated to the product concerned.
  3. Click on Customize my site:
     

To define a new favicon:

1. Click on the button Adjustments in the left side menu.
2. Click on General settings.
3. Scroll down to the section Favicon:
   
4. Choose the favicon on your hard drive.
5. Save the changes at the bottom of the page.
6. Preview the result in your browser (if necessary in a new window in private browsing e.g.):
   

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

Preamble

• This VOD / AOD integration code is unique and corresponds to the settings you are specifying on the page.
• It allows you to integrate the same video with different display configurations according to your needs.
• Subsequently, you can change the settings of this integration by adjusting them from the Integration History page on the Infomaniak Manager.

Generate and copy the integration code

The integration code that allows you to insert your media at the desired location (blog, website, etc.) can be found on your VOD interface:

1. Click here in order to access the management of your product on the Manager Infomaniak (Need help?).
2. Click directly on the nameallocated to the product concerned.
3. Click on Media in the left side menu.
4. Click on Media management in the left side menu.
5. Click on the appropriate media in the table that appears.
6. Click the blue button Share.
7. Click on Create integration.
8. Customize media integration.
9. Click on the button for Generate the integration code.
10. Copy the code to include it in the location of your choice:

Edit previous integration

To re-personalise the integration already made of your media, and with the aim of keeping the corresponding code without having to insert it again:

1. Click here in order to access the management of your product on the Manager Infomaniak (Need help?).
2. Click directly on the nameallocated to the product concerned.
3. Click on Media in the left side menu.
4. Click on Media management in the left side menu.
5. Click on the appropriate media in the table that appears.
6. Click the blue button Share.
7. Click on Change an integration:
   
8. Click on the action menu ⋮ to the right of the object concerned in the array that appears.
9. Click on the desired item to get/change the integration/sharing codes:
   

Paste the integration code

On the web page of your choice, paste the code at the desired location.

For SiteCreater e.g., you need to generate an integration code, fixed (and not reactive):

Then paste this code into Site Creator within a custom HTML code block.

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

This guide explains how not to publish changes directly on a Site Creator Infomaniak.

Preamble

• The draft mode allows not to publish the following amendments:
  • adding a new content block via the Content menu
  • visual or textual modification of a content block
  • removal of a content block
• The draft mode does not apply to:
  • global design changes, via the Design menu (colors, fonts ...)
  • changes in content related to applications (questions/answers, e-commerce ...)
  • changes in global settings, via the Settings menu (Pages, languages ...)
  • sub-pages of the page you were depublishing

Save without publishing

Prerequisites

• Go to Site Creator:
  1. Click here in order to access the management of your product on the Manager Infomaniak (Need help?).
  2. Click directly on the nameallocated to the product concerned.
  3. Click on Customize my site:
     

You can pass a page in mode draft in order to make text or other changes in the content of a page that will not be visible on-line until you decide to return the site to direct publication mode:

1. Click on the button   ...   ‍‍‍ located at the bottom of the left side menu, to develop publishing and preview options
2. Click on Live to switch to mode Not Published
3. Now, the yellow mode displayed at the bottom indicates that all your changes (on this page only) will not be seen live (unlike Live/Live mode) but will be saved in a draft even if you leave the page or editor:
   

Publish changes or delete draft

1. When the mode Unpublished is active, click on the yellow button of the mode Unpublished to display an adjustment pane.
2. The adjustment pane opens so that you can:
   1. publish your changes,
   2. or delete the current draft and return to the original state of the page.

Example

1. With the mode Live / Live (visible at the bottom of the screen) a modification is directly visible to the visitors of the page.
2. With the mode Unpublished / draft (identifiable by a yellow symbol at the bottom of the pages passed in this mode) your changes are not visible live.
3. Leave the page to work on another page, mode returns to default mode, i.e. mode Live because the page is not the same and the mode only applies to the selected pages.
4. Return to the draft page, a symbol at the bottom of the page always indicates the draft mode enabled.
5. Click on it to choose from publish or delete changes and return the page as it was before your changes in draft mode.