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

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.

• La plupart des modules fréquents disposent d'options de style pour la marge et le remplissage afin que vous puissiez ajuster l'espacement et le positionnement de vos modules. Les modules de formulaire disposent de davantage d'options de style, y compris la couleur du texte et les styles de bordure.
• Les modules répétés plusieurs fois sur votre page, tels que les boutons ou les en-têtes, disposent généralement de styles prédéfinis pour les couleurs et les polices qui sont basés sur la feuille de style codée de votre modèle ou les paramètres de thème de votre modèle. 
• Les modules personnalisés ne disposent pas d'options de style disponibles dans les éditeurs de contenu et doivent être modifiés dans le gestionnaire de conception. Si vous avez besoin d'aide pour un module personnalisé, vous pouvez contacter un partenaire HubSpot pour des modifications de conception.

Personnaliser des styles pour un module

• Dans votre compte HubSpot, accédez à Marketing > Site web > Pages 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.

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.

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