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

# Resumen de plantillas

> Las plantillas son envoltorios de páginas o correos electrónicos reutilizables que generalmente incluyen módulos y parciales en un diseño. Los creadores de contenido seleccionan una plantilla para utilizarla antes de crear una página o un correo electrónico.

Las plantillas definen el diseño de tus páginas, correos electrónicos y temas de HubSpot. Una plantilla se compone de módulos y parciales, y puede hacer referencia a otros materiales como hojas de estilo y archivos JavaScript. Las plantillas pueden ser creadas usando la [CLI de HubSpot](/cms/start-building/introduction/react-plus-hubl/react-plus-hubl-quickstart) o en [el administrador de diseño de HubSpot](https://knowledge.hubspot.com/es/design-manager/create-page-email-and-blog-templates-in-the-layout-editor). Para los creadores de contenido, la plantilla es lo primero que seleccionarán al crear una página o un correo electrónico.

A continuación, aprende a crear una plantilla, los diferentes tipos de plantillas y lo que se incluye en ellas.

## Crear una plantilla

Para crear una plantilla, puedes utilizar el [administrador de diseño en HubSpot](https://knowledge.hubspot.com/es/design-manager/create-page-email-and-blog-templates-in-the-layout-editor) o ejecutar el comando CLI `hs create template`.

```shell theme={null}
hs create template <name> [dest]
```

| Parámetro | Descripción                                                                                                                                          |
| --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
| `name`    | El nombre de la plantilla                                                                                                                            |
| `dest`    | La ruta del directorio local en el que deseas crear la plantilla. Si no se incluye, la plantilla se creará en el directorio en el que te encuentres. |

* Utilizando las teclas de flecha, desplázate hasta el [tipo de plantilla](#template-types) que quieras crear y luego pulsa **introducir**.

La plantilla se creará localmente. Cuando quieras que la plantilla esté disponible para su uso en tu cuenta de HubSpot, [sube](https://developers.hubspot.com/docs/developer-tooling/local-development/hubspot-cli/reference#upload) la plantilla a tu cuenta. También puedes utilizar el comando [watch](https://developers.hubspot.com/docs/developer-tooling/local-development/hubspot-cli/reference#watch) para subir automáticamente todos los archivos nuevos y las ediciones de los archivos existentes en el directorio de trabajo actual y los directorios secundarios.

## Ver vista preliminar de la plantilla

Después de actualizar una plantilla, puedes obtener una vista previa para asegurarte de que se vea y actúe como esperas. Hay algunas formas en que HubSpot puede obtener una vista previa de una plantilla, como:

* **Visualización previa de una plantilla en el administrador de diseño:** es mejor para verificaciones visuales rápidas o cuando se necesita una vista previa de una publicación, anuncio o plantilla combinada del blog.
* **Crear un nuevo activo a partir de una plantilla:** lo mejor para probar el editor de arrastrar y soltar y la experiencia de creación de contenido.

### Vista previa en el administrador de diseño

Una vista previa de las plantillas usando el administrador de diseño puede ser especialmente útil para verificaciones visuales rápidas. El generador de vista previa de plantillas también te permite configurar opciones de presentación, como las dimensiones de viewport.

Para obtener una vista previa de una plantilla en el administrador de diseño:

* En tu cuenta de HubSpot, dirígete a **Marketing** > **Archivos y plantillas** > **Administrador de diseño**.
* Con el explorador de archivos de la barra lateral izquierda, haz clic en la **plantilla** de la que deseas una vista previa.
* En la parte superior derecha, haz clic en **Vista preliminar**.
  * Selecciona **Vista preliminar en directo con opciones de visualización** para obtener una vista preliminar de la plantilla con opciones para probar la capacidad de respuesta y la configuración del dominio, como las hojas de estilo. Esta opción muestra la página dentro de un iframe. Esto también te permite seleccionar entre blogs y la publicación del blog o la vista de listado para las plantillas de blog.
  * Selecciona **Vista previa sin opciones de visualización** para obtener una vista preliminar de la plantilla sin opciones adicionales.

<Frame>
  <img src="https://www.hubspot.es/hubfs/Knowledge_Base_2021/Developer/template-preview-options.png" alt="template-preview-options" />
</Frame>

### Vista preliminar con una nueva página

Al cambiar las áreas de arrastrar y soltar, los valores de los parámetros predeterminados en los módulos u otros cambios significativos, es mejor [crear una página web](https://knowledge.hubspot.com/es/website-and-landing-pages/create-and-customize-pages), un [blog](https://knowledge.hubspot.com/es/blog/create-a-new-blog), una [publicación de blog](https://knowledge.hubspot.com/es/blog/create-and-publish-blog-posts) o un [correo electrónico](https://knowledge.hubspot.com/es/marketing-email/create-and-send-marketing-emails) utilizando la plantilla. A continuación, puedes probar diferentes valores de los campos de los módulos y probar cómo se verá tu plantilla y optimizarla para obtener la mejor experiencia. Puedes publicar estos materiales o dejarlos en borrador para fines de prueba.

Además, puedes usar la [preparación de contenido](https://knowledge.hubspot.com/es/website-and-landing-pages/redesign-and-relaunch-a-site-with-content-staging#new) o una [cuenta de entorno de pruebas de desarrollador](https://offers.hubspot.com/free-cms-developer-sandbox) para crear y ver recursos sin afectar una cuenta de producción.

## Tipos de plantilla

Las plantillas pueden utilizarse para diferentes tipos de contenido, como páginas web y publicaciones de blog. En las plantillas codificadas, se designa el tipo de plantilla agregando una anotación en la parte superior del archivo.

A continuación, conoce los diferentes tipos de plantillas y las anotaciones que puedes utilizar para designar cada tipo.

<Warning>
  ### Nota:

  Los creadores de contenido pueden cambiar la plantilla de una página por otra del mismo tipo, dependiendo de si tiene las etiquetas [dnd\_area](https://developers.hubspot.es/docs/cms/reference/hubl/tags/dnd-areas).

  * Las plantillas creadas con el editor de diseño visual de arrastrar y soltar pueden cambiarse por otras plantillas de arrastrar y soltar o plantillas codificadas con o sin etiquetas `dnd_area`.
  * Las plantillas codificadas con etiquetas *dnd\_area* solo pueden cambiarse por otras plantillas codificadas con etiquetas `dnd_area`.
  * Las plantillas codificadas <u>sin</u> etiquetas `dnd_area` solo pueden cambiarse por otras plantillas codificadas sin etiquetas `dnd_area`.
</Warning>

### Página

```html theme={null}
templateType: page
```

Las plantillas de página son el tipo de plantilla más abierto. Pueden servir como cualquier tipo de página web o [landing page](https://blog.hubspot.com/blog/tabid/6307/bid/7177/what-is-a-landing-page-and-why-should-you-care.aspx). Los [diseños](#layout-css) de página no están precargados con ningún componente. Las plantillas de páginas codificadas vienen precargadas con un marcador escaso que incluye las etiquetas HubL sugeridas para la metainformación, el título y los [includes](#included-cms-files) de encabezado y pie de página necesarios. Algunos ejemplos de páginas que suelen utilizar una plantilla de página son, entre otros, los siguientes:

* [Página de inicio](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/templates/home.html)
* [Acerca de nosotros](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/templates/about.html)
* [Contacto](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/templates/contact.html)

### Correo electrónico

```html theme={null}
templateType: email
```

Las plantillas de correo electrónico son utilizadas por la [herramienta de correo electrónico](https://www.hubspot.es/products/marketing/email). Tienen el conjunto de requisitos más estricto, ya que tienen que ser vistos en muchos clientes de correo electrónico diferentes y ajustarse a las prácticas recomendadas para garantizar una correcta capacidad de entrega. Tanto las plantillas de correo electrónico de [HTML + HubL](/cms/start-building/building-blocks/templates/html-hubl-templates) como las del administrador de diseño de arrastrar y soltar vienen preconfiguradas con componentes básicos en el momento de la creación. Las plantillas con este `templateType` solo son visibles para la selección de plantillas al [crear un correo electrónico](https://knowledge.hubspot.com/es/marketing-email/edit-marketing-email-content-and-design).

Para cumplir con la normativa [CAN-SPAM](https://knowledge.hubspot.com/es/marketing-email/edit-email-footer-addresses), las plantillas de correo electrónico tienen un conjunto de [variables obligatorias](https://developers.hubspot.es/docs/cms/reference/hubl/variables#required-email-template-variables) que deben incluirse.

Las plantillas de correo electrónico también tienen una funcionalidad incorporada de [inline-css](/cms/start-building/building-blocks/templates/email-template-markup#hs-inline-css-and-data-hse-inline-css) agregada a los elementos `<style>` con un nombre de clase especial o atributo de datos. Incluir el inline-CSS en los correos electrónicos es un método utilizado para obtener una mejor compatibilidad con los clientes de correo electrónico. Afortunadamente, [la mayoría de los clientes de correo electrónico más populares admiten ahora el css incrustado](https://litmus.com/blog/do-email-marketers-and-designers-still-need-to-inline-css), que sin embargo no representa a todos tus destinatarios. Usa el buen juicio para hacer lo que es correcto para tus destinatarios.

[Más información sobre la creación de plantillas de correo electrónico.](/cms/start-building/building-blocks/templates/email-template-markup)

### Parcial

```html theme={null}
templateType: page isAvailableForNewContent: false
```

Las plantillas parciales son archivos que pueden incluirse en otros archivos codificados. A diferencia de los parciales globales, los parciales se pueden editar individualmente sin afectar otras instancias del parcial.

Más información sobre los [parciales](/cms/start-building/building-blocks/templates/html-hubl-templates#partials).

### Parcial global

```html theme={null}
templateType: global_partial
```

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. La actualización de un parcial global actualizará todas las instancias del parcial global.

Más información sobre los [parciales globales](/cms/start-building/building-blocks/templates/html-hubl-templates#global-partials) y el [contenido global](/cms/start-building/building-blocks/global-content).

### Blog

Al [crear un blog](https://knowledge.hubspot.com/es/blog/create-a-new-blog), [las plantillas de blog](/cms/start-building/building-blocks/templates/blog) tienen una estructura similar a [las plantillas de página](#page-templates) estándar. La diferencia es que pueden seleccionarse en la [configuración de contenido](https://app.hubspot.com/login?loginRedirectUrl=https%3A%2F%2Fapp.hubspot.com%2Fshortlink%2Fsettings%2Fwebsite%2Fpages%2Fall-domains%2Fsystem-pages) como plantillas de blog, mientras que las plantillas de página no. Las plantillas creadas con `blog_listing`, `blog_post` o `blog`, `templateType` **no aparecen** cuando un usuario está creando una página web, en la pantalla de selección de plantillas. Las plantillas de blog tienen en realidad dos formas, las páginas de índice del blog y las páginas de detalle de las publicaciones del blog.

### Índice de blog

```html theme={null}
templateType: blog_listing
```

La [plantilla del índice del blog](/cms/start-building/building-blocks/templates/blog) es la plantilla que los usuarios verán cuando naveguen a la URL del blog. Normalmente esta plantilla se utiliza para listar resúmenes, títulos e imágenes destacadas de todas las publicaciones del blog, además suele mostrar la paginación para llegar a las publicaciones más antiguas.

### Publicación de blog

```html theme={null}
templateType: blog_post
```

La plantilla de la publicación del blog, es la plantilla que los usuarios verán cuando vean una publicación individual en el blog. Estas plantillas suelen mostrar el contenido completo de la publicación.

#### Plantilla combinada de publicaciones de blog e índice

Una sola plantilla de blog puede encargarse del diseño de las [páginas de anuncios y de las páginas detalladas](/cms/start-building/building-blocks/templates/blog#if-is-listing-view-statement), pero lo más habitual es que se separen en plantillas distintas. Las plantillas combinadas se mostrarán en la configuración del blog como seleccionables tanto para las opciones de los anuncios como para las publicaciones de blog. Si estás creando una plantilla que está destinada a ser utilizada solo para publicaciones o índices, debes utilizar `blog_post` o `blog_listing`.

```html theme={null}
templateType: blog
```

<Warning>
  Para simplificar el desarrollo y la experiencia, se recomienda utilizar por separado `blog_post`, `blog_listing` o `templateTypes` en lugar de las plantillas combinadas.
</Warning>

### Páginas del sistema

Las plantillas de las páginas del sistema están marcadas internamente para su propósito específico. En la [configuración de contenido](https://app.hubspot.com/login?loginRedirectUrl=https%3A%2F%2Fapp.hubspot.com%2Fshortlink%2Fsettings%2Fwebsite%2Fpages%2Fall-domains%2Fsystem-pages) de tu cuenta, puedes seleccionar estas plantillas para su propósito específico en la pestaña del sistema.

<Warning>
  ### Nota:

  El único tipo de plantilla de página del sistema que se puede crear a través de la CLI es la plantilla de página de resultados de búsqueda.
</Warning>

#### Páginas de error

Las páginas de error pueden establecerse en la [Configuración de contenido](https://app.hubspot.com/login?loginRedirectUrl=https%3A%2F%2Fapp.hubspot.com%2Fshortlink%2Fsettings%2Fwebsite%2Fpages%2Fall-domains%2Fsystem-pages) como páginas [404](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/templates/system/404.html) o [500](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/templates/system/500.html). Ambas plantillas utilizan el mismo templateType. Las plantillas creadas con este templateType no aparecen cuando un usuario está creando una página web, en la pantalla de selección de plantillas.

```html theme={null}
templateType: error_page
```

#### Preferencias de suscripción al correo electrónico

La página de preferencias de suscripción a correos electrónicos. Enumera todos los tipos de suscripción disponibles que un usuario puede registrarse o cancelar. Requiere la etiqueta HubL `{% email_subscriptions "email_subscriptions"  %}`. [Consulta la plantilla de preferencias de suscripción en el cms-theme-boilerplate](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/templates/system/subscription-preferences.html).

```html theme={null}
templateType: email_subscription_preferences_page
```

#### Copia de seguridad de cancelaciones de suscripción por correo electrónico

Una plantilla del sistema para páginas de cancelación de suscripción a correos electrónicos. Requiere la etiqueta HubL `{% email_simple_subscription "email_simple_subscription" %}`. [Consulta la plantilla de cancelación de suscripción de la copia de seguridad del correo electrónico en el cms-theme-boilerplate.](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/templates/system/backup-unsubscribe.html)

```html theme={null}
templateType: email_backup_unsubscribe_page
```

#### Confirmación de cancelación de suscripción a correo electrónico

Una plantilla del sistema para páginas de preferencias de confirmación de cancelación de suscripción a correos electrónicos Aquí es donde se envía a los usuarios cuando van a la URL generada por la variable [`{{ unsubscribe_link_all }}`](https://developers.hubspot.es/docs/cms/reference/hubl/variables#email-variables). [Consulta la plantilla de confirmación de suscripción en el cms-theme-boilerplate](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/templates/system/subscriptions-confirmation.html).

```html theme={null}
templateType: email_subscriptions_confirmation_page
```

#### Solicitud de la contraseña

Las plantillas de solicitud de la contraseña proporcionan una página de la marca que pueden mostrar para requerir una contraseña antes de que un visitante pueda ver el contenido real de la página. Las plantillas de solicitud de contraseña se establecen a través de la [Configuración de contenido](https://app.hubspot.com/login?loginRedirectUrl=https%3A%2F%2Fapp.hubspot.com%2Fshortlink%2Fsettings%2Fwebsite%2Fpages%2Fall-domains%2Fsystem-pages). [Cómo hacer que una página en HubSpot esté protegida por contraseña](https://knowledge.hubspot.com/es/website-pages/password-protect-a-page). Consulta la [solicitud de la página protegida por contraseña](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/templates/system/password-prompt.html) en la biblioteca.

```html theme={null}
templateType: password_prompt_page
```

#### Página de resultados de búsqueda

Una plantilla del sistema para la funcionalidad de listado de búsqueda del sitio CMS integrada. Consulta la [plantilla de la página de resultados de búsqueda](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/templates/system/search-results.html) en la biblioteca.

```html theme={null}
templateType: search_results_page
```

### Membresías

Las cuentas de HubSpot con la [funcionalidad de membresías](https://developers.hubspot.es/docs/cms/testing-staging-performance/memberships/overview) (Disponible para**CMS Hub** Enterprise *únicamente*) pueden [crear páginas en los sitios a las que solo pueden acceder los usuarios que forman parte de listas específicas en el CRM](https://knowledge.hubspot.com/es/website-pages/require-member-registration-to-access-private-content). Esto permite a los visitantes del sitio tener cuentas con credenciales de acceso. Estas plantillas te permiten controlar la apariencia de estas páginas.

<Info>
  Solo las [plantillas HTML + HubL](/cms/start-building/building-blocks/templates/html-hubl-templates) pueden ser plantillas de membresía.
</Info>

#### Inicio de sesión de membresías

Esta es la página de inicio de sesión que se muestra cuando un usuario intenta acceder a un contenido cuyo acceso está controlado a través de la funcionalidad de membresías. Comúnmente contiene el módulo `{% member_login "member_login" %}`. Consulta el ejemplo de la [plantilla de inicio de sesión de miembros](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/templates/system/membership-login.html) en la biblioteca.

```html theme={null}
templateType: membership_login_page
```

#### Registro de membresía

Esta es la página de registro de usuarios que permite crear una cuenta para ver el contenido al que pueden acceder los usuarios de esta lista. Comúnmente contiene la etiqueta HubL `{% member_register "member_register" %}`. Consulta el ejemplo de [plantilla de registro de miembros](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/templates/system/membership-register.html) en la biblioteca.

```html theme={null}
templateType: membership_register_page
```

#### Restablecimiento de contraseña de membresía

Esta es la página de restablecimiento de la contraseña. Los usuarios proporcionan su nueva contraseña en esta página. Comúnmente contiene la etiqueta HubL `{% password_reset "password_reset" %}`. Consulta el ejemplo de [plantilla de restablecimiento de la contraseña de membresía](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/templates/system/membership-reset-password.html) en la biblioteca.

```html theme={null}
templateType: membership_reset_page
```

#### Solicitud de restablecimiento de membresía

Esta es la página de solicitud de restablecimiento de contraseña. Mostrar un formulario para solicitar un correo electrónico de restablecimiento de contraseña. Comúnmente contiene la etiqueta HubL `{% password_reset_request "password_reset_request" %}`. Consulta el ejemplo de [plantilla de solicitud de restablecimiento de la contraseña de membresía](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/templates/system/membership-reset-password-request.html) en la biblioteca.

```html theme={null}
templateType: membership_reset_request_page
```

## Archivos CMS incluidos

Hay ciertos archivos JavaScript y CSS que se adjuntan a las plantillas del CMS. Algunos archivos se incluyen automáticamente y no se pueden eliminar, mientras que otros se pueden incluir opcionalmente. Para saber más sobre el orden en que las hojas de estilo se adjuntan al contenido del CMS, [consulta este artículo](https://knowledge.hubspot.com/es/design-manager/create-edit-and-attach-css-files-to-style-your-site).

### jQuery

[jQuery](https://jquery.com/) se incluye opcionalmente en la etiqueta "head" de las plantillas de HubSpot. Si se incluye, se renderiza como parte de la [variable de HubL `standard_header_includes`](https://developers.hubspot.es/docs/cms/reference/hubl/variables#required-page-template-variables).

En **Ajustes > Sitio web > Páginas** puedes cambiar la versión de jQuery a 1.11.x, 1.7.1 o desactivarla por completo. También puedes optar por incluir un script de migración de jQuery para la compatibilidad con navegadores antiguos. Puedes mover jQuery al pie de página para mejorar el rendimiento de la página, pero mover jQuery puede romper el JavaScript que dependa de él. Se recomienda probar esto antes de moverlo agregando `?hsMoveJQueryToFooter=True` al final de las URL de la página de tu sitio web.

Si bien jQuery se incluyó históricamente por opción predeterminada, actualmente CMS Hub no requiere jQuery. La mayoría de las funcionalidades de jQuery ahora tienen equivalentes [modernos de vanilla javascript](http://youmightnotneedjquery.com/), y se recomienda usarlos. Si necesitas usar jQuery, te recomendamos que deshabilites la versión predeterminada en la configuración y uses la última versión cargada arriba de la etiqueta `</body>`.

Para probar si la eliminación de jQuery en tu sitio romperá algo, agrega `?hsNoJQuery=true` al final de la URL mientras ves varias páginas de tu sitio, especialmente aquellas con mucha interactividad.

### layout.css

Anteriormente conocido como `required_base.css`, este archivo es responsable de diseñar la cuadrícula adaptable de HubSpot. Este archivo se incluye automáticamente en cualquier plantilla de arrastrar y soltar, pero <u>no</u> se incluye por opción predeterminada en las plantillas codificadas personalizadas. Para los desarrolladores que utilicen las etiquetas [dnd\_area](https://developers.hubspot.es/docs/cms/reference/hubl/tags/dnd-areas) en las plantillas HTML + HubL codificadas, no es necesario cargar el archivo `layout.css`, pero se [incluye una versión del mismo en la biblioteca del tema CMS](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/css/objects/_layout.css) para facilitar su puesta en marcha.

Además de la rejilla adaptable de CSS, el archivo incluye algunas clases que pueden utilizarse para mostrar y ocultar elementos en diferentes viewports. Para obtener más información, [ve el archivo directamente](https://cdn2.hubspot.net/hubfs/327485/Designers_Docs_2015/layout.css).

### Código de seguimiento de HubSpot

El [código de seguimiento de HubSpot](https://knowledge.hubspot.com/es/account/how-does-hubspot-track-visitors) siempre se agrega automáticamente a cualquier plantilla de HubSpot, excluyendo las plantillas de correo electrónico, con la variable de HubL [**standard\_footer\_includes**](https://developers.hubspot.es/docs/cms/reference/hubl/variables). El código de seguimiento carga un archivo de analíticas de JavaScript nombrado `your_HubID.js` (ejemplo `158015.js`). Este código de seguimiento está directamente integrado con la [funcionalidad RGPD de HubSpot](https://knowledge.hubspot.com/es/privacy-and-consent/how-do-i-turn-on-gdpr-functionality-in-my-hubspot-account).

## Recursos relacionados

* [Áreas de arrastrar y soltar](/cms/start-building/building-blocks/drag-and-drop/overview)
* [Plantillas de secciones](/cms/start-building/building-blocks/sections/sections)
* [Cómo usar componentes web en plantillas y módulos](https://developers.hubspot.com/blog/use-web-components-in-hubspot-cms-development)
* [Crear encabezados, pies de página y más utilizando contenido global](/cms/start-building/building-blocks/global-content)