Exigences relatives aux thèmes du marketplace des modèles HubSpot

Découvrez-en davantage sur les exigences qu'un thème doit remplir pour être soumis dans le marketplace des modèles HubSpot. 

Tenez compte des limites suivantes par thème :

• Les comptes CMS Hub gratuits ne peuvent pas utiliser la recherche sur le site ou la fonctionnalité de CTA. Découvrez-en davantage sur ce qui est inclus dans les abonnements CMS Hub dans le catalogue de produits et de services de HubSpot.
• Les thèmes sont soumis aux limites suivantes :
  • 50 modèles
  • 50 modules
  • 50 sections

• Les thèmes ne doivent pas contenir les éléments suivants :
  • Modèles d'e-mails
  • Fonctionnalité HubDB
  • Fonctions sans serveur
  • Champs d'objet CRM
  • Modèles de contrôle d'accès
  • Colonnes flexibles dans les modèles

Un thème doit obtenir un score supérieur aux seuils suivants via Google Lighthouse :

• Accessibilité sur ordinateur : 65
• Bonnes pratiques sur ordinateur : 80
• Performances sur ordinateur : 70
• Performances sur mobile : 40

Découvrez comment générer un rapport Google Lighthouse pour votre thème à l'aide de l'LC.

De plus, les ressources thématiques doivent répondre aux exigences de performance et d'accessibilité suivantes :

• Les fichiers de thème doivent pouvoir être correctement minifiés.
• La taille des fichiers d'image ne doit pas dépasser 1 Mo.
• Toutes les balises d'image doivent avoir un attribut alt (la valeur "" est acceptable).
• Toutes les balises d'image doivent avoir un attribut loading (la valeur "" est acceptable).

Les thèmes sur le marketplace doivent répondre aux exigences suivantes :

• Tous les thèmes soumis doivent être distincts. Par exemple, le même thème avec un contenu de copie ou de variable différent n'est pas comptabilisé comme un thème distinct. 
• Un thème doit être conçu avec des modèles HTML + HubL et des balises dnd_area.
• Vous devez utiliser des sections, le cas échéant. Un thème doit inclure au minimum cinq sections. 
• Vous devez incorporer des zones de glisser-déposer utilisables dans les en-têtes et les pieds de page. 
• Les thèmes doivent respecter une grille de 12 colonnes.

En outre, les thèmes doivent répondre aux exigences minimales suivantes dans leurs modèles, leurs options de champ de thème, leurs configurations theme.json et field.json ainsi que leurs champs de module.

Un thème doit inclure au minimum les types de modèle suivants :

• Un modèle de page de site web ou de page de destination.
  • Lorsque vous incluez des modèles à plusieurs pages, chaque modèle doit avoir un objectif distinct. Par exemple, une page d'accueil, une page À propos de nous, une page de destination pleine largeur et une page de destination avec une barre latérale droite.
  • Il est recommandé d'inclure au moins huit modèles de page dans un thème. 

• Des modèles de listing de blog et d'article de blog distincts.
  • Modèle de listing de blog : la page qui affiche tous les articles de blog dans un format de listing (appelé blogroll). Le titre du modèle doit indiquer qu'il s'agit de la page de listing.
  • Modèle d'article de blog : la page de détail d'articles de blog qui affiche les différents articles de blog. Le titre du modèle doit indiquer qu'il s'agit de la page d'article de blog.
  • Par ailleurs, les commentaires de blog et les cases d'auteur de blog doivent être mis en forme pour correspondre au thème.

• Les modèles de page système suivants :
  • Modèle d'erreur 404 : affiché lorsque les visiteurs atteignent une page qui n'existe pas.
  • Modèle d'erreur 500 : affiché lorsque le site rencontre une erreur interne.
  • Modèle d'invite de mot de passe : affiché lorsqu'une page est protégée par un mot de passe.
  • Modèle des abonnements : page de gestion des abonnements permettant aux destinataires d'e-mails de gérer les types d'e-mails auxquels ils s'abonnent.
  • Modèle de mise à jour des abonnements : la page de confirmation qui apparaît lorsque le destinataire des e-mails met à jour ses préférences d'abonnement.
  • Modèle d'enregistrement des désabonnements : la page qui apparaîtra pour les destinataires des e-mails qui essayent de se désabonner, si HubSpot ne peut déterminer leur adresse e-mail.
  • Modèle de résultats de recherche : affiche les résultats de recherche qui sont retournés lors de l'utilisation de la recherche du site. Disponible pour les comptes CMS Hub payants uniquement.

Un thème doit inclure au minimum les champs de thème suivants : 

• Champs de typographie :
  • Champs de police du corps du texte (balise p)
  • Champs de police h1 à h6
  • Couleur du lien hypertexte (balises a), y compris le style au survol
• Champs de formulaire :
  • Arrière-plan du titre
  • Texte du titre, y compris au moins les styles de couleur de police
  • Couleur de l'arrière-plan du formulaire
  • Couleur de la bordure du formulaire
  • Couleur de libellé des formulaires
  • Couleur de la bordure des champs de formulaire
  • Bouton de formulaire, y compris les paramètres pour le texte du bouton, la couleur d'arrière-plan et le style au survol

De plus, les champs de thème doivent répondre aux exigences suivantes :

• Les champs de votre thème doivent être regroupés de manière logique. Par exemple, plusieurs champs liés à la typographie doivent être réunis sous un groupe Typographie.
• Les champs de thème doivent avoir les éléments suivants appliqués globalement :
  • Champs de couleur primaire, secondaire et tertiaire
  • Champs de police d'en-tête
  • Champ de police du corps du texte
• Les champs de thème doivent avoir des contrôles de couleur et de police distincts pour les boutons et les formulaires, ainsi que des contrôles de couleur, de logo et de police distincts pour l'en-tête et le pied de page. 
• Une partie des champs de couleur et de logo du thème doit hériter des paramètres de marque du compte :
  • Au minimum, deux champs de couleur doivent hériter des couleurs des paramètres de marque du compte. Les champs de couleur supplémentaires peuvent être remplacés par défaut par d'autres couleurs, y compris le noir et le blanc.
  • Si les modules d'un thème utilisent des logos, au moins un champ de logo doit hériter des paramètres de marque du compte. Si vous utilisez un champ d'image pour afficher un logo, le champ d'image n'a pas à hériter des paramètres de marque.

Le fichier theme.json doit inclure les paramètres suivants :

Découvrez-en davantage sur ces paramètres dans la documentation sur theme.json.

Le fichier fields.json contrôle les champs et groupes de champs disponibles dans l'éditeur de thème, y compris les champs de style. Les champs que vous incluez dépendront du degré de contrôle que vous souhaitez donner aux créateurs de contenu dans l'éditeur de page. Le fichier fields.json doit contenir au moins trois champs de couleur.

Pour garantir la compatibilité des fonctionnalités entre des thèmes et des modules indépendants, les thèmes doivent inclure les conventions d'appellation de police et de couleur standards suivantes : primary_color, secondary_color, heading_font et body_font.

Si les champs de thème ne disposent pas de champs primary_color, secondary_color, heading_font ou body_font, ils peuvent utiliser le champ alternate_names. Découvrez-en davantage sur cette exigence ici.

 Découvrez-en davantage sur ces paramètres dans la documentation sur fields.json et consultez un exemple de fichier fields.json à partir du boilerplate de CMS Hub. 

Les paramètres du thème doivent respecter les exigences suivantes.

Les paramètres de thème ne doivent pas entrer en conflit avec des styles d'éditeur ou des styles définis via un module. Par exemple, n'utilisez pas !important dans votre CSS, car il est difficile pour les utilisateurs finaux de le remplacer et cela provoquerait un conflit.

Les paramètres de thème doivent utiliser des libellés descriptifs pour chaque paramètre afin que les créateurs de contenu sachent ce qu'ils mettent à jour.

Les paramètres de thème doivent s'appliquer à tous les modèles à l'intérieur d'un thème, sauf s'il existe un cas d'utilisation spécifique pour les styles supplémentaires. Par exemple, les modifications apportées au style et à la taille des en-têtes h1 dans les paramètres doivent s'appliquer à toutes les balises h1 du thème.

Les thèmes doivent inclure des partials globaux. Les partials globaux sont un type de modèle créé à l'aide de HTML et HubL qui peut être réutilisé sur l'ensemble de votre site web. Les types de partials les plus courants sont les en-têtes de sites Web, les barres latérales et les pieds de page. 

Les partials globaux doivent inclure une zone de glisser-déposer. Pour les menus utilisés globalement à travers un site, les utilisateurs doivent également pouvoir sélectionner un menu de navigation HubSpot qu'ils ont créé dans les paramètres de leur compte.

Découvrez comment créer des partiels globaux.

Tous les thèmes doivent contenir une structure de dossier appropriée et être regroupées sous un dossier « parent », qui doit décrire le listing de vos produits. Par exemple, si vous créez un thème nommé « SuperGénial » pour le marketplace, votre structure doit ressembler à l'image ci-dessous. Découvrez-en davantage sur la structure des fichiers de thème. 

Lors de la création d'une URL de prévisualisation, vous devez utiliser votre propre nom de domaine. Vous ne pouvez pas utiliser le domaine fourni par HubSpot avec cette structure d'URL : [AccountID].hs-sites.com

Un site Web en ligne, et non une image du site de démonstration, doit être utilisé. 

Si, à un moment donné, votre démo en direct devient inaccessible, HubSpot se réserve le droit, moyennant notification au fournisseur, de supprimer votre thème jusqu'à ce que la démo en direct redevienne accessible.

Lorsque vous faites référence à des ressources du thème, vous devez utiliser un chemin de fichier local relatif. La meilleure façon de les inclure est d'utiliser la fonction get_asset_url, qui renvoie l'URL publique d'une ressource, d'un fichier ou d'un modèle. Vous pouvez également générer cette fonction soit en faisant un clic droit sur un fichier et en sélectionnant Copier l'URL publique, soit en cliquant sur Actions, puis en sélectionnant Copier l'URL publique. 

Par exemple, une feuille de style référencée par require_css doit être formatée comme suit :

Si votre thème s'appuie sur jQuery, une version de jQuery doit être incluse au cas où elle n'est pas activée par défaut dans le compte d'un client. 

Par exemple, si vous incluez un module qui nécessite jQuery alors que le reste du site ne le nécessite pas, vous devrez utiliser le code suivant pour charger jQuery :

Les thèmes doivent pouvoir prendre en charge plusieurs versions linguistiques et doivent spécifier les langues qu'ils prennent en charge. Pour ce faire, vous pouvez ajouter un module de sélecteur de langue dans un en-tête global, ce qui permet aux clients de localiser facilement les options de langue et de choisir la langue de leur choix.

• Vous ne devez afficher qu'une seule langue à la fois. Par exemple, évitez d'avoir à la fois l'anglais et l'espagnol dans l'interface utilisateur en même temps.
• Évitez d'utiliser du texte codé en dur. Par exemple, plutôt que de coder le texte d'un bouton de listing de blog comme En savoir plus, définissez le texte dans un champ afin que l'utilisateur final puisse mettre à jour le texte sans avoir à entrer dans le code.