> ## Documentation Index
> Fetch the complete documentation index at: https://developers.hubspot.es/docs/llms.txt
> Use this file to discover all available pages before exploring further.
# Mercado de plantillas | Requisitos de los temas (2022)
> Más información sobre los requisitos que un tema debe cumplir para poder enviarlo al mercado de plantillas.
'Requisitos de temas en el mercado de plantillas de HubSpot';
'Más información sobre los requisitos que un tema debe cumplir para poder enviarlo al mercado de plantillas.';
Más información sobre los requisitos que debe cumplir un tema para enviarlo al mercado de plantillas de HubSpot.
Si recién estás comenzando el proceso de creación de temas, te recomendamos encarecidamente que utilices nuestro tema CMS gratuito, que se puede descargar desde nuestro [Repositorio de GitHub](https://github.com/HubSpot/cms-theme-boilerplate) o [importarlo desde la interfaz de usuario del administrador de diseño de tu cuenta](https://www.youtube.com).
Además, revisa los [requisitos de la página de índice de la plantilla](https://developers.hubspot.com/docs) cuando envíes tu plantilla al mercado de plantillas de HubSpot.
## Límites del tema
Ten en cuenta los siguientes límites por 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](https://legal.hubspot.com/hubspot-product-and-services-catalog).
* Los temas no pueden contener más de:
* 50 plantillas [(mínimo de páginas necesarias)](#templates-css%2C-sections%2C-page-templates%2C-etc.)
* 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](https://developers.hubspot.com/docs#flexible-columns)
**Módulos vs. secciones**
Las secciones son útiles porque los creadores de contenido solo pueden ubicarlas en zonas de colocación de ancho completo en la página, lo que te ayuda como desarrollador a garantizar un excelente producto terminado.
En particular, las secciones de diseño fijo, en las que el creador de contenido no puede mover elementos dentro de la sección, son una gran herramienta para proporcionar un formato y un diseño creativos que de otro modo no se podrían lograr con el editor de arrastrar y soltar.
Las secciones también ofrecen beneficios de usabilidad adicionales para el creador de contenido, ya que puede seleccionar módulos individuales dentro de la sección, lo que hace que los formularios de módulos sean más cortos y estén más orientados al elemento que se está editando.
## 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](https://developers.hubspot.com/docs#template-marketplace-compliance).
* Un tema debe crearse con plantillas HTML y HubL, y etiquetas [dnd\_area](/cms/reference/hubl/tags/dnd-areas).
* Los temas deben respetar una cuadrícula de 12 columnas.
### Estructura de los archivos del tema
Todos los temas deben contener una estructura de carpetas adecuada y estar agrupados en una carpeta principal, que debería describir la página de listas de productos. Por ejemplo, si estás creando 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](https://developers.hubspot.com/docs#theme-file-structure).
### Rutas de archivo locales relativas para las plantillas
Al hacer referencia a los recursos del tema, debes usar rutas de archivo locales relativas. La mejor manera de incluirlos es usar la [función get\_asset\_url](/cms/reference/hubl/functions#get-asset-url), que devuelve la URL pública de un material, archivo o plantilla. También puedes [generar esta función](/cms/reference/hubl/functions#get-asset-url) en la aplicación, 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` y `get_asset_url` debe tener el siguiente formato:
```hubl theme={null}
{{require_css(get_asset_url('../../css/main.css')) }}
```
```html theme={null}
//cdn2.hubspot.net/hub/1234567/hub_generated/template_assets/1565970767575/custom/styles/style.min.css
```
En el siguiente video, revisa las diferencias en la estructura de archivos en tu cuenta de desarrollador en comparación con los archivos entregados a un cliente del mercado:
## Rendimiento del tema
Al usar Google Lighthouse, un tema debe obtener una calificació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](/developer-tooling/local-development/hubspot-cli/install-the-cli).
* 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
Debes usar tu propio nombre de dominio al crear una URL de vista previa. 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 o remover tu tema hasta que la demo en directo vuelva a ser accesible.
## Usar jQuery
jQuery [no está habilitado de forma predeterminada](https://knowledge.hubspot.com/es/website-pages/include-jquery-across-your-hubspot-pages) en la cuenta de HubSpot de un cliente. Si el tema se basa en jQuery, se debe incluir una versión de jQuery para garantizar que el tema funcione como se espera.
Por ejemplo, si incluyes un módulo que requiere jQuery cuando el resto del sitio no lo requiere, necesitas usar el siguiente código para cargar jQuery:
```hubl theme={null}
{# 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)
El archivo `theme.json` debe incluir los siguientes parámetros:
```json theme={null}
// 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
}
```
Revisa tu archivo `theme.json` y asegúrate de lo siguiente:
* 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.
Obtén más información sobre los [parámetros de theme.json](https://developers.hubspot.com/docs#theme-json).
## Configuración del tema (Fields.json)
El archivo `fields.json` controla los campos disponibles y los grupos de campos en el editor de temas, incluidos 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.
* 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](https://developers.hubspot.com/docs#module-compatibility-with-themes).
Si los campos de tema no tienen los campos `primary_color`, `secondary_color`, `heading_font` o `body_font` pueden usar el campo `alternate_names`.
Más información sobre estos [parámetros de fields.json](https://developers.hubspot.com/docs#fields-json) y [revisa un archivo de ejemplo fields.json](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/fields.json) de la biblioteca de recursos de CMS Hub.
La configuración del tema también debe:
* 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.
Como mínimo, un tema **debe** incluir los siguientes campos:
**Campos de tipografía:**
* 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
**Campos de formulario:**
* 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.
Además:
* 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](/cms/start-building/building-blocks/fields/brand-and-settings-inheritance). 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](https://developers.hubspot.com/docs#reusable-sections) 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
Como mínimo, los temas deben incluir los siguientes tipos de plantillas:
* 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](/cms/start-building/building-blocks/modules/content-search). 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
Obtén más información sobre los requisitos para los módulos de tema y los módulos individuales [aquí](https://developers.hubspot.com/docs).
## Contenido global
### Parciales globales
Los [parciales globales](/cms/start-building/building-blocks/global-content) 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. Más información sobre cómo [crear parciales globales](/cms/start-building/building-blocks/global-content#creating-a-global-content-partial-template-using-local-development-tools).
* Los temas deben incluir parciales globales.
* Los parciales globales deben incluir un [área útil de arrastrar y soltar](https://developers.hubspot.com/docs). 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](/cms/start-building/building-blocks/modules/menus-and-navigation) que hayan creado en la configuración de su cuenta.
Evita incluir módulos globales dentro de los parciales globales, ya que se puede crear una experiencia negativa para el usuario final.
## Compatibilidad con varios idiomas
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](/cms/reference/modules/default-modules#language-switcher) 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.
## Elementos móviles y adaptables
Los temas deben ser capaces de adaptar su contenido al dispositivo en el que se están viendo. También deben proporcionar una buena experiencia de usuario en varios dispositivos. Esto incluye, pero no está limitado a:
* Navegación principal
* Controles deslizantes y pestañas
* Imágenes grandes
* Evitar el desplazamiento horizontal (a menos que sea intencional)