Avertissement : cet article est le résultat de la traduction automatique, l'exactitude et la fidélité de la traduction ne sont donc pas garanties. Pour consulter la version originale de cet article, en anglais, cliquez ici.
Landing Pages

Personnaliser les styles de module dans l'éditeur de contenu

Dernière mise à jour: octobre 19, 2020

Disponible avec :

Hub Marketing Professional, Enterprise
Hub CMS Professional, Enterprise
Ancienne version Hub Marketing Basique

Vous pouvez modifier le style des modules individuels dans l'éditeur de pages de destination et de pages de site web. Dans la plupart des cas, vous pouvez ajuster l'espacement et le remplissage autour de vos modules dans l'onglet Style pour personnaliser la position du module sur votre page. Si le développeur de site web qui a créé votre modèle de page a inclus des options de style supplémentaires, celles-ci apparaîtront dans l'onglet Options.

Si vous utilisez un modèle de démarrage, un modèle de thème ou un modèle codé avec une zone de glisser-déposer, vous pouvez également appliquer des styles d'arrière-plan aux lignes, colonnes ou sections de votre page.

Remarque : La modification du style d'un module à partir de l'éditeur de page ajoutera des règles CSS avec les balises !important, qui peuvent remplacer les règles dans votre feuille de style. Pour un résultat optimal, il est recommandé de travailler avec un concepteur afin d'effectuer les modifications CSS directement sur les feuilles de style jointes à votre site. Pour personnaliser rapidement des styles de page sans utiliser de code, utilisez un modèle de démarrage ou un modèle de thème.

Avant de commencer

Les options de style disponibles dépendent du type de module que vous modifiez et du modèle de page que vous utilisez. Le développeur de site web qui a créé votre modèle détermine les options de style qui apparaissent dans l'éditeur de page.

Personnaliser des styles pour un module

  • Dans votre compte HubSpot, accédez à Marketing Site webPages de destination ou Pages de site web.
  • Dans le panneau de gauche, cliquez sur l'onglet Contenu, puis sélectionnez le module que vous souhaitez modifier.
  • Cliquez sur l'onglet Styles.
  • Utilisez les flèches pour ajuster les marges et le remplissage autour de votre module. Cochez la case Uniforme pour appliquer un espacement égal des quatre côtés de votre module.
  • Personnalisez les autres couleurs, le remplissage ou les styles de police disponibles pour votre module. 
  • Pour annuler les modifications apportées au style du module, cliquez sur l'icône Rétablir refresh pour réinitialiser tous les styles.

edit-module-styles

Personnaliser plus d'options de style dans un modèle de démarrage ou un modèle de thème

Si vous utilisez un modèle de démarrage, certaines options de style, telles que les polices ou les couleurs par défaut, sont répétées sur plusieurs parties de votre page. En fonction du codage du modèle par votre développeur de site web, vous pouvez remplacer ces styles par défaut dans l'onglet Options du panneau de gauche.

  • Dans l'éditeur de page, cliquez sur le module pour le sélectionner.
  • Dans le panneau de gauche, cliquez sur l'onglet Options.
  • Sous les options de contenu de module par défaut, activez le bouton Remplacer le style par défaut.
  • Dans cette section, vous pouvez sélectionner des styles supplémentaires, selon les options incluses dans le modèle de votre page. Les options de la plupart des modèles de démarrage peuvent être remplacées dans cette section.

override-default-styles

  • Après avoir effectué vos modifications, cliquez sur Appliquer les modifications dans l'angle inférieur gauche. Pour revenir à toutes les options de contenu du panneau de gauche, cliquez sur Retour dans l'angle supérieur gauche.