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

They allow you to easily create content on your pages.

There are various types, such as separators, pricing lists, site maps, simple text or image blocks, etc., generally pre-configured to facilitate their setup.

Adding a Content Block

To access Site Creator:

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 via the left side menu, for example).
3. Select Hébergement (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. In the left side menu, click on the Content button - the list of blocks appears.
2. Select the desired category on the left, then the desired content on the right.

By clicking on the desired content, you add it to the page you are currently editing.
 

Another option: go directly to the page and hover above or below an existing block:

 

Deleting a Content Block

Hover over the block you want to delete on your page and click on the trash can icon that appears:

 

Confirm the deletion and it will disappear. You can undo this type of operation.
 

Duplicating a Content Block

Hover over the block you want to duplicate on your page and click on the gear icon that appears. Then choose the desired location for its duplication:

Editing a Content Block

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

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

You can also delete certain elements from your content blocks: while editing text, there's a "right arrow" button that shows more options and the Delete button:

 

To edit an image, click on it and a new window will appear. At the bottom, there's the Save button on the right and the red Delete button on the left.

Creating a Custom Content Block

In the left sidebar, under the content that can be added to your page, you'll find a button to Design a content block.

All the elements that make up the blocks are arranged on the left. You can drag them to your custom block to design your ideal block. It will be inserted into your page by clicking Apply changes at the bottom of the page.


 

Adjusting Block Margins

Hover over the content block to adjust and click on the gear icon:

 

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

The gear icon in the settings also allows you to change the background color or image of the block.

Moving a Block Up or Down

Your page content is divided into "blocks". You can add more blocks and rearrange them.

Hover over the content block to move and click on the dot area at the top left; hold to move the block.


 

Creating Space Between Two Blocks

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

 

You can then define its color and size.

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

 

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

Open HTML editor

Go to Site Creator:

1. open the Manager (manager.infomaniak.com)
2. go to Web Hosting
3. if necessary click on the hosting/domain name concerned
4. in the left side menu click on Site Creator
5. click on Customize my site

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

1. hover over the block to be edited on your page and click on the gear wheel that appears on hover:
   
   
   
   
2. click on the HTML element in the left sidebar to edit the block's HTML:
   
   

Add an HTML block

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

The text can be edited via the CODE button which opens the HTML editor:

You can also add code outside the blocks.

This guide explains how to customize and configure the online store module of Site Creator.

Set up a store in Site Creator

Prerequisites

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

To manage the general preferences of the e-commerce system (currency, taxes, etc.) once the module is added:

1. Hover over the added store module on your page.
2. Click on Configuration.
    

Once on Configuration, several sub-menus appear on the left allowing to configure other settings:

Payment methods

• Paypal
• Credit card & Twint (via Stripe or Mollie)
• Custom payment
• on delivery

To use the services of Stripe and Mollie, you must have a SIRET number in France or an IDE in Switzerland. Additionally, it is necessary to have a valid company registered in the commercial register of your country to use the services of Stripe and Mollie.

Delivery methods

You can create several shipping methods:

These will then be offered during the checkout process of the buyer:

Among the settings to create a shipping method:

• rates (+ free shipping from what amount)
• authorized countries
• shipping costs based on weight
• shipping times
  
  

Messaging

Four messages are predefined and cannot be deleted. They cover all email communication around an order, both for the client and the store manager.

It is possible to customize the existing messages and add more (then delete these additional messages if necessary):

1. Choose when the email should be sent (or simply disable the message to retain it without using it)
   1. new order email (to notify you)
   2. processed order email (customizable)
   3. delivery note in PDF format (customizable)
   4. invoice also generated and available in PDF format on your Stripe/Paypal/Mollie account
2. Variables can be inserted in each field to customize the texts as much as possible using the elements of the order and the information provided by the buyer:

Store homepage

• Display of product categories if any
• Presentation of random products
• etc.

Product management

To manage the products, add or remove them:

1. Hover over the module at the top left.
2. Click on Products.

Find the first 3 example products:

Reorganize your products by moving them with the mouse.

Click on a product to set its details and the category it should be in (read below). You can notably:

• create attributes (e.g. color) to offer the same product in multiple versions/prices
• define if the product should be dematerialized (virtual) e.g. a PDF, a ZIP, or an MP3, and thus downloadable after purchase

At the bottom of your product sheet editing, search for other products from your list to link them and offer them to the visitor.

At the very bottom of the product editing window, choose to hide the product from your visitors if necessary.

To finish and return to the product list, save the changes using the button located at the very bottom.

Delete or duplicate a product

On the product editing sheet, click at the bottom on the action menu next to the save button to choose whether to delete the product or duplicate it.

Stock / inventory management

In this same action menu, manage the stock directly on your product list (to edit the stock in bulk).

But each product sheet allows you to edit the stock and also enter the SKU (stock keeping unit) and its barcode (ISBN).

Product categories

Your products can be organized into Categories and subcategories which will then display according to your site's design.

Click in the Categories sub-menu on the left of the store administration panel, under Products.

Set an image to illustrate your category.

Hide a category if necessary (this does not hide the products it contains).

Promo code

A promo code allows granting a discount (in % or currency) on an order.

Click in the Promo code sub-menu on the left of the store administration panel, under Products.

You can specify:

• its expiration date
• its minimum possible amount
• its name ("Christmas special discount" for example)
• its form ("HAPPYCHRISTMAS")

Export your product list

Export your product list (CSV format) using the action menu located at the top right of your product list.

Order management

To manage placed and ongoing orders:

1. Hover over the module at the top left.
2. Click on Configuration.
3. Click in the Orders sub-menu on the left of the store administration panel.

Export your order list

Export your order list (CSV format) using the Download button located to the right of the order search bar.

Customer management

To manage customers (a customer provides personal information when ordering):

1. Hover over the module at the top left.
2. Click on Configuration.
3. Click in the Customers sub-menu on the left of the store administration panel.

Export your customer list

Export your customer list in a CSV file (format .csv) using the Download button located to the right of the customer search bar.

Questa guida spiega come aggiungere e configurare un modulo di blog sul tuo sito creato con Site Creator di Infomaniak.

Preambolo

Non esiste una funzionalità per la gestione di utenti multipli nella sezione Blog (né su Site Creator). Più utenti di un'organizzazione che hanno accesso a Site Creator (tramite la loro autorizzazione di accesso all'hosting web) possono pubblicare sul blog, ma l'identità dell'autore rimarrà la stessa per tutti.

Iniziare un blog su Site Creator

Per accedere a Site Creator:

1. Accedi al Manager Infomaniak (manager.infomaniak.com) da un browser come Brave o Edge
2. Clicca sull'icona ‍ in alto a destra dell'interfaccia (oppure naviga tramite il menu laterale sinistro, per esempio)
3. Scegli Hébergement (universo Web & Domaine)
4. Clicca sul nome dell'oggetto interessato nella tabella visualizzata
5. Clicca su Site Creator nel menu laterale sinistro
6. Clicca su Personalizza il mio sito

Una volta dentro Site Creator, nella pagina dove vuoi inserire i futuri articoli del blog:

1. Clicca sul pulsante + sotto un blocco già inserito
   
2. Clicca su Applicazioni (nella scheda Contenuto che si apre quando clicchi per aggiungere il blocco visivo)
3. Clicca sul modulo Blog
   
   1. Se è la prima volta che inserisci questo modulo, otterrai il seguente blocco visivo con un esempio di primo articolo pubblicato (passa al punto 4 qui sotto):
      
   2. Se hai già provato il modulo Blog in precedenza e l'hai rimosso dalle tue pagine, otterrai questo:
      
      1. Premi sulla scelta in alto (A)‍ per inserire il blocco principale
      2. Premi sulla seconda scelta (B)‍ per visualizzare un blocco con gli ultimi 3 articoli pubblicati solo se hai già un blocco principale inserito altrove nel sito‍
4. Dopo aver inserito il modulo Blog, passa il mouse sopra il blocco e clicca su ☰ Blog
5. Clicca su Nuovo articolo per inserire un articolo vuoto e compilalo (immagine per l'intestazione, titolo, sottotitolo opzionale, corpo dell'articolo con diverse formattazioni (premi il segno + nel testo dell'articolo o il tasto Tab sulla tua tastiera)
6. Pubblica cliccando su Pubblica (o salva la bozza per dopo)
   

Modifica del blog

Per attivare i commenti, le notifiche via email, il layout in elenco e il loro ordinamento, ecc.:

1. Clicca su Applicazioni nel menu laterale sinistro
2. Clicca su Blog
3. Clicca su Impostazioni e configura le tue preferenze senza dimenticare di salvare in fondo alla pagina:
   

Modifica degli articoli

Ovunque tu sia durante la modifica del tuo sito, vai nel menu Applicazioni in basso a sinistra, quindi clicca su Blog:

 

Per modificare il contenuto del tuo articolo, clicca su Sfoglia gli articoli nel menu laterale sinistro, passa il mouse sopra e clicca sull'icona della matita:

 

Per impostare (leggi sotto) uno degli articoli, passa il mouse sopra e clicca sull'ingranaggio:

 

Etichettare, archiviare o far scadere un articolo

Un articolo del blog può scomparire dalla tua lista di articoli, impostando una data di scadenza o archiviandolo immediatamente. È anche possibile aggiungere un tag cliccabile per i visitatori, facilitando la navigazione tra i post:

 

Data degli articoli

Per impostazione predefinita, i nuovi articoli del blog verranno aggiunti con la data "oggi", ma è possibile modificarla:

1. Passa il mouse sopra e clicca sul link della data (direttamente sull'articolo)
2. Scegli una nuova data

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

Create a photo gallery

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 in the top right corner of the interface (or navigate through the left side menu, for example).
3. Choose Hosting (Web & Domain universe).
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.

Once in Site Creator:

1. Click on the Settings button in the left side menu, your list of pages will appear.
2. Click on the Add a page button below the existing tree structure.
3. Click on Show more options to choose the page type PHOTO GALLERY
    
   
    
4. Choose a page name.
5. Validate.

The new page with the photo gallery module will appear on the screen.

Configure the photo gallery

1. Hover over the module to access the gallery settings.
2. Click on Edit.
   

Photo albums

You can create additional photo galleries for your different albums:

Change the order of photos

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

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

Add an image scroll widget

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

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

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

The different navigation menus

The different pages that make up your site can be accessed within one or more navigation menus:

1. log in to the Infomaniak Manager (manager.infomaniak.com) from a web browser like Brave or Firefox
2. click on the ‍ icon at the top right of the interface (or navigate using the left sidebar menu, for example)
3. choose Hosting (under Web & Domain)
4. click on the name of the relevant object in the table that appears
5. click on Site Creator in the left sidebar menu
6. click on Customize my site

Once in Site Creator:

1. in the left sidebar menu, click the Settings button
2. by default, the list of your pages appears, organized into 2 main sections: MAIN MENU and LEGAL

But you can add more.

These menus with the pages they contain are then reused in different places on your site depending on the chosen theme.

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

and the other menus will be automatically proposed in the footer:

Manage the menu

Once in Site Creator:

1. click on the Settings button in the left sidebar menu
2. hover over a menu title in the existing tree structure
3. click on the gear icon that appears on hover

You will be able to manage its presence in the sitemap or delete it (as well as all its pages). Also read this guide (click here) to not display a menu at all.
 

Create a sub-item in a menu

Once in Site Creator:

1. click on the Settings button in the left sidebar menu
2. the list of your pages appears

With the mouse, move a page slightly to the right under another page:

It will become a sub-page and your menu on the site can display the hierarchy thus created.
 

Non-clickable menu title

Choose if necessary to not make the very first item of such a menu clickable:

1. click on the Settings button in the left sidebar menu

2. click on General Settings to modify this setting under Sub-menu Options:

   

Menu item containing a link to another website

1. click on the Settings button in the left sidebar menu
2. the list of your pages appears

3. click on the Add a page button below the existing hierarchy:

   

4. choose a page name and Show more options

5. choose the URL redirection to specify the destination when clicked:

   

Add a new menu

Once in Site Creator:

1. click on the Settings button in the left sidebar menu
2. hover over a menu title in the existing hierarchy

3. click on the "+" icon that appears on hover:

   

Additional top menu

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

1. click on the Design button in the left sidebar menu
2. click on More settings

3. enable the Header Menu Bar:

   

Once activated, you can customize it using the Settings link in the same place.

Menu styles

Once in Site Creator: 

1. click on the Design button in the left sidebar menu

2. click on Menu Editor:

   

   ‍‍

You can decide the placement of your menus (on the left side of the page or placed at the top, fixed or mobile, "hamburger menu ☰" type on the right or normal, etc.).
 

Change the color of the "hamburger" menu (☰)

If it appears, for example, 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 the predefined style completely using the themes at the very top of the sub-menu:

1. click on Menu Templates (always under Design, then Menu Editor)

   

Fixed menu

Most of the proposed menus will move with the page content. The menu disappears if you scroll down the page:

You can define a menu that should always be fixed to the top edge (with different visual options):

To activate or deactivate the fixed menu:

1. click on Design

2. click on Menu Editor

   

3. click on Main Configuration
4. choose In the header  in the Menu Type box
5. the activate Fixed to top box appears lower down and you can activate it

6. click on Save

   

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

Insert your menus into the body of the page

A module Sub-page Menu allows you to insert your menus and sub-menus anywhere on your page.

The sitemap module displays all menus and all your pages in a single block.

Define the 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 "Contact Us", then the URL will be "www.domain.xyz/contact-us".

To define the custom URL of the page you are on:

1. in the left sidebar menu click the Settings button

2. click on SEO & Metadata (under This sub-page's settings)

   

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

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

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

Create a Custom Contact Form

You can create one or more forms allowing your visitors to write a message, sign up for an activity, in short, fill out any kind of online form with or without attachment:

1. Log in to the Infomaniak Manager (manager.infomaniak.com) using 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 (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. Click on the Content button in the left side menu
2. Click on Applications at the bottom of the list and 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, any redirection page after submission, the email address used, add a captcha (recommended), etc.

To do this, hover over the module to access its settings and click if necessary on the form you want to edit, then on the button located at the bottom next to the save changes button. Choose Form Properties.

It is recommended to change the default sending method.

This guide explains how to manage the logo, header, and footer in Infomaniak Site Creator.

Add a Website Logo

Open 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 (universe Web & Domain)
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 Customize my site

Once in Site Creator:

1. click on the Settings button and then Logo in the left sidebar
2. upload an image and choose whether the site name should also be displayed next to it

‍

Logo Settings

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

Centered Logo Display

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


‍

Hide Logo (+ header and footer)

To create a page without a logo that will have neither a header (thus no menu displayed) nor a footer, it must be set as Homepage (i.e., "Landing page"; note that this does not change the order of pages) using a button located here:

1. click on the Settings button in the left sidebar
2. click on Page List
3. hover over a page in the existing tree structure and click on the gear icon that appears on hover
4. ‍enable the option at the bottom "Homepage" to hide headers and footers:
   

This guide helps you customize a website created with Site Creator Infomaniak.

Change the site colors

To manage themes, colors, and fonts in 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 using the left side menu, for example)
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 side menu
6. click on Customize my site

Once in Site Creator:

1. click on the Design button 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 settings where you can specify which elements a color should be applied to.

Manage the background (image/color) of blocks

On your site's editing page, hover over a block and click the gear icon to access the settings:

Load a website template

You can change the entire design of your website by changing its theme, deciding what should be overwritten or not on the current site during the change:

1. click on the Design button in the left side menu
2. click on Theme Choice

This is where you can choose from the available website themes.

When you have found your new theme, click Install then you can choose which parts of the new template you want to import (by default, only the colors, fonts, or menu style) to avoid overwriting your website content.

If your website is new, you can choose more options when importing.

Change the website fonts

To do this:

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

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

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

It is not possible to import or add a custom font but you can change the provider (the list of fonts will be the same) for privacy reasons, for example:

1. click on Settings in the left side menu
2. click on General Settings
3. choose the font provider
   

Resolve a missing/invisible text issue

If you feel 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 for a dark background:

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


 

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

Visitors will only see the Infomaniak maintenance page. You will still be able to view and edit the site with Site Creator.

Putting Site Creator in maintenance mode

To temporarily deactivate 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 in the top right corner of the interface (or navigate through the left side menu, for example).
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 the ⋮ action menu in the Quick management section.
7. Click on Enable maintenance mode.
8. Repeat the operation to disable it.