Resumen del sistema de módulos

Last updated:

Entender los módulos es clave para entender el CMS de HubSpot y su potencia. Los módulos son componentes reutilizables que se pueden usar en plantillas o agregarse a páginas por medio de áreas de arrastrar y soltar y columnas flexibles. Además de utilizar los módulos que HubSpot proporciona, los desarrolladores pueden crear sus propios módulos para todo, desde testimonios hasta galerías de fotos. Los módulos se crean con las herramientas de desarrollo locales o con el Administrador de diseño.

Un módulo consta de dos partes:

  1. Una interfaz de usuario creada a través de una lista de campos que los usuarios verán al editar una instancia del módulo.
  2. Un fragmento de plantilla HTML+HubL con CSS y JS asociados que define cómo se generará el HTML

Un ejemplo

Para entender mejor lo que es un módulo, veamos un simple módulo de "Miembro del equipo". El módulo consiste en una foto, el nombre del miembro del equipo, su título y una breve biografía, y cuando forma parte de una página web del CMS:

Instancia del módulo de miembros del equipo

La interfaz de usuario para la edición

El desarrollador construye la interfaz de usuario (UI) de los módulos mediante campos. A continuación, el desarrollador elige qué campos utilizar en función del tipo de módulo que se está construyendo, los datos que se necesitan y la experiencia de edición. En este caso, el módulo incluye:

  1. un campo de imagen, para la foto de un miembro del equipo
  2. dos campos de texto, para el nombre y el cargo del miembro del equipo
  3. y un campo de texto enriquecido, para una breve biografía.

Cuando un creador de contenido edita un módulo, la interfaz de usuario se construye basándose en los campos que el desarrollador ha agregado al módulo y en cómo está configurado cada campo.

Editor del módulo de miembros del equipo

Módulo frente a instancia de módulo

Hay dos términos que se utilizan con frecuencia en relación con los módulos. Es importante entender la diferencia entre ellos.

  • Módulo: bloques de construcción reutilizables que se pueden agregar a las plantillas y páginas.
  • Instancia de módulo: los módulos individuales renderizados en la página. Pueden tener valores de campo separados y, como resultado, tener un aspecto diferente de otras instancias de módulos que son para el mismo módulo.

Fields.json

Los campos de un módulo se definen en JSON como una matriz de objetos. Cada campo tiene un nombre, un tipo y un valor predeterminado. También hay otras propiedades disponibles en función del tipo de campo que controla la experiencia de edición.

// fields.json [ { "name": "team_member_photo", "label": "Team Member Photo", "required": true, "responsive": true, "resizable": true, "type": "image", "default": { "src": "", "alt": "" } }, { "name": "team_member_name", "label": "Team member name", "required": true, "type": "text", "default": "Joshua Beck" }, { "name": "team_member_position", "label": "Team member position", "required": true, "type": "text", "default": "CEO, Co-Founder" }, { "name": "team_member_bio", "label": "Team member bio", "required": true, "type": "richtext", "default": "<p>Joshua has over 20 years of experience in the tech industry. He helped start this company in 2015 with the mission of helping people grow. In his spare time he loves hanging out with his kids, going to the beach, and cooking.</p>" } ]

Para obtener más información sobre todos los campos disponibles, consulta Campos de Módulos y Temas.

Uso de los datos de los campos del módulo para la representación de HTML

Los valores de cada campo están disponibles en el fragmento HTML+HubL de un módulo a través de una variable module. Se puede acceder a los datos de cada campo a través de las propiedades de la variable del módulo. Utilizando el módulo de miembros del equipo como ejemplo, se puede acceder al nombre del miembro del equipo mediante {{ module.team_member_name }}.

<section class="team-member"> <img class="team-member__image" src="{{ module.team_member_image.src }}" alt="{{ module.team_member_image.alt }}"> <h3 class="team-member__name">{{ module.team_member_name }}</h3> <p class="team-member__position">{{ module.team_member_position }}</p> <div class="team-member__bio">{{ module.team_member_bio }}</div> </section>

Uso de módulos en plantillas

Los módulos se agregan a las plantillas utilizando la etiqueta module, module_block o dnd_module y especificando la ruta del módulo como parámetro. Los valores predeterminados de los campos de un módulo también pueden anularse a nivel de plantilla agregando parámetros a la etiqueta del módulo que corresponde al nombre del campo, como se muestra en la segunda parte del ejemplo siguiente.

{% module "unique_identifier" path="/modules/team-member.module" %} {# override default values in a module instance #} {% module "unique_identifier" path="/modules/team-member.module", team_member_name="Brian Halligan", team_member_position="CEO" %}

Los módulos no pueden agregarse unos dentro de otros. La mayoría de las veces que se quiere hacer esto, suele ser por razones de diseño. Las secciones en las áreas de arrastrar y soltar, son a menudo el mejor curso de acción.

Los módulos son una gran herramienta en la caja de herramientas de la accesibilidad

Los módulos se utilizan en todo un sitio web, a veces en varias páginas, incluso varias veces en una página. Por ello, construir el HTML, el CSS y el JS de tu módulo teniendo en cuenta la accesibilidad puede tener un efecto profundo en la facilidad de uso de tu sitio para las personas con y sin discapacidades o impedimentos.

Los módulos pueden facilitar la localización

En un sentido similar al de la accesibilidad, la construcción de módulos de manera que todo el contenido del módulo se base en campos, hace posible la localización posterior. Por ejemplo, podrías tener un módulo como "Artículos destacados". En lugar de codificar el texto "Artículos destacados", utiliza un campo de texto o de texto enriquecido. A continuación, se puede cambiar el texto para otros idiomas. Para saber más sobre la localización en el CMS, consulta el apartado varios idiomas.

Primeros pasos

Para empezar, consulta nuestro tutorial de Primeros pasos con módulos.

Ir más allá

¿Te resultó útil este artículo?
Con este formulario puedes enviar tu opinión sobre nuestros documentos para desarrolladores. Si tienes comentarios sobre el producto de HubSpot, puedes enviarlos al Foro de ideas.