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í.
CMS-General

Crea y editar módulos

Última actualización: November 21, 2018

Requisitos

Marketing Hub
marketing-basic-pro-enterprise
Professional, Enterprise
Básico
HubSpot CMS

Puedes usar el editor de módulos en el Administrador de Diseño para crear módulos para agregar características personalizadas o avanzadas a tu blog, página o correo electrónico, mientras que sigues permitiendo que tus profesionales del marketing personalicen el contenido del módulo en el editor de contenido.

El editor de módulos tiene tres paneles de edición para HTML y HubL, CSS y JavaScript. Incluir los tres elementos te permite usar módulos de manera constante en varios portales que administras o en múltiples plantillas. Ejemplos de lo que puedes crear utilizando el editor de módulos:

  • Galerías de imágenes o controles deslizantes de imágenes personalizados
  • Una lista de eventos
  • Una lista de empleados con fotos y biografías
  • Una sección que permite al usuario alternar entre clases de CSS para controlar su presentación

Ten en cuenta: Crear módulos requiere conocimientos de HTML, CSS, HubL y el Administrador de Diseño de HubSpot. El usuario decide si incluir las hojas de estilo necesarias y archivos JavaScript correspondientes en cualquier página que utilice módulos creados personalizados. Se recomienda trabajar con un diseñador para crear módulos.

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 Archivo 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.
  • Dale al módulo un nombre de archivo, luego haz clic en Crear.

set-up-your-new-module

Agrega campos a tu módulo

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

module-add-field

  • Puedes editar el nombre de tu campo haciendo clic en el ícono de lápiz junto al nombre del campo, además de editar el nombre de la variable HubL.

Agrega contenido predeterminado de campos

En la sección Opciones de contenido , puedes agregar contenido predeterminado a tu campo. Este contenido predeterminado aparecerá cuando el módulo se use en plantillas y editores de contenido, y las opciones de contenido predeterminado se diferenciarán 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: Agrega texto de ayuda al campo para darles a los usuarios el contexto o la instrucción.

field-editor-options

Establecer condiciones de presentación de campos

Es recomendable mostrar un campo a un usuario solo si otro campo cumple ciertos criterios.

  • En la sección Condiciones de presentación , haz clic en el menú desplegable variable HubL dropdown 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.

Más información sobre las condiciones de presentación de campos en la documentación del diseñador.

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.

Obtén más información acerca de la repetición de campo y 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 al módulo, copia y pega el fragmento del campo en el panel de 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 dropdown, luego selecciona Copiar fragmento.
  • Haz clic en la ubicación en la que te gustaría agregar el campo en el panel de 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.

Obtén una vista preliminar de tu módulo

Puedes tener una vista preliminar de cómo aparecerá tu módulo y trabajar en un editor de contenido en cualquier momento haciendo clic en el botón Vista preliminaren la parte superior derecha del editor de módulos. 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. Haz clic en Publicar cambios en la parte superior derecha del editor de módulos.

publish-module

Haz que tu módulo esté disponible para plantillas

  • Cambia el interruptor Habilitar para plantillas a Encendidoen la parte superior del editor para que este módulo esté disponible para agregarlo a tus plantillas.

content-toggle

  • Cambia el interruptor a Apagado si quieres 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 a la ubicación en la que deseas colocarlo en la 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.

En tu cuenta de Marketing Hub Basic, Pro o Enterprise de HubSpot, navega hasta Marketing > Archivos y plantillas > Mercado.

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: 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. En la página de detalles del módulo, haz clic en Probar este módulo en la esquina superior derecha para probar la funcionalidad del módulo antes de agregarlo a tu Administrador de Diseño. Por ejemplo, puedes agregar tu propio contenido personalizado para ver si este módulo funcionará para el diseño de tu sitio.

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.

add-module-marketplace