Sitebuilder offre de vastes possibilités de personnalisation, mais parfois vous voulez plus. Avec du HTML et CSS personnalisés, vous pouvez ajouter des fonctionnalités uniques et perfectionner votre design dans les moindres détails. Ce guide montre comment ajouter votre propre code de manière sécurisée et efficace.

Quand utiliser du code personnalisé

Le code personnalisé est utile dans diverses situations :

  • Effets visuels et animations uniques
  • Intégrer des widgets et outils externes
  • Faire des ajustements de style spécifiques
  • Ajouter des pixels de suivi pour le marketing
  • Implémenter des animations avancées
  • Fonctionnalités que Sitebuilder ne propose pas par défaut
  • Intégrer des widgets de chat tiers
  • Utiliser des polices personnalisées

Ajouter un bloc HTML

Placer un élément HTML

Ajouter un bloc HTML est simple :

  1. Ouvrez la page dans l'éditeur
  2. Cliquez sur l'icône plus pour ajouter un élément
  3. Cherchez HTML ou Code dans la bibliothèque d'éléments
  4. Faites glisser le bloc HTML à l'emplacement souhaité sur votre page

Entrer le code

Après avoir placé le bloc :

  1. Cliquez sur le bloc HTML pour le sélectionner
  2. Cliquez sur Éditer le code pour ouvrir l'éditeur
  3. Collez ou tapez votre code HTML dans le champ de texte
  4. Cliquez sur Enregistrer pour appliquer les modifications
  5. Vous verrez immédiatement le résultat dans l'aperçu

Exemples d'utilisation du HTML

Vous pouvez utiliser le HTML pour divers objectifs. Pensez à intégrer des widgets externes, à créer des structures personnalisées avec des divs et des classes, ou à ajouter des éléments interactifs que Sitebuilder ne propose pas par défaut.

Ajouter du CSS

Méthode 1 : CSS global

Ajoutez du CSS qui fonctionne sur toutes les pages :

  1. Allez dans Paramètres dans le tableau de bord
  2. Cliquez sur Code personnalisé ou Avancé
  3. Trouvez la section CSS personnalisé
  4. Ajoutez votre code CSS
  5. Cliquez sur Enregistrer pour confirmer

Ce CSS sera chargé sur chaque page de votre site Web.

Méthode 2 : CSS spécifique à la page

CSS qui ne fonctionne que sur une page spécifique :

  1. Ouvrez la page que vous souhaitez modifier
  2. Allez dans Paramètres de la page
  3. Trouvez la section CSS personnalisé ou code Head
  4. Ajoutez votre CSS avec des balises style
  5. Enregistrez la page

Méthode 3 : Style en ligne

Directement sur un élément en HTML :

  1. Ajoutez un bloc HTML
  2. Utilisez des styles en ligne dans vos éléments HTML
  3. C'est pratique pour des ajustements ponctuels

Les bases du CSS expliquées

Comprendre les sélecteurs

Les sélecteurs CSS déterminent quels éléments vous stylisez :

  • Sélectionner un élément : Stylisez tous les éléments d'un type, comme tous les titres h2 ou tous les paragraphes.
  • Sélectionner une classe : Stylisez les éléments avec un nom de classe spécifique. Les classes commencent par un point et peuvent être réutilisées.
  • Sélectionner un ID : Stylisez un élément spécifique avec un ID unique. Les IDs commencent par un dièse et sont uniques par page.

Propriétés CSS courantes

  • Couleurs et arrière-plans : Modifiez les couleurs de texte, les couleurs d'arrière-plan et les couleurs de bordure pour personnaliser votre design.
  • Espacement et marges : Déterminez l'espace à l'intérieur des éléments (padding) et à l'extérieur des éléments (margin) pour une bonne mise en page.
  • Typographie : Modifiez la taille de la police, le poids, la hauteur de ligne et l'alignement pour un texte lisible.
  • Propriétés de mise en page : Utilisez display, flexbox et grid pour des mises en page complexes et un positionnement.

Techniques CSS avancées

Créer des effets de survol

Les effets de survol rendent votre site Web interactif. Lorsque les visiteurs passent leur souris sur un élément, le style peut changer. Pensez aux changements de couleur, aux effets d'ombre ou aux mouvements subtils.

Ajouter des transitions

Les transitions rendent les effets de survol fluides. Au lieu de changements brusques, vous obtenez des animations douces. Définissez la durée et le type d'animation pour un résultat professionnel.

Implémenter des animations

Avec des animations keyframe, vous pouvez créer des mouvements plus complexes. Les éléments peuvent apparaître, glisser ou tourner. Commencez simplement et construisez lentement.

Style réactif

Adaptez votre style par taille d'écran avec des media queries. Définissez des points de rupture pour mobile, tablette et bureau. Assurez-vous que votre style personnalisé a fière allure sur tous les appareils.

Ajouter du JavaScript

Placer des scripts dans le Head

Pour les scripts qui doivent se charger tôt :

  1. Allez dans Paramètres et sélectionnez Code personnalisé
  2. Trouvez la section Head
  3. Ajoutez votre script
  4. Attention : cela peut influencer le temps de chargement

Placer des scripts dans le Body

Pour les scripts qui peuvent se charger plus tard :

  1. Allez dans Code personnalisé
  2. Trouvez la section Body ou footer
  3. Ajoutez votre script
  4. C'est souvent mieux pour les performances

Scripts courants

Les scripts couramment utilisés que vous pouvez ajouter sont Google Tag Manager pour l'analyse et le marketing, Facebook Pixel pour le suivi des publicités, et des widgets de chat de fournisseurs comme Zendesk ou Intercom.

Suivre les meilleures pratiques

Organisation du code

Gardez votre code organisé :

  • Utilisez des commentaires clairs pour marquer les sections
  • Regroupez le CSS connexe ensemble
  • Utilisez des noms de classe descriptifs qui expliquent la fonction
  • Faites des sauvegardes de votre code personnalisé

Considérations de performance

Gardez votre site Web rapide :

  • Minimisez la quantité de code personnalisé
  • Chargez les scripts de manière asynchrone lorsque cela est possible
  • Testez l'impact sur le temps de chargement après les modifications
  • Supprimez le code inutilisé

Planification de la maintenance

Planifiez pour l'avenir :

  • Documentez ce que fait votre code
  • Testez après les mises à jour de Sitebuilder si tout fonctionne encore
  • Faites des sauvegardes de votre code personnalisé
  • Tenez un changelog des modifications

Cas d'utilisation courants

Intégrer des polices personnalisées

Utilisez Google Fonts ou d'autres polices Web en ajoutant l'importation de police à votre CSS et en appliquant ensuite la police à vos éléments de texte.

Créer des animations de défilement

Faites animer des éléments lorsqu'ils défilent dans le champ de vision. Combinez des animations CSS avec la détection de défilement JavaScript pour des effets modernes.

Styliser des boutons personnalisés

Créez des boutons accrocheurs avec des dégradés, des ombres et des effets de survol. Modifiez les couleurs selon votre charte graphique pour un design cohérent.

Ajouter des tooltips

Ajoutez des tooltips informatifs qui apparaissent au survol. Pratique pour des explications supplémentaires sur des sujets ou produits complexes.

Conseils de dépannage

Le CSS ne fonctionne pas

Si votre CSS ne fonctionne pas, vérifiez :

  • Les sélecteurs sont-ils correctement orthographiés ?
  • Y a-t-il du CSS conflictuelle provenant du thème ?
  • Essayez la déclaration !important en dernier recours
  • Vérifiez si le CSS est effectivement chargé

Résoudre les erreurs JavaScript

En cas de problèmes JavaScript :

  • Vérifiez la console du navigateur avec F12
  • Vérifiez si les bibliothèques requises sont chargées
  • Testez en mode incognito sans extensions
  • Vérifiez l'ordre de chargement des scripts

Déboguer les problèmes de mise en page

En cas de problèmes de mise en page :

  • Inspectez avec les outils de développement du navigateur
  • Vérifiez les paramètres de box-sizing
  • Vérifiez les propriétés de l'élément parent
  • Recherchez des marges conflictuelles

Articles connexes

Besoin d'aide ?

Nous sommes là pour vous aider ! Vous rencontrez des difficultés ou avez des questions ? Notre équipe de support est prête à vous aider personnellement. Envoyez-nous un message via le système de tickets - nous répondons généralement dans quelques heures et sommes heureux de vous aider.