Empezar a usar módulos

​

Antes de comenzar

• Configurar un entorno de pruebas para desarrolladores del CMS de HubSpot. Puedes utilizar tu cuenta existente, pero el entorno de prueba te permitirá desarrollar sin afectar el contenido de tu cuenta principal.
• Instala Node.js, lo que habilita las herramientas de desarrollo local de HubSpot. Se admiten a partir de la versión 10 o superiores.

1. Testimonial.module: la carpeta que contiene los archivos que componen el módulo personalizado que crearás como parte del tutorial.
2. homepage.html: la plantilla que se editará para incluir el módulo personalizado.
3. images: la carpeta que contiene las imágenes de perfil que utilizarás en el módulo.

​

Configura tu entorno de desarrollo local

• En el terminal, ejecuta el siguiente comando para instalar la CLI globalmente. Para instalar la CLI solo en tu directorio actual, ejecuta npm install @hubspot/cli.

npm install -g @hubspot/cli

• En el directorio donde almacenarás tus archivos de tema, autentica tu cuenta de HubSpot para que puedas interactuar con ella a través de la CLI.

hs account auth

• Presiona Introducir para abrir la página de la clave de acceso personal en tu navegador.
• Selecciona la cuenta en la que deseas realizar el proceso y haz clic en Continuar con esta cuenta. Se te redirigirá a la página de la clave de acceso personal de la cuenta.
• Junto a Clave de acceso personal, haz clic en Mostrar para revelar tu clave. Luego, haz clic en Copiar para copiarlo en el portapapeles.
• Pega la clave copiada en el terminal y presiona Introducir.
• Ingresa un nombre único para la cuenta. Este nombre solo será visto y utilizado por ti cuando ejecutes comandos. Luego, presiona Introducir. Para conectar las herramientas de desarrollo local a tu cuenta:

​

Agrega la plantilla del CMS boilerplate a tu cuenta

• Ejecuta el siguiente comando para crear un nuevo tema llamado my-theme. Se creará entonces una carpeta de temas con el nombre my-theme en tu directorio de trabajo que contendrá los materiales de la plantilla.

hs create website-theme my-theme

• Sube los archivos a tu cuenta.

hs upload <src> <destination>

​

Crear un módulo en HubSpot

• Inicia sesión en tu cuenta de HubSpot, luego dirígete al administrador de diseño en Marketing > Archivos y plantillas > Administrador de diseño.
• En la barra lateral izquierda del administrador de diseño, abre la carpeta del tema que acabas de cargar.
• En la carpeta del tema, abre la carpeta de módulos.
• En la parte superior izquierda, haz clic en Archivo > Nuevo archivo para crear un nuevo módulo en esta carpeta.
• En el cuadro de diálogo, haz clic en el menú desplegable y luego selecciona Módulo y haz clic en Siguiente.
• Selecciona la casilla de verificación Páginas para que el módulo esté disponible para el sitio web y las landing pages.
• Nombra el módulo Testimonios y luego haz clic en Crear.

​

Agregar campos al módulo

• Un campo de texto para almacenar el nombre del cliente que da el testimonio.
• Un campo de imagen que almacenará la foto de perfil del cliente.
• Un campo de texto enriquecido que almacenará el testimonio del cliente.

​

Agregar el campo de texto para el nombre del cliente

• En la barra lateral derecha del editor de módulos, haz clic en el menú desplegable Agregar campo y luego selecciona Texto.
• En la barra lateral derecha, haz clic en el ícono del lápiz en la esquina superior derecha para nombrar el campo. Para este tutorial, escribe el Nombre del cliente. Verás que el nombre de la variable HubL cambia a customer_name.
• Establece el Texto predeterminado como Sally.

• En la barra lateral derecha, haz clic en el ícono breadcrumb para volver al menú principal del módulo.

​

Agregar el campo de imagen para la imagen de perfil del cliente

• Agrega otro campo utilizando el mismo método, esta vez seleccionando el tipo de campo Imagen.
• Etiqueta el campo de la imagen como Imagen de perfil y luego define el nombre de la variable de HubL como profile_pic.
• En Imagen predeterminada, selecciona la imagen de perfil proporcionada para Sally en la carpeta de images de los archivos completados del proyecto.
• Establece el Texto alternativo para la Imagen de perfil del cliente.

​

Agrega el campo de texto enriquecido para el testimonio de Sally

• Agrega otro campo utilizando el mismo método, esta vez seleccionando el tipo de campo de texto enriquecido.
• Etiqueta al campo de texto enriquecido como Testimonio.
• Haz clic en el cuadro Texto enriquecido predeterminado y luego escribe “Solo he tenido experiencias maravillosas con esta empresa.""

Hasta ahora, has agregado datos en varios campos del módulo. En este punto, sin embargo, el módulo no contiene ningún HTML para renderizar esos datos. En el editor de módulos, se refleja en el estado vacío de la sección module.html.

​

Agregar HubL para mostrar los datos de los campos

<!-- module.html -->
{{module.customer_name}}
<img src={{module.profile_pic.src}} alt="{{module.profile_pic.alt}}">
{{module.testimonial}}

• Con el HubL agregado a tu módulo, haz clic en Vista preliminar en la parte superior derecha para ver el aspecto del módulo hasta el momento.

• Luego, en la parte superior derecha, haz clic en Publicar cambios.

​

Ver y modificar el módulo localmente

• En el terminal, ejecuta el siguiente comando: hs fetch <hs_src> <destination>:
  • <hs_src> representa la ruta del módulo en HubSpot. Para obtener la ruta del archivo, puedes hacer clic con el botón derecho sobre el módulo en la barra lateral izquierda del administrador de diseño y luego seleccionar Copiar ruta.
  • <destination> representa la ruta del directorio local que contiene tu tema. Si se omite, el comando se dirigirá por opción predeterminada al directorio de trabajo actual.

hs fetch my-theme/modules/testimonial.module

​

Abre la carpeta del módulo en tu entorno local

​

Ver el archivo fields.json del módulo

//fields.json

[
  {
    "label": "Customer Name",
    "name": "customer_name",
    "id": "2a025cd5-7357-007f-ae2f-25ace762588e",
    "type": "text",
    "required": true,
    "locked": false,
    "validation_regex": "",
    "allow_new_line": false,
    "show_emoji_picker": false,
    "default": "Sally"
  },
  {
    "label": "Profile Picture",
    "name": "profile_pic",
    "id": "7877fb84-eb8a-d2c7-d939-77e6e9557d8f",
    "type": "image",
    "required": false,
    "locked": false,
    "responsive": true,
    "resizable": true,
    "default": {
      "src": "https://cdn2.hubspotqa.net/hubfs/101140939/profile-pic-sally.svg",
      "alt": "Sally Profile Picture",
      "width": 100,
      "height": 100,
      "max_width": 100,
      "max_height": 100
    }
  },
  {
    "label": "Testimonial",
    "name": "testimonial",
    "id": "c5524ece-1ab5-f92d-a5de-e2bf53199dfa",
    "type": "richtext",
    "required": false,
    "locked": false,
    "default": "<p>I’ve had nothing but wonderful experiences with this company.</p>"
  }
]

• name: el nombre del campo.
• label: la etiqueta del campo.
• default: el valor predeterminado del campo.

​

Ver el archivo module.html del módulo

<div class="testimonial">
  <h1 class="testimonial__header"> {{ module.customer_name }} </h1>
  <img class="testimonial__picture" src={{ module.profile_pic.src }} alt={{ module.profile_pic.alt }}>
  {{ module.testimonial }}
</div>

​

Ver el archivo module.css del módulo

.testimonial {
  text-align: center;
}

.testimonial__header {
  font-weight: bold;
}

.testimonial__picture {
  display: block;
  margin: auto;
}

​

Mover cambios locales a tu cuenta de HubSpot

• Dirígete a tu terminal y asegúrate de que estás en el directorio correcto.
• Ejecuta el comando “watch” para enviar los cambios a HubSpot al guardar: hs watch <src> <destination>.

hs watch my-theme my-theme

​

Muestra preliminarmente los cambios locales en HubSpot

• En tu cuenta de HubSpot, dirígete a Marketing > Archivos y plantillas > Administrador de diseño.
• En la barra lateral izquierda, navega hasta el tema que has creado, luego abre la carpeta de módulos y selecciona el módulo de Testimonios.
• Con el módulo abierto, ahora deberías ver tus cambios en los paneles module.html y module.css.
• En la parte superior derecha, haz clic en Vista preliminar. Se abrirá una nueva pestaña para mostrar la vista preliminar del módulo.

• Creaste un módulo en HubSpot.
• Bajaste ese módulo a tu entorno local.
• Realizaste cambios en el HubL + HTML y CSS utilizando tus herramientas de desarrollo locales.

​

Agregar el módulo a una plantilla

Para esta parte del tutorial, trabajarás principalmente con las carpetas de modules y templates dentro de los archivos de temas locales.

• En tu editor de código, abre la carpeta templates y luego abre el archivo home.html.
• En el archivo home.html, ve hasta la dnd_section final, que comienza alrededor de la línea 28. En esta sección agregarás tu nuevo módulo.
• Dentro de esta dnd_section y encima de los otros dnd_modules, copia y pega la siguiente etiqueta de módulo HubL:

{% dnd_module
 path= “../modules/Testimonial.module”,
 offset=0,
 width=4
%}
{% end_dnd_module %}

• El CMS de HubSpot utiliza un sistema de cuadrícula de 12 columnas, por lo que para espaciar este módulo de manera uniforme con los otros dos, deberás actualizar cada módulo en la dnd_section para tener una anchura de 4.
• Entonces, el primer dnd_module del grupo (testimonial) tendrá un desplazamiento de 0 para posicionarlo en primer lugar.
• El segundo dnd_module (linked_image) tendrá un desplazamiento de 4 para posicionarlo en segundo lugar.
• El segundo dnd_module (rich_text) tendrá un desplazamiento de 8 para posicionarlo en segundo lugar.

{% dnd_section
    background_color="#f8fafc",
    vertical_alignment="MIDDLE"
  %}

    {% dnd_module
      path= “../modules/Testimonial.module”,
      offset=0,
      width=4
    %}
    {% end_dnd_module %}

    {% dnd_module
      path="@hubspot/linked_image",
      img={
        "alt": "Stock placeholder image with grayscale geometrical mountain landscape",
        "loading": "lazy",
        "max_height": 451,
        "max_width": 605,
        "size_type": "auto_custom_max",
        "src": get_asset_url("../images/grayscale-mountain.png")
      },
      offset=4,
      width=4
    %}
    {% end_dnd_module %}
    {% dnd_module
      path="@hubspot/rich_text",
      html="<h2>Provide more details here.</h2><p>Use text and images to tell your company’s story. Explain what makes your product or service extraordinary.</p>"
      offset=8,
      width=4
    %}
    {% end_dnd_module %}
  {% end_dnd_section %}

​

Muestra preliminarmente tus cambios en HubSpot

• Si no has ejecutado el comando watch para hacer un seguimiento automático de tu trabajo guardado, ejecuta hs watch <src> <dest>. Asegúrate de que este comando se siga ejecutando, mientras completas los siguientes pasos.
• En tu cuenta de HubSpot, abre administrador de diseño (Marketing > Archivos y plantillas > Administrador de diseño.
• En la barra lateral izquierda del administrador de diseño, selecciona el archivo home.html.
• En la parte superior derecha, haz clic en Vista preliminar y luego selecciona Vista preliminar con opciones de visualización para abrir la vista preliminar de la plantilla en una nueva ventana.

• En la nueva pestaña, consulta la vista preliminar de la plantilla que debería contener tu módulo de testimonios recién agregado.

​

Personalizar el módulo en la plantilla localmente

• Vuelve a tu editor de código y luego abre el archivo home.html.
• Agrega los siguientes parámetros a la etiqueta del módulo de testimonios:

{% dnd_module
 path='../modules/Testimonial.module',
 customer_name = "Mary",
 profile_pic = {
  src: "{{
   get_asset_url('../images/profile-pic-mary.svg') }}",
   alt: "Mary Profile Picture"
   },
 testimonial = "Wow, what a product! I can't wait to recommend this to all my family and friends!",
 offset=0,
 width=4
%}
{% end_dnd_module %}

• customer_name: este parámetro pasa el nombre Mary al campo del nombre del cliente y sobrescribe el valor de Sally.
• profile_pic: este parámetro es un objeto que contiene dos propiedades:
  • La propiedad src utiliza la función HubL get_asset_url para obtener la URL de la nueva foto de perfil. Ten en cuenta que la ruta del archivo de la imagen es relativa a tu directorio de trabajo. Primero deberás agregar esta imagen a la carpeta images en tus archivos de tema locales. Puedes encontrar la imagen en la carpeta images de los archivos de proyecto completados.
  • La propiedad alt asigna el texto alternativo de la imagen.
• testimonial: este parámetro pasa un nuevo texto al campo de testimonio.

{% dnd_module
 path='../modules/Testimonial.module',
 customer_name = "Mary",
 profile_pic = {
  src: "{{
   get_asset_url('../images/profile-pic-mary.svg') }}",
   alt: "Mary Profile Picture"
   },
 offset=0,
 width=4
%}
 {% module_attribute "testimonial" %}
   Wow, what a product! I can't wait to recommend this to all my family and friends!
 {% end_module_attribute %}
{% end_dnd_module %}

​

Agregar dos módulos de testimonios más a la plantilla

• Ve al editor de código y luego abre el archivo home.html.
• Debajo del módulo de testimonios que agregaste anteriormente, agrega otra instancia del módulo copiando y pegando el código de ese módulo. En el nuevo módulo de testimonios, especifica los siguientes detalles siguiendo los mismos pasos anteriores:
  • El nombre del cliente es Ollie.
  • El testimonio de Ollie dice: I can't believe that I ever conducted business without the use of this product!
  • Para la imagen de Ollie, agrega la ruta relativa del archivo dentro de la carpeta images. Puedes obtener la imagen de los archivos de proyecto terminados. Entonces dale a la imagen de Ollie el atributo alt de Ollie Profile Picture.
  • Para mantener el espaciado, fija offset en 4 y width en 4.
• Debajo del segundo módulo de testimonios, agrega un tercero con los siguientes datos:
  • El nombre del cliente es Erin.
  • El testimonio de Erin dice: My business has nearly tripled since I began to use this product! Don't wait, start now!
  • Para la imagen de Erin, agrega la ruta relativa del archivo dentro de la carpeta images. Luego dale a la imagen de Erin el atributo alt de Erin Profile Picture.
  • Para mantener el espaciado, fija offset en 8 y width en 4.
• Guarda los cambios.

​

Modificar el nombre del tema

// example theme.json

{
  "name": "my_first_theme",
  "label": "My first theme"
}

​

Próximos pasos

• Configurar un módulo
• Usar módulos en plantillas
• Módulos predeterminados

​

Otros tutoriales

• Primeros pasos para usar temas
• Comenzar a usar las funciones sin servidor
• Creación de un proceso de desarrollo eficiente
• Empezar con la accesibilidad
• Cómo utilizar los frameworks de JavaScript en CMS Hub
• Cómo usar componentes web en módulos personalizados
• Cómo crear un módulo basado en componentes web de bloques de código