de lectura

¿Cómo crear un módulo de Galería en el CMS de HubSpot?

Escrito por Daniel J. Puc May

 

¿Estás pensando en llevar tu sitio web al siguiente nivel? Contáctanos para darte toda la asesoría sobre como Hubspot ayuda a ser mas eficiente a tus equipos de TI, Diseño y Marketing.

 

¡Hablemos Hoy!

 

 

 

Definitivamente uno de los mejores productos que tiene Hubspot en el mercado, además de su CRM gratuito, es su CMS (Content Management System). Un potente gestor de contenidos web que no sólo permite organizar mejor el trabajo y hacerlo más eficiente si no que también ofrece  un sin fin de posibilidades en cuanto a diseño se refiere...


 

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.

 

índice:

  1. ¿Qué es un CMS?
  2. CMS una herramienta para los Desarrolladores Web
  3. Tutorial Vídeo
  4. ¿Cómo iniciar con la Creación de tu módulo en el CMS de Hubspot?
  5. ¿Cómo estructurar tu galería con HTML?
  6. ¿Cómo agregar campos editables para los editores?
  7. ¿Cómo dar estilo y apariencia a tu nueva Galería?

 

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:

  1. Dentro de la plataforma dirígete a “herramientas de diseño” : (Marketing > Archivos y plantillas > herramientas de diseño).
  2. Busca el apartado “Componentes” y selecciona “Módulo”.
  3. En la ventana que emerge es donde configuras tu módulo.
  4. Para este ejercicio, quieres usar el módulo en tus páginas por lo que debes seleccionar esa opción.
  5. 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.

 

como iniciar tu modulo en el CMS de hubspot 

 

¿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:


como estructurar tu modulo en el CMS de hubspot

“Objeto” corresponde a donde  insertamos la imagen y el título de la imagen.

como estructurar en html tu modulo del CMS de hubspot

 

La primera estructura es la que colocarás dentro de module.html primero.

 

CMS de hubspot

 

Ahora procede a colocar la estructura del objeto.

 

codigo en CMS de hubspot

 

 

¿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”. 



campos editables

 

En la ventana emergente  asigna un nombre a tu campo, su valor, y el nombre de etiqueta. 

 

configurar campos editables

 

Para colocar este campo en tu estructura debes de copiar el fragmento. Selecciona la opción “Copiar”.

 

implementar campos editables

 

Ahora debes centrarte en tu “h2”  con etiqueta “título”, haz clic derecho y pega.

El resultado deberá ser como el siguiente:

 

estilos de campos

 

Replica este proceso con las etiquetas “nombre” y “puesto”, ya que son campos que requieren de un texto por parte de los editores.

 

cinta de color de los snippets

 

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”.

 

campo 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.

 

editar campo de imagen

 

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.

 

campoo de imagen en codigo

Si seleccionas “Vista preliminar”, el resultado será el siguiente.

 

vista preliminar del cms de hubspot

 

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”.

 

estructura de la galería

Para lograr que tu gatito se repita basta con crear dos grupos, para ello haz clic en la opción “Grupo”.

 

estructura de la galería en codigo

 

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.

 

selecion de campos para el grupo

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.

 

ejemplo de los campos en el cms de hubspot

 

ejemplo del resultado

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.

estructura de los campos editables cms hubspot

 

resultados de los campos editables

 

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.

 

campos editables en el codigo

 

Basta con reemplazar las líneas con las nuevas generadas por el grupo y añadir etiquetas “for” y “endfor” fuera de tu objeto. El resultado será el siguiente en el código y al momento de visualizarlo:

implementacion del ciclo for

 

resultado del ciclo for

Ahora ya  tienes tus  gatitos pero repetidos y aún no se ve como tu galería.

 

¿Cómo dar estilo y apariencia a tu nueva Galería?

 

Para dar estilo a una galería harás  uso de la propiedad “display grid” del CSS.

Para crear un diseño de tu galería como el siguiente, basta con observar la estructura y recrear los estilos CSS para llegar a este resultado:

 

resultado final del modulo

composicion de estilos

 



.contenedor{

  max-width:1100px;

  margin:auto;

}

 

.titulo{

  font-family: Helvetica;

  font-weight: bold;

  margin:20px;

  text-align:left;

  

}



.contenedor-Imagenes{

 max-width:1100px;

 display: grid;

 grid-template-columns: repeat(2, 1fr);

 grid-auto-rows: 200px;

 padding: 20px;

 grid-gap: 10px;

 margin:20px;

}




.objeto{

    position: relative;

}


.imagen {

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.nombre {

    font-family:Helvetica;

    font-weight: bold;

    position: absolute;

    bottom: 10px;

    color: white; 

    width: 100%;

    margin: 0;

    padding: 10px;

}



.puesto {

    font-family:Helvetica;

    position: absolute;

    bottom: 0;

    color: white;

    width: 100%;

    margin: 0;

    padding: 10px;

}



.cinta-color{

 background-color: #929292;

 opacity: 0.6;

 position: absolute;

 width: 100%;

 bottom: 0;

 height: 50px;

}

 

La propiedad hover  da el efecto de sombra cuando el usuario pasa el cursor sobre la  imagen.

 

.objeto:hover .cinta-color{

 opacity: 0.8;

 -webkit-transition: opacity 0.4s;

}

 

Para el diseño responsivo (Que consiste en un diseño que se adapta a la mayoría de las pantallas de dispositivos celulares y tablets) usa las siguientes líneas.

 

Da la instrucción al navegador para que cuando la pantalla del usuario tenga una resolución mínima de 900 píxeles la galería sea de cuatro columnas, esto es para pantallas de computadoras. Cuando la resolución de la pantalla sea por debajo de los 900 pixeles, se mantendrá con los estilos del “contendor-imágenes” que es “grid-template-columns: repeat(2, 1fr);”  es decir mostrará la galería en dos columnas, solo para las pantallas de tablets y smartphones..



@media (min-width:900px) {

    .contenedor-Imagenes {

        grid-template-columns: repeat(4, 1fr);

    }

}

 

¡Felicidades! Has terminado. Ahora tienes tu primer módulo de galería dentro del CMS de Hubspot. Cuéntame ¿Qué te ha parecido? 

 

Te invito  a dejar tus comentarios  y resultados sobre esta práctica y sobre todo escríbenos que más te gustaría conocer,  practicar y desarrollar en el CMS  de HubSpot.

 

¿Te gustaría migrar tu sitio al potente CMS de Hubspot para eficientar el trabajo entre Marketing, Ventas y tu equipo de TI? Agenda con nosotros una Asesoría Gratuita para conocer las necesidades de tu empresa, de tu equipo y de tu Sitio Web.

 

¡Hablemos Hoy!

 

Tags: Desarrollo web, Hubspot

¿Cuales son los servicios de una agencia de Inbound Marketing?

En esta Guía descubrirás que una agencia de Inbound Marketing puede llegar a tener un marco de trabajo de más de 75 servicios de marketing para asegurar el éxito de tu negocio.

Guia-Servicios-Inbound