Requisitos de temas del mercado de plantillas de HubSpot

Más información sobre los requisitos que debe cumplir un tema para enviarlo a mercado de plantillas de HubSpot. 

Ten en cuenta los siguientes límites por tema:

• Las cuentas gratuitas de CMS Hub no pueden usar la búsqueda en el sitio o la funcionalidad CTA. Más información sobre lo que se incluye con las suscripciones de CMS Hub en el Catálogo de productos y servicios de HubSpot.
• Los temas no pueden contener más de:
  • 50 plantillas
  • 50 módulos
  • 50 secciones

• Los temas no deben contener:
  • Plantillas de correo electrónico
  • Funcionalidad de HubDB
  • Funciones sin servidor
  • Campos de objeto del CRM.
  • Plantillas de membresía
  • Columnas flexibles en plantillas

Al usar Google Lighthouse, un tema debe obtener una puntuación superior a los siguientes umbrales:

• Accesibilidad en equipos de escritorio: 65
• Prácticas recomendadas en equipos de escritorio: 80
• Rendimiento en equipos de escritorio: 70
• Rendimiento en dispositivos móviles: 40

Aprende a generar un informe de Google Lighthouse para el tema usando la CLI.

Además, los materiales del tema deben cumplir con los siguientes requisitos de rendimiento y accesibilidad:

• El tamaño de los archivos de tema debe poder reducirse con éxito.
• Todos los archivos de imagen deben tener menos de 1 MB de tamaño.
• Todas las etiquetas de imagen deben tener un atributo alt (un valor de "" es aceptable).
• Todas las etiquetas de imagen deben tener un atributo loading (un valor de "" es aceptable).

Los temas en el mercado deben cumplir con los siguientes requisitos:

• Todos los temas enviados deben ser distintos. Por ejemplo, el mismo tema con diferente contenido de texto o marcadores de posición no cuenta como un tema distinto. 
• Un tema debe crearse con plantillas HTML + HubL y etiquetas dnd_area.
• Debes usar las secciones donde corresponda. Debe haber un mínimo de cinco secciones en un tema. 
• Debes incorporar áreas de arrastrar y soltar que se puedan usar en encabezados y pies de página. 
• Los temas deben respetar una cuadrícula de 12 columnas.

Además, los temas deben cumplir con los siguientes requisitos mínimos en sus plantillas, opciones de campo de tema, configuraciones de theme.json y field.json y campos de módulo.

Como mínimo, los temas deben incluir los siguientes tipos de plantillas:

• Una plantilla de página de sitio web o una plantilla de página de destino.
  • Al incluir varias plantillas de página, cada plantilla debe tener un propósito diferente. Por ejemplo, una página de inicio, una página Acerca de nosotros, una página de destino de ancho completo y una página de destino con una barra lateral derecha.
  • Se recomienda incluir al menos ocho plantillas de página en un tema. 

• Separa las plantillas de anuncio de blog y publicación de blog.
  • Plantilla de anuncio de blog: la página que muestra todas las publicaciones de blog en un formato de lista (conocido como blogroll). El título de la plantilla debe reflejar que es para la página del anuncio.
  • Plantilla de publicación de blog: la página de detalles de publicaciones de blog que muestra publicaciones de blog individuales. El título de la plantilla debe reflejar que es para la página de publicación del blog.
  • Además, el diseño de los comentarios del blog y de las casillas de los autores del blog debe corresponderse con el tema.

• Las siguientes plantillas de página del sistema:
  • Plantilla de error 404: se muestra cuando los visitantes acceden a una página que no existe.
  • Plantilla de error 500: se muestra cuando el sitio encuentra un error interno.
  • Plantilla de solicitud de contraseña: se muestra cuando una página está protegida con contraseña.
  • Plantilla de suscripción: página de preferencias de suscripción donde los destinatarios de correo electrónico pueden administrar los tipos de correos electrónicos a los que se suscriben.
  • Plantilla de actualización de suscripciones: página de confirmación que aparece cuando un destinatario de correo electrónico actualiza sus preferencias de suscripción a los correos electrónicos.
  • Respaldo de plantilla para anular suscripción: la página que aparece para destinatarios de correos electrónicos que intentan cancelar la suscripción, si HubSpot no puede determinar la dirección de correo electrónico.
  • Plantilla de resultados de búsqueda: muestra los resultados de búsqueda que se devuelven al usar la búsqueda en el sitio. Disponible solo para cuentas de pago de CMS Hub.

Como mínimo, un tema debe incluir los siguientes campos: 

• Campos de tipografía:
  • Campos de fuente de texto del cuerpo (etiquetas p)
  • Campos de fuente h1 a h6
  • Color del hipervínculo (etiquetas a), incluido el estilo al pasar el cursor
• Campos de formulario:
  • Fondo del título
  • Texto del título, incluyendo al menos estilos de color de fuente
  • Color de fondo del formulario
  • Color del borde del formulario
  • Color de etiqueta de formulario
  • Color del borde del campo del formulario
  • Botón de formulario, que incluya ajustes para el texto del botón, el color de fondo y el estilo al pasar el cursor

Además, los campos de tema deben cumplir con los siguientes requisitos:

• Los campos que haya dentro del tema deben agruparse lógicamente donde corresponda. Por ejemplo, varios campos relacionados con la tipografía deben agruparse en el grupo Typography.
• A los campos de tema se les deben aplicar globalmente los siguientes elementos:
  • Campos de colores primarios, secundarios y terciarios
  • Campos defuente de encabezado
  • Campos defuente del cuerpo
• Los campos de tema deben tener controles de color y fuente separados para los botones y formularios, así como controles de color, logotipo y fuente separados para el encabezado y el pie de página. 
• 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, dos 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.
  • Si los módulos dentro de un tema usan logotipos, por lo 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.

El archivo theme.json debe incluir los siguientes parámetros:

Más información sobre estos parámetros en la documentación sobre theme.json.

El archivo fields.json controla los campos y grupos de campos disponibles en el editor de temas, incluyendo los campos de estilo. Los campos que incluyas dependerán del control que quieras que tengan los creadores de contenido en el editor de páginas. El archivo fields.json debe contener al menos tres campos de color.

Para garantizar la funcionalidad compatible entre los temas y los módulos independientes, los temas deben incluir las siguientes convenciones de nomenclatura estándar de fuente y color: primary_color, secondary_color, heading_font y body_font.

Si los campos de tema no tienen campos primary_color, secondary_color, heading_font o body_font, pueden usar el atributo alternate_names para asignar campos existentes a campos estándar. Más información sobre este requisito aquí.

 Más información sobre estos parámetros en la documentación de fields.json y revise un archivo de ejemplo fields.json del HubSpot CMS Boilerplate. 

La configuración del tema debe cumplir con los siguientes requisitos.

La configuración del tema no debe ser incompatible con los estilos del editor o los estilos establecidos mediante un módulo. Por ejemplo, no uses !important en el CSS, ya que hace que sea difícil para los usuarios finales anularlo y causaría un conflicto.

La configuración del tema debe usar etiquetas descriptivas para cada valor de configuración para que los creadores de contenido sepan lo que están actualizando.

La configuración del tema debe aplicarse a todas las plantillas del tema, a menos que haya un caso de uso específico para estilos adicionales. Por ejemplo, los cambios en el estilo y el tamaño de los encabezados h1 en la configuración deben aplicarse a todas las etiquetas h1 del tema.

Los temas deben incluir particiones globales. Los parciales globales son un tipo de plantilla creada con HTML y HubL que se puede reutilizar en todo el sitio web. Los tipos de parciales más comunes son los encabezados, las barras laterales y los pies de página. 

Los parciales globales deben incluir un área útil de arrastrar y soltar. Para los menús que se utilizan globalmente, los usuarios también deben poder seleccionar un menú de navegación de HubSpot que hayan creado en la configuración de su cuenta.

Descubre cómo crear parciales globales.

Todos los temas deben contener una estructura de carpetas adecuada y estar agrupados en una carpeta principal, que debería describir el anuncio del producto. Por ejemplo, si estás construyendo un tema con nombre "SuperAwesome" para el mercado, tu estructura debe verse similar a la imagen de abajo. Más información sobre la estructura de archivos del tema. 

Al crear URL de vista previa, debes usar tu propio nombre de dominio. No puedes usar el dominio proporcionado por HubSpot con esta estructura de URL: [AccountID].hs-sites.com

Se debe usar un sitio web en directo y no una imagen del sitio de demostración. 

Si en algún momento tu demo en directo se vuelve inaccesible, HubSpot se reserva el derecho, con notificación al proveedor, de eliminar/eliminar tu tema hasta que la demo en directo vuelva a ser accesible.

Al hacer referencia a los materiales del tema, debes usar rutas de archivo locales relativas. La mejor manera de incluirlos es usar la función get_asset_url, que devuelve la URL pública de un material, archivo o plantilla. También puedes generar automáticamente esta función en la aplicación, bien haciendo clic con el botón derecho en un archivo y seleccionando Copiar URL pública, o bien haciendo clic en Acciones y seleccionando luego Copiar URL pública. 

Por ejemplo, una hoja de estilo a la que hace referencia require_css debe tener el siguiente formato:

Si tu tema se basa en jQuery, se debe incluir una versión de jQuery en caso de que no esté habilitado de manera predeterminada en la cuenta de un cliente. 

Por ejemplo, si incluyes un módulo que requiere jQuery cuando el resto del sitio no lo requiere, necesitarías usar el siguiente código para cargar jQuery:

Los temas deben poder admitir versiones en varios idiomas, y deben especificar los idiomas que admiten. Esto se puede hacer utilizando el módulo de selector de idioma en un encabezado global, que permite a los clientes localizar fácilmente las opciones de idioma y elegir el idioma que deseen.

• Solo debes mostrar un idioma a la vez. Por ejemplo, evita tener inglés y español en la interfaz de usuario al mismo tiempo.
• Evitar el uso de texto codificado. Por ejemplo, en lugar de codificar el texto de un botón de contenido de blog como Leer más, establece el texto dentro de un campo para que el usuario final pueda actualizar el texto sin tener que ir al código.