Aunque la interfaz de uso del CMS de Hubspot es muy fácil de usar y tiene una rápida curva de aprendizaje, a nivel de técnico existen grandes y divertidos retos. En este artículo te explicaré a través de un tutorial vídeo y un ejercicio práctico cómo crear un módulo sencillo de galeria de miembros de tu empresa desde cero.
Además, al terminar de leer este blog, lograrás tener claridad sobre cómo hacer un buen uso de los módulos y conocerás todos los pasos a seguir antes de empezar a desarrollarlos dentro de este potente CMS.
Es importante mencionar antes de que sigas adelante que para poner en práctica el contenido de este blog tendrás que tener conocimientos básicos en CSS y por supuesto en el CMS de HubSpot.
Comencemos con los básicos:
¿Qué es un CMS?
Un Content Management System o CMS (por sus siglas en inglés) es un programa informático que permite crear un entorno de trabajo para la creación y administración de contenidos, principalmente en páginas web. Un CMS versátil, facilita el trabajo colaborativo entre los administradores, el equipo de TI, editores, el equipo de marketing, diseñadores y demás usuarios.
CMS una herramienta para los Desarrolladores Web
El CMS de HubSpot tiene un apartado para los desarrolladores web que ayuda a crear contenido personalizado.
HubSpot, dentro de su plataforma de academia, ofrece un curso de certificación titulado “HubSpot CMS for Developers” el cual explica lo básico para comenzar con el desarrollo web utilizando su propio CMS. Con dicho curso podrás, en poco tiempo, conocer cómo funciona y cómo implementar para tu Sitio Web.
Dicho esto es momento de iniciar con nuestra práctica, donde te guiaré paso a paso para desarrollar tu propio módulo de Galería de miembros de una empresa, de manera fácil y sencilla.
Alerta Spoiler: La creación de este módulo, va de acuerdo a los requerimientos de la certificación “Hubspot CMS for Developers”.
Tutorial Vídeo
¿Cómo iniciar con la Creación de tu módulo en el CMS de Hubspot?
Un módulo es un componente reutilizable que puede utilizarse en plantillas, en páginas con la función de arrastrar y soltar y también dentro de columnas flexibles. HubSpot recomienda tener claro qué es un módulo y cómo funciona ya que es un elemento clave para comprender el alcance de su CMS.
Si trabajas de manera colaborativa en la creación de una Sitio Web, la utilización de módulos facilita la creación de un contenido reutilizable, intuitivo y personalizable para que los demás miembros de tu equipo puedan sacar lo mejor provecho de la herramienta.
Para dar inicio, primero seleccionaremos la opción para crear un módulo personalizado:
- Dentro de la plataforma dirígete a “herramientas de diseño” : (Marketing > Archivos y plantillas > herramientas de diseño).
- Busca el apartado “Componentes” y selecciona “Módulo”.
- En la ventana que emerge es donde configuras tu módulo.
- Para este ejercicio, quieres usar el módulo en tus páginas por lo que debes seleccionar esa opción.
- En el siguiente apartado de alcance del módulo, selecciona “Módulo local”, aunque si buscas mejorar tu módulo cada vez más o cambiar el diseño constantemente para que se actualicen en las páginas donde se haya implementado entonces la segunda opción “Módulo global” será la mejor opción para ti. En este caso, no vas a actualizar en cada página cada que haces un cambio por lo que usarás la primera opción mencionada.
¿Cómo estructurar tu galería con HTML?
El primer paso es tener claridad absoluta de la estructura de tu módulo con nombres de clases lo más intuitivos posibles y fáciles de entender por cualquier usuario.
Una buena práctica es usar convenciones para el nombre de nuestras clases. (Mayormente se usa “snake case” en clases HTML).
Tu módulo tendrá la siguiente estructura:
“Objeto” corresponde a donde insertamos la imagen y el título de la imagen.
La primera estructura es la que colocarás dentro de module.html primero.
Ahora procede a colocar la estructura del objeto.
¿Cómo agregar campos editables para los editores?
Para que tus editores o los usuarios a cargo de colocar la información en la galería puedan editar sin la necesidad de manipular el código debes agregar los campos para insertar la información.
En este caso, los campos que los editores necesitan modificar son el “título”, “imagen”, “nombre” y “puesto”. Los apartados de texto son los que realizarás primero..
En la parte derecha de tu CMS, da clic en la opción “agregar un campo”, y selecciona la opción “texto”.
En la ventana emergente asigna un nombre a tu campo, su valor, y el nombre de etiqueta.
Para colocar este campo en tu estructura debes de copiar el fragmento. Selecciona la opción “Copiar”.
Ahora debes centrarte en tu “h2” con etiqueta “título”, haz clic derecho y pega.
El resultado deberá ser como el siguiente:
Replica este proceso con las etiquetas “nombre” y “puesto”, ya que son campos que requieren de un texto por parte de los editores.
Para que los editores puedan agregar y editar imágenes, necesitas agregar el campo de imagen. Para hacer esto posible haz clic en agregar campo y en el apartado de selectores, selecciona la opción de “imagen”.
Asigna un nombre, tal cual como lo hiciste con los campos de texto, y en esta ocasión selecciona una imagen predeterminada desde el almacenamiento interno de tu computadora. En este caso puede ser una imagen que haga referencia a un puesto de trabajo para que resulte intuitivo o como en la práctica de Hubspot puedes usar gatito.
Ahora copia el fragmento y pegar arriba de tu etiqueta “imagen”, copia la clase “imagen” y colócala dentro de la etiqueta “html img” que aparece ahora.
Si seleccionas “Vista preliminar”, el resultado será el siguiente.
En este momento solo tienes una imagen, un nombre y un puesto, por lo cual aún no llegas a tu objetivo. Cuando el editor necesita agregar una nueva imagen y seleccionar un puesto diferente, la interfaz deberá ofrecer esas opciones sin meterse con el código.
Para lograr esto debes crear un grupo que se repita con la opción de crear nuevos “gatitos”.
Esta es una representación visual de lo que buscas lograr mediante la repetición de tu objeto “gatito”.
Para lograr que tu gatito se repita basta con crear dos grupos, para ello haz clic en la opción “Grupo”.
Selecciona los campos que irán en tu grupo, los cuales son “imagen”, “nombre” y “puesto”.
Coloca la cantidad de objetos predeterminada que será el número de gatos que tendrá tu módulo por defecto.
La pantalla de tu CMS se verá de esta manera. Para mejorar la experiencia de uso de tus editores, cambia el acceso a los campos a través de un botón de edición.
Agrega un grupo y crea el botón de editar. De nueva cuenta da clic al botón de crear grupos y selecciona tu grupo anterior. El resultado será lo siguiente:
A la izquierda tu CMS y a la derecha para los usuarios que intenten editarlo. Observa como esto ahorra espacio para los editores en su barra de trabajo.
En este momento tu módulo aún no es funcional y no repetirá los gatitos debido a que aún no haces uso de este grupo en tu código. Para hacer esto copia el fragmento y pega hasta debajo de tu código. Así que añades el mismo código usado anteriormente, solo que esta vez con el bucle for o ciclo for que es una estructura de control en programación en la que se puede indicar el número mínimo de iteraciones que la instrucción realizará. En este caso se realizará cada que el usuario agregue un gatito nuevo.
