Produits pris en charge
Produits pris en charge
Exige l'un des produits suivants ou un produit supérieur.
Marketing Hub -Pro
Content Hub -ProDernière modification : 10 octobre 2025
Les modèles de glisser-déposer ont été conçus pour permettre aux utilisateurs moins techniques de créer facilement un site web sur le CMS Hub. Les modèles de glisser-déposer tirent parti d’un outil de conception de modèles visuel, qui génère du code HTML + HubL en arrière-plan.
Afin de faire fonctionner l’outil de conception visuel, la sortie HTML est contrôlée par HubSpot et vous n’avez pas de contrôle direct sur ses parties structurelles. En outre, un fichier layout.css est chargé sur la page, ce qui permet une grille de base à 12 colonnes basée sur bootstrap 2. Cela rend tous les sites créés avec des modèles de glisser-déposer réactifs par défaut, ce qui permet aux lignes de contenu de s’empiler verticalement. Pour une réactivité plus complexe et personnalisée, vous souhaiterez ajouter vos propres styles réactifs.
Les modèles de glisser-déposer sont créés dans le gestionnaire de conception. Lors d’interactions avec ces derniers via l’API ou les outils de développement locaux, ils sont représentés au format JSON. En raison de la nature des modèles de glisser-déposer, la seule façon recommandée de les modifier est via l’interface du gestionnaire de conception. **Si vous préférez coder, utiliser le contrôle des versions ou simplement être en mesure d’éditer via vos outils préférés localement, les modèles codés HTML + HubL offrent la meilleure expérience pour les développeurs.**La fonctionnalité dnd_area pour les modèles HTML + HubL offre également une meilleure expérience aux créateurs de contenu que l’interface en glisser-déposer du gestionnaire de conception, car elle les conserve dans l’éditeur de contenu visuel.
Outil de création de modèles de glisser-déposer
Pour créer un modèle de glisser-déposer, ouvrez le gestionnaire de conception et dans l’outil de recherche, créez un nouveau fichier, choisissez un modèle et le type de modèle que vous créez. Les modèles de glisser-déposer sont constitués de blocs de construction, qui sont des modules, des groupes, des groupes globaux et des colonnes flexibles. Découvrez comment utiliser l’outil de création de modèles de glisser-déposer.Modules
Les modules sont des composants réutilisables qui sont des parties modifiables d’une page. Les modules sont constitués d’un fragment de modèle HTML + HubL, de CSS, de JS et de champs. Les modules peuvent être placés à l’intérieur de colonnes flexibles et de dnd_areas par les éditeurs de contenu. Ils constituent la principale méthode pour les éditeurs de contenu de créer le contenu de leur site web. Vous pouvez créer des modules pour gérer un certain nombre de fonctions, la recherche, les galeries d’images, les menus, les animations marketing complexes, les calculatrices, les comparaisons de produits et tout ce qui selon vous offre une bonne expérience pour les créateurs de contenu. Les champs sont la façon dont l’éditeur de contenu contrôle leur sortie. Les modules ne sont pas spécifiques aux modèles de glisser-déposer, ils sont un élément de base très important pour le CMS Hub. Dans les modèles de glisser-déposer, les valeurs par défaut des champs de module peuvent être configurées dans l’inspecteur. Découvrez-en davantage sur les modules.
Groupes
Les groupes sont des encadreurs pour d’autres groupes et modules. Ils peuvent avoir des classes CSS et du HTML d’encadrement. Les groupes se manifestent sous forme de HTML d’encadrement avec des classes de mise en page pour faciliter le placement et le dimensionnement des groupes. Les groupes peuvent également avoir un nom interne uniquement. Vous pouvez ainsi regrouper des modules dans le gestionnaire de conception, ce qui facilite l’identification visuelle des parties d’une page. Un exemple de ceci pourrait être pour les barres latérales ou les bannières.
Groupes globaux
Les groupes globaux sont des groupes qui, lorsqu’ils sont modifiés, affectent l’ensemble du site web et pas seulement la page sur laquelle ils se trouvent. Les groupes globaux peuvent exister dans plusieurs modèles et sont le plus souvent utilisés pour les en-têtes et les pieds de page de site. Les groupes globaux sont similaires aux partiels, mais sont limités à la structure que les modèles de glisser-déposer appliquent. Ils peuvent être intégrés dans des fichiers HTML + HubL si nécessaire, mais la plupart du temps, il est plus logique d’utiliser un partial global à la place.
Colonnes flexibles
Les colonnes flexibles sont un type particulier de groupe. Elles peuvent contenir un ensemble de modules par défaut, mais les éditeurs de contenu peuvent ajouter, supprimer et déplacer des modules en leur sein. Les colonnes flexibles permettent de réorganiser les modules d’une manière unidimensionnelle, verticalement vers le haut et vers le bas. Contrairement aux balises dnd_area, les colonnes flexibles ne prennent pas en charge les sections ou les fonctionnalités de style proposées pour les modules qui les composent. Les colonnes flexibles ne sont pas uniques aux modèles de glisser-déposer. Il existe une balise HubL qui peut être utilisée dans les modèles HTML + HubL. Découvrez comment ajouter une colonne flexible à un modèle de glisser-déposer.