Balises HubL standard
Cette page est un guide de référence complet de la syntaxe et des paramètres disponibles pour toutes les balises HubL standard, y compris les balises pour les pages système, telles que la page d'abonnement aux e-mails. Chaque balise ci-dessous contient un exemple de la syntaxe de base ainsi qu'un exemple avec des paramètres et une sortie de code.
Si vous créez des zones de glisser-déposer, découvrez en davantage sur les balises des zones de glisser-déposer. Si vous gérez un site web plus ancien, vous pouvez également consulter la liste des balises HubL obsolètes.
La plupart des balises de cette page ont des équivalents dans les modules par défaut. Les modules peuvent être utilisés dans dnd_areas et des colonnes flexibles, ce qui les rend plus puissants et plus conviviaux que les balises que vous voyez ici.
Une balise de commentaire de blog restitue le code d'intégration des commentaires sur un modèle de blog. Ce code d'intégration Javascript charge le formulaire de commentaire et les commentaires en fonction de votre configuration dans les paramètres de votre site web.
| Parameter | Type | Description | Default |
|---|---|---|---|
limit
| Nombre | Définit le nombre maximum de commentaires. |
5000
|
select_blog
| "default" ou ID de blog | Spécifie quel blog est connecté à l'intégration des commentaires. Ce paramètre accepte les arguments suivants : |
default
|
skip_css
| Booléen | Si vous attribuez la valeur true à cette option, la CSS des commentaires du blog ne sera pas chargée. |
false
|
message
| Chaîne | Le message à afficher lorsqu'il n'y a pas de commentaires. Par défaut, il apparaît vide (aucun texte affiché). |
""
|
Si les mises en page en glisser-déposer comprennent un module de contenu de blog, ces modules ne sont pas créés avec une seule balise. Ils utilisent plutôt une logique conditionnelle pour définir le rendu d'un article de blog et d'une liste de blogs. Découvrez-en davantage sur le codage des modèles de blog ici.
Crée une liste associée d'articles par thème, par mois ou par auteur.
Remarque : Ce module ne peut être utilisé que dans les modèles d'articles de blog.
| Parameter | Type | Description | Default |
|---|---|---|---|
select_blog
| "default" ou ID de blog | Sélectionne le blog HubSpot à utiliser. Ce paramètre utilise soit un ID de blog, soit une valeur "default". |
"default"
|
expand_link_text
| Chaîne | Lien textuel à afficher si le nombre d'articles disponibles est supérieur au nombre maximal de liens. Excluez le paramètre pour omettre le lien. |
"see all"
|
list_title
| Chaîne | Titre de liste à afficher. |
""
|
list_tag
| Chaîne | Définit la balise utilisée pour la liste. La valeur doit généralement être |
"ul"
|
title_tag
| Chaîne | Définit la balise utilisée pour le titre de la liste. |
"h3"
|
max_links
| Nombre | Nombre maximal de valeurs de filtre à afficher. Excluez le paramètre pour tout afficher. |
5
|
filter_type
| Énumération | Sélectionne le type de filtre. Les valeurs possibles sont |
"topic"
|
Ajoute une liste des articles les plus populaires ou les plus importants.
Remarque : Cette balise ne peut être utilisée que dans les modèles d'articles de blog. Le contenu de la balise est chargé de manière asynchrone côté client. Par conséquent, si vous souhaitez manipuler le flux après son chargement, vous devrez définir une fonction JS globale pour gérer cette manipulation. Utilisez la fonction hsPostListingComplete(feeds), où feeds est le sélecteur jQuery sur tous les flux qui ont été finalisés. Vous souhaiterez manipuler directement l'objet DOM dans cette fonction.
| Parameter | Type | Description | Default |
|---|---|---|---|
select_blog
| "default" ou ID de blog | Sélectionne le blog HubSpot à utiliser pour le listing. Ce paramètre utilise soit un ID de blog, soit une valeur |
"default"
|
list_title
| Chaîne | Titre de liste à afficher. |
""
|
list_tag
| Chaîne | Définit la balise utilisée pour la liste. La valeur doit généralement être |
"ul"
|
title_tag
| Chaîne | Définit la balise utilisée pour le titre de la liste. |
"h3"
|
listing_type
| Chaîne | Listez les articles de blog selon le plus récent ou le plus populaire dans une période donnée. Les valeurs possibles sont recent, popular_all_time, popular_past_year, popular_past_six_months ou popular_past_month. |
"recent"
|
max_links
| Nombre | Nombre maximal d'articles de blog à lister. |
5
|
include_featured_image
| Booléen | Affichez l'image en vignette avec le lien de l'article. |
False
|
Ajoute une liste d'articles de blog basée sur un ensemble de paramètres partagés par les articles entre les blogs. Les articles sont sélectionnés en fonction de leur pertinence par rapport aux paramètres définis.
Cette balise ne génère pas de module modifiable au niveau de la page/de l'article. Elle est entièrement configurée avec HubL.
| Parameter | Type | Description | Default |
|---|---|---|---|
blog_ids
| Nombre | Les ID des blogs dont vous souhaitez inclure les articles. Si ce n'est pas spécifié, il inclura les articles du blog par défaut. | |
blog_post_ids
| Chaîne | Les ID des articles de blog à utiliser lors de la recherche d'articles de blog pertinents à lister, séparés par des virgules. Utilisez ce paramètre uniquement lorsque le widget apparaît sur les pages. Lorsqu'il est utilisé sur les articles de blog, il recherchera les articles pertinents en fonction de l'article de blog actuellement affiché. | |
blog_post_override
| Chaîne | Les ID des articles de blog qui doivent toujours apparaître dans la liste renvoyée, malgré toutes les autres valeurs des paramètres et des filtres (séparés par des virgules). | |
limit
| Nombre | Le nombre maximal d'articles de blog à lister. |
3
|
tags
| Chaîne | Les balises de blog qui doivent être utilisées pour déterminer si un article est pertinent (séparées par des virgules). Les articles de blog avec les balises spécifiées se classeront plus haut pour la pertinence. | |
tag_boost
| Nombre | Augmente le poids donné aux balises spécifiées dans le paramètre | |
start_date
| dateTime | Date de publication la plus ancienne. Voir l'exemple ci-dessous. | |
end_date
| dateTime | Date de publication la plus récente. Voir l'exemple ci-dessous. | |
blog_authors
| Chaîne | Les noms des auteurs dont les articles doivent être inclus (séparés par des virgules). Voir l'exemple ci-dessous. | |
path_prefixes
| Chaîne | Les chemins d'URL ou sous-répertoires dont les articles doivent être inclus (séparés par des virgules). Si un article de blog a un préfixe similaire dans son chemin, la pertinence de l'article est accrue, ce qui améliore son classement dans la liste. | |
callback
| Chaîne | Le nom d'une fonction JavaScript pour restituer les articles de blog renvoyés. La fonction reçoit un tableau d'objets d'articles de blog à formater. Si ni le paramètre Voir l'exemple ci-dessous. |
none
|
post_formatter
| Chaîne | Le nom d'une macro personnalisée pour restituer les articles de blog renvoyés. La macro reçoit trois paramètres qui sont l'objet d'article de blog à formater, le compte dans l'itération des articles de blog et le compte total des articles de blog dans les résultats. S'ils ne sont pas spécifiés ou s'ils sont définis sur |
default
|
allow_any_language
| Booléen | Si la valeur est définie sur |
False
|
Nous recommandons vivement d'utiliser le paramètre callback au lieu de post_formatter pour améliorer la vitesse de chargement des pages.
L'exemple qui suit génère un listing d'articles rédigés par l'un des trois blog_authors spécifié sur deux blogs différents :
{% related_blog_posts blog_ids="3241539189,3261083894", limit=6, blog_authors="John Smith,Joe Smith,Frank Smith" %}L'exemple qui suit génère un listing de 10 articles associés à un article de blog spécifique, avec la balise « développement des ventes » dans une période de publication spécifique. Cet exemple spécifie le paramètre blog_post_ids. Il sera donc utilisé sur une page :
{% related_blog_posts blog_post_ids="3267910554", limit=10, tags="sales enablement", start_date="2018-02-05", end_date="2018-06-10" %}L'exemple qui suit génère un listing de cinq articles à l'aide du paramètre callback pour contrôler la sortie HTML du listing d'articles :
{% related_blog_posts limit=5, callback="blog_post_formatter" %}
<script>
var blog_post_formatter = function(blogposts) {
var formatted = "<div>";
for (var i = 0; i < blogposts.length; i++) {
var blogpost = blogposts[i];
formatted += '<div class="related-blog-item">';
formatted += `<span>Related Post ${i + 1}/${blogposts.length}</span><br>`;
formatted += `<a class="related-blog-title" href="${blogpost.url}"><span>${blogpost.name}</span></a>`;
formatted += `<div class="hs-related-blog-byline">by <span class="related-blog-author">${blogpost.blogAuthor.fullName}</span><span class="related-blog-posted-at"> posted on </span><span class="related-blog-date">${new Date(blogpost.publishDate).toLocaleDateString()}</span></div>`;
formatted += `<p class="related-blog-post-summary">${blogpost.postSummary}<a href="${blogpost.url}">Read more</a></p>`;
formatted += '<div class="related-blog-tags">';
if (blogpost.tagList.length > 0) {
formatted += `Tags: ${blogpost.tagList.map(tag => tag.label).join(", ")}`;
}
formatted += '</div>';
if (blogpost.featuredImage) {
formatted += `<img src="${blogpost.featuredImage}" alt="${blogpost.featuredImageAltText}">`;
}
formatted += '</div>';
}
formatted += '</div>';
return formatted;
}
</script>Le partage de blogs sur les réseaux sociaux restitue les compteurs de partages sur vos articles de blog (si cette option est activée dans les paramètres de contenu).
| Parameter | Type | Description | Default |
|---|---|---|---|
select_blog
| "default" ou ID de blog | Indique le blog connecté aux compteurs de partages. Ce paramètre accepte les arguments suivants : |
default
|
downgrade_shared_url
| Booléen | Utilisez HTTP dans l'URL envoyée aux réseaux sociaux. Utilisé pour préserver les comptes lors de la mise à niveau des domaines vers HTTPS uniquement. |
false
|
Une balise d'abonnement au blog restitue le formulaire d'abonnement au blog pour un blog particulier. Ce formulaire est automatiquement créé chaque fois qu'un blog est créé dans les paramètres de contenu. Un formulaire d'abonnement est associé par blog. Notez que les champs du formulaire d'abonnement sont configurés dans l'interface utilisateur de l'éditeur de formulaire.
| Parameter | Type | Description | Default |
|---|---|---|---|
select_blog
| "default" ou ID de blog | Sélectionne le formulaire d'abonnement au blog à restituer. Ce paramètre accepte les arguments suivants : |
default
|
title
| Chaîne | Définit le texte d'un titre de balise h3 au-dessus du formulaire d'inscription. |
"Subscribe Here!"
|
no_title
| Booléen | Si la valeur est true, la balise h3 au-dessus du titre est supprimée. |
false
|
response_message
| Chaîne | Définit le message de remerciement en ligne qui est restitué lorsqu'un utilisateur soumet un formulaire. Prend en charge le HTML. |
"Thanks for Subscribing!"
|
edit_form_link
| Chaîne | Ce paramètre génère un lien qui permet aux utilisateurs de cliquer sur l'écran de l'éditeur de formulaire correspondant. Cette option ne s'affichera dans l'interface utilisateur de l'éditeur que si le module possède le paramètre overrideable=True. Par exemple, pour remplacer le HubID et l'ID du formulaire par les informations de l'URL du formulaire d'abonnement à votre blog par défaut : \n place le code sur une nouvelle ligne. |
Une balise booléenne crée une case à cocher dans l'interface utilisateur qui affiche true ou false. Outre l'impression de la valeur, ce module est utile pour définir une logique de modèle conditionnel, lorsqu'il est combiné avec le paramètre export_to_template_context.
| Parameter | Type | Description | Default |
|---|---|---|---|
value
| Booléen | Détermine si la case à cocher est sélectionnée ou non. |
False
|
Une balise de choix crée une liste déroulante dans l'interface utilisateur de l'éditeur de contenu qui imprime la valeur sélectionnée par l'utilisateur. Les balises de choix sont idéales pour donner à vos utilisateurs un ensemble d'options prédéfinies, comme l'impression du type de page dans un en-tête de page.
Outre l'impression de la valeur du choix, cette balise est utile pour définir une logique de modèle conditionnel, lorsqu'elle est combinée avec le paramètre export_to_template_context.
| Parameter | Type | Description |
|---|---|---|
value
| Booléen | La valeur par défaut du champ pour la liste déroulante |
choices
| Séquence | Une liste de valeurs séparées par des virgules ou une liste de paires (valeur, libellé). La syntaxe des paires (valeur, libellé) est la suivante : |
La balise de couleur génère un sélecteur de couleur dans l'interface utilisateur de l'éditeur de page qui imprime une valeur de couleur hex dans un modèle. Notez que ce module ne peut être utilisé que dans les modèles, et pas dans les fichiers CSS. Si vous utilisez cette balise dans un élément <style> ou dans une CSS en ligne, vous souhaiterez utiliser le paramètre no_wrapper=True pour supprimer le wrapper <span>.
| Parameter | Type | Description |
|---|---|---|
color
| Chaîne | Une valeur de couleur hex par défaut pour le sélecteur de couleur |
Une balise call-to-action ou CTA permet aux utilisateurs d'ajouter un bouton call-to-action HubSpot à une zone prédéfinie d'une page.
| Parameter | Type | Description |
|---|---|---|
embed_code
| Chaîne | Le code d'intégration pour le CTA. \n différencie les sauts de ligne. |
full_html
| Chaîne | Le code d'intégration pour le CTA (identique à embed_code). \n différencie les sauts de ligne. |
image_src
| Chaîne | L'URL de la source de l'image qui définit l'image d'aperçu dans l'éditeur de contenu. |
image_editor
| Chaîne | Balisage de l'aperçu de l'éditeur d'image |
guid
| Chaîne | L'ID unique du CTA. Cet ID est disponible dans l'URL de l'écran Détails d'un CTA particulier. Ce paramètre est utilisé pour choisir le CTA à afficher par défaut. |
image_html
| Chaîne | HTML de l'image du CTA sans le script CTA.* |
image_email
| Chaîne | Version du code CTA adaptée aux e-mails.* |
* Si ces paramètres sont inclus ici par souci d'exhaustivité, le code généré par HubSpot pour les renseigner est très spécifique. Si vous avez besoin d'un CTA sélectionné par défaut, plutôt que d'essayer de développer les paramètres du CTA à partir de zéro, il est recommandé de configurer le CTA sur un modèle de mise en page, puis de le cloner dans le fichier. Vous pouvez ensuite copier le module HubL du CTA avec tous les paramètres correctement définis pour vous.
Il existe également une fonction CTA qui génère un CTA à partir de l'ID.
Un module HTML personnalisé permet aux utilisateurs de saisir du HTML brut dans l'éditeur de contenu. Si vous devez ajouter du HTML par défaut à la balise, vous pouvez utiliser la syntaxe de bloc.
| Parameter | Type | Description |
|---|---|---|
value
| Chaîne | Définit le contenu HTML par défaut du module. |
Les modules personnalisés permettent aux concepteurs de HubSpot de créer un groupe personnalisé d'objets de contenu modifiables à utiliser dans les modèles et les pages du CMS de HubSpot, tout en permettant aux responsables marketing de contrôler le contenu spécifique apparaissant dans ces modules, page par page. Découvrez-en davantage sur les modules personnalisés et leur syntaxe HubL simplifiée ici.
Les modules personnalisés doivent être créés dans l'éditeur de modules personnalisés, mais ils peuvent être inclus dans les modèles codés et les modules HubL. Bloc d'utilisation s'affichera dans la barre latérale droite de l'éditeur de module personnalisé, sous Utilisation du modèle.
Les modules personnalisés nécessitent l'ID du module sous forme de chaîne de caractères ainsi qu'un paramètre de chemin d'accès afin de spécifier le module à charger. Le bloc d'utilisation comprendra également un paramètre de libellé. Consultez la syntaxe ci-dessous :
| Parameter | Type | Description |
|---|---|---|
module_id
| Chaîne | L'ID du module à restituer. |
path
| Chaîne | Le chemin du module à restituer. Incluez le slash de début pour un chemin absolu. Autrement, le chemin sera relatif au modèle. Référencez les modules par défaut de HubSpot avec des chemins correspondant à leurs balises HubL, comme :@hubspot/rich_text, @hubspot/linked_image, etc. |
Lors de la création d'un module, vous pouvez ajouter un contenu par défaut à vos champs ou une balise HubL editor_placeholder au fichier HTML + HubL pour restituer un contenu de type variable. Cette balise restitue l'icône et le nom du module comme des variables vides dans l'éditeur.
Cette balise peut être utile lorsque le module n'a pas de contenu par défaut ou n'en a pas besoin, ou pour simplifier la création du module.
Pour ajouter une variable à un module personnalisé, vous pouvez ajouter une fonction if au fichier HTML + HubL afin d'afficher la variable lorsqu'aucun contenu n'est sélectionné. Par exemple :
Si vous ne pouvez pas modifier le style de la variable, vous pouvez ajouter les propriétés suivantes au fichier meta.json du module pour personnaliser son contenu :
| Parameter | Type | Description |
|---|---|---|
show_module_icon
| Booléen | Affichage ou non de l'icône du module. |
title
| Chaîne | Le titre qui apparaît dans la variable. |
description
| Chaîne | La description qui apparaît dans la variable. |
Par exemple, votre fichier meta.json pourrait ressembler à ce qui suit :
Les colonnes flexibles sont des colonnes verticales dans un modèle qui permettent aux créateurs de contenu d'insérer et de supprimer des modules sur la page à l'aide de l'éditeur de contenu. Lorsque vous codez une colonne flexible avec HubL, vous pouvez choisir d'encadrer d'autres modules HubL pour qu'ils apparaissent par défaut dans la colonne flexible. L'exemple de code ci-dessous illustre la syntaxe de base et un exemple de colonne flexible avec un module de texte enrichi et de formulaire contenu par défaut.
Notez que les colonnes flexibles ne peuvent être ajoutées qu'aux modèles de page, et pas aux modèles de blog ou d'e-mail. Les modules ne peuvent pas contenir de colonnes flexibles, mais peuvent contenir des champs et des groupes reproductibles, qui offrent une fonctionnalité similaire.
Remarque : Lors de l'utilisation de cette balise, label doit respecter la valeur name pour que la colonne flexible fonctionne dans l'éditeur de contenu. Par exemple, la syntaxe suivante n'est pas valide :
[% widget_container label="My label" "my_flexible_column" %}
Permet aux utilisateurs de sélectionner un formulaire HubSpot à ajouter à leur page.
| Parameter | Type | Description | Default |
|---|---|---|---|
form_key
| Chaîne | Spécifie un ID unique pour le formulaire au niveau de la page. | |
form_to_use
| Chaîne | Spécifie le formulaire à charger par défaut, en fonction de l'ID du formulaire. Cet ID est disponible dans l'URL de l'éditeur de formulaire de chaque formulaire. | |
title
| Chaîne | Ajoute une balise d'en-tête h3 au-dessus du formulaire. | |
no_title
| Booléen | Si la valeur est |
False
|
form_follow_ups_follow_up_type
| Énumération | Spécifie les actions de suivi telles que l'inscription d'un contact dans un workflow ou l'envoi d'un simple e-mail de suivi. Les valeurs possibles sont | |
simple_email_for_live_id
| Nombre | Spécifie l'ID de l'e-mail de suivi simple pour la page en direct. | |
simple_email_for_buffer_id
| Nombre | Spécifie l'ID de l'e-mail de suivi simple pour la version d'auto-enregistrement d'une page. | |
follow_up_type_simple
| Booléen | Si c'est le cas, cela permet d'envoyer un e-mail de suivi simple. Alternative à | |
follow_up_type_automation
| Booléen | Si la valeur est true, cela inscrit les soumissions dans un workflow. Alternative à | |
simple_email_campaign_id
| Nombre | Spécifie l'ID de l'e-mail de suivi simple. Alternative à | |
form_follow_ups_workflow_id
| Nombre | Spécifie l'ID du workflow dans lequel il faut inscrire les soumissions. | |
response_redirect_url
| Chaîne | En cas de redirection vers une page externe, ce paramètre indique l'URL vers laquelle la redirection doit être effectuée. | |
response_redirect_id
| Nombre | Si vous redirigez vers une page hébergée par HubSpot, ce paramètre spécifie l'ID de la page en question. L'ID de la page est disponible dans l'URL de l'éditeur de page de chaque page. | |
response_response_type
| Énumération | Détermine s'il faut rediriger vers une autre page ou afficher un message de remerciement en ligne lors de la soumission. La valeur de ce paramètre doit être |
inline
|
response_message
| Chaîne | Affiche un message de remerciement en ligne. Ce paramètre prend en charge le HTML. | |
notifications_are_overridden
| Booléen | Si la valeur est true, le formulaire enverra les notifications de formulaire aux adresses e-mail spécifiées, sélectionnées dans le paramètre |
False
|
notifications_override_guid_buffer
| Chaîne | ID des paramètres de remplacement dans la version d'auto-enregistrement de la page. | |
notifications_override_guid
| Chaîne | ID des paramètres de remplacement dans la version en ligne de la page. | |
notifications_override_email_addresses
| JSON | La syntaxe de bloc prend en charge une liste JSON de destinataires d'e-mails qui seront notifiés lors de la soumission du formulaire. Ces adresses e-mail remplacent les paramètres de notification par e-mail définis dans le formulaire. | |
gotowebinar_webinar_key
| Chaîne | Spécifie le webinaire GoToWebinar auquel inscrire les contacts qui soumettent le formulaire. Disponible uniquement pour les portails utilisant l'intégration GoToWebinar. | |
sfdc_campaign
| Chaîne | Spécifie la campagne Salesforce dans laquelle inscrire les contacts qui soumettent le formulaire. La valeur de ce paramètre doit être l'ID de la campagne SFDC et n'est disponible que pour les portails qui sont intégrés à Salesforce. |
Restitue les informations de copyright avec l'année et le nom de l'entreprise spécifiés dans les paramètres de contenu (E-mail > Informations du pied de page).
Génère une balise de galerie HubSpot. Cette balise de galerie est basée sur Slick. Alors que vous pouvez créer un module de galerie avec la syntaxe de module HubL standard, si vous souhaitez prédéfinir des diapositives par défaut en utilisant HubL, vous devez utiliser la syntaxe de bloc. Les deux méthodes sont présentées ci-dessous. Les images de la galerie sont chargées en différé à l'aide de JavaScript.
| Parameter | Type | Description | Default |
|---|---|---|---|
slides
| JSON | Une liste JSON de la légende par défaut, de l'URL du lien, du texte alternatif, de l'image source et de l'ouverture ou non dans un nouvel onglet. Consultez la syntaxe de bloc ci-dessus. | |
loop_slides
| Booléen | Si la valeur est définie sur true, les diapositives sont passées en boucle. |
True
|
num_seconds
| Nombre | Temps de pause entre les diapositives, en secondes. |
5
|
show_pagination
| Booléen | Proposez des boutons sous le curseur pour naviguer entre les diapositives. |
True
|
sizing
| Énumération | Détermine si le curseur change de taille, en fonction de la hauteur des diapositives. Les valeurs possibles sont "static" ou "resize". |
"static"
|
auto_advance
| Booléen | Avance automatiquement les diapositives après le temps défini dans num_secondes. |
False
|
transition
| Énumération | Définit le type de transition de la diapositive. Les valeurs possibles sont "fade" ou "slide". |
"slide"
|
caption_position
| Énumération | Affecte le positionnement de la légende sur ou sous la diapositive. Les valeurs possibles sont "below" ou "superimpose". |
"below"
|
display_mode
| Énumération | Détermine la façon dont la galerie d'images sera affichée. Les valeurs possibles sont "standard", "lightbox" ou "thumbnail". |
"standard"
|
lightboxRows
| Nombre | Si "display_mode" est défini sur "lightbox", ce paramètre contrôle le nombre de lignes affichées dans la galerie. |
3
|
Génère un module d'en-tête qui restituera le texte sous forme de balise h1-h6.
| Parameter | Type | Description | Default |
|---|---|---|---|
header_tag
| Chaîne | Sélectionnez la balise d'en-tête à restituer. Les valeurs possibles sont h1, h2, h3, h4, h5 ou h6. |
h1
|
value
| Chaîne | Restitue le texte par défaut dans le module d'en-tête. |
"A clear bold header"
|
| Parameter | Type | Description | Default |
|---|---|---|---|
name
| Chaîne | Nom de l'icône. | |
style
| Chaîne | Style de l'icône. Valeurs possibles : |
REGULAR
|
unicode
| Chaîne | La représentation en caractères Unicode de l'icône. | |
icon_set
| Chaîne | L'ensemble d'icônes FontAwesome à utiliser. Les valeurs possibles sont :
| |
purpose
| Chaîne | L'objectif de l'icône, utilisé pour l'accessibilité. Les valeurs possibles sont |
decorative
|
title
| Chaîne | L'élément de titre du fichier SVG de l'icône ainsi qu'un attribut |
Crée une balise d'image qui permet aux utilisateurs de sélectionner une image dans l'éditeur de contenu. Si vous souhaitez que l'image soit liée à une URL de destination, vous devez utiliser linked_image ci-dessous.
| Parameter | Type | Description | Default |
|---|---|---|---|
alt
| Chaîne | Définit le texte alternatif par défaut pour l'image. | |
src
| Chaîne | Renseigne l'attribut src de la balise img. | |
width
| Nombre | Définit l'attribut width de la balise img. |
The width of the image
|
height
| Nombre | Définit une hauteur minimale dans un attribut de style de la balise img pour les modèles d'e-mail uniquement. |
The height of the image
|
hspace
| Nombre | Définit l'attribut hspace de la balise img. | |
align
| Chaîne | Définit l'attribut align de la balise img. Les valeurs possibles sont left, right ou center. | |
style
| Chaîne | Ajoute des déclarations CSS en ligne à la balise img. Par exemple : style="border:1px solid blue; margin:10px". | |
loading
| Chaîne | Contrôle l'attribut de chargement de l'élément img. Utilisé pour le chargement en différé basé sur le navigateur. |
Un module de source d'image crée un sélecteur d'image dans l'éditeur de contenu, mais plutôt que d'imprimer une balise img, il restitue l'URL de l'image. Cette balise est généralement utilisée avec le paramètre no_wrapper=True, de sorte que la source de l'image puisse être ajoutée à une CSS en ligne ou à d'autres balises. Une alternative à l'utilisation de cette balise est d'utiliser le paramètre export_to_template_context.
| Parameter | Type | Description | Default |
|---|---|---|---|
src
| Chaîne | Spécifie l'URL par défaut de la source de l'image. |
Ajoute une icône de globe avec des liens vers les versions traduites d'une page de CMS donnée. Découvrez-en davantage sur le contenu multilingue ici.
| Parameter | Type | Description | Default |
|---|---|---|---|
display_mode
| Énumération | La langue du texte dans le sélecteur de langue. Les valeurs sont :
|
Localized
|
Crée une image sélectionnable par l'utilisateur qui est encadrée par un lien. Ce module possède tous les paramètres d'un module image avec deux paramètres supplémentaires qui spécifient l'URL de destination du lien et si le lien s'ouvre dans une nouvelle fenêtre.
| Parameter | Type | Description | Default |
|---|---|---|---|
alt
| Chaîne | Définit le texte alternatif par défaut pour l'image. | |
src
| Chaîne | Renseigne l'attribut src de la balise img. | |
width
| Nombre | Définit l'attribut width de la balise img. |
The width of the image
|
height
| Nombre | Définit une hauteur minimale dans un attribut de style de la balise img pour les modèles d'e-mail uniquement. |
The height of the image
|
hspace
| Nombre | Définit l'attribut hspace de la balise img. | |
align
| Chaîne | Définit l'attribut align de la balise img. Les valeurs possibles sont left, right ou center. | |
style
| Chaîne | Ajoute des déclarations CSS en ligne à la balise img. Par exemple : style="border:1px solid blue; margin:10px". | |
open_in_new_tab
| Booléen | Permet d'ouvrir ou non l'URL de destination dans un autre onglet. |
False
|
link
| Chaîne | Définit l'URL de destination du lien qui encadre la balise img. | |
target
| Chaîne | Définit l'attribut target de la balise link. | |
loading
| Chaîne | Contrôle l'attribut de chargement de l'élément img. Utilisé pour le chargement en différé basé sur le navigateur. |
Un module de logo restitue l'image du logo de votre entreprise à partir des paramètres de contenu.
| Parameter | Type | Description | Default |
|---|---|---|---|
suppress_company_name
| Booléen | Masque le nom de l'entreprise si un logo image n'est pas défini. |
False
|
alt
| Chaîne | Définit le texte alternatif par défaut pour l'image. |
Value in Content Settings
|
src
| Chaîne | Renseigne l'attribut src de la balise img. |
Value in Content Settings
|
width
| Nombre | Définit l'attribut width de la balise img. |
The width of the image
|
height
| Nombre | Définit une hauteur minimale dans un attribut de style de la balise img pour les modèles d'e-mail uniquement. |
The height of the image
|
hspace
| Nombre | Définit l'attribut hspace de la balise img. | |
align
| Chaîne | Définit l'attribut align de la balise img. Les valeurs possibles sont left, right ou center. | |
style
| Chaîne | Ajoute des déclarations CSS en ligne à la balise img. Par exemple : style="border:1px solid blue; margin:10px". | |
open_in_new_tab
| Booléen | Permet d'ouvrir ou non l'URL de destination dans un autre onglet. |
False
|
link
| Chaîne | Définit l'URL de destination du lien qui encadre la balise img. | |
override_inherited_src
| Booléen | Si la valeur est true, utilisez la source du widget de logo plutôt que la source héritée des paramètres ou du modèle. |
True
|
heading_level
| Chaîne | Lorsque vous utilisez des logos textuels non liés, le logo textuel est inséré dans l'une des options disponibles suivantes sous forme de balise HTML : |
h1
|
loading
| Chaîne | Contrôle l'attribut de chargement de l'élément img. Utilisé pour le chargement en différé basé sur le navigateur. |
Génère un menu avancé basé sur une arborescence de menu dans Paramètres du contenu > Menus avancés. Consultez Menus et navigation pour plus d'informations sur l'utilisation des menus dans les modèles et les modules. Si la valeur de id est null, la balise menu restituera le menu par défaut du compte HubSpot.
| Parameter | Type | Description | Default |
|---|---|---|---|
id
| Nombre | ID de l'arborescence de menu à partir de Menus avancés dans Paramètres de contenu. | |
site_map_name
| Chaîne | Nom de l'arborescence de menu à partir de Menus avancés dans Paramètres de contenu. |
"default"
|
root_type
| Énumération | Spécifie le type de menus avancés. Les options sont "site_root", "top_parent", "parent", "page_name", "page_id" ou "breadcrumb". Ces valeurs correspondent à statique, dynamique par section, dynamique par page et fil d'Ariane. |
"site_root"
|
flyouts
| Chaîne | Si la valeur est true, une classe est ajoutée à l'arborescence de menu qui peut être stylisée pour permettre aux éléments de menu enfants d'apparaître lorsque vous survolez le parent. Si la valeur est false, les éléments de menu enfants apparaîtront toujours. |
"true"
|
max_levels
| Nombre | Détermine le nombre de niveaux de menus imbriqués à restituer dans le balisage. Ce paramètre définit le nombre d'enfants d'arborescence de menu qui peuvent être développés dans le menu. |
2
|
flow
| Énumération | Définit l'orientation des éléments de menu. Cela ajoute des classes à l'arborescence de menu, afin de pouvoir les styliser en conséquence. Les valeurs possibles sont "horizontal", "vertical" ou "vertical_flyouts". Les menus horizontaux affichent les éléments côte à côte, et les menus verticaux vont de haut en bas. |
"horizontal"
|
root_key
| Chaîne | Utilisé pour trouver la racine du menu. Lorsque root_type est défini comme page_id ou page_name, ce paramètre doit être l'ID de la page ou le libellé de la page, respectivement. |
"horizontal"
|
label
| Chaîne | Du contenu riche pour décrire cette entité |
False
|
label
| Chaîne | Du contenu riche pour décrire cette entité |
False
|
Une balise HubL qui met en file d'attente un élément de style à restituer dans l'élément <head>.
Cette balise est similaire à la fonction require_css, sauf qu'elle insère un style en ligne plutôt qu'à partir d'une feuille de style. Cette balise ne se déduplique pas non plus par rapport à d'autres instances de la CSS sur la même page. Si vous créez un module et que vous souhaitez insérer une feuille de style, mais que vous pouvez utiliser ce module plusieurs fois sur une seule page, vous pouvez utiliser la fonction require_css à la place.
Une balise HubL qui met en file d'attente tout ce qui est placé à l'intérieur dans le fichier standard_header_includes qui se trouve dans le modèle <head>. Pour la plupart des Javascript et CSS, consultez require_js et require_css. Parmi les cas d'utilisation de require_head figure la fourniture de méta-balises et de balises de liens spéciaux (comme prefetch et preconnect) à partir de modules.
Une balise HubL qui met en file d'attente un élément de script à restituer. Pour mettre en file d'attente un script à restituer dans <head /> à partir d'un fichier différent via un élément <script /> (et non en ligne comme ici), utilisez plutôt la fonction HubL require_js(absolute_url).
| Parameter | Type | Description | Default |
|---|---|---|---|
position
| Chaîne | Définit la position où le script en ligne sera restitué. Les options sont |
"footer"
|
Crée un éditeur de contenu WYSIWYG.
| Parameter | Type | Description | Default |
|---|---|---|---|
html
| Chaîne | Contenu de texte enrichi par défaut pour le module. |
<h2>Something Powerful</h2> <h3>Tell The Reader More</h3> <p>The headline and subheader tells us what you're offering, and the form header closes the deal. Over here you can explain why your offer is so great it's worth filling out a form for.</p> <p>Remember:</p> <ul> <li>Bullets are great</li> <li>For spelling out <a href="#">benefits</a> and</li> <li>Turning visitors into leads.</li> </ul>
|
hsRssFeedComplete(feeds), où feeds est le sélecteur jQuery sur tous les flux qui ont été finalisés. Vous pouvez directement manipuler l'objet DOM dans cette fonction.
| Parameter | Type | Description | Default |
|---|---|---|---|
show_title
| Booléen | Affiche ou masque le titre du flux RSS. |
True
|
show_date
| Booléen | Affiche la date de publication. |
True
|
show_author
| Booléen | Affiche le nom de l'auteur. |
True
|
show_detail
| Booléen | Affiche le résumé du message jusqu'au nombre de caractères défini par le paramètre |
True
|
title
| Chaîne | Ajoute un titre au-dessus de la liste de flux RSS. | |
limit_to_chars
| Nombre | Nombre maximum de caractères à afficher dans le résumé. |
200
|
publish_date_format
| Chaîne | Format de la date de publication. Les valeurs possibles sont |
"short"
|
attribution_text
| Chaîne | Le texte qui attribue un auteur à un article. |
"by"
|
click_through_text
| Chaîne | Texte qui s'affiche pour le lien d'un clic publicitaire à la fin d'un résumé d'article |
"Read more"
|
publish_date_text
| Chaîne | Le texte qui indique quand un article a été publié. |
"posted at"
|
include_featured_image
| Booléen | Affiche l'image en vignette avec le lien de l'article pour les flux RSS générés par HubSpot. |
False
|
item_title_tag
| Chaîne | Spécifie la balise HTML de chaque titre d'article. |
span
|
is_external
| Booléen | Le flux RSS provient d'un blog externe. |
False
|
number_of_items
| Nombre | Nombre maximal d'articles à afficher. |
5
|
publish_date_language
| Chaîne | Spécifie la langue de la date de publication. |
en_US
|
rss_url
| Chaîne | L'URL où se trouve le flux RSS. | |
content_group_id
| Chaîne | ID du blog lorsque la source du flux est un blog interne. | |
select_blog
| Chaîne | Peut être utilisé pour sélectionner un flux de blog interne à HubSpot. |
default
|
feed_source
| Chaîne | Définissez la source du flux RSS. Lorsqu'elle est interne, le format général est | |
tag_id
| Nombre | ID pour la balise lorsque la source du flux est un blog interne. |
Génère un titre HTML et un sous-titre <p>.
| Parameter | Type | Description | Default |
|---|---|---|---|
header
| Chaîne | Texte à afficher dans l'en-tête. |
"A clear and bold header"
|
subheader
| Chaîne | Texte à afficher dans le sous-titre. |
"A more subdued subheader"
|
heading_level
| Chaîne | Le niveau de titre sémantique HTML (h1 à h6 pris en charge). |
"h1"
|
Les menus simples vous permettent de créer des menus de navigation de base qui peuvent être modifiés au niveau de la page. Contrairement aux modules de menu ordinaires, les menus simples ne sont pas gérés à partir de l'écran de navigation dans les paramètres du site web, mais à partir des éditeurs de modèle et de page. Vous pouvez utiliser la syntaxe de bloc pour configurer une arborescence de menu par défaut.
| Parameter | Type | Description | Default |
|---|---|---|---|
orientation
| Énumération | Définit les classes de balise de menu pour permettre de styliser l'orientation des éléments de menu sur la page. Les valeurs possibles sont |
"horizontal"
|
menu_tree
| JSON | Structure du menu comprenant les noms des liens des pages et les URL cibles. |
[]
|
Les balises de partage sur les réseaux sociaux génèrent des icônes de réseaux sociaux qui peuvent être utilisées pour partager une page particulière. Ce module peut être utilisé avec la syntaxe de bloc pour personnaliser les images des icônes et plus encore.
| Parameter | Type | Description | Default |
|---|---|---|---|
use_page_url
| Booléen | Si la valeur est définie sur true, le module partage l'URL de la page par défaut. |
True
|
link
| Chaîne | Spécifie une URL différente à partager, si | |
pinterest
| JSON | Paramètres pour le format du lien Pinterest et la source de l'image de l'icône. |
See block syntax example, above
|
twitter
| JSON | Paramètres pour le format du lien Twitter et la source de l'image de l'icône. |
See block syntax example, above
|
linked_in
| JSON | Paramètres pour le format du lien LinkedIn et la source de l'image de l'icône. |
See block syntax example, above
|
facebook
| JSON | Paramètres pour le format du lien Facebook et la source de l'image de l'icône. |
See block syntax example, above
|
email
| JSON | Paramètres pour le format du lien de partage par e-mail et la source de l'image de l'icône. |
See block syntax example, above
|
Une balise spacer génère une balise span vide. Cette balise peut être stylisée pour servir d'espacement. Dans les mises en page par glisser-déposer, le module d'espacement est encadré dans un conteneur dont la classe est span1-span12 afin de déterminer l'espace que le module doit occuper dans la grille adaptative à douze colonnes.
Les balises suivantes peuvent être utilisées sur les pages système, telles que les pages de réinitialisation du mot de passe ou d'abonnement aux e-mails.
La page de désabonnement alternative s'affiche lorsque HubSpot ne parvient pas à identifier l'adresse e-mail du destinataire d'un e-mail qui cherche à se désabonner. Cette balise restitue un formulaire permettant au contact de saisir son adresse e-mail pour se désabonner des communications par e-mail. Elle doit être utilisée sur un modèle système de désabonnement alternatif.
| Parameter | Type | Description | Default |
|---|---|---|---|
header
| String | Restitue le texte dans une balise h1 au-dessus du formulaire de désabonnement. |
"Email Unsubscribe"
|
input_help_text
| String | Restitue le texte d'aide dans une balise h3 au-dessus du champ de votre formulaire de désabonnement aux e-mails. |
"Your email address:"
|
input_placeholder
| String | Ajoute un texte d'espace réservé dans le champ de formulaire d'adresse e-mail. |
"email@example.com"
|
button_text
| String | Modifie le texte du bouton d'envoi du formulaire de désabonnement. |
"Unsubscribe"
|
Ce module s'affiche lorsqu'un destinataire d'un e-mail cherche à modifier ses préférences d'abonnement. Il doit être utilisé sur un modèle système de préférences d'abonnement.
| Parameter | Type | Description | Default |
|---|---|---|---|
header
| String | Restitue le texte dans une balise h1 au-dessus du formulaire de préférences d'abonnement. |
"Communication Preferences"
|
subheader_text
| String | Ajoute du texte sous l'en-tête au-dessus des préférences de désabonnement. |
"<p>\n If this is not your email address, please ignore this page since the email associated with this page was most likely forwarded to you.\n</p>"
|
unsubscribe_single_text
| String | Restitue le texte dans un élément <p class="header"> au-dessus des options d'abonnement. |
"Uncheck the types of emails you do not want to receive:"
|
unsubscribe_all_text
| String | Restitue le texte dans un élément <p class="header"> au-dessus de la case à cocher de désabonnement de tous les e-mails. |
"Or check here to never receive any emails:"
|
unsubscribe_all_unsubbed_text
| String | Ajoute du texte dans un élément <p> restitué si un contact est actuellement désabonné de tous les e-mails. |
"You are presently unsubscribed from all of our emails. Would you like to receive our emails again?"
|
unsubscribe_all_option
| String | Définit le texte situé à côté de la case à cocher Se désabonner de tous les e-mails. |
"Unsubscribe me from all mailing lists."
|
button_text
| String | Définit le texte du bouton d'envoi qui met à jour les préférences d'abonnement. |
"Update email preferences"
|
resubscribe_button_text
| String | Définit le texte du bouton d'envoi pour les contacts qui se réabonnent. |
"Yes, resubscribe me!"
|
La confirmation des abonnements aux e-mails est un module qui peut être ajouté au modèle de remerciement lorsqu'un destinataire met à jour ses préférences d'abonnement ou se désabonne. Il doit être utilisé sur un modèle système de préférences d'abonnement.
| Parameter | Type | Description | Default |
|---|---|---|---|
header
| String | Restitue le texte dans une balise h1 au-dessus du formulaire de désabonnement. |
"Communication Preferences"
|
subheader_text
| String | Ajoute du texte au-dessus du message de confirmation. |
"<p>\n If this is not your email address, please ignore this page since the email associated with this page was most likely forwarded to you.\n</p>"
|
unsubscribe_all_success
| String | Définit le texte qui s'affiche lorsqu'une personne se désinscrit de toutes les communications par e-mail. |
"You have successfully unsubscribed from all email communications."
|
subscription_update_success
| String | Définit le texte lorsqu'un destinataire met à jour ses préférences d'abonnement. |
"You have successfully updated your email preferences."
|
Crée un formulaire de connexion pour donner accès à un contenu privé.
| Parameter | Type | Description | Default |
|---|---|---|---|
email_label
| Chaîne | Le libellé du champ de saisie de l'e-mail. |
"Email"
|
password_label
| Chaîne | Le libellé du champ de saisie du mot de passe. |
"Password"
|
remember_me_label
| Chaîne | Le libellé de la case à cocher Se souvenir de moi. |
"Remember Me"
|
reset_password_text
| Chaîne | Le texte de l'hyperlien de réinitialisation du mot de passe. |
"Forgot your password?"
|
submit_button_text
| Chaîne | Le texte du bouton d'envoi. |
"Login"
|
show_password
| Chaîne | Le texte du lien de révélation du mot de passe. |
"Show password"
|
Crée un formulaire permettant de s'inscrire pour accéder à un contenu privé.
| Parameter | Type | Description | Default |
|---|---|---|---|
email_label
| Chaîne | Le libellé du champ de saisie de l'e-mail. |
"Email"
|
password_label
| Chaîne | Le libellé du champ de saisie du mot de passe. |
"Password"
|
password_confirm_label
| Chaîne | Le libellé du champ de confirmation du mot de passe. |
"Confirm Password"
|
submit_button_text
| Chaîne | Le texte du bouton d'envoi. |
"Save Password"
|
show_password
| Chaîne | Le texte du lien de révélation du mot de passe. |
"Show password"
|
Crée un formulaire pour envoyer un e-mail de réinitialisation de mot de passe pour l'accès aux pages protégées par un mot de passe.
| Parameter | Type | Description | Default |
|---|---|---|---|
email_label
| Chaîne | Le libellé du champ de saisie de l'e-mail. |
"Email"
|
submit_button_text
| Chaîne | Le texte du bouton d'envoi. |
"Send Reset Email"
|
password_reset_message
| Chaîne | Le message qui s'affiche après avoir demandé l'e-mail de réinitialisation du mot de passe. |
False
|
Affiche un formulaire de réinitialisation de mot de passe pour accéder aux pages protégées par mot de passe.
| Parameter | Type | Description | Default |
|---|---|---|---|
password_label
| Chaîne | Le libellé de texte pour le champ de saisie du mot de passe. |
"Email"
|
password_confirm_label
| Chaîne | Le libellé de texte pour le champ de saisie de confirmation du mot de passe. |
"Send Reset Email"
|
submit_button_text
| Chaîne | Le libellé de texte pour le bouton de soumission de formulaire. |
False
|
show_password
| Chaîne | Le libellé de texte pour le bouton d'affichage de la valeur du mot de passe saisie. |
False
|
password_requirements
| Chaîne | Le libellé de texte qui décrit les exigences en matière de mot de passe. |
False
|
Ajoute une invite de mot de passe pour les pages protégées par un mot de passe.
| Parameter | Type | Description | Default |
|---|---|---|---|
submit_button_text
| Chaîne | Libellé du bouton situé sous le champ de saisie du mot de passe. |
"Submit"
|
bad_password_message
| Chaîne | Message affiché si un mot de passe incorrect a été saisi. |
"<p>Sorry, please try again.</p>"
|
password_placeholder
| Chaîne | Définit le texte d'espace réservé dans le champ du mot de passe. |
"Password"
|
Crée une seule ligne de texte. Cette balise peut être utile pour être intégrée à votre balisage, lorsqu'elle est utilisée conjointement avec le paramètre no_wrapper=True. Par exemple, si vous souhaitez que vos utilisateurs finaux puissent définir la destination d'une ancre prédéfinie, vous pouvez renseigner l'élément href avec un module de texte ayant la forme no_wrapper=True.
| Parameter | Type | Description | Default |
|---|---|---|---|
value
| Chaîne | Définit le texte par défaut du champ de texte à ligne unique. |
Une zone de texte est similaire à un module de texte dans la mesure où elle permet aux utilisateurs de saisir du texte brut, mais elle leur offre une plus grande zone dans l'éditeur de contenu. Ce module ne prend pas en charge le HTML. Si vous souhaitez l'utiliser directement à l'intérieur d'une balise d'encadrement prédéfinie, ajoutez le paramètre no_wrapper=true.
| Parameter | Type | Description | Default |
|---|---|---|---|
value
| Chaîne | Définit le texte par défaut de la zone de texte. |
Restituez un lecteur vidéo pour un fichier vidéo à partir du gestionnaire de fichiers dont le paramètre Autoriser l'intégration, le partage et le suivi est activé.
| Parameter | Type | Description | Default |
|---|---|---|---|
hide_playlist
| Booléen | Masquez la liste de lecture vidéo. |
True
|
playlist_color
| Chaîne | Une valeur de couleur hex pour la liste de lecture. | |
play_button_color
| Chaîne | Une valeur de couleur hex pour les boutons de lecture et de pause. |
#2A2A2A
|
embed_button
| Booléen | Affichez le bouton d'intégration sur le lecteur. |
False
|
viral_sharing
| Booléen | Affichez le bouton de partage sur les réseaux sociaux sur le lecteur. |
False
|
width
| Nombre | Largeur du lecteur vidéo intégré. |
Auto
|
height
| Nombre | Hauteur du lecteur vidéo intégré. |
Auto
|
player_id
| Nombre | L'élément | |
style
| Chaîne | Style supplémentaire pour le lecteur. | |
conversion_asset
| JSON | Définition d'un événement pour le lecteur. Peut restituer le CTA ou le formulaire avant ou après la lecture de la vidéo. Ce paramètre prend un objet JSON avec trois paramètres : type (FORM ou CTA), ID (le GUID de l'objet type), position (POST ou PRE). |
See above example
|
placeholder_alt_text
| Chaîne | Le texte alternatif de la vidéo. |
Merci d'avoir partagé votre avis.