Última actualización: junio 28, 2023
Disponible con cualquiera de las siguientes suscripciones, a no ser que se indique de otro modo:
Marketing Hub
Pro
,
Enterprise
|
Content Hub
Starter
,
Pro
,
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 Contenido > Administrador de diseño.
- En la parte superior del buscador, haz clic en el menú desplegable Archivo y selecciona Nuevo archivo.
- En el cuadro de diálogo, haz clic en el menú desplegable ¿Qué te gustaría construir hoy? y selecciona Módulo.
- Haz clic en Siguiente.
- Selecciona la casilla de comprobación junto a cada tipo de contenido donde se utilizará tu módulo: páginas, publicaciones de blog, listados de blogs, correos electrónicos o citas. Los módulos utilizados en plantillas de correo electrónico no pueden incluir CSS o JavaScript.
Nota: los módulos personalizados para su uso en correos electrónicos solo se pueden crear en cuentas con una suscripción de Marketing Hub Pro o Enterprise.
- 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.
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.
Agrega campos a tu módulo
Agrega campos al módulo para establecer el contenido o estilo del módulo y editarlo en los editores de contenido. Más información sobre los tipos de campos disponibles en nuestra documentación de desarrollador.
- En el inspector del módulo en la derecha, haz clic en el menú desplegable Agregar campo
desplegables en la sección Campos, luego selecciona un campo para agregar a tu módulo.
- Edita el nombre de tu campo haciendo clic en el icono del lápizjunto 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.
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.
- 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.
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
desplegables 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.
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
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.
- Selecciona los campos que deseas agrupar.
- Haz clic en Crear grupo.
Copiar y pegar fragmentos del campo
- Cuando estés listo para incorporar un campo al 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
desplegables , 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.
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.
Cuando un usuario edita el módulo en un editor de contenido, el texto de ayuda aparecerá arriba de los campos del módulo.
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.
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.
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.
- 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.
Agrega tu módulo a una plantilla
Después de publicar un módulo, puedes usarlo en todas tus páginas agregándolo a una plantilla.
Para agregar un módulo a una plantilla de arrastrar y soltar:
- 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: .
- Arrastra y suelta el módulo en la plantilla.
Para agregar un módulo a una plantilla codificada, puede copiar y pegar el fragmento del módulo en la plantilla:
- Para copiar el fragmento de mà ³ dulo del editor de mà ³ dulos, en la parte inferior de la barra lateral derecha, haz clic en Copiar fragmento.
- Para copiar el fragmento de módulo de la barra lateral izquierda del administrador de diseño:
- En la barra lateral izquierda, localiza el módulo personalizado.
- Haz clic con el botón derecho en el módulo, luego selecciona Copiar fragmento. Como alternativa, puedes seleccionar el módulo, luego haz clic en Acciones en la parte superior izquierda y selecciona Copiar fragmento.
- En la plantilla codificada, pega este fragmento donde sea necesario.
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 HubSpot, haz clic en el icono de Mercados situado en la barra de navegación superior, y luego selecciona Mercado de plantillas.
- 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.
