1 000 FAQ, 500 tutoriels et vidéos explicatives. Ici, il n'y a que des solutions !
Modifier le code (source / CSS) sur Site Creator
Ce guide explique comment personnaliser le code source, modifier le CSS, modifier la partie HEAD ou BODY d'un site Web réalisé avec Site Creator Infomaniak.
Ajouter du code personnalisé
Pour accéder à Site Creator :
- se connecter au Manager Infomaniak (manager.infomaniak.com) depuis un navigateur Web comme Brave ou Edge
- cliquer sur l'icône ‍ en haut à droite de l'interface (ou naviguer grâce au menu latéral gauche p.ex)
- choisir HĂ©bergement (univers Web & Domaine)
- cliquer sur le nom de l'objet concerné dans le tableau qui s'affiche
- cliquer sur Site Creator dans le menu latéral gauche
- cliquer sur Personnaliser mon site
Une fois dans Site Creator:
- cliquer sur Design dans le menu latéral gauche
- cliquer sur Plus de paramètres
- cliquer sur Code personnalisé en bas
- saisir du code HTML, JavaScript (avec ses balises script) ou CSS personnalisé (avec ses balises style) - lire plus bas pour quelques exemples
- enregistrer les modifications en bas de page
Métadonnées dans HEAD & BODY
Pour ajouter du code JavaScript ou n'importe quel autre code dans la partie HEAD ou BODY du code source de votre site:
- cliquer sur Réglages dans le menu latéral gauche
- cliquer sur SEO & Métadonnées dans la partie Configuration du site Web
- descendre jusqu'à Code personnalisé
- choisir d'ajouter sous les onglets HEAD ou sous BODY
- enregistrer les modifications en bas de page
Exemples de personnalisation CSS
Ces exemples permettent de démarrer la personnalisation avancée des pages du site Web. Un risque existe toutefois en fonction des modifications apportées de ne plus pouvoir accéder à l'éditeur lui-même ce ce qui vous obligera à le recommencer de zéro.
⚠️ Pour de l'aide supplémentaire contacter un partenaire ou remplir un appel d'offres — lire aussi le rôle de l'hébergeur
Personnaliser le fond d'Ă©cran du site Web
Pour mettre l'image de votre choix (à charger dans la bibliothèque de fichiers) en fond de page et personnaliser son affichage:
- se rendre au point 3 visible sur la première image en haut de ce guide
- insérer le code
<style>
pour indiquer que vous souhaitez modifier le code CSS - puis
body {
pour indiquer que vous voulez modifier le corps de la page et le "{
" pour ouvrir l'espace permettant d'insérer les commandes - puis
background-image: url("../data/files/fond01.jpg");
avec le chemin & nom précis de l'image chargée dans la bibliothèque sans oublier le point virgule pour pouvoir insérer la commande suivante background-repeat: repeat;
pour répéter l'image inséréebackground-attachment: fixed;
pour que l'image de fond reste fixe même si le visiteur fait défiler la page vers le bas ou le haut pour lire son contenu}
pour fermer l'espace d'insertion ouvert auparavant</style>
pour indiquer que le code se termine ici
Espacer les lettres de tous les liens du site
Pour Ă©carter (beaucoup) les lettres entre elles sur les mots cliquables (liens):
- se rendre au point 3 visible sur la première image en haut de ce guide
- insérer le code (si pas encore présent)
<style>
pour indiquer que vous souhaitez modifier le code CSS - puis
.container div a {
pour indiquer que vous voulez modifier les blocs de la page et plus particulièrement les liens ("a
") et le "{
" pour ouvrir l'espace permettant d'insérer les commandes - puis
letter-spacing:1em;
en diminuant la valeur (0.9em p.ex) sans oublier le point virgule pour pouvoir insérer la commande suivante ou terminer }
pour fermer l'espace d'insertion ouvert auparavant</style>
pour indiquer que le code se termine ici
Voir d'autres exemples de code CSS à insérer sur votre site.