Base de conhecimento

This guide explains how to customize the source code, modify the CSS, or change the HEAD or BODY section of a website created with Infomaniak 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 Site Creator in question.
  • Click on the Edit my site button to start the editor:
    

Add Custom Code

Once in Site Creator:

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

Metadata in HEAD & BODY

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

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

Examples of CSS Customization

These examples will help you get started with advanced customization of your website's pages. However, there is a risk that, depending on the changes you make, you may no longer be able to access the editor, which will force you to start over from scratch.

Customize the website background

To set your desired image (which you must upload to the file library) as the page background and customize its display:

1. Go to step 3, as shown in the first image at the top of this guide.
2. Insert the <style> code to indicate that you want to modify the CSS code,
3. then body { to indicate that you want to modify the page body, and the "{" to open the space where you can insert the commands,
4. then background-image: url("../data/files/fond01.jpg"); with the exact path and name of the image uploaded to the library, and don't forget the semicolon so you can insert the next 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 up or down to read its content.
7. } to close the previously opened insertion space.
8. </style> to indicate that the code ends here.

Space out the letters of all the links on the site

To spread out (a lot) the letters between each other in the clickable words (links):

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

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

This guide concerns the "Applications" (or "modules," "extensions") available in Infomaniak Site Creator depending on the version you have, to create a showcase website, a blog, or an e-commerce store that is 100% customizable, without any technical knowledge.

Different Applications

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

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

Insert a module on a page

To insert a module:

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 Site Creator in question.
3. Click on the Edit my site button to start the editor:
   

Once in Site Creator:

1. Click on the Content button in the left-hand menu.
2. Click on Applications at the bottom, and the available content will be displayed on the right.
3. Click on one of these applications to insert it into the page:
   
4. Once inserted, hover over the module (or the block itself, depending on the module) to access its settings:
   

Multiple module or missing module

If you delete one of your modules (such as the one for creating a poll) that has already been configured and want to revert, press Undo immediately:

or

You can also reinsert the module, which should revert to its previous settings.

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

Other integrations & widgets

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

Example: inserting a countdown

To add a countdown timer:

1. In the left sidebar menu, click the Content button.‍
2. Click on Objects in the list, and the available content will be displayed on the right.
3. Click on one of these objects to insert it on the page:
   
4. Once inserted, hover over the module to access its settings:
   

This guide explains how to add and customize a button on your Site Creator page, including a fixed button that allows you to return to the top of the page.

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 on the Edit my site button to start the editor:
    

Add a link in the form of a button

To add a button (which leads to the URL of your choice when clicked):

1. Write the text for the button.
2. Select the text.
3. Press the ••• dots to the right of the toolbar to access additional options.
4. Then click on the link icon to open the section that will allow you to specify the type of link and the associated options:
   
5. Configure the destination page and the appearance of the button.
6. Save the changes at the bottom of the tab:
   
7. View the button on your page.
8. Click the button to return to the editor if needed:
   

Add a “Back to top” button

To add and customize a button that takes the visitor back to the top of your Site Creator page as soon as the page scrolls:

1. Click the Design button in the left-hand menu.
2. Click More settings.
3. Enable the option to display the back-to-top button.
4. Adjust the spacing from the right edge.
5. Save the changes at the bottom of the page:
   

Refresh the page if necessary to see the change:

Refer to this other guide for an alternative solution.

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

Prerequisites

• Accessing 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 on the Edit my site button to start the editor:
    

Changing the site colors

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

1. Click on the Design button in the left-hand menu.
2. Click on Site Colors:
   

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

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

Managing the background (image / color) of blocks

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

Load a Website Template

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

1. Click the Design button in the left-hand menu.
2. Click Theme Selection:
   

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

Once you have found your new theme, click Install, and 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 the content of your website.

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

Change Website Fonts

To do this:

1. Click the Design button in the left-hand menu.
2. Click Fonts:
   

You can easily change the main fonts of the website; the first font is used for headings, and the second font is used for the content.

Below, there are more specific settings 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 change the provider (the font list will be the same) for privacy reasons, for example:

1. Click on Settings in the left-hand menu.
2. Click on General settings
3. Choose the font provider:
   

Troubleshooting missing/invisible text

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 to 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 the problem:

This guide explains how to manage the logo, header, and footer in Infomaniak's 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 Site Creator in question.
  • Click on the Edit my site button to start the editor:
    

Add a website logo

Once in Site Creator:

1. Click on the Settings button in the left sidebar.
2. Click on Logo / title.‍‍
3. Upload an image and choose whether the site name should also be displayed next to it.
4. Save the changes:
   

Logo settings

1. Click on the Design button in the left sidebar.
2. Click on Menu Designer‍.
3. Click on Title/logo.
4. Then adjust spacing and colors.
5. Save the changes:
   

Display the logo in the center

In the same location as above (you can also access it by hovering over the header and its logo), activate the option to display the logo on a separate line, which will center the site's logo:

Hide the logo (+ header and footer)

To create a page without a logo that will also have no header (and therefore no menu displayed) or footer, you need to define it as a Homepage (i.e., "Landing page"; note that this does not change the order of the 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 and click on the gear icon that appears on hover.
4. ‍Activate the "Homepage" option at the bottom to hide the header and footer:
   

This guide explains how to modify certain details of a website created with Infomaniak's 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 Site Creator in question.
  • Click on the Edit my site button to start the editor:
    

Change the website name

Click on the Settings button in the left sidebar, then on Site Title:

Company details

Click on the Settings button in the left sidebar, then on Contact details under Website configuration:
‍

This guide explains how to set up the icon displayed in the favorites bar of a web browser, the favicon, in Infomaniak's Site Creator.

Introduction

• Microsoft recommends the following formats for its browsers: 16 x 16, 32 x 32, and 48 x 48.
• Apple, on the other hand, recommends that the favicon size be 180 x 180.

Define the Site Creator favicon

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 on the Edit my site button to start the editor:
    

To define a new favicon:

1. Click on the Settings button in the left-hand menu.
2. Click on General settings:
   
3. Scroll down to the Favicon section and click to choose an image:
   
4. Import/select the favicon from 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 private browsing window, for example):
   

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

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 Site Creator in question.
  • Click on the Edit my site button to start the editor:
    

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

1. Click on the Content button in the left-hand menu.
2. Click on Applications at the bottom of the list.
3. Click on Form Builder:
   
4. Build your form using the elements on the left.
5. Save at the bottom of the page:
   

Once the first form has been created, you can insert it by clicking on ‍ at the location of your choice and selecting it:

The created form will be inserted on your page:

Contact Form Settings

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

To do this, hover over the module to access its settings:

If necessary, click on the form you want to edit, then on Form Properties:

You can also delete the created form so that it is no longer offered:

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

Create a photo gallery

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 on the Edit my site button to start the editor:
    

Once in Site Creator:

1. Click on the Settings button in the left-hand menu; the list of your pages will appear.
2. Click on the Add a page button below the existing tree:
   
3. Activate Show more options to choose the page type PHOTO GALLERY:
   
4. Validate; the new page with the photo gallery module will appear on the screen:
   

Configure the photo gallery

To do this:

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

Once 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 editing a gallery:

 

In addition, you can add a description to any of your photos; below each image, you will notice the "Image description" field. Start typing your description there and press the green button to save the changes:

Add an image slideshow widget

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

1. Click on the Applications button in the left-hand menu.
2. Click on Slider:
   
3. Configure the widget according to your preferences.
4. Insert the configured widget in the desired location by clicking on Content, then Apps, and choosing Slider:
   
5. Select the Slider you created to insert it on the page:
   

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

Introduction

• There is no functionality to manage multiple users on the Blog section (or on Site Creator).
• Several users from the same Organization who have access to Site Creator (via their web hosting access permission) can publish on the blog, but the author's identity will remain the same for all.
• It is possible to get help from the Euria artificial intelligence, as is the case on the rest of the Site Creator pages.
  • Familiarize yourself with this other guide regarding the model used by the writing assistant and the responsibilities of each user.

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 Site Creator in question.
  • Click on the Edit my site button to start the editor:
    

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

1. Click on the + button located below an already inserted block:
   
2. Click on Applications (in the Content tab that opened when you clicked to add the visual block).
3. Click on the Blog module:
   
   • If this is the first time you are inserting this module, you will get the following visual block with an example of the first published article (go to point 4 below):
     
   • If you have already tested the Blog module before and removed it from your pages, you will get this:
     
     1. Press the top option to insert the main block.
     2. Press the second option 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 menu button with three horizontal lines ☰ Blog, then click 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, an optional subtitle, and the body of the article with different formatting options:
   
2. Press the + sign next to the article text or use the Tab key on your keyboard:
   
3. Select the content and click on it to display a text formatting toolbar.
4. From this toolbar, access the AI-powered features (translation, rewriting, 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-hand menu.
2. Click on Blog.
3. Click on Settings and adjust your preferences, remembering 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 in the bottom left corner, then click on Blog:

To edit the content of your article, click on Browse articles in the left-hand menu, 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 article 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 that will be clickable for the visitor and will thus facilitate navigation within the posts:

Don't forget to save the changes at the bottom of the page.

Article date

By default, new blog articles will be added with the "today" 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 for Infomaniak's Site Creator covers the topic of browser cookies.

Introduction

• By default, when your website is new, no cookies should be stored on your visitors' devices, and there are no tracking features for advertising 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 integrated into your website, cookies may be used; for example, with the Poll Form: if you add a poll module to your website, it will use cookies when the website visitor votes (to remember that they have already voted).

Notification for the visitor

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 on the Edit my site button to start the editor:
    

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

1. Click on the Settings button in the left-hand menu.
2. Click on Contact Information under Website Configuration.
3. Enable the cookie information option to configure the brief message and the URL for additional information.
4. Set the display type to expanded or not (see below).
5. Save the changes at the bottom of the page:
   ‍

Additional Settings

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

• default:
  
• expanded:
  

This guide explains how to avoid directly publishing changes to a page in Infomaniak's Site Creator.

Introduction

• Draft mode prevents the following changes from being published:
  • Adding a new content block via the Content menu.
  • Making visual or textual changes to a content block.
  • Deleting a content block.
• Draft mode does not apply to:
  • Global design changes, via the Design menu (colors, fonts, etc.).
  • Content changes related to applications (Q&A, e-commerce, etc.).
  • Changes to global settings, via the Settings menu (Pages, languages, etc.).
  • Subpages of the page you are unpublishing.

1. Save without publishing

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 on the Edit my site button to start the editor:
    

You can put a page into draft mode to make text or other content changes that will not be visible live, until you decide to switch the site back to direct publishing mode:

1. Click on the ... button at the very bottom of the left-hand menu to expand the publishing and preview options.
2. Click on Live to switch to Unpublished mode:
   
3. Now, the yellow mode displayed at the bottom indicates that all your changes (on this page only) will not be visible in real time (unlike Live mode) because they will not be published automatically:
   
   • Changes will be saved as a draft even if you leave the page or the editor…
   • In draft mode, you can work on the page, add text, save it, leave, and come back to continue editing, and this work will not be published until you explicitly decide to (see below):
     
   • Depending on the changes made (e.g., adding a content block), remember to edit the text to validate your changes and save them.
   • To check and confirm that your current changes are not being published as you go, simply go to your site's address from another browser page in incognito mode, for example.

2. Publish the changes or delete the draft

You can exit Draft mode to return to instant publishing:

1. When Unpublished mode is active, click the yellow button in Unpublished mode to display a settings panel:
   
2. The settings panel opens, allowing you to:
   1. publish your changes,
   2. or delete the current draft and return the page to its initial state:
      

Example

1. With Live mode (visible at the bottom of the screen), any changes are immediately visible to visitors of the page.
2. With Unpublished/Draft mode (identifiable by a yellow symbol at the bottom of pages in this mode), your changes are not visible in real time.
3. Leave the page to work on another page; the mode reverts to the default mode, i.e., Live mode, because the page is different, and the mode only applies to the selected pages.
4. Return to the page that was put into draft mode; a symbol at the bottom of the page always indicates that draft mode is active.
5. Click on it to choose to publish or delete the changes and restore the page to how it was before your changes in draft mode.

This guide details how to use media in Infomaniak's Site Creator.

Please note that it is also possible to insert other elements, such as an Infomaniak Newsletter signup 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 Site Creator in question.
  • Click on the Edit my site button to start the editor:
    

Add an image

Media is managed in the file library:

• Add a new content block:
  
• The media can then be replaced or supplemented:
  

But also:

1. Click on the Content button in the left-hand menu.
2. Click on Objects in the list to insert a single image.
3. Click on the IMAGE block on the right:
   
4. Once the image is added, you can also make it a clickable link or change its size in the image editor:
   

You can also add images as a Photo Gallery module.

Change image

To replace an inserted image, which will retain the characteristics of the previous one:

1. Click on an image to edit it.
2. Click on the button of the type Photo Frame on the image thumbnail to be able to select a new image that will replace the previous one:
   

Add a video

To add a video:

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

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-type window.

Add an audio file

To add a sound file:

1. Click on the Content button in the left-hand 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 and choose the files:
   

You can customize it further using the HTML editor.

Add a file to download

To easily offer a file for download:

1. Click on the Content button in the left-hand 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 tutorial presents the creation of navigation menus for your site built 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 launch 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 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 several more.

These menus with the pages they contain are then reused in different places on your site, depending on the chosen theme, among others:

• 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 menus

Add a new menu

To do this:

1. Click the Settings button in the left sidebar.
2. Hover over a menu title in the existing hierarchy.
3. Click the "+" icon that appears on hover:
   

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

1. Click the Settings button in the left sidebar.
2. Hover over a menu title in the existing tree and click on the gear icon that appears on hover:
   
3. Choose the desired settings and validate at the bottom of the page:
   

Refer to this other guide to not display any menu at all.

Create a sub-element in a menu

To do this:

1. Click on the Settings button in the left sidebar.
   • The list of your pages appears.
2. With the mouse, move a page slightly to the right under another page:
   
   • It will become a sub-page and your site menu can display the created tree:
     
   • Also refer to the tip below...

Non-clickable menu title

If necessary, choose not to make the very first element of a menu with sub-menu elements clickable (as configured above):

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

Menu element containing a link to another website

To do this:

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:
   
3. Enter a page name and click on Show more options.
4. Choose the URL redirection to specify the destination upon clicking:
   

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. Activate the Header Menu Bar:
   
4. Once activated, 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:
   
3. Then on Configuration:
   
4. 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 hamburger menu (☰)

If this three-line horizontal menu button ☰ appears, for example, white on white on a mobile device:

1. Click on the Design button in the left sidebar.
2. Click on Menu editor.
3. Click on Menu title / logo.
4. Adjust the text color:
   

Adopt a new menu theme

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

• Click on Menu templates (always under Design, then Menu editor):
  

Fixed menu

Most of the menus offered will move with the content of the page.

• 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 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 box Menu type.
5. The toggle switch Pinned to the top appears lower and you can activate it.
6. Click on Save:
   

Some menu templates (such as #3 and #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:

• Add the element from the Apps:
  

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

Define the page URL

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

If you later change the page name to Hello then the URL will be www.domain.xyz/hello.

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

1. Click the Settings button in the left sidebar.
2. Click on SEO & Metadata (under Settings of this subpage).
3. The first field at the top allows you to define 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 adapted.

This guide concerns the undo function in Infomaniak's Site Creator.

Introduction

• No backup/restore is possible from the Infomaniak Manager.
• If, for example, you delete a content block and want to restore it, you can undo up to the last 20 operations in Site Creator.

Undo an Operation

Prerequisites

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

Once in Site Creator:

1. Click on the  …  ‍‍‍ button at the very bottom of the left-hand side menu in Site Creator to expand the undo options.
2. Click on Undo and confirm the restoration (the arrows next to it allow you to "navigate" through the latest backups):
     
   

This guide explains how to temporarily take an Infomaniak Site Creator site offline.

Preamble

• Public visibility: the maintenance page will only be displayed to your visitors!
  • No translation is available at the moment; the maintenance page will be displayed only in French.
• Administrator access: by staying logged in to the editor, you retain full access to your site to view and modify it via Site Creator.

Put Site Creator in maintenance

To temporarily disable Site Creator:

1. Click here to access the management of your site on the Infomaniak Manager (need help?).
2. Click directly on the name assigned to the site concerned:
   
3. Click on Manage ‍ at the top of the page.
4. Click on Enable maintenance:
   
5. Confirm the operation.

Disable the maintenance page

To bring the site back online for its visitors:

• Repeat the operation above, the menu allows you to disable maintenance:
  

You can also disable maintenance from the management page and from the preview block of your site:

This guide explains how to connect a site created with Site Creator Infomaniak to a domain name.

Prerequisites

• The Site Creator Free offer allows access to the site via a domain name in the form 123xyz.infomaniak.site…
  • To connect a custom domain name, you must first upgrade to a higher offer:
    
• The Site Creator Lite and Pro offers include a free domain name for 1 year among the extensions .ch, .com, .fr, .org, .co.uk, .be, .de, .eu, .it, .es
• If you wish to use an existing domain, it must be in the same Organization.

Connect Site Creator to a domain name

To connect Site Creator (Lite or Pro) to a domain name:

1. Click here to access the management of your site on the Infomaniak Manager (need help?).
2. Click directly on the name assigned to the site in question.
3. Click on Connect my site to a domain to start the configuration wizard:
   
4. The wizard offers to create a new domain name or use an existing one:
   
   • If you create a new domain name at this time, you will need to return to this configuration wizard once the order is complete.
   • If you choose to attach a domain from those existing in your Organization, the wizard offers a list of domains and a subdomain can be created at this time:
     
5. Click the Next button.
6. Check the selected address and then click the button to Confirm:
   

Manage Site Creator domain name(s)

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

1. Click here to access the management of your site on the Infomaniak Manager (need help?).
2. Click directly on the name assigned to the site in question.

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

Further down, you can manage your domains if there are any, click on the chevron ‍ if necessary:

Temporary domain, provisional address, preview URL...

Multiple domain names can be linked to Site Creator, deleted, or swapped and reversed if necessary.

Click on the action menu ⋮ to the right of the domain in question:

However, the preview URL, of type 123xyz.infomaniak.site and distinct in the list of Site Creator domains, cannot be deleted for the proper functioning of your site.

This guide concerns Site Creator and the possibility of creating links to anchors.

Preamble

• An anchor in web design is a hyperlink that points to a specific position on a web page, whether it is on the same page or a different page.
  • When a user clicks on an anchor link, they are redirected to the specified location (in principle, an invisible indication placed in the source code) of the page.
• Anchors are useful for allowing users to quickly navigate to specific sections of a web page or even another page.
  • They improve the user experience by providing an effective way to find and access specific information.

Anchor example

An anchor is located (invisibly) at the end of the FAQ. It is named "end", therefore the following link simply contains the target #end and without any other indication, a web browser will look for this term in the page code where you are and direct the user to it: click here to reach it!

Create this type of link on Site Creator

Usually, to create an anchor in HTML, here is how to proceed:

1. Identify the location on your page where you want to create an anchor (text section, image, or any other element).
2. Use the <a> tag with the href attribute to specify the anchor target:
   1. if the target is on the same page, simply use the element's ID (see point 3 below)
      <a href="#chapter1">Go to chapter 1</a>
   2. if the target is on another page, specify the complete URL of the page, followed by the ID of the target element (see point 3 below)
      <a href="page2.html#chapter1">Go to chapter 1 on page 2</a>
3. In the section of your page where you want users to be redirected, add an element with the corresponding ID:
   <div id="chapter1"> &nbsp; </div>
    

When users click on the "Go to chapter 1" link, the page will automatically scroll to the section with the ID "chapter1". If the target is on another page, they will be redirected to that page and the anchor will work in the same way.

With Site Creator, point 3 above is not "free": each block already has its ID (or hashtag) that you will need to indicate (or modify in advance - see point 3 below) in order to point a link to it.

Find the destination block reference

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 Site Creator concerned.
3. Click the Edit my site button to start the editor:
   

Once in Site Creator:

1. Hover over the content block to be modified and click on the gear:
   
2. Scroll through the settings to the end to get the ID of the block in question:
   
3. A double-click on the field indicating the ID allows you to specify your own title instead of the random ID:
   

Create a link to the block reference

To add a link to text in Site Creator, with the destination being the block located further down on the same page:

1. Select a text.
2. Then click on the icon of the chain:
   
3. In the advanced options, choose the type "Section" to create a link to a part of the same page by selecting the block reference obtained above:
   
   
   Other possibilities:
   1. Place the link with the hash sign (link to the same page):
      
   2. Place the page name followed by the ID (useful if you place the link to another page of the site):
      

END OF PAGE (and anchor placed on this element) - click here to go back to the anchor located at the beginning of the page...

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

Configuring a store in Site Creator

Prerequisites

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

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

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

Once in 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
• Payment upon delivery

Pour utiliser les services de Stripe et Mollie, vous devez disposer d'un numéro de SIRET en France ou d'un IDE en Suisse. De plus, il est nécessaire d'avoir une entreprise valide enregistrée au registre des commerces de votre pays pour utiliser les services de Stripe et Mollie.

Modes de livraison

Vous pouvez créer plusieurs méthodes d'envoi:

Celles-ci seront ensuite proposées lors de la validation du panier de l'acheteur:

Parmi les paramètres pour créer une méthode d'envoi:

• tarifs (+ gratuité des frais de port à partir de quel montant)
• pays autorisés
• frais d'expédition selon poids
• délais d'envoi
  
  

Messagerie

Quatre messages sont prédéfinis et ne peuvent être supprimés. Ils permettent de couvrir l'ensemble de la communication par e-mail autour d'une commande, autant à destination du client que pour le gestionnaire de la boutique.

Il est possible de personnaliser les messages existants et d'en ajouter (puis de supprimer ces messages supplémentaires si nécessaire):

1. Choose the time 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. order processed 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 into each field to customize the texts as much as possible using the elements contained in the order and the information provided by the buyer:

Shop homepage

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

Product Management

To manage products, add or delete them:

1. Hover over the module in the top left corner.
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 as well as the category it should be in (see below). You can, in particular:

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

At the bottom of the product sheet editing, find other products from your list in order 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 at the very bottom.

Delete or duplicate a product

On the product editing page, 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 the same action menu, manage the stock directly on the list of your products (to edit the stock in bulk).

But each product page 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 within Categories and subcategories, which will then be displayed according to the design of your site.

Click in the Categories submenu on the left of the store administration panel, under Products.

Define 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 Promo Code submenu on the left of the store 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 the list of your products to a CSV file (.csv format) using the action menu located at the top right of the list of your products.

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 Orders submenu on the left of the store administration panel.

Export the list of your orders

Export the list of your orders to a CSV file (.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 during their order):

1. Hover over the module in the top left corner.
2. Click on Configuration.
3. Click on Customers in the submenu on the left side of the store administration panel.

Export the list of your customers

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