Productos compatibles
Se requiere uno de los siguientes productos o productos de ediciones superiores.
Marketing HubMarketing HubPro
Content HubContent HubPro
Última modificación: 28 de agosto de 2025
No se recomiendan las plantillas de arrastrar y soltar para las nuevas plantillas. Estas plantillas no pueden ser parte de un tema, por lo que no son compatibles con la funcionalidad del tema, como los campos y los módulos del tema. Las plantillas de arrastrar y soltar NOT son compatibles con CMS Hub Starter. Usa dnd_area en su lugar. Las plantillas de arrastrar y soltar no admiten varias de las características más nuevas del CMS (membresías, áreas de arrastrar y soltar, secciones reutilizables, GraphQL y muchas otras características). Carecen de extensibilidad y no proporcionan una experiencia tan buena para los creadores de contenido y desarrolladores como las plantillas codificadas. En su lugar, recomendamos usar las plantillas codificadas HTML + HubL con áreas de arrastrar y soltar, que ofrecen una mejor experiencia para desarrolladores y profesionales de marketing. Para un inicio rápido en el CMS, recomendamos consultar la biblioteca de temas de HubSpot, que se ha creado utilizando plantillas codificadas.
Las plantillas de arrastrar y soltar fueron diseñadas para que los usuarios menos técnicos puedan crear fácilmente un sitio web en el CMS de HubSpot. Las plantillas de arrastrar y soltar aprovechan un creador visual de plantillas, que genera HTML + HubL en segundo plano. Con el fin de hacer que el creador visual funcione, la salida en HTML es controlada por HubSpot y no tienes control directo sobre las partes estructurales de la misma. Además, se carga un archivo layout.css en la página para una cuadrícula de 12 columnas básicas basada en Bootstrap 2. Esto hace que todos los sitios creados con plantillas de arrastrar y soltar respondan por opción predeterminada, lo que hace que las filas de contenido se apilen verticalmente. Para lograr una respuesta más avanzada y personalizada, deberás agregar tus propios estilos de respuesta. Las plantillas de arrastrar y soltar se crean en el administrador de diseño y, al interactuar con ellas a través de la API o las herramientas de desarrollo local se representan en formato JSON. Debido a la estructura de las plantillas de arrastrar y soltar, la única forma recomendada para editarlas es a través de la interfaz del administrador de diseño. Si prefieres usar código, puedes usar el control de versiones o simplemente editar usando tus herramientas preferidas de forma local, las plantillas codificadas HTML + HubL ofrecen la mejor experiencia para los desarrolladores. La funcionalidad dnd_area de las plantillas HTML + HubL también proporciona una mejor experiencia para los creadores de contenido que la interfaz de arrastrar y soltar del administrador de diseño, ya que se mantiene en el editor de contenido visual.

​
Creador de plantillas de arrastrar y soltar

Para crear una plantilla de arrastrar y soltar, abre el administrador de diseño y, en el buscador, crea un nuevo archivo, elige una plantilla y el tipo de plantilla que estás creando. Las plantillas de arrastrar y soltar se componen de bloques de creación, estos bloques son módulos, grupos, grupos globales y columnas flexibles. Aprende cómo usar el creador de plantillas de arrastrar y soltar.

​
Módulos

Los módulos son componentes reutilizables que son partes editables de una página. Los módulos se componen de un fragmento de plantilla HTML + HubL, CSS, JS y campos. Los módulos pueden colocarse dentro de columnas flexibles y dnd_areas para ser gestionados por los editores de contenido, siendo la principal forma en que administran el contenido de su sitio web. Puedes crear módulos para manejar cualquier número de funciones, búsquedas, galerías de imágenes, menús, animaciones de marketing complejas, calculadoras, comparaciones de productos, etc. Las posibilidades dependen de ti y de lo que crees que podría ser una buena experiencia de uso para los creadores de contenido. Los campos son la manera en que el editor de contenido controla el resultado. Los módulos no son únicos para las plantillas de arrastrar y soltar, son un bloque de creación central muy importante para el CMS de HubSpot. En las plantillas de arrastrar y soltar, los valores predeterminados para los campos del módulo se pueden configurar en el inspector. Más información sobre los módulos
Interfaz de Administrador de diseño con módulos resaltados

​
Grupos

Los grupos son contenedores para otros grupos y módulos, pueden tener clases CSS y estructura HTML. Los grupos se manifiestan como estructuras HTML con clases de diseño para facilitar la colocación y el tamaño de los grupos. Los grupos también pueden tener un nombre interno. Con esto, puedes agrupar los módulos en el administrador de diseño, lo que facilita la identificación visual de las partes de una página. Un ejemplo de uso podría ser para barras laterales o banners.
Dado que los archivos HTML + HubL son la opción recomendada para los nuevos sitios, columnas, secciones y filas de las áreas de arrastrar y soltar reemplazan en gran medida las funciones de los grupos.Además, un desarrollador puede crear parciales y parciales globales, los cuales pueden contener código libre además de áreas de arrastrar y soltar.Las áreas de arrastrar y soltar, los parciales y los parciales globales no son compatibles con las plantillas de arrastrar y soltar.
Captura de pantalla del Administrador de diseño con el grupo de barras laterales seleccionado

​
Grupos globales

Los grupos globales son grupos que cuando se editan modifican todo el sitio web y no solo a la página en la que se encuentran. Los grupos globales pueden existir en múltiples plantillas y se utilizan con mayor frecuencia para encabezados y pies de página de sitios. Los grupos globales son similares a los parciales, pero se limitan a la estructura que aplican las plantillas de arrastrar y soltar. Se pueden insentar en archivos HTML + HubL si es necesario, pero, en la mayoría de los casos, es más recomendable utilizar un parcial global.
Interfaz de Administrador de diseño con grupos globales de encabezado y pie de página resaltados

​
Columnas flexibles

Las columnas flexibles son un tipo especial de grupo. Pueden contener un conjunto predeterminado de módulos, pero los editores de contenido pueden agregar, eliminar y mover módulos dentro de ellas. Las columnas flexibles permiten reordenar los módulos de una manera unidimensional, verticalmente hacia arriba y hacia abajo. A diferencia de las etiquetas dnd_area, **las columnas flexibles no admiten secciones ni las opciones de diseño disponibles para los módulos dentro de ellas..**Las columnas flexibles no son exclusivas para las plantillas de arrastrar y soltar, hay una etiqueta HubL que se puede usar en plantillas HTML + HubL. Aprende cómo agregar una columna flexible a una plantilla de arrastrar y soltar.
En general, se recomienda usar las áreas de arrastrar y soltar, ya que la mayoría de las veces son más útiles y proporcionan todas las capacidades que proporcionan las columnas flexibles.Todavía puede haber casos útiles para utilizar una columna flexible, como en una barra lateral. Las áreas de arrastrar y soltar son mucho más flexibles para las áreas de contenido principal.
Captura de pantalla del Administrador de diseño con el grupo de contenido principal seleccionado
El uso de columnas flexibles permite adaptarse a la naturaleza cambiante de los sitios web, que suelen evolucionar y mantenerse a lo largo del tiempo. Por ejemplo, una página de inicio de una empresa puede mostrar sus productos destacados y, con frecuencia, puede cambiar según las necesidades del negocio. Como los editores de contenido pueden agregar, eliminar y modificar elementos dentro de una columna flexible, el proceso se vuelve más ágil para los equipos de marketing y permite que los desarrolladores se concentren en lo que realmente disfrutan: crear experiencias innovadoras en lugar de hacer ajustes menores en las páginas. Del mismo modo, las páginas en un sitio pueden tener diferentes necesidades estructurales. Las columnas flexibles dan a los profesionales de marketing el control para crear esas páginas utilizando módulos personalizados.