Ir a contenido principal
Nota: Este contenido se tradujo a través de un software y es posible que no haya sido revisado. La versión en inglés se considera, por tanto, la versión oficial y es posible que haya sido actualizada. Para acceder a la versión en inglés, haz clic aquí.
Design Manager

Crear y editar módulos

Última actualización: agosto 4, 2021

Requisitos

Marketing Hub Professional, Enterprise
CMS Hub Starter, Professional, Enterprise
Marketing Hub Básico (versión anterior)

En la herramienta del administrador de diseño, puedes crear módulos con código personalizado para agregar características avanzadas a tu blog, páginas o correos electrónicos. Los módulos personalizados ofrecen una amplia variedad de funcionalidades para que el contenido se personalice completamente dentro de la página, el correo electrónico o el editor de blog. Puedes crear módulos personalizados desde cero o agregar módulos prediseñados desde HubSpot Marketplace.

Nota: crear módulos requiere conocimientos de HTML, CSS, HubL y el administrador de diseño de HubSpot. HubSpot recomienda trabajar con un diseñador para crear módulos codificados.


Crear un nuevo módulo

  • En tu cuenta de HubSpot, dirígete a Marketing > Archivos y plantillas > Herramientas de diseño.
  • En la parte superior del buscador, haz clic en el menú desplegable Archivo y selecciona Nuevo archivo.

new-file

  • En el cuadro de diálogo, haz clic en el menú desplegable ¿Qué te gustaría construir hoy? y selecciona Módulo.

build-a-module

  • Haz clic en Siguiente.
  • Selecciona si este módulo se utilizará en plantillas de página, plantillas de blog y/o plantillas de correo electrónico. Los módulos utilizados en plantillas de correo electrónico no pueden incluir CSS o JavaScript. 
  • Selecciona si este módulo será un módulo local o un módulo global. Si creas un módulo global, editar el contenido de este módulo actualizará cada ubicación donde se use el módulo.
  • Introduce un nombre de archivo para tu módulo y haz clic en Crear.

set-up-your-new-module

Etiqueta tu módulo

Por opción predeterminada, el editor de contenido hará referencia a un módulo usando el nombre que se le dio en el administrador de diseño. Si quieres que tu módulo use un nombre diferente en el editor de contenido, puedes hacerlo introduciendo una etiqueta. 

design-manager-label-module

Agrega campos a tu módulo

Agrega campos al módulo para establecer el contenido del módulo y editarlo en los editores de contenido. Más información sobre los tipos de campos disponibles.

  • En el inspector del módulo en la derecha, haz clic en el menú desplegable Agregar campo menú desplegable en la sección Campos, luego selecciona un campo para agregar a tu módulo.

module-add-field

  • Edita el nombre de tu campo haciendo clic en el icono del lápiz edit junto al nombre del campo. Para editar el nombre de la variable HubL, haz tus cambios en el campo de texto Nombre de la variable HubL

Agrega contenido predeterminado de campos

En la sección Opciones de contenido, puedes agregar contenido predeterminado que aparece cuando se usa el módulo en plantillas y editores de contenido. Las opciones de contenido predeterminado difieren según el tipo de campo.

En el siguiente ejemplo, el tipo de campo es un campo de imagen, por lo que las opciones de contenido predeterminado son seleccionar una imagen predeterminada y ocultar controles de tamaño.

field-content-options

Establece opciones de editor de campos

En la sección Opciones del editor, puedes activar las siguientes opciones para ver cómo los usuarios pueden editar el módulo en el editor de contenido:

  • Convertir este campo en obligatorio: el usuario no podrá dejar este campo en blanco dentro del editor de contenido.
  • Evitar la edición en editores de contenido: el contenido del campo no se puede editar dentro del editor de contenido, aún se puede editar en el nivel de plantilla. Esta opción no está disponible para módulos globales, que no se pueden editar en el nivel de página.
  • Texto emergente de ayuda: agrega texto de ayuda al campo para darles a los usuarios el contexto o la instrucción. Este texto de ayuda aparecerá en una descripción cuando un usuario pasa el cursor sobre el campo mientras edita. 

    custom-module-help-text
  • Texto de ayuda en línea: agrega texto de ayuda al campo para darles a los usuarios el contexto o instrucciones. Este texto de ayuda aparecerá debajo del campo cuando un usuario esté editando el módulo.

design-manager-module-field-options

Establecer condiciones de presentación de campos

Puedes usar condiciones de presentación de campos para configurar un campo de módulo para que solo aparezca si otro campo cumple con ciertos criterios.

  • En la sección Condiciones de presentación , haz clic en el menú desplegable variable HubL menú desplegable para seleccionar un campo de módulo, luego haz clic en el menú desplegable no está vacío para elegir la condición de ese campo.
  • Si seleccionas la condición es igual a, introduce un valor o expresión regular.

En el siguiente ejemplo, se configuran las condiciones de presentación para un campo de imagen. La condición es que el valor en el campo de texto llamado image_title debe ser igual a Fotografía de rostro para que el campo de imagen aparezca en el módulo.

field-display-conditions

Las condiciones de presentación se activarán automáticamente una vez que hayas establecido una condición. Para desactivar las condiciones de presentación, haz clic en el interruptor de activación a la derecha de Condiciones de presentación.

Establece opciones de repetidor de campos

Puedes establecer opciones de repetición para tu campo en la sección Opciones del repetidor. Los repetidores son campos y grupos que pueden crear múltiples objetos y mostrarlos utilizando un ciclo for.

  • En la sección Opciones del repetidor, selecciona un número mínimo y/o máximo de instancias obligatorias de este campo.
  • También puedes elegir establecer un recuento de objetos predeterminado, que será el número de instancias del campo que aparecerán de manera predeterminada en el módulo.

En el siguiente ejemplo, el campo de imagen se establece como un control deslizante de imágenes. Se configuran los límites de conteo del objeto por lo que un mínimo de 3 campos de imágenes aparecerán en el módulo, hasta un máximo de 5 campos de imágenes. Un usuario verá 4 campos de imágenes en el módulo de forma predeterminada, y puede elegir agregar un campo de imagen más o eliminar un campo de imagen existente.

field-repeater-options

Las opciones del repetidor se activarán automáticamente una vez que hayas modificado una de las opciones. Para desactivar las opciones del repetidor, haz clic en el interruptor que está a la derecha de Opciones de repetidor para activarlo.

Campos del módulo de grupo

Después de crear campos, puedes agruparlos para mantener los campos agrupar hasta 4 por relevancia. Los grupos de campos se pueden usar para crear lógica de campo personalizado. Más información sobre los grupos de campos del módulo

Para agrupar campos del módulo combinados:

  • Haz clic en Grupo en la barra lateral derecha del editor de módulos.

    design-manager-group-fields
  • Selecciona los campos que deseas agrupar.
  • Haz clic en Crear grupo.

Copiar y pegar fragmentos del campo

  • Cuando estés listo para incorporar uno de tus campos personalizados a tu módulo, copia y pega el fragmento del campo en el editor HTML + HubL del módulo.
    • Si estás en el inspector de campos, haz clic en Copiar fragmento a la derecha del nombre de la variable HubL.
    • Si estás en el inspector de módulos, coloca el cursor sobre el campo y haz clic en el menú desplegable Acciones menú desplegable, luego selecciona Copiar fragmento.
  • Haz clic en la ubicación que te gustaría agregar el campo en el editor HTML + HubL, luego pega el fragmento presionando Ctrl+V o Cmd+V.

copy-paste-field-snippet

Escribe la sintaxis de tu módulo

A medida que edites tu módulo, puedes escribir sintaxis adicional del módulo en los paneles de editor HTML + HubL, CSS y JS . Más información sobre el editor de códigos de módulos y la referencia de sintaxis del módulo en la documentación del diseñador de HubSpot.

Agrega texto de ayuda a tu módulo

En la sección Opciones del Editor, agrega texto de ayuda para darle a los usuarios el contexto al editar el módulo. El texto de ayuda no puede tener más de 300 caracteres. 

design-manager-help-text

Cuando un usuario edita el módulo en un editor de contenido, el texto de ayuda aparecerá arriba de los campos del módulo.

page-editor-module-help-text

Obtén una vista preliminar de tu módulo

Puedes obtener una vista preliminar de cómo aparecerá y funcionará tu módulo en un editor de contenido haciendo clic en el botón Vista preliminar en la parte superior derecha del editor del módulo. La vista preliminar de tu módulo se abrirá en una nueva pestaña. Esta vista preliminar se sincroniza con el editor y se actualizará automáticamente mientras trabajas.

preview-module

Publica tu módulo

Una vez que hayas terminado de agregar campos y escribir la sintaxis de tu módulo, puedes continuar publicando tu módulo. En la parte superior derecha, haz clic en Publicar cambios.

publish-module

Haz que tu módulo esté disponible para plantillas

  • Activa el interruptor Habilitar para plantillas en la parte superior derecha del editor para que este módulo esté disponible para agregar a tus plantillas.

content-toggle

  • Desactiva este interruptor para hacer cambios o probar la funcionalidad del módulo. Si esta función está desactivada, tu equipo verá una alerta de que este módulo no está disponible para las plantillas.

make-module-available

Agrega tu módulo a una plantilla

  • En el editor de diseño de plantillas, haz clic en la pestaña Agregar en la parte superior del inspector de diseño y luego busca tu módulo. Los módulos personalizados que has creado pueden identificarse por el ícono de módulo personalizado customModules.
  • Arrastra y suelta el módulo en tu plantilla.

add-custom-module

Agrega o compra un módulo del mercado

Además de crear tus propios módulos, puedes agregar o comprar módulos personalizados que otros usuarios o proveedores hayan creado en el mercado de HubSpot.

  • Desde tu cuenta de HubSpot, haz clic en el icono del mercado marketplace de la barra de navegación principal.
  • En la sección Filtrar productos a la izquierda, haz clic en el menú desplegable Todos los productos en Categoría y selecciona Módulos. Puedes filtrar los módulos disponibles según:
    • Precio: si el módulo es gratuito o pagado
    • Función: el tipo de función(es) que incluye el módulo (por ejemplo, calculadora, galería, mapa)
    • Trabaja con: el tipo de plantilla(s) en la que se puede usar el módulo
    • Proveedor: el proveedor(es) que ofrece el módulo
  • Coloca el cursor sobre tu módulo elegido y haz clic en Ver detalles.
  • Haz clic en Obtener módulo gratis o Comprar módulo por $ en la esquina superior derecha.
    • Si el módulo es gratuito, se agregará automáticamente a tu Administrador de Diseño.
    • Si el módulo es pagado, introduce tus detalles de pago. Una vez que se haya procesado el pago, el módulo se agregará a tu Administrador de Diseño.