Requisitos de los módulos del mercado de plantillas de HubSpot

Más información sobre los requisitos para enviar un módulo al Mercado de plantillas. Estos requisitos se aplican tanto a los módulos de un tema como a los módulos independientes. 

Los módulos no deben contener HubDB, llamadas a funciones sin servidor o el campo de objeto del CRM.

Los siguientes tipos de módulos no deben construirse como módulos independientes

• HTML
• Módulos de ancho completo
• Formularios y formularios de varios pasos
• Módulos espaciadores o módulos que crean una estructura de página que no es de interfaz de usuario
• Módulos que duplican la funcionalidad del módulo predeterminado
• Módulos específicos de comercio

Más información sobre los requisitos para las etiquetas de los módulos y el texto de ayuda, los campos y el contenido predeterminado.

• Los módulos deben tener etiquetas descriptivas que transmitan el propósito del módulo. La etiqueta Banner Hero con desplazamiento Parallax es descriptiva, mientras que las etiquetas Banner Hero y Galería no lo son. 
  
• Las etiquetas del módulo no deben contener números, como Banner Hero 01.
  
• Las etiquetas de los módulos no deben contener abreviaturas, como Col en lugar de Columna.
• Los módulos deben contener texto de ayuda incorporado cuando corresponda para transmitir cómo usar el módulo.
• El módulo no debe tener el mismo nombre que un módulo predeterminado.

• El campo predeterminado no puede incluir texto de Lorem ipsum. 
• El contenido predeterminado de los campos debe representar el propósito del campo:
  • Al incluir campos de menú, los módulos deben usar Seleccionar un menú como la opción de contenido predeterminada.
  • Al incluir campos de formulario, los módulos deben usar Seleccionar un formulario como la opción de contenido predeterminada.
  • Al incluir campos de selección de blog, los módulos deben usar Seleccionar un blog como la opción de contenido predeterminada.
• Si agregar contenido predeterminado a un módulo no tiene sentido, usa un marcador de posición de módulo en su lugar para ayudar al creador de contenido a visualizar el espacio que llenará con contenido.

Los módulos deben incluir un ícono personalizado asignado al módulo (que reemplaza el ícono predeterminado). No utilices logotipos de empresas como íconos, como los logotipos de Apple o Amazon. Más información sobre los iconos de módulo.

• Para módulos en un tema:
  • Por ejemplo, los módulos deben contener texto de ayuda incorporado y contenido predeterminado específico para ciertos campos.
  • Una parte de los campos de color y logotipo del tema debe heredarse de la configuración de marca de la cuenta:
    • Como mínimo, tres campos de color deben heredar colores de la configuración de marca de la cuenta. Los campos de color adicionales pueden tener otros colores de forma predeterminada, incluidos el blanco y el negro.
    • Al menos un campo de logotipo debe heredar de la configuración de marca de la cuenta. Si se utiliza un campo de imagen para representar un logotipo, el campo de imagen no tiene que heredar de la configuración de la marca. 
• Tanto para los módulos en un tema como para los módulos independientes:
  • Los nombres de los campos de módulo deben describir el propósito del campo. Por ejemplo, si un campo de texto está destinado a incluir el cargo laboral de una persona, Cargo sería una descripción adecuada, mientras que Título no lo sería.
  • Todos los módulos predeterminados de HubSpot deben tener un diseño y mostrarse correctamente en todas las plantillas enviadas.

Para garantizar la funcionalidad compatible entre temas y módulos independientes, los módulos deben heredar los campos de color y fuente definiendo default_value_path o property_value_paths, o ambos en su archivo fields.json y agregar una referencia a los campos de tema en el archivo module.html. Más información sobre estos requisitos.

Cualquier archivo necesario para su módulo de tema, como CSS o JavaScript, debe estar contenido en la carpeta del tema e incluido en el directorio del tema. Puedes usar la función Archivo vinculado en el administrador de diseño. Alternativamente, incluye los archivos que usan las funciones require_js() o require_css() con una ruta relativa al archivo.

Para bibliotecas comunes, como slick.js, puedes incluirlas usando las funciones require_js() o require_css() con una URL absoluta a la CDN donde está alojada. 

Para módulos independientes, todos los archivos CSS y Javascript deben estar contenidos en module.css o module.js. Alternativamente, incluye los archivos que usan las funciones require_js() o require_css() con una URL absoluta a la CDN donde está alojado. No es posible utilizar la función Archivos vinculados en el Administrador de diseño, ya que solo está disponible para los módulos de temas. 

Dado que module.js se incluye en el Dom antes de cualquier archivo require_js o require_css, Javascript contenido en la sección module.js debe diferirse utilizando la siguiente anotación:

Todos los scripts y archivos deben representarse en el encabezado del HTML del módulo. 

Las siguientes restricciones se aplican solo a los módulos independientes:

• Se recomienda usar vanilla JS siempre que sea posible. Agregar una biblioteca de jQuery a un sitio que no está utilizando jQuery puede causar conflictos y ralentizar la página del sitio web.
• Si usas una biblioteca jQuery, usa la función require_js() para incluir la biblioteca en el evento de que jQuery esté deshabilitado con la casilla de verificación (Boolean) en la configuración del portal para evitar conflictos de múltiples bibliotecas jQuery. 

• Todos los módulos independientes deben tener al menos una categoría. Los módulos enviados como parte de un tema no están obligados a tener categorías, pero es una buena práctica incluir al menos una. Más información sobre cómo agregar categorías a los módulos. 

• Cualquier selector de nombre de clase debe ir precedido del nombre del módulo, reemplazando los espacios con guiones. Por ejemplo, a continuación se muestra el archivo module.html para un botón llamado ejemplo-botón, con cada nombre de clase y selector CSS reflejando su nombre.

• Estilos:
  • Los módulos deben tener un grupo de estilo no vacío.
  • No se recomienda la codificación de estilos en línea dentro de los módulos. En cambio, usa estilos inline dinámicos al habilitar campos para controlar el estilo.
• JavaScript:
  
  • JavaScript debe poder representar múltiples instancias de un módulo. Javascript en el panel de JS solo se cargará una vez por página, independientemente del número de eventos del módulo.
  • Javascript debe hacer referencia a los elementos DOM según los nombres de clase específicos del módulo para garantizar que los elementos que están fuera de este no sean afectados de manera accidental.

Deben cumplirse los siguientes requisitos de organización y agrupación de campos.

Pestaña Contenido

• Cuando hay al menos un control dentro de un grupo de campos, todos los controles deben agruparse en categorías etiquetadas según su función.
• Los campos de módulo agregados a la pestaña Contenido deben proporcionar formas de personalizar el contenido de un módulo. Por ejemplo, controles de imagen, ícono, texto alternativo y controles de enlaces.

Pestaña Estilos

• Valores preestablecidos
• Texto
• Fondo
• Border
• Colocar cursor
• Esquina
• Espaciado
• Alignment
• Grupos de estilos personalizados que no se ajustan a lo anterior
• Avanzado

Los siguientes tipos de campos deben estar incluidos en la pestaña Estilos si están presentes:

• Alineación
• Imagen de fondo
• Borde
• Color
• Fuente
• Gradiente
• Espaciado 
• Alineación del texto

• Las opciones de animación siempre deben colocarse cerca de la parte inferior de la lista de grupos de campos.
• Las opciones que permiten a los creadores de contenido agregar fragmentos de código o CSS deben agruparse al final de la lista de grupos de campos bajo un campo con la etiqueta Avanzado. 
• Los controles deben estar estandarizados en todos los módulos. Por ejemplo, todos los elementos que pueden tener un control de radio de borde deben ofrecer ese control. Evita ofrecer controles en algunos módulos que estén ausentes en otros.

• Los campos de módulo agregados a la pestaña Estilo deben proporcionar formas de diseñar el módulo. Por ejemplo:
  • Las opciones de estilo, como color, estilo de texto, alineación, espaciado, borde y radio de esquina.
  • Animaciones, como efectos de colocar el cursor y elementos deslizantes.
  • Valores preestablecidos, como temas oscuros y claros que están destinados a cambiar muchos estilos al mismo tiempo.

Ejemplos de organización de campo

Valores preestablecidos

Los valores preestablecidos se pueden usar cuando se quiere dar a los creadores de contenido un conjunto limitado de opciones, a menudo vinculadas a la configuración del tema. Por ejemplo, el módulo Ícono incluido en el tema Growth contiene valores predeterminados para colores Oscuros y Claros, lo que permite que haya coherencia cuando se usa en todo el sitio web. 

Agrupación multinivel

Al decidir si mantener los campos de estilo en el nivel superior o anidarlos, considera el siguiente ejemplo.

Agrupar campos individuales

El siguiente módulo de botón contiene agrupaciones para Valores preestablecidos, Texto, Fondo y más. Aunque el grupo de campos Esquina contiene solo el control de radio de esquina, se agrupa para crear una experiencia uniforme en la creación de contenido.

La asignación de alias te permite crear asignaciones de campos en un módulo para que puedas mover, cambiar el nombre o reemplazar sus campos sin afectar las páginas que usan el módulo. 

Por ejemplo, se está utilizando un módulo en una página en directo. Deseas mover algunos campos a la pestaña Estilos, como el color o la fuente, pero un creador de contenido ya ha seleccionado valores para esos campos en el editor. Si movieras esos campos sin configurar el mapeo de alias, HubSpot no podría reubicar esos campos y volverían a sus valores predeterminados, lo que desharía el estilo en la página en vivo.

En cambio, puedes agregar una propiedad aliases_mapping a un campo para asignarlo a otro. Luego, cuando no se ha establecido un valor para el campo original, HubSpot comprobará si existe un valor en el campo asignado. Si tampoco existe ningún valor en el campo asignado, usará el valor predeterminado. Esta propiedad se puede usar para asignar valores de campo entre diferentes versiones de un módulo solo cuando el tipo de datos almacenados del campo antiguo es el mismo que el tipo de datos almacenados del campo nuevo.

Para ver un tutorial visual de esta función, echa un vistazo al video a continuación.

Para migrar campos existentes a alias:

1. Crea nuevos campos y asignarlos a campos antiguos utilizando la propiedad aliases_mapping.
2. Elimina la definición de campo anterior.
3. Actualiza el archivo module.html para usar la nueva definición de campos.

Más abajo aparecen ejemplos de implementación de esto para cambios simples y complejos:

• Implementación simple: asignación de un campo de color a otro campo de color nuevo.
• Implementación compleja: asigna un campo numérico al subcampo size de un campo de fuente para controlar el tamaño de la fuente.

En situaciones simples, el tipo de campo del campo antiguo y el tipo de campo del nuevo campo deben ser iguales. Por ejemplo:

• Campo de color antiguo a campo de color nuevo. 
• Campo de texto antiguo a campo de texto nuevo.
• Campo de espaciado antiguo a campo de espaciado nuevo.

A continuación, se muestra un ejemplo de uso de aliases_mapping al mover un campo de color de la pestaña Contenido del módulo a la pestaña Estilos.

En situaciones más complejas, también puede asignar campos a subcampos u otros tipos de campo de módulo siempre que el tipo de datos sea el mismo y el tipo de subcampo del nuevo campo coincida. Los subcampos son las propiedades dentro del objeto de valor almacenado del campo. Por ejemplo:

• Asignación de un campo de texto enriquecido a un campo de texto, ya que los valores de ambos campos se almacenan como cadenas.
• Consolidación de campos de tipografía, como cambiar de un campo numérico para el tamaño de fuente, para usar un campo de fuente (que tiene un subcampo de tamaño de fuente). Puedes agregar un alias para el subcampo size para asignarlo al campo numérico anterior mediante la notación de puntos.

A continuación se muestra un ejemplo de cambio de la opción de tamaño de fuente de un campo numérico a un campo de fuente que tiene un subcampo de tamaño de fuente.