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 25, 2020

Requisitos

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

En el Administrador de diseño puedes crear módulos con código personalizado para agregar características personalizadas o avanzadas a tu blog, página o correo electrónico. El editor de módulos tiene tres paneles de edición para escribir HTML y HubL, CSS y JavaScript. 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 a tu cuenta desde HubSpot Marketplace.

Ten en cuenta: Crear módulos requiere conocimientos de HTML, CSS, HubL y el Administrador de Diseño de HubSpot. Se 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 que aparece, selecciona Módulo.

create-new-file-module

  • Elige si deseas usar este módulo en plantillas de página, plantillas de blog y/o plantillas de correo electrónico.

Ten en cuenta: Existen diferencias técnicas entre estos tipos de módulos que los hacen incompatibles. Por ejemplo, CSS y JavaScript se desactivarán si seleccionas Plantillas de correo para la compatibilidad de correos electrónicos.

  • Selecciona si deseas que el alcance del contenido del módulo sea 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. Descubre cómo trabajar con contenido inteligente en un módulo global.
  • Dale al módulo un nombre de archivo, luego haz clic en Crear.

set-up-your-new-module

Etiqueta tu módulo

La etiqueta del módulo es lo que se muestra en el administrador de diseño y en el editor de contenido al agregar el módulo a tu página o correo electrónico. Puedes buscar un módulo en el administrador de diseño y el editor de contenido por el nombre del módulo o por su etiqueta. Si quedan en blanco, el módulo mostrará el nombre del módulo en su lugar.

design-manager-label-module

Agrega campos a tu módulo

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

  • Convertir este campo en obligatorio: El usuario no podrá dejar este campo en blanco.
  • Evitar la edición en editores de contenido: El contenido del campo no pueden editarlo usuarios finales cuando el módulo esté seleccionado en el editor de contenido. El contenido del campo aún puede editarse 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 de ayuda de la página: agrega texto de ayuda al campo para darle 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 darle a los usuarios el contexto o la instrucción. 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 personalizar un campo de módulo para que aparezca solo si otro campo cumple determinados criterios con condiciones de presentación de campos.

  • 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 de image_title (un campo de texto) 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

Por último, puedes establecer opciones de repetición para tu campo. Los repetidores son campos y grupos que pueden crear múltiples objetos y mostrarlos utilizando un ciclo para.

  • 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 de activación a la derecha de Opciones de repetidor.

Más información sobre la repetición del campo y los ciclos en la documentación del diseñador.

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, escribir la sintaxis de tu módulo y estar satisfecho con la manera en que aparece y funciona el módulo en la vista preliminar, puedes proceder a publicar 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 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 lo siguiente:
    • Precio: Selecciona si el módulo es gratuito o pagado
    • Función: Selecciona los tipos de funciones que incluye el módulo (por ejemplo, calculadora, galería, mapa)
    • Funciona con: Selecciona los tipos de plantillas en los que se puede usar en el módulo
    • Proveedor: Selecciona a los proveedores que ofrecen el módulo
  • Cuando hayas decidido respecto a un módulo, coloca el cursor sobre él y haz clic en Ver detalles.
  • Haz clic en Obtener módulo gratis o Comprar módulo por $x 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.
/es/cos-general/create-and-edit-modules