Plantillas de arrastrar y soltar
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 de tema y los módulos de tema. No se admiten plantillas de arrastrar y soltar en 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 de creador de contenido y desarrollador como las plantillas codificadas. En su lugar, recomendamos plantillas HTML + HubL codificadas 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 el Boilerplate de temas de HubSpot, que se crea utilizando plantillas codificadas.
Marketing Hub
- Professional or Enterprise
Content Hub
- Professional or Enterprise
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 de plantillas visuales, que genera HTML + HubL de manera discreta.
Con el fin de hacer que el creador visual funcione, la salida 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 que permite una cuadrícula básica de 12 columnas 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 una capacidad de respuesta más complicada y personalizada, querrás agregar tus propios estilos de respuesta.
Las plantillas de arrastrar y soltar se crean en el Administrador de diseño. Cuando interactúan con ellas a través de la API o las herramientas de desarrollo local se representan como JSON. Debido a la naturaleza de las plantillas de arrastrar y soltar, la única forma recomendada de editarlas es a través de la interfaz del Administrador de diseño. Si prefieres codificar, usar el control de versiones o simplemente quieres poder editar usando tus herramientas preferidas localmente, las plantillas codificadas HTML + HubL ofrecen la mejor experiencia para los desarrolladores. La funcionalidad dnd_area para 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 los mantiene en el editor de contenido visual.
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 construcción, estos bloques son módulos, grupos, grupos globales y columnas flexibles.
Descubre cómo usar el creador de plantillas de arrastrar y soltar.
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 ser colocados dentro de columnas flexibles y dnd_areas por los editores de contenido, y son la forma principal en que los editores de contenido administran el contenido de su sitio web. Puedes crear módulos para manejar cualquier número de funciones, búsqueda, galerías de imágenes, menús, animaciones de marketing complejas, calculadoras, comparaciones de productos, etc. Las posibilidades dependen de tu imaginación y lo que crees que proporciona una buena experiencia para los creadores de contenido. Los campos son cómo el editor de contenido controla su salida. Los módulos no son únicos para arrastrar y soltar plantillas, son un bloque de construcció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 módulos.
Los grupos son envolturas para otros grupos y módulos, pueden tener clases CSS y HTML envolvente. Los grupos se manifiestan como HTML envolvente 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 solo 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 esto podría ser para barras laterales o banners.
Dado que los archivos HTML + HubL son la ruta recomendada para nuevos sitios, columnas, secciones y filas de áreas de arrastrar y soltar, reemplazan en gran medida los propósitos de los grupos.
Además, un desarrollador puede crear parciales y parciales globales, los cuales pueden contener código de forma libre en adición a las á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.
Los grupos globales son grupos que cuando se editan afectan a 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 incrustar en archivos HTML + HubL si es necesario, pero la mayoría de las veces tiene más sentido usar un parcial global en su lugar.
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 o las capacidades de estilo que se ofrecen a los módulos dentro de ellas. Las columnas flexibles no son exclusivas para arrastrar y soltar plantillas, hay una etiqueta HubL que se puede usar en plantillas HTML + HubL. Descubre cómo agregar una columna flexible a una plantilla de arrastrar y soltar.
En general, se recomienda usar á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 momentos útiles para usar una columna flexible, para algo así como una barra lateral. Para las áreas de contenido principal, las áreas de arrastrar y soltar son mucho más flexibles.
¿Por qué usar columnas flexibles? Los sitios web no suelen ser rígidos. Se construyen y mantienen durante largos períodos de tiempo. Una página de inicio, por ejemplo, para una empresa, puede mostrar productos destacados y, con frecuencia, puede cambiar a medida que las necesidades de marketing de la empresa cambian con el tiempo. Dado que el contenido dentro de una columna flexible puede ser agregado/eliminado y modificado por los editores de contenido, la experiencia es menos dolorosa para los profesionales de marketing y permite a los desarrolladores centrarse en lo que disfrutan: crear cosas geniales en lugar de hacer ajustes menores en la página.
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.
Hay un puñado de maneras de agregar código personalizado a tus plantillas de arrastrar y soltar. El método principal es a través de módulos personalizados. Sin embargo, a veces es posible que debas agregar código que envuelva módulos o grupos. Para ello, haz clic en el módulo o grupo para verlo en el inspector y encontrar el campo HTML envolvente. Agrega tu HTML allí.
A veces es posible que debas agregar código al encabezado de tu HTML o código justo encima del </body>. Con tu plantilla abierta, asegúrate de no tener nada seleccionado. El inspector mostrará campos para la plantilla en sí. Aquí puedes enlazar hojas de estilo y archivos javascript al mismo tiempo que agregas HTML adicional en el encabezado o justo antes de la etiqueta </body>.
Para esto usarás el inspector. El inspector tiene campos en el nivel de plantilla para hojas de estilo, javascript, <head> marcado, etc.
Gracias por tus comentarios, son muy importantes para nosotros.