Comment coder des modèles de pages et d'e-mails au format HTML

Dernière mise à jour: March 5, 2018

Disponible avec :

Produit: HubSpot Marketing
Abonnement: Basique, Pro et Entreprise
L'utilisation de l'outil de création de modèle offre aux créateurs de contenu une plus grande flexibilité pour structurer le contenu et évite aux designers de rédiger de longues lignes de code HTML. Le Gestionnaire de conception permet en outre aux designers de concevoir des modèles HTML de toutes pièces. Après avoir codé votre propre modèle, vous devrez y ajouter des balises HubL (le langage de balisage de HubSpot) afin de créer des modules modifiables pouvant être personnalisés grâce à l'éditeur de contenu de HubSpot.
Il est important de noter que coder des sites ou des e-mails au format HTML ne garantit pas automatiquement que le modèle obtenu sera adaptatif.

Instructions

Suivez ces instructions pour créer un modèle d'e-mail ou de page au format HTML.

Accéder au Gestionnaire de conception

Accédez à Contenu > Gestionnaire de conception.

Navigate to Design Manager

Créer un nouveau fichier codé

Sélectionnez le dossier Fichiers codés et cliquez sur Nouveau fichier codé.

New coded file

Choisir un type de fichier codé

Choisissez le type de fichier que vous souhaitez créer : page, e-mail, blog ou système. Votre choix déterminera dans quel dossier principal le fichier sera enregistré, mais aussi quels jetons HubL seront nécessaires.

Code editor

Nommer et enregistrer le fichier

Entrez un nom de fichier avec une extension .html et cliquez sur Enregistrer.

HubSpot Help article screenshot

Coder votre modèle

Vous devez ensuite écrire le code HTML pour le modèle de page ou d'e-mail. L'éditeur de code de HubSpot effectue des retraits automatiques, surligne la syntaxe HTML et ferme les balises automatiquement. Ces avantages ne sont que quelques-unes des fonctionnalités avancées de l'environnement de développement intégré de HubSpot, qui facilitent réellement le codage.

Publier le modèle

Cliquez sur Publier les modifications pour publier le modèle ou le fichier HTML.

HubSpot Help article screenshot

Vous devez ensuite décider si le modèle sera disponible pour les créateurs de contenus. En décochant la case Rendre ce modèle disponible pour du nouveau contenu, vous pourrez enregistrer un fichier HTML sans les balises obligatoires des modèles HubSpot, mais il ne sera pas proposé en option aux créateurs de contenus. Cette fonctionnalité est utile, par exemple, si vous créez une section globale afin d'y inclure un autre fichier de modèle. 

Confirm Update

Ajouter les balises HubL nécessaires

Dès que le code HTML structurel est écrit, un message d'erreur indiquant que les balises HubL obligatoires sont absentes du code s'affiche si vous essayez de publier le modèle au format HTML. Les balises HubL connectent le code aux paramètres et à l'éditeur de contenu de HubSpot. Vous pouvez en apprendre plus sur les variables obligatoires des modèles ici et sur les balises des modules HubL ici.

Cloner sur un fichier

Au lieu de coder un fichier de toutes pièces, vous pouvez aussi cloner l'un des modèles de HubSpot. Cloner un modèle permet d'accéder à son code HTML/HubL. C'est une méthode idéale pour revenir à un modèle HubSpot que vous avez conçu. Pour cloner un modèle sur un fichier, cliquez sur Actions > Cloner sur un fichier.  Attribuez ensuite un nom avec une extension .html au fichier.

Cette fonctionnalité de l'outil de création de modèle de HubSpot permet aux designers et aux marketeurs de gagner un temps précieux. Il est donc recommandé d'utiliser des modèles au style prédéfini conçus avec cet outil, plutôt que créer des modèles de toutes pièces. Les sections précédentes de ce guide abordent la structure et la mise en page des modèles.

Article précédent:

Article suivant: