Marketplace des modèles | Exigences relatives aux modules

​

Restrictions relatives aux modules

• HTML
• Modules en pleine largeur
• Formulaires et formulaires à plusieurs étapes
• Modules d’espacement ou modules qui créent une structure de page hors interface utilisateur
• Modules qui dupliquent les fonctionnalités de module par défaut
• Modules commerciaux spécifiques
• Modules spécifiques aux e-mails

​

Contenu du module

​

Libellés de module et texte d’aide

• Les modules doivent avoir des libellés descriptifs qui précisent l’objectif du module. Le libellé Hero banner avec défilement parallaxe est descriptif, alors que les libellés Hero banner et Galerie ne le sont pas.
• Les libellés de module ne doivent pas contenir de chiffres, comme Hero banner 01.
• Les libellés de module ne doivent pas contenir de traits de soulignement.
• Les libellés de module ne doivent pas contenir d’abréviations, comme Col au lieu de Colonne.
• Les modules doivent contenir du texte d’aide en ligne (le cas échéant) pour indiquer plus en détail comment utiliser le module.
• Les modules ne doivent pas être nommés de la même manière qu’un module par défaut.
• Pour les modules indépendants, le libellé du module doit correspondre au nom figurant sur le listing de modèles. Par exemple, si votre listing de modèles est Superbe bannière avec défilement, le libellé de votre module doit être le même.

​

Contenu par défaut

• Le champ par défaut ne peut pas inclure de texte lorem ipsum.
• Le contenu du champ par défaut doit représenter l’objectif du champ :
  • Lors de l’inclusion des champs de menu, les modules doivent utiliser par défaut l’option de contenu Sélectionner un menu.
  • Lors de l’inclusion de champs de formulaire, les modules doivent utiliser par défaut l’option de contenu Sélectionner un formulaire.
  • Lors de l’inclusion de champs de sélecteur de blog, les modules doivent utiliser par défaut l’option de contenu Sélectionner un blog.
• Si l’ajout de contenu par défaut à un module n’est pas pertinent, utilisez plutôt un espace réservé de module pour aider le créateur de contenu à visualiser l’espace qu’il remplira.

​

Icônes de module

​

Modules nécessitant des comptes tiers

​

Champs de module

• Pour les modules d’un thème :
  • Ils doivent contenir du texte d’aide en ligne et un contenu par défaut spécifique pour certains champs.
  • 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.
• Pour les modules d’un thème et des modules indépendants :
  • Les noms des champs du module doivent décrire l’intention du champ. Par exemple, si un champ de texte est destiné à inclure l’intitulé du poste d’une personne, Intitulé de poste serait une description appropriée alors que Intitulé ne le serait pas.
  • Tous les modules par défaut de HubSpot doivent être stylisés et doivent s’afficher correctement sur tous les modèles soumis.

​

Configuration des fichiers fields.json et module.html

​

Qualité du code du module

​

Les modules doivent être autonomes

​

Modules de thème

​

Modules indépendants

document.addEventListener('DOMContentLoaded', function () {
  // Put Javascript here
});

​

Restrictions de code pour les modules indépendants

• Il est recommandé d’utiliser Vanilla JS dans la mesure du possible. L’ajout d’une bibliothèque jQuery à un site qui n’utilise pas jQuery peut potentiellement provoquer des conflits et ralentir la page du site Web.
• Si vous utilisez une bibliothèque jQuery, utilisez la fonction require_js() pour inclure la bibliothèque si jQuery est désactivé avec la case à cocher (booléen) dans les paramètres du compte afin d’éviter les conflits provenant de plusieurs bibliothèques jQuery.

{% if not site_settings.include_jquery %}
{{ require_js("https://code.jquery.com/jquery-3.7.0.min.js", "footer") }}
{% endif %}

​

Catégories

• Tous les modules indépendants doivent avoir au moins une catégorie. Il n’est pas obligatoire d’inclure des catégories pour les modules soumis dans le cadre d’un thème, mais il est recommandé d’en inclure au moins une. Découvrez-en davantage sur l’ajout de catégories à des modules.

​

Sélecteurs de nom de classe

• Tout sélecteur de nom de classe doit être précédé du nom du module, en remplaçant les espaces par des traits d’union. Par exemple, ci-dessous se trouve le fichier module.html d’un bouton intitulé example-button, avec chaque nom de classe et sélecteur CSS reflétant son nom.

<style>
{% scope_css %}
{# Button wrapper #}
 {% if module.styles.group_alignment.alignment %}
  .example-button-wrapper {
   text-align: {{ module.styles.group_alignment.alignment.horizontal_align }};
   }
 {% endif %}

{# Button #}

.example-button {
 {% if module.styles.group_background.color.color %}
  background-color: rgba({{ module.styles.group_background.color.color|convert_rgb }}, {{ module.styles.group_background.color.opacity / 100 }});
 {% endif %}
 }
 {% end_scope_css %}
</style>
{% end_require_css %}

{##### Module HTML #####}

<div class="example-button-wrapper">
 <a href="{{ href }}" class="example-button"
 {% if module.button_link.open_in_new_tab %}target="_blank"{% endif %}
 {% if rel %}rel="{{ rel|join(" ") }}"{% endif %}
 >
  {{ module.button_text }}
 </a>
</div>

​

Styles et JavaScript

• Styles :
  • Les modules ne doivent pas avoir de groupe de style vide.
  • Le codage en dur des styles en ligne dans les modules est déconseillé. Au lieu de cela, utilisez des styles en ligne dynamiques en activant les champs pour contrôler le style.
• JavaScript :
  • JavaScript doit pouvoir représenter plusieurs instances d’un module. JavaScript dans JS Pane ne sera chargé qu’une fois par page, quel que soit le nombre d’occurrences de modules.
  • JavaScript doit référencer les éléments DOM par des noms de classe spécifiques pour garantir que les éléments extérieurs au module ne sont pas affectés par inadvertance.

​

Organisation des champs

​

Onglet Contenu

• Lorsqu’il y a au moins un contrôle au sein d’un groupe de champs, tous les contrôles doivent être regroupés en catégories libellées selon leur fonction.
• Les champs de module ajoutés à l’onglet Contenu doivent permettre de personnaliser le contenu d’un module. Par exemple, les contrôles d’image, d’icône, de texte alternatif et de lien.

​

Onglet Styles

• Préréglages
• Texte
• Arrière-plan
• Bordure
• Curseur
• Angle
• Espacement
• Alignement
• Groupes de styles personnalisés qui ne correspondent pas à ce qui précède
• Avancé

• Alignement
• Image d’arrière-plan
• Bordure
• Couleur
• Police
• Dégradé
• Espacement
• Alignement du texte

• Les options d’animation doivent toujours être positionnées à la fin de la liste des groupes de champs.
• Les options qui permettent aux créateurs de contenu d’ajouter des extraits de code ou des CSS doivent être regroupées à la fin de la liste des groupes de champs sous un champ intitulé Avancé.
• Les contrôles doivent être uniformisés dans tous les modules. Par exemple, tous les éléments qui peuvent avoir un contrôle de rayon de bordure doivent proposer ce contrôle. Évitez de proposer des contrôles sur des modules qui sont absents sur d’autres.
• Les champs de module ajoutés à l’onglet Style doivent permettre de styliser le module. Par exemple :
  • Les options de style incluent la couleur, le style de texte, l’alignement, l’espacement, la bordure et le rayon d’angle.
  • Les animations incluent des effets au survol et concernant les diapositives.
  • Les préréglages incluent des thèmes sombres et clairs qui sont destinés à changer de nombreux styles en même temps.

​

Exemples d’organisation des champs

​

Préréglages

​

Regroupement multi-niveaux

​

Regroupement de champs individuels