This guide concerns: Site Creator, Infomaniak tool for creating a website offering among other things a library for your media (images, videos, documents, etc.).

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:
     

Access files

The library is accessible from the bottom of the left side menu, under Files:

These media will be at your disposal when you edit your pages and wish to insert content. 

Organize your files, folders and subfolders

Be careful you cannot:

• move files/folders
• rename files/folders
• delete a folder if it is not completely empty

Create a new folder

Use the action menu ⋮ at the bottom right of the window:

 

Load a new file in the library

Click on Send File to browse your hard drive and load the desired files:

 

The usual image formats are supported (webp, jpg, jpeg, png, gif, svg, etc.), idem for videos (mp4, mov, etc.) and you can also load files (zip, pdf, etc.) for e.g. making them available to visitors by the module File download.

Compress Image

The images that make more than 1200 px are automatically reduced to 1200 px on importation. But you can also compress the image itself with the option Compress Image from the library, in order to gain speed of display of your site.

⚠The option Compress Image generates the error of TinyPNG API key:

To avoid this, get a TinyPNG API key on their site and to inform it under Applications > TinyPNG SiteCreater:

 

Open Image Editor

Browse an image of the library and click on the action menu ⋮ to access the image editor:

Search and use free images

In the left sidebar of the library is a menu item leading to free stock images (image bank) that you can insert into your library to enhance your site:

 

Protecting Your Content

Click on Parameters in the left sidebar then on General parameters:

Prohibit right-clicking

Below is an option that once enabled prohibits right-clicking visitors to your site.

Solving a Media Sending Problem

Try to upload JPG or PNG as light as possible; images with a width greater than 1000-2000 pixels need not be sent to the server.

Make sure your files are not in "300DPI" resolution or higher, you don't need them on your website, it's only for printing.

If you are trying to upload files directly from your camera, try resize them before uploading; from your iPhone, the image can be in format HEIF/HEIC, which is not supported - try to convert it to JPG First.

This guide concerns the content blocks which are one of the most important elements of Site Creator Infomaniak.

Preamble

• It is the content blocks that will allow you to easily create content on your pages.
• There are all kinds of them, separator, List of tariffs, Site map, simple text or image blocks, etc.
• They are usually preconfigured to make it easier for you to get started.

Add Content Block

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:
     

Once in Site Creator:

1. Click on the button Content in the left side menu: the block list appears.
2. Choose the Category desired on the left, then the content desired on the right.

By clicking on the desired content, you make it appear on the page you were editing.
 

Other possibility: go to the page directly and overfly the space above or below an existing block:

 

Delete Content Block

Fly over the block to remove on your page and click on the Trash that appears on the fly-over:

Confirm the deletion and it disappears. You can cancel This type of operation.
 

Duplicate block

Fly over the block to duplicate on your page and click on the toothed wheel that appears on the fly-over. Then choose the desired location for its duplication:

Edit Content Block

Each editable element of the content block will be highlighted when you move your mouse over it. Simply click on one of these elements to start editing.

In addition, you can modify HTML code (recommended for advanced users only) if you need more control over any content block; this allows e.g. to insert an HTML code registration for the Infomaniak Newsletter.

You can also remove some items from your content blocks: when editing text, there is the "arrow to the right" button that displays more options and the button Remove:

To edit an image, click on it and a new window appears. In the lower part, there is the button Save right and the button Remove Red to the left.

Create a typical content block

In the left sidebar, below the contents that can be added to your page, you will find a button for Designing a Content Block:

All the elements that make up the blocks are placed on the left. You can drag them to your type block to design your ideal block. This will be inserted into your page by clicking on Apply Changes at the bottom of the page.

 

Change block margins

Fly over the content block to edit and click on the toothed wheel:

 

Scroll the settings to Default Block Spacing and click on it to set your own settings:

The toothed wheel of the parameters also allows to modify the color or background image O.R.

Move block up or down

The content of your page is separated into "blocks". You can add more blocks and reorganize them.

Fly over the content block to move and click on the dots area at the top left; let press to move the block:


 

Create a space between two blocks

To create a horizontal space between the content blocks, add a separator manually:

 

You will then be able to define its color and size.

You can also "decorate" the top and bottom of a block more automatically, by activating the option Decoration from the edition of a block:

This guide is intended for users of the tool Site Creator who wish to go further in publishing their pages.

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:
     

Open HTML Editor

Once in Site Creator, you can modify HTML code (recommended for advanced users only) if you need more control over any content block:

1. Fly over the block to edit on your page and click on the toothed wheel that appears on the fly-over:
   
2. Click on the item HTML in the left sidebar to edit the HTML code of the block:
   

Add HTML Block

To start from zero with a blank HTML block, you can insert the module Custom HTML code on your page from the Apps list:

 

Text is editable via the button CODE which allows you to open the HTML editor:

‍
You can also add code outside the blocks.

This guide explains how to add and configure a contact form on your site created with Site Creator Infomaniak.

Create a custom contact form

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 create one or more forms allowing your visitors to write a message, register for an activity, in short, fill in any kind of online form with or without attachment:

1. Click on the button Content in the left side menu.
2. Click on Applications at the bottom of the list then on Form Creator.

Once the first form is created it will appear on your page:

 

Contact form settings

You can customize the thank you message, the possible forwarding page after submission, the email address used, add a captcha (recommended), etc.

To do this, fly over the module to access its settings and if necessary click on the form you want to edit, then click the button at the bottom next to the change recording button. Choose Form properties.

It is recommended that: modify the method of sending default.

This guide details the creation of navigation menus for your site made with Site Creator Infomaniak, as well as their composition, styles and settings.

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:
     

The different navigation menus

The different pages that make up your site may be accessible within one or more menus navigational equipment:

1. Click on the button Adjustments in the left side menu.
2. By default the list of your pages appears, classified under 2 main headings: MAIN MENU and LEGAL.

But you can add more.

These menus with the pages they contain are then taken up in different places on your site according to the theme chosen in particular.

You will often find the main menu at the top of the page:

and other menus will be automatically offered in the footer:

 

Manage menu

You will be able to manage its presence in the Site map or delete it (he and all his pages):

1. Click on the button Adjustments in the left side menu.
2. Fly over a menu title in the existing tree.
3. Click on the toothed wheel icon that appears on the fly-over.

Be aware of this other guide for do not make a menu appear at all.
 

Create a sub-element in a menu

To this end:

1. Click on the button Adjustments in the left side menu.
   • The list of your pages appears.
2. With the mouse move a page slightly to the right under another page:
   
   
    
   • It will become a subpage and your menu on the site will be able to display the tree thus created.
      

Title of non-clickable menu

Choose if necessary do not make the very first element clickable of such a menu:

1. Click on the button Adjustments in the left side menu.
2. Click on General parameters in order to change this setting under Submenu options:
   

Menu item containing a link to another website

To this end:

1. Click on the button Adjustments in the left side menu.
   • The list of your pages appears.
2. Click on the button Add Page below the existing tree:
   
3. Choose a page name and Show more options.
4. Choose URL redirection to specify the destination when clicking:
   

Add New Menu

To this end:

1. Click on the button Adjustments in the left side menu.
2. Fly over a menu title in the existing tree.
3. Click on the "+" icon that appears on the fly-over:
   

Additional top menu

To display a "menu bar" at the top of your page:

1. Click on the button Design in the left side menu.
2. Click on More Settings.
3. Enable Header menu bar:
   
   • Once enabled you can customize it with the link Adjustments In the same place.

Menu Styles

To manage the different menu styles:

1. Click on the button Design in the left side menu.

2. Click on Menu Editor:
   
   

   ‍‍

In particular, you can decide on the location of your menus (on the left of the page or placed at the top, fixed or mobile, type "menu hamburger " to the right or normal, etc.).
 

Change the color of the "burger" menu

If it appears e.g. white on white on a mobile device:

1. Click on Menu title / logo (always under Design, then Menu Editor).
2. Adjust the text color:
   

Adopt a new menu theme

Change completely predefined style with the themes at the top of the submenu:

1. Click on Menu templates (always under Design, then Menu Editor):
   

Fixed menu

Most of the menus are going to move with the content of the page. The menu disappears If you go down to the page:

You can set a menu that will always be fixed on the upper edge (with different visual options):

To enable or disable the fixed menu:

1. Click on Design.
2. Click on Menu Editor:
   
3. Click on Main configuration.
4. Choose In the headerin the box Type of menu.
5. The toggle switch Fixed at the top displays below and you can activate it.
6. Click on Save:
   

Some menu templates (such as the #3 and #16) directly apply the optimal settings for a fixed menu:

Insert your menus in the body of the page

One module Subpage menu allows the insertion of your menus and submenus at any place on your page.

The module Site map displays all your menus and pages in one block.

Set page URL

By default if your page name is Contact then the URL to reach it will be www.domain.xyz/contact.

If later you change the page name to Contactez-nous then the URL will be www.domain.xyz/contactez-nous.

To set the custom URL of the page on which you are located:

1. Click on the button Adjustments in the left side menu.
2. Click on SEO & Metadata (under Parameters of this subpage):
   

The first field at the top defines the address of the page. Any space will be transformed into a hyphen and special characters, accents, symbols, etc. should be avoided.

If URL changes are saved while creating a site while a menu already contains a link to the page in question, it will be dynamically adapted.

This guide explains how to add and configure a blog module on your site created with Site Creator Infomaniak.

Preamble

• There is no feature to manage multiple users on the Blog section (or Site Creator).
• Several users of the same Organization with access to Site Creator (through their permission to access web hosting) will be able to post on the blog, but the identity of the author will remain the same for all.
• It is possible to be helped by artificial intelligence as is the case on the the rest of the pages of Site Creator.
  • Be aware of this other guide about the template used by the editorial assistant and the responsibilities of each.

Start a blog on 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 name assigned to the product concerned.
  3. Click Customize My Site:
     

Once in Site Creator, on the page where you want to insert your future blog articles:

1. Click on the button + located below an already inserted block:
   
2. Click on Applications (on the tab Content which opened when you clicked to add the visual block).
3. Click on the module Blog:
   
   1. If this is the first insertion of this module, then you get the next visual block with an example of the first published article (go to point 4 below):
      
   2. If you have already tested the Blog module before and have removed it from your pages, you get this:
      
      1. Press the top to insert the main block.
      2. Press the second choice to display a block with the last 3 published articles Only if you already have a main block inserted elsewhere on the site.
4. Once the module Blog inserted, overfly the block and click on Blog then on ‍ New article to insert a blank article:
   

Publish content by exploiting artificial intelligence

To write content and if necessary improve your writings:

1. Choose an image for the banner, enter a title, optional subtitle, body of the article with different formatting.
2. Press the sign + on the text of the article or the tab key on your keyboard.
3. Select the content and click on it to make appear a text formatting toolbar.
4. From this toolbar, access the possibilities offered by AI (translation, reformulation, correction, etc.):
   
   
    
5. Publish by clicking on the button Publish (or save the draft for later):
   

Edit Blog

To enable comments, email notifications, list layout and sorting, etc.:

1. Click on Applications in the left side menu.
2. Click on Blog.
3. Click on Parameters and set your preferences without forgetting to save at the bottom of the page:
   

Edit blog articles

No matter where you are when editing your site, just go to the menu Applications at the bottom left, then click on Blog:

 

To edit the content of your article, click on Browse Articles in the left side menu, fly over and click on the pencil icon ✎:

 

To set (read below) one of the articles, fly over and click on the toothed wheel:


 

Labeling, archiving or exhaling an item

A blog article may disappear from your list of articles, either by giving it an expiry date or by archiving it immediately. It is also possible to add a tag (label) that will be clickable for the visitor and thus facilitate browsing within posts:

 

Date of articles

By default, new blog posts will be added with the date "today" but it is possible to modify it:

1. Fly over and click on the date link (directly on the article).
2. Choose a new date.

This guide explains how to manage the logo, header and footer part (footer) 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:
     

Add Website Logo

Once in Site Creator:

1. Click on the button Adjustments then Logoin the left sidebar.‍‍
2. Load an image and choose if the site name should also be displayed next door.
   ‍

Logo settings

1. Click on the button Design in the left sidebar.
2. Click on Designer Menu‍ then Title/logo to adjust spacing and colors.

Displaying the logo in the centre

In the same place as above, active the option to display the logo on a separate line which will center the logo of the site:

 

Hide logo (+ header and footer)

To create a page without a logo that will have no header (so no menu displayed) or footer, you have to define it as Home Page (i.e. "Landing page"; be careful that does not change the order of the pages) with a button that is here:

1. Click on the button Adjustments in the left sidebar.
2. Click on List of pages.
3. Browse a page in the existing tree and click on the icon of toothed wheel which appears on the fly.
4. ‍Activate the option at the bottom "Home Page" to hide headers and footer:
   

This guide helps you customize a website created 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:
     

Change site colors

To manage themes, colors and fonts in Site Creator:

1. Click on the button Design in the left side menu.
2. Click on Site Colors.

You can choose from the available color palettes or create your own custom color set.

Below there are more specific parameters, where you can specify to which elements a color should be applied.

Manage the background (image/color) of the blocks

On the publishing page of your site:

1. Fly over a block and click on the toothed wheel to access the settings:
   
   

Load Website Template

You can modify the complete design of your website by changing the theme of it, and deciding what will or will not be overwritten on the current site when the change occurs:

1. Click on the button Design in the left side menu.
2. Click on Choice of theme:
   

This is where you can choose from the themes of available websites.

When you have found your new theme, click on Install Then you will be able to choose the parts of the new template you want to import (by default, only colors, fonts or menu style) to avoid the content of your website being overwritten.

If your website is new, you can choose more options on importation.

Change the fonts of the website

To this end:

1. Click on the button Design in the left side menu.
2. Click on Fonts:
   

You can easily change the main fonts of the website, the first font being used for headers and the second font for content.

Below there are more specific parameters, where you can specify to which elements a font should be applied.

It is not possible to import or add a custom font but you can modify the provider (the font list will be the same) for privacy issues e.g.:

1. Click on Adjustments in the left side menu.
2. Click on General parameters
3. Choose the font provider:
   

Solve an absent / invisible text problem

If you have the impression that your text block has disappeared or is invisible

then select all the content of the website (ctrl + a or cmd + a on Mac); if you see that your content is there, it probably means that the block settings are set to a dark background:

In that case, go to the block settings and make sure that the option "Dark background" is not checked This should solve this problem:

This guide explains how to create galleries of your photos in Site Creator Infomaniak.

Create Photo Gallery

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:
     

Once in Site Creator:

1. Click on the button Adjustments In the left side menu, the list of your pages appears.
2. Click on the button Add Page below the existing tree.
3. Enable Show more options to choose the type of page PHOTO GALLERY:
    
   
    
4. Choose a page name.
5. Validate.

The new page with the photo gallery module is displayed on the screen.

Set up the photo gallery

To this end:

1. Fly over the module to access the gallery settings.
2. Click on Edit‍:
   ‍

Photo albums

You can create additional photo galleries for your different albums:
‍
‍

Edit order of photos

When your gallery is created, each new photo you download from your computer is added at the end of the photo list; you can easily change this order by dragging the photos with the mouse when you edit a gallery:

 

In addition, you can add a description to any of your photos, under each image, you will notice the field "Description of the image", start typing your description there and press the green button to save the changes:

 

Add Image Scroll Widget

To configure one or more dynamic Slider widgets, on which one or more photos will slide laterally (without any link to the photo galleries described above):

1. Click on the button Applications in the left side menu.
2. Click on Slider:
   
3. Set the widget according to your preferences.
4. Insert the configured widget to the desired location by clicking Content then Apps and choose Slider:
   

This guide explains how to temporarily take offline a site created with Infomaniak Site Creator.

Introduction

• The maintenance page will only be displayed on visitors' devices:
  
• Your device will continue to display your site without the maintenance page, only for your Internet connection.
• As you are logged in, you will still be able to edit the site with Site Creator.

Putting Site Creator into maintenance mode

To temporarily disable Site Creator:

1. Click here to access the management of your product in the Infomaniak Manager (need help?).
2. Click directly on the assigned name of the relevant product.
3. Click on Manage ‍ at the top of the page.
4. Click on Enable maintenance.
   • Repeat the operation to disable it:
     
   • You can also disable maintenance from the preview block of your site: