Dernière mise à jour: mars 8, 2023
Si vous utilisez des modèles de mise en page créés dans l'outil de gestion de la conception, centrez une image, un bouton CTA ou un module de logo sur votre page, blog ou e-mail, en ajoutant un style en ligne à votre modèle.
Si vous utilisez un modèle qui comprend une zone de glisser-déposer, vous pouvez centrer l'alignement du module dans l'éditeur de contenu. Vous pouvez également centrer les modules dans l'éditeur de pages à l'aide d'espaceurs horizontaux.
Centrer une image, un bouton CTA ou un logo avec un style en ligne
Remarque :
- Cette méthode nécessite des connaissances de base en HTML.
- Si votre page ou votre modèle comporte une feuille de style jointe ou si un style supplémentaire a été ajouté, il est possible qu'une feuille de style CSS existante affecte votre image, votre CTA ou votre logo. HubSpot recommande de travailler avec un designer pour identifier la source du style et faire les changements nécessaires pour centrer vos actifs.
Pour centrer une image, un bouton CTA ou un logo dans un e-mail ou un modèle de page :
- Dans votre compte HubSpot, accédez à vos pages de destination, votre page de site web, votre article de blog ou votre tableau de bord des e-mails.
- Passez le curseur de la souris sur votre page, article de blog ou e-mail, puis cliquez sur Modifier.
- En haut de l'éditeur de contenu, cliquez sur l'onglet Paramètres.
- Dans l'onglet Paramètres, faites défiler vers le bas et cliquez sur Options avancées.
- Dans la section Modèle , cliquez sur Modifier ce modèle. Cette action ouvrira votre modèle dans l' éditeur de mise en page dans un nouvel onglet ou une nouvelle fenêtre.
- Dans votre modèle de mise en page, cliquez sur le logo, le CTA ou le module d'image pour le sélectionner dans l'inspecteur.
- Dans le champ Inline Styling , ajoutez le CSS text-align : center ;
- En haut à droite, cliquez sur Publier les modifications pour appliquer vos modifications à ce modèle.
- Retournez ensuite à l'éditeur de contenu et actualisez votre navigateur web pour que les modifications apportées à votre modèle soient prises en compte. Le contenu de ce module sera désormais centré sur votre page, votre blog ou votre e-mail.
Centrer une image, un bouton CTA ou un logo à partir des options de style de votre module
Si vous utilisez un modèle avec une zone de glisser-déposer, dans certains modules ou sections, vous pouvez choisir de définir l'alignement directement. Notez toutefois que cette option de style n'est pas forcément disponible sur tous les modèles ou modules.
- Pour centrer les modules de votre page :
- Dans votre compte HubSpot, naviguez vers vos pages de destination, votre page de site web ou votre article de blog.
- Survolez votre page ou votre article de blog, puis cliquez sur Modifier.
- Dans l'éditeur de pages, cliquez sur le module que vous souhaitez centrer.
- Dans le panneau de gauche, cliquez sur l'onglet Styles.
- Cliquez pour développer la section Alignement et espacement.
- Sous Alignement, sélectionnez l'alignement Centre .
- Pour centrer vos modules d'E-mail :
- Dans votre compte HubSpot, accédez à Marketing > E-mail.
- Survolez votre page ou votre article de blog, puis cliquez sur Modifier.
- Cliquez sur le module que vous souhaitez centrer.
- Dans le panneau de gauche, cliquez sur le menu déroulant Alignement et sélectionnez Centre.
Centrer une image, un bouton CTA ou un logo à l'aide d'espaceurs horizontaux
Si le module que vous utilisez ne dispose pas d'options d'alignement, vous pouvez, à partir de l'éditeur de pages, ajouter des intercalaires horizontaux à votre page pour centrer les modules.
Remarque : le module d'espacement horizontal n' est pas disponible avec les modèles Starter.
Pour centrer votre module à l'aide d'une entretoise horizontale :
- Dans votre compte HubSpot, naviguez vers vos pages de destination, votre page de site web ou votre article de blog.
- Dans la barre de recherche, recherchez entretoise horizontale.
- Cliquez et faites glisser les entretoises horizontales de chaque côté du module que vous souhaitez centrer. Ajustez ensuite la largeur de l'espaceur pour centrer votre élément.
