CTA

Comment appliquer des styles personnalisés à des call-to-action ?

Dernière mise à jour: July 7, 2017

Disponible avec :

Produit: HubSpot Marketing
Abonnement: Basique, Pro et Entreprise

Le nouvel onglet CSS de HubSpot permet aux concepteurs de créer des boutons call-to-action totalement personnalisés et assortis au thème de n'importe quel site web.

Pour accéder à ces outils dans votre compte HubSpot, suivez les instructions ci-dessous :

  • Accédez à Contenu > Call-to-action.
  • Cliquez sur le bouton bleu pour créer un CTA (ou modifiez un bouton de la liste des CTA existants) > cliquez sur l'onglet Conception dans l'interface d'édition > puis cliquez sur le bouton Personnaliser CSS pour ouvrir l'onglet de conception CSS.
  • L'encadré CSS généré automatiquement contient un aperçu en lecture seule, qui vous permet de savoir facilement quels styles s'appliquent à un élément CTA donné en fonction de sa configuration actuelle.
  • Si vous souhaitez appliquer une classe personnalisée à un CTA, la boîte Classe CSS vous permet de saisir des informations de classe personnalisées. Cette boîte est utile si vous souhaitez appliquer des caractéristiques similaires (familles de police, taille ou même marges internes et externes) à plusieurs CTA répartis sur différentes pages web. Si vous comptez utiliser une classe CSS personnalisée, assurez-vous de l'intégrer (y compris tous les styles associés) à la feuille de style CSS définie en tant que style principal de vos pages HubSpot.
  • La boîte CSS personnalisée vous permet aussi d'appliquer facilement des styles spécifiques au CTA en cours d'édition. Si vous souhaitez modifier un élément précis de votre CTA, ajoutez simplement une nouvelle déclaration de style dans la boîte « CSS personnalisée » avant d'enregistrer vos modifications.
  • Pour modifier un aspect de vos CTA défini antérieurement dans la section CSS auto-générée, revenez à l'onglet Conception et, dans le menu déroulant intitulé Style, sélectionnez Lien (sans style). Si vous omettez cette étape, les modifications apportées à la section « CSS personnalisée » ne s'appliqueront pas aux éléments définis antérieurement.
  • Pour actualiser l'ensemble des CTA publiés sur vos pages en ligne, cliquez sur Mettre à jour les CTA (ou Créer un CTA le cas échéant).