Modèles de glisser-déposer
Les modèles de glisser-déposer ne sont pas recommandés pour les nouveaux modèles. Ces modèles ne peuvent pas faire partie d'un thème et ne prennent donc pas en charge les fonctionnalités de thème telles que les champs de thème et les modules de thème. Les modèles de glisser-déposer ne sont PAS pris en charge dans CMS Hub Starter. Utilisez plutôt dnd_area. Les modèles de glisser-déposer ne prennent pas en charge plusieurs des nouvelles fonctionnalités du CMS (adhésions, zones de glisser-déposer, sections réutilisables, GraphQL et de nombreuses autres fonctionnalités). Ils manquent d'extensibilité et ne fournissent pas une expérience de création et de développement de contenu aussi bonne que les modèles codés. Nous recommandons plutôt des modèles HTML + HubL codés avec des zones de glisser-déposer, qui offrent une meilleure expérience pour les développeurs et les spécialistes du marketing. Pour un démarrage rapide sur le CMS, nous vous recommandons de consulter le boilerplate du thème HubSpot, qui a été créé à l'aide de modèles codés.
Marketing Hub
- Professional or Enterprise
Content Hub
- Professional or Enterprise
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.
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.
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 zones 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.
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.
Étant donné que les fichiers HTML + HubL sont le chemin recommandé pour les nouveaux sites, les colonnes, sections et lignes de zones de glisser-déposer remplacent largement les objectifs des groupes.
En outre, un développeur peut créer des partials et des partials globaux, qui peuvent contenir du code de forme libre en plus des zones de glisser-déposer.
Les zones de glisser-déposer, les partials et les partials globaux ne sont pas pris en charge dans les modèles de glisser-déposer.
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 partials, 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.
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.
Il est généralement recommandé d'utiliser des zones de glisser-déposer, car elles sont la plupart du temps plus utiles et offrent toutes les fonctionnalités des colonnes flexibles.
L'utilisation d'une colonne flexible peut cependant rester utile, comme pour une barre latérale. Pour les principales zones de contenu, les zones de glisser-déposer sont beaucoup plus flexibles.
Pourquoi utiliser des colonnes flexibles ? Les sites web ne sont généralement pas rigides. Ils sont créés et gérés pendant de longues périodes. Une page d'accueil, par exemple pour une entreprise, peut présenter des produits en vedette et changer fréquemment à mesure que les besoins marketing de l'entreprise évoluent. Étant donné que du contenu dans une colonne flexible peut être ajouté/supprimé et modifié par les éditeurs de contenu, l'expérience est moins difficile pour les spécialistes du marketing et permet aux développeurs de se concentrer sur ce qu'ils aiment, en créant des éléments attrayants plutôt que de procéder à des ajustements de page mineurs.
De même, les pages d'un site peuvent avoir des besoins structurels différents. Les colonnes flexibles offrent du contrôle aux spécialistes du marketing pour créer ces pages à l'aide de modules personnalisés.
Il existe plusieurs façons d'ajouter du code personnalisé à vos modèles de glisser-déposer. La principale méthode consiste à utiliser des modules personnalisés. Cependant, vous pourrez parfois ajouter du code qui encadre les modules ou les groupes. Pour ce faire, cliquez sur le module ou le groupe pour le visualiser dans l'inspecteur et trouver le champ HTML d'encadrement. Ajoutez votre HTML ici.
Parfois, vous devrez peut-être ajouter du code à l'en-tête de votre HTML ou juste au-dessus de </body>. Lorsque votre modèle est ouvert, assurez-vous que rien n'est sélectionné. L'inspecteur affichera des champs pour le modèle lui-même. Ici, vous pouvez lier des feuilles de style et des fichiers JavaScript tout en ajoutant du HTML supplémentaire dans l'en-tête ou juste avant la balise </body>.
Pour cela, vous utiliserez l'inspecteur. L'inspecteur présente des champs au niveau du modèle pour les feuilles de style, le JavaScript, le balisage <head>, etc.
Merci d'avoir partagé votre avis.