Si les paramètres du design ne suffisent pas, vous pouvez ajouter votre propre CSS et HTML à votre site web. Selon ce que le code doit faire, il existe quatre emplacements pour celui-ci. Tous sont disponibles dans tous les forfaits.
Où placer votre code
- Feuille de style personnalisée pour tout le site web : Paramètres → Zone d’en-tête, section Feuille de style CSS supplémentaire personnalisée. Vos règles CSS s’appliquent à chaque page ainsi qu’à la mise en page mobile.
- Code dans la zone head : Paramètres → Zone d’en-tête, section Code HTML supplémentaire personnalisé (entre <head> et </head>). C’est l’endroit pour les balises
<style>et<link>, les balises meta supplémentaires ou les polices web. - HTML au début ou à la fin de chaque page : Paramètres → Général, section Tout le site, champs Début de chaque page et Fin de chaque page. Convient aux codes de compteur et aux extraits similaires qui doivent apparaître sur chaque page.
- Code dans une seule page : dans l’éditeur de contenu via Ajouter un bloc → Spécial → HTML intégré, par exemple pour une carte, un widget ou le code d’intégration d’une vidéo. L’Éditeur HTML de la barre d’outils vous permet en plus de modifier directement le HTML du contenu de la page.
Ajouter votre propre feuille de style
- Écrivez vos règles CSS dans un éditeur de texte et enregistrez le fichier avec l’extension
.css. - Téléversez le fichier sous Fichiers → Téléverser des fichiers (voir Téléverser des fichiers). Les fichiers CSS appartiennent au dossier des fichiers de code ; Sélection automatique du dossier les y place.
- Ouvrez Paramètres → Zone d’en-tête et choisissez le fichier sous Feuille de style CSS supplémentaire personnalisée dans le champ URL (vers le fichier .css) :.
- Cliquez sur Enregistrer et rechargez votre site web.
Si vous n’avez besoin que de quelques règles, vous pouvez à la place les placer dans le champ Code HTML sous Code HTML supplémentaire personnalisé (entre <head> et </head>), à l’intérieur d’une balise <style>...</style>.
Intégrer du code dans une page
- Ouvrez la page sous Pages → Gérer les pages → Modifier le contenu de la page.
- Cliquez sur Ajouter un bloc (ou Ajouter un élément après sur un élément existant), ouvrez l’onglet Spécial et choisissez HTML intégré.
- Collez le code et enregistrez la page.
Bon à savoir
- Vos modifications sont en ligne immédiatement ; il n’existe pas de version de test séparée de votre site web.
- Le CSS personnalisé s’applique également à la mise en page mobile. Évitez les largeurs fixes et utilisez
max-width: 100%afin que vos éléments tiennent sur les petits écrans (voir Sites web adaptés aux mobiles). - Les fichiers HTML complets (
.htm,.html) ne peuvent être téléversés qu’avec le forfait Premium. Pour les bases du HTML, voir Qu’est-ce que le HTML ?.