This guide concerns Site Creator Infomaniak which allows you to create a complete site composed of several pages.

Introduction

• The homepage is mandatory (with or without a header and footer).
• Add additional pages, blank, password-protected, or containing specific content directly (such as a contact form).
• Add legal pages (to include your terms of use, for example).
• They will all be part of the site's navigation menu(s).
• To (re)create a complete site with pages and subpages (examples of pre-designed sites), you can install a site template.

Add a page to the site

Prerequisites

• Access Site Creator:
  • Click here to access the management of your product on the Infomaniak Manager (need help?).
  • Click directly on the name assigned to the Site Creator in question.
  • Click the Edit my site button to start the editor:
    

Once in Site Creator:

1. Click on the Settings button in the left sidebar - the list of your pages appears.
2. Click on the Add a page button below the existing tree structure:
   
3. Choose a page name and Show more options to select the page type and other settings.

Copy / Duplicate a page

To do this:

1. Click on the Settings button in the left sidebar - the list of your pages appears.
2. Hover over the desired page in the existing tree structure.
3. Click on the duplication icon that appears on hover.

Another option: go to the page you want to clone. Under **Settings**, click the **Add a page** button below the existing tree and in **Show more options** choose **Clone / Duplicate**:
 

Rename a page

To do this:

1. Click on the Settings button in the left sidebar - the list of your pages appears.
2. Hover over the desired page in the existing tree structure.
3. Click on the gear to access the page options:
   

Another option: under **Settings**, on the existing tree structure, you can directly rename your pages and then **Save changes** at the bottom of the page:

Warning, renaming a page changes its URL.

Change the order of the pages

To do this:

1. Click on the Settings button in the left sidebar - the list of your pages appears.
2. On the existing tree structure, you can directly drag your pages to change their order (this mainly influences the display of pages within a menu) and then Save changes at the bottom of the page:
    
   

Delete a page

To do this:

1. Click on the Settings button in the left sidebar - the list of your pages appears.
2. Hover over the desired page in the existing tree structure.
3. Click on the trash can that appears on hover.
4. Confirm the deletion and the page will disappear without any possibility of cancellation.

Another option: go to the page you want to delete. Under Settings, click the red Trash button at the bottom of the page to delete it:

Create a private page / password-protected page

To do this:

1. Click on the Settings button in the left sidebar - your list of pages appears.
2. Hover over the desired page in the existing tree structure.
3. Click on the gear to access the page options.
4. Enable the password protection option to set the password that will be required when viewing the page:
   
5. Save the changes at the bottom of the page.

To test, visit the page from a private browser (to avoid being logged into Site Creator) or preview the page from the editor.

Add a "hidden" page

To add a page that will not appear in the main menu (but will remain accessible via its direct address and by a search engine if it indexes your page, as well as in the site map if you wish):

1. Click on the Settings button in the left sidebar - the list of your pages appears.
2. Hover over the desired page in the existing tree structure.
3. Click on the gear to access the page options.
4. Select the last display type to hide the page from navigation and determine if you still want to include the page in the site map:
   
5. Save the changes at the bottom of the page.

Another option: hover over the desired page in the existing tree and click on the page icon to the left of your page's name until the crossed-out eye appears:

Save the changes at the bottom of the page.

If necessary, you can create a link to this page from another, as the hidden page will still appear in the site's page list when you add an internal link:

This guide is intended for users of Site Creator who want to optimize the referencing of their site.

Preamble

• Infomaniak is one of the most performant hosts in the French-speaking market, which contributes to the good referencing of your sites.
• However, Infomaniak will not intervene in the content or development of hosted sites (refer to this other guide regarding referencing).

Add Site Creator to Google

Prerequisites

• Access Site Creator:
  • Click here to access the management of your product on the Infomaniak Manager (need help?).
  • Click directly on the name assigned to the relevant Site Creator.
  • Click the Edit my site button to start the editor:
    

To submit your site to the Google search engine:

1. Click on the Applications button in the left sidebar.
2. Click on the Add to Google application:
   
   
    
   • You can insert the verification code if you use Google Search Console.

Define the Meta tags

Once in Site Creator:

1. Click on the Settings button in the left sidebar.
2. Click on General Settings.
3. Click on SEO and statistics.
4. Insert title, description, and keywords for the entire site:
   
   

This is also where you can manage the robots.txt file if necessary.

To set this up for a specific page:

1. Click on the Settings button in the left sidebar.
2. Click on General Settings.
3. Click on Subpage settings.
4. Click on SEO & Metadata.

If you do not intervene on this page, it is Site Creator that dynamically manages your tags.

You can also manage the URLs of your pages independently of your page's SEO title (page named "Contact" for SEO purposes while its URL will be, for example, "/enterprise").

What are "Meta Keywords"?

To enter multiple keywords, separate them with a comma or similar:

Sitemap.xml

Do not confuse this with the Site Map module, the sitemap.xml file lists all the pages of your site to help search engines discover and index them effectively. You can examine it to understand the site structure; replace domain.xyz with your domain name to access it (publicly) from a browser:

https://domain.xyz/sitemap.xml

Submit your clean URL to Google Search Console (refer to the first chapter above in this guide) and other webmaster tools to improve indexing.

Insert tracking codes

Your website includes a simple Statistics module, but you can use Google Analytics or other tracking methods (such as Facebook Pixel, Google Tag...) that require inserting a code on your site:

1. Click on the Settings button in the left sidebar.
2. Click on General Settings.
3. Click on SEO and statistics.
4. Scroll down the page and insert your tracking codes.

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

Prerequisites

• Access Site Creator:
  • Click here to access the management of your product on the Infomaniak Manager (need help?).
  • Click directly on the name assigned to the relevant Site Creator.
  • Click on the Edit my site button to start the editor:
    

Access files

The library is accessible from the bottom part of the left sidebar, under Files:

These media will be available when you edit your pages and want to insert content. 

Organize your files, folders, and subfolders

Warning, 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:

Upload a new file to the library

Click on Send a file to browse your hard drive and upload the desired files:

Common image formats are supported (webp, jpg, jpeg, png, gif, svg, etc.), as are videos (mp4, mov, etc.). You can also upload files (zip, pdf, etc.) to make them available to visitors via the File Download module.

Compress an image

Images larger than 1200 px are automatically reduced to 1200 px upon import. However, you can also compress the image itself using the Compress an image option from the library to increase the display speed of your site.

⚠ The Compress an image option generates the TinyPNG API key error:

To avoid this, obtain an TinyPNG API key from their site and enter it under Applications > TinyPNG in SiteCreator:

Open the image editor

Hover over an image in the library and click on the action menu ⋮ to access the image editor:

Search for and use free images

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

Protect your content

Click on Settings in the left sidebar, then on General Settings:

Disable right-click

At the bottom, there is an option that, once activated, disables right-clicking for visitors on your site.

Solving a media upload issue

Try to upload the lightest JPG or PNG possible; it is not necessary to send images wider than 1000-2000 pixels to the server.

Make sure your files are not in "300DPI" or higher resolution, you do not need it on your website, it is only for printing.

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

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

Setting up an online store on Site Creator

Prerequisites

• Access Site Creator:
  • Click here to access the management of your product on the Infomaniak Manager (need help?).
  • Click directly on the name assigned to the relevant Site Creator.
  • Click on the Edit my site button to start the editor:
    

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

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

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

Payment methods

• PayPal
• Credit card & Twint (via Stripe or Mollie)
• Custom payment
• at 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 with the commercial registry of your country to use the services of Stripe and Mollie.

Shipping methods

You can create multiple shipping methods:

These will then be offered when the buyer's cart is validated:

Among the parameters for creating a shipping method:

• rates (+ free shipping from a certain amount)
• allowed countries
• shipping fees based on weight
• delivery times
  
  

Messaging

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

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

1. Choose when the email should be sent (or simply disable the message to keep it without using it)
   1. new order email (to notify you)
   2. processed order e-mail (customizable)
   3. delivery note in PDF format (customizable)
   4. invoice is also generated and available in PDF format on your Stripe/Paypal/Mollie account
2. Variables can be inserted into each field to maximize text customization using the elements that make up the order and the information provided by the buyer:

Homepage of the store

• Display of product categories if any
• Random product presentation
• etc.

Product management

To manage products, add or remove them:

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

Find the first three example products:

Reorganize your products by dragging them with the mouse.

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

• create attributes (color for example) to offer the same product in several versions/prices
• define whether the product should be dematerialized (virtual), for example a PDF, a ZIP or an MP3, and therefore downloadable after purchase

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

At the 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 at the very bottom.

Delete or duplicate a product

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

Inventory management

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

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

Product Categories

Your products can be organized into Categories and Subcategories which will then be displayed according to the design of your site.

Click in the sub-menu Categories on the left of the shop 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 you to grant a discount (in % or currency) on an order.

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

You can specify:

• its expiration date
• its possible minimum amount
• its name ("Special Christmas Discount" for example)
• its format ("JOYEUXNOEL")

Export the list of your products

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

Order management

To manage past and current orders:

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

Export your order list

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

Customer management

To manage clients (a client provides personal information during their order):

1. Hover over the module at the top left.
2. Click on Configuration.
3. Click in the Clients sub-menu on the left of the shop's administration panel.

Export your customer list

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

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

Introduction

• These are the content blocks that will allow you to easily create content on your pages.
• There are all sorts, separator, price list, site map, simple text or image blocks, etc.
• They are generally preconfigured to make it easier for you to get started with them.

Add a content block

Prerequisites

• Access Site Creator:
  • Click here to access the management of your product on the Infomaniak Manager (need help?).
  • Click directly on the name assigned to the relevant Site Creator.
  • Click the Edit my site button to start the editor:
    

Once in Site Creator:

1. Click on the Content button in the left sidebar: the list of blocks appears.
2. Choose the desired category on the left, then the desired content on the right.

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

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

Delete a content block

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

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

Duplicate a block

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

Edit a 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.

Additionally, you can edit the HTML code (recommended for advanced users only) if you need more control over any content block; this allows you, for example, to insert HTML code for subscribing to the Infomaniak Newsletter.

You can also delete certain elements from your content blocks: when editing text, there is the "right arrow" button that displays more options and the Delete button:

To edit an image, click on it and a new window appears. At the bottom, there is the Save button on the right and the red Delete button on the left.

Create a content block type

In the left sidebar, under the contents that can be added to your page, you will 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 template block to design your ideal block. This will be inserted into your page by clicking on Apply changes at the bottom of the page.

Modify the block margins

Hover over the content block you want to modify and click on the gear icon:

 

Scroll through the settings until you reach Default block spacing and click on it to set your own parameters:

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

Moving a block up or down

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

Hover over the content block you want to move, then click on the dotted area at the top left; hold down to move the block:

Create a space between two blocks

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

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

You can also "decorate" the top and bottom of a block in a more automatic way, by activating the Decoration option from the block's edit menu:

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

Prerequisites

• Access Site Creator:
  • Click here to access your product management on the Infomaniak Manager (need help?).
  • Click directly on the name assigned to the relevant Site Creator.
  • Click the Edit my site button to start the editor:
    

Open the HTML editor

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

1. Hover over the block you want to edit on your page and click on the gear icon that appears on hover:
   
2. Click on the HTML element in the left sidebar to edit the block's HTML code:
   

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 is editable via the CODE button, which opens the HTML editor:

‍
You can also add code outside of 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

• Access Site Creator:
  • Click here to access the management of your product on the Infomaniak Manager (need help?).
  • Click directly on the name assigned to the relevant Site Creator.
  • Click the Edit my site button to start the editor:
    

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 an attachment:

1. Click on the Content button in the left sidebar.
2. Click on Applications at the bottom of the list, then on Form Builder.

Once the first form is created, it appears on your page:

Contact form settings

You can customize the thank you message, the possible 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. Select Form Properties.

It is recommended to change the default sending method.

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

Prerequisites

• Access Site Creator:
  • Click here to access the management of your product on the Infomaniak Manager (need help?).
  • Click directly on the name assigned to the relevant Site Creator.
  • Click the Edit my site button to start the editor:
    

The different navigation menus

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

1. Click on the Settings button in the left sidebar.
2. By default, the list of your pages appears, classified into 2 main sections: MAIN MENU and LEGAL.

But you can add more.

These menus, along with the pages they contain, are then displayed in various locations on your site depending on the chosen theme, among other factors.

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

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

Manage the menu

You can manage its presence in the site map or delete it (along with all its pages):

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

Refer to this other guide to prevent any menu from appearing at all.

Create a sub-element in a menu

For this:

1. Click on the Settings button in the left sidebar.
   • Your list of pages appears.
2. 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 will be able to display the resulting tree structure.
      

Non-clickable menu title

If necessary, choose to make the very first element of such a menu not clickable:

1. Click on the Settings button in the left sidebar.
2. Click on General Settings to modify this setting under Submenu Options:
   

Menu item containing a link to another website

For this:

1. Click on the Settings button in the left sidebar.
   • Your list of pages appears.
2. Click on the Add a page button below the existing tree structure:
   
3. Choose a page name and Show more options.
4. Choose the URL redirection to specify the destination upon click:
   

Add a new menu

For this:

1. Click on the Settings button in the left sidebar.
2. Hover over a menu title in the existing tree structure.
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.
2. Click on More settings.
3. Enable the Header Menu Bar:
   
   • Once enabled, you can customize it using the Settings link in the same place.

Menu styles

To manage the different menu styles:

1. Click on the Design button in the left sidebar.
2. Click on Menu editor:
   
   ‍

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

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

If this three-line horizontal menu button ☰ 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

Completely change the predefined style using the themes at the very top of the submenu:

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

Fixed menu

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

You can set a menu that will always be fixed at the top (with various 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 header in the Menu type box.
5. The toggle switch button Fixed at the top appears lower and you can activate it.
6. Click on Save:
   

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

Insert your menus into the body of the page

A module Subpage Menu allows you to insert your menus and submenus anywhere on your page.

The site map displays all menus and all your pages in a single block.

Set the page URL

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

If you later 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 you are on:

1. Click on the Settings button in the left sidebar.
2. Click on SEO & Metadata (under Settings for this subpage):
   

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

If URL changes are recorded 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 blog module on your site created with Site Creator Infomaniak.

Preamble

• There is no feature allowing the management of multiple users in the Blog section (or in Site Creator).
• Several users from the same Organization with access to Site Creator (via their web hosting access authorization) will be able to publish on the blog, but the author's identity will remain the same for all.
• It is possible to get help from artificial intelligence, as is the case on the rest of the Site Creator pages.
  • Refer to this other guide regarding the model used by the writing assistant and the responsibilities of each.

Starting a blog on Site Creator

Prerequisites

• Access Site Creator:
  • Click here to access the management of your product on the Infomaniak Manager (need help?).
  • Click directly on the name assigned to the relevant Site Creator.
  • Click the Edit my site button to start the editor:
    

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

1. Click the + button located below an already inserted block:
   
2. Click on Applications (on the Content tab that opened when you clicked to add the visual block).
3. Click on the Blog module:
   
   1. If this is the first time inserting this module, you will get the following visual block with an example of the first published article (skip to point 4 below):
      
   2. If you have already tested the Blog module before and removed it from your pages, you will get this:
      
      1. Press the top choice to insert the main block.
      2. Press the second choice to display a block with the 3 most recent published articles only if you already have a main block inserted elsewhere on the site.‍
4. Once the **Blog** module is inserted, hover over the block and click on the three horizontal line menu button **☰ Blog** then on ‍ **New article** to insert a blank article:
   

Publish content using artificial intelligence

To write content and, if necessary, improve your drafts:

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

Edit the blog

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

1. Click on Applications in the left sidebar.
2. Click on Blog.
3. Click on Settings and adjust your preferences, don't forget to save at the bottom of the page:
   

Edit blog posts

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

To edit the content of your article, click on Browse articles in the left sidebar, hover over and click on the pencil icon ✎:

To configure (see below) one of the articles, hover over and click on the gear icon:

Tag, archive, or expire an article

A blog post can disappear from your list of articles, either by giving it an expiration 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 navigation within the posts:

Post date

By default, new blog posts will be added with today's date, but it is possible to change it:

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

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

Prerequisites

• Access Site Creator:
  • Click here to access the management of your product on the Infomaniak Manager (need help?).
  • Click directly on the name assigned to the relevant Site Creator.
  • Click the Edit my site button to start the editor:
    

Change the site's colors

To manage themes, colors, and fonts in Site Creator:

1. Click on the Design button in the left sidebar.
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:

1. Hover over a block and click on the gear to access the settings:
   
   

Load a website template

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

1. Click on the Design button in the left sidebar.
2. Click on Theme Selection:
   

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

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

If your website is new, you can choose more options during import.

Change the fonts of the website

For this:

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

You can easily change the main fonts of the website, the first font being used for headings 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 sidebar.
2. Click on General settings
3. Choose the font provider:
   

Solving an issue with missing/invisible text

If you think 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, this 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 solve this problem: