Mercado de plantillas | Requisitos de los temas (2022)

​

Límites del tema

• Las cuentas gratuitas de CMS Hub no pueden usar la búsqueda en el sitio, funcionalidad de la CTA o video nativo de HubSpot. 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 (mínimo de páginas necesarias)
  • 50 módulos (mínimo 5)
  • 50 secciones (mínimo 5)
• Los temas no deben contener:
  • Plantillas de correo electrónico
  • Funcionalidad de HubDB
  • Funciones sin servidor
  • Campos de objetos del CRM
  • Columnas flexibles en plantillas

​

Requisitos generales de los temas

• Todos los temas enviados deben ser distintos y originales. Por ejemplo, el mismo tema con diferente contenido de texto o marcadores de posición no cuenta como un tema distinto. Más información sobre el cumplimiento del mercado de plantillas de HubSpot.
• Un tema debe crearse con plantillas HTML y HubL, y etiquetas dnd_area.
• Los temas deben respetar una cuadrícula de 12 columnas.

​

Estructura de los archivos del tema

​

Rutas de archivo locales relativas para las plantillas

{{require_css(get_asset_url('../../css/main.css')) }}

​

Rendimiento del tema

• 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

• El tamaño de los archivos de tema debe poder reducirse.
• Todos los archivos de imagen deben tener menos de 1MB 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).

​

Vista previa de URL de temas

​

Usar jQuery

{# this checks if the "Include jQuery" option in Settings > CMS > Pages is checked #}
{% if not site_settings.include_jquery %}
  {{ require_js("../jquery-3.4.1.js", "footer") }}
{% endif %}

​

Configuración del tema (Theme.json)

// theme.json
{
  "label": "Cool Theme",
  "preview_path": "./templates/home-page.html",
  "screenshot_path": "./images/templates/homepage.jpg",
  "enable_domain_stylesheets": false,
  "version": "1.0",
  "author": {
    "name": "Jon McLaren",
    "email": "noreply@hubspot.com",
    "url": "https://theme-provider.com/"
  },
  "documentation_url": "https://theme-provider.com/cool-theme/documentation",
  "license": "./license.txt",
  "example_url": "https://theme-provider.com/cool-theme/demo",
  "is_available_for_new_content": true
}

• El nombre de la etiqueta coincide con el nombre que aparece en el anuncio de tu tema.
• Si estás utilizando el modelo de tema CMS gratuito de HubSpot, los valores de modelo no deben estar presentes. Esto incluye la información del autor, la URL de la documentación, la URL de ejemplo, etc.
• La URL de documentación resuelve y tiene documentación sobre cómo usar tu tema.
• La ruta de vista previa es un archivo válido en tu tema.
• La ruta de la captura de pantalla es un archivo válido y está relacionada con tu tema.
• La URL de ejemplo resuelve y conduce a una demostración de tu tema. No utilices subdominios preview.hs-sites.com o [AccountID].hs-sites.com para la URL de ejemplo.

​

Configuración del tema (Fields.json)

• Los archivos fields.json deben contener al menos tres campos de color.
• Para garantizar la compatibilidad 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. Más información sobre la compatibilidad de módulo y tema.

• No ser incompatible con los estilos del editor o los estilos establecidos mediante un módulo. Por ejemplo, no uses !important en tu hoja de estilos CSS, ya que hace que sea difícil para los usuarios finales anularla y causaría un conflicto.
• Usar etiquetas descriptivas para cada valor de configuración para que los creadores de contenido sepan lo que están actualizando.
• Aplicar todas las plantillas a un 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 títulos h1 en la configuración del tema deben aplicarse a todas las etiquetas h1 del tema.

• Campos de fuente del texto del cuerpo (marcas p)
• h1 a través h6 de campos de fuente
• Color del hipervínculo (a marcas), incluido el estilo al pasar el cursor

• 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 - esto incluye la configuración del texto del botón, el color de fondo y el estilo al pasar el cursor.

• 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.
• 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.
• Si los módulos dentro de un tema usan logotipos, por lo menos un campo de logotipo debe heredar la configuración de marca. Si se utiliza un campo de imagen para representar un logotipo, el campo de imagen no tiene que heredar la configuración de la marca.

​

Plantillas (CSS, secciones, plantillas de página, etc.)

​

Secciones

• Debes usar las secciones donde corresponda. Debe haber un mínimo de cinco secciones en un tema.
• Las secciones deben tener capturas de pantalla únicas y funcionales.
• Las secciones y los módulos no deben ser redundantes.

​

Plantillas de página

• Una plantilla de página de sitio web o una plantilla de landing page.
  • 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 landing page de ancho completo y una landing page con una barra lateral derecha.
  • Se recomienda incluir al menos ocho plantillas de página en un tema.
• Separa las plantillas de índices de blog y publicaciones de blog.
  • Plantilla de índice 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 de índice.
  • 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 corresponder al 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.

​

Denominación de plantillas de página

• Si tienes plantillas con nombres similares, agrega palabras descriptivas que denoten la diferencia entre ellas.
• Usa las mayúsculas uniformemente, elimina los guiones y evita el uso de abreviaturas (por ejemplo, deletrear “fondo” en lugar de usar “fon”).
• No es necesario incluir el nombre de la empresa o el nombre del tema en el nombre de la plantilla.

​

Módulos

​

Contenido global

​

Parciales globales

• Los temas deben incluir parciales globales.
• Los parciales globales deben incluir un área útil de arrastrar y soltar. Por ejemplo, no puedes ocultar el área de arrastrar y soltar con una clase “ocultar”.
• Debes incorporar áreas de arrastrar y soltar que se puedan usar en encabezados y pies de página.
• 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.

​

Compatibilidad con varios idiomas

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

​

Elementos móviles y adaptables

• Navegación principal
• Controles deslizantes y pestañas
• Imágenes grandes
• Evitar el desplazamiento horizontal (a menos que sea intencional)