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

​

Limites concernant les thèmes

• Les comptes CMS Hub gratuits ne peuvent pas utiliser la recherche sur le site web, les fonctionnalités CTA, ou les vidéos natives HubSpot. 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 (nombre minimum de pages nécessaires)
  • 50 modules (5 au minimum)
  • 50 sections (5 au minimum)
• 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
  • Colonnes flexibles dans les modèles

​

Conditions globales en matière de thème

• Tous les thèmes soumis doivent être distincts et originaux. 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. En savoir plus sur la conformité du marketplace des modèles HubSpot.
• Un thème doit être conçu avec des modèles HTML et HubL et des balises dnd_area.
• Les thèmes doivent respecter une grille de 12 colonnes.

​

Structure des fichiers du thème

​

Chemin de fichier local relatif pour les modèles

{{require_css(get_asset_url('../../css/main.css')) }}

​

Performances du thème

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

• Les fichiers de thème doivent pouvoir être 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).

​

Prévisualiser les URL des thèmes

​

Utilisation de jQuery

{# this checks if the "Include jQuery" option in Settings > CMS > Pages is checked #}
{% if not site_settings.include_jquery %}
  {{ require_js("../jquery-3.4.1.js", "footer") }}
{% endif %}

​

Configuration du thème (Theme.json)

// theme.json
{
  "label": "Cool Theme",
  "preview_path": "./templates/home-page.html",
  "screenshot_path": "./images/templates/homepage.jpg",
  "enable_domain_stylesheets": false,
  "version": "1.0",
  "author": {
    "name": "Jon McLaren",
    "email": "noreply@hubspot.com",
    "url": "https://theme-provider.com/"
  },
  "documentation_url": "https://theme-provider.com/cool-theme/documentation",
  "license": "./license.txt",
  "example_url": "https://theme-provider.com/cool-theme/demo",
  "is_available_for_new_content": true
}

• Le nom du libellé correspond au nom de votre listing de thèmes.
• Si vous utilisez le CMS theme boilerplate gratuit de HubSpot, les valeurs du boilerplate ne doivent pas être présentes. Cela inclut les informations sur l’auteur, l’URL de la documentation, l’URL de l’exemple, etc.
• L’URL de la documentation résout et contient de la documentation sur l’utilisation de votre thème.
• Le chemin d’aperçu est un fichier valide dans votre thème.
• Le chemin de capture d’écran est un fichier valide et est lié à votre thème.
• L’exemple d’URL résout et conduit à une démonstration de votre thème. N’utilisez pas les sous-domaines preview.hs-sites.com ou [AccountID].hs-sites.com pour l’exemple d’URL.

​

Paramètres du thème (Fields.json)

• Le fichier fields.json doit contenir au moins trois champs de couleur.
• Pour garantir la compatibilité 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. Découvrez-en davantage sur la compatibilité module-thème

• Ne 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 feuille de style CSS, car il est difficile pour les utilisateurs finaux de le remplacer et cela provoquerait un conflit.
• Utiliser des libellés descriptifs pour chaque paramètre afin que les créateurs de contenu sachent ce qu’ils mettent à jour.
• 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 du thème doivent s’appliquer à toutes les balises h1 du thème.

• Champ de police du corps du texte (balises p)
• Champs de police h1 à h6
• Couleur du lien hypertexte (balises a), y compris le style au survol

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

• 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 Typography.
• 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.
• 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’hérite pas obligatoirement des paramètres de marque.

​

Modèles (CSS, Sections, Modèles de page, etc.)

​

Sections

• Vous devez utiliser des sections, le cas échéant. Un thème doit inclure au minimum cinq sections.
• Les sections doivent avoir des captures d’écran uniques et fonctionnelles.
• Les sections et les modules ne doivent pas être redondants.

​

Modèles de page

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

​

Nom du modèle de page

• Si vous avez des modèles avec des noms similaires, ajoutez des mots descriptifs qui indiquent la différence entre eux.
• Maintenez la cohérence de la majuscule, supprimez les traits d’union et évitez d’utiliser des raccourcis (par exemple, utilisez arrière-plan au lieu de ap).
• Le nom de votre entreprise ou le nom du thème n’a pas besoin d’être inclus dans le nom du modèle.

​

Modules

​

Contenu global

​

Partiels globaux

• Les thèmes doivent inclure des partiels globaux. Les - partiels globaux doivent inclure une zone de glisser-déposer. Par exemple, vous ne pouvez pas masquer la zone de glisser-déposer avec une classe « masquer ».
• Vous devez incorporer des zones de glisser-déposer utilisables dans les en-têtes et les pieds de page.
• 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.

​

Prise en charge multilingue

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

​

Éléments mobiles et réactifs

• Menu de navigation principal
• Curseurs et onglets
• Grandes images
• Éviter le défilement horizontal (sauf intention)