> For the complete documentation index, see [llms.txt](https://docs.dapta.ai/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.dapta.ai/dapta-docs-es/dforms/design/cover-screen-and-banner.md).

# Portada y banner

Añade una pantalla de entrada a tu formulario de dForms: activa la portada, escribe el antetítulo, el titular, el subtítulo, el texto del botón de inicio y la sello de confianza, y añade una franja de

La portada es lo primero que ve quien responde: un titular, un pitch corto y un botón **Comenzar**, mostrados antes de la primera pregunta. El banner es una franja fina de texto en la parte de arriba del formulario que puedes usar para un anuncio o una oferta. Los dos viven en el panel **Diseño** del editor y se actualizan en la vista previa según escribes.

Por defecto un formulario nuevo no tiene portada: quien responde cae directo en la pregunta 1. Esta página te muestra cómo activar la portada, llenarla y darle estilo al banner.

***

**Paso 1:** Abre tu formulario y abre la pestaña **Diseño**. Baja por la columna izquierda hasta la sección **Portada** y activa **Mostrar una portada**. La vista previa de la derecha cambia a la portada de inmediato.

<figure><img src="https://365551146-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMUYDYzjmxpzlYaw0gcaZ%2Fuploads%2Fgit-blob-0f25fc209a542dca1c1ecb24deb07049cb076b2e%2Fforms-cover-screen-and-banner-01-show-cover-switch.png?alt=media" alt="El panel Diseño desplazado hasta la sección Portada, con el interruptor Mostrar una portada activado y la portada visible en la vista previa"><figcaption><p>Activa <strong>Mostrar una portada</strong>. La vista previa de la derecha muestra la portada como la verá quien responde.</p></figcaption></figure>

> **💡 Tip:** Usa las flechas de **Portada** sobre la vista previa para moverte entre la portada y las preguntas, y el selector **Móvil** / **Tablet** / **Escritorio** para comprobar la portada en cada tamaño.

***

**Paso 2:** Añade un banner si quieres uno. Escribe algo en **Texto del banner**. En cuanto el campo tiene texto, aparecen debajo los controles del banner: **Mostrar el banner en**, **Color del banner**, **Color del texto del banner** y **Altura del banner**.

<figure><img src="https://365551146-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMUYDYzjmxpzlYaw0gcaZ%2Fuploads%2Fgit-blob-d5c2312d3d8944190d3101103e4d0b4d2d51592d%2Fforms-cover-screen-and-banner-02-banner-settings.png?alt=media" alt="Los ajustes del banner: Texto del banner, Mostrar el banner en, Color del banner, Color del texto del banner y Altura del banner"><figcaption><p>Los controles del banner solo aparecen cuando <strong>Texto del banner</strong> tiene un valor. Deja el texto vacío y no hay banner.</p></figcaption></figure>

* **Mostrar el banner en**: **Todas las pantallas** mantiene la franja visible en la portada y en cada pregunta. **Solo la portada** la muestra en la portada y la oculta en cuanto la persona empieza.
* **Color del banner** y **Color del texto del banner**: haz clic en la muestra para elegir un color predefinido o escribe un valor hex. Deja el color del banner vacío y la franja usa un tinte suave de tu color de acento. Junto al color del texto aparece un indicador de contraste (por ejemplo **AAA 12.2:1**) para que veas que la franja es legible.
* **Altura del banner**: **Delgada**, **Estándar** o **Alta**.

***

**Paso 3:** Escribe el texto de la portada. Todos los campos son opcionales; la portada simplemente se salta las partes que dejes vacías.

<figure><img src="https://365551146-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMUYDYzjmxpzlYaw0gcaZ%2Fuploads%2Fgit-blob-bd5be402f3aee64b187d19d0f2005a45d85d8c33%2Fforms-cover-screen-and-banner-03-cover-copy-fields.png?alt=media" alt="Los campos de texto de la portada: Antetítulo, Insignia, Titular, Subtítulo, Texto del botón de inicio e Sello de confianza, con la portada renderizada en la vista previa"><figcaption><p>Llena los campos de la portada. La vista previa renderiza cada uno donde lo verá quien responde.</p></figcaption></figure>

| Campo                         | Dónde se muestra en la portada                                                                                                                                       |
| ----------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Antetítulo**                | Píldora pequeña en mayúsculas sobre el titular (por ejemplo el nombre de un programa o una campaña).                                                                 |
| **Insignia**                  | Se muestra en la misma píldora que el antetítulo. Solo se usa cuando **Antetítulo** está vacío.                                                                      |
| **Titular**                   | El título grande. Si lo dejas vacío, se usa el título del formulario.                                                                                                |
| **Subtítulo**                 | Una o dos líneas bajo el titular. También se usa como descripción de la vista previa del enlace cuando se comparte el formulario.                                    |
| **Texto del botón de inicio** | La etiqueta del botón que abre la pregunta 1. Vacío muestra la palabra de siempre en el idioma del formulario: **Comenzar**, o **Start** en un formulario en inglés. |
| **Sello de confianza**        | Una línea pequeña de tranquilidad bajo el subtítulo, como «Toma menos de un minuto».                                                                                 |

> **💡 Tip:** Que el titular sea corto. En teléfonos se parte en dos líneas rápido, y la tarjeta al compartir recorta los titulares muy largos.

***

**Paso 4:** Haz clic en **Publicar** y abre el enlace público. La portada, el banner y el botón de inicio se renderizan exactamente como en la vista previa, en escritorio y en móvil.

<figure><img src="https://365551146-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMUYDYzjmxpzlYaw0gcaZ%2Fuploads%2Fgit-blob-3105198876e0f736198b81570d4b8d18bc92d47c%2Fforms-share-02-public-form.png?alt=media" alt="La portada publicada en escritorio: franja verde del banner arriba, píldora del antetítulo, titular, subtítulo, sello de confianza y un botón para empezar"><figcaption><p>La portada publicada en escritorio, con el banner cruzando arriba y el botón de inicio personalizado.</p></figcaption></figure>

<figure><img src="https://365551146-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMUYDYzjmxpzlYaw0gcaZ%2Fuploads%2Fgit-blob-340dca256cf905b92dd8f787b2a7def9c4c88106%2Fforms-cover-screen-and-banner-05-public-cover-mobile.png?alt=media" alt="La misma portada en un teléfono: franja de banner, encabezado con el título del formulario, píldora de antetítulo, titular, subtítulo, línea de confianza y un botón Vamos a ancho completo" width="375"><figcaption><p>En móvil el botón de inicio queda abajo de la pantalla, al alcance del pulgar.</p></figcaption></figure>

## Todos los ajustes de portada y banner

| Ajuste                         | Opciones                                      | Qué hace                                                                                                                                                                                     |
| ------------------------------ | --------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Mostrar una portada**        | Activado / Desactivado                        | Añade la pantalla de entrada antes de la primera pregunta. Desactivado oculta toda la portada (el banner todavía puede mostrarse en las preguntas si su alcance es **Todas las pantallas**). |
| **Texto del banner**           | Texto libre                                   | El texto de la franja de arriba. Vacío quita el banner y oculta sus controles.                                                                                                               |
| **Mostrar el banner en**       | **Todas las pantallas** / **Solo la portada** | Si la franja se queda visible durante las preguntas o solo en la portada.                                                                                                                    |
| **Color del banner**           | Muestra o hex                                 | Fondo de la franja. Vacío usa un tinte suave del acento.                                                                                                                                     |
| **Color del texto del banner** | Muestra o hex                                 | Color del texto de la franja, con indicador de contraste en vivo.                                                                                                                            |
| **Altura del banner**          | **Delgada** / **Estándar** / **Alta**         | Grosor de la franja.                                                                                                                                                                         |
| **Antetítulo**                 | Texto libre                                   | Píldora en mayúsculas sobre el titular.                                                                                                                                                      |
| **Insignia**                   | Texto libre                                   | La misma píldora que el antetítulo; se usa solo cuando el antetítulo está vacío.                                                                                                             |
| **Titular**                    | Texto libre                                   | Título principal. Recurre al título del formulario.                                                                                                                                          |
| **Subtítulo**                  | Texto libre                                   | Línea de apoyo. También alimenta la descripción de la vista previa del enlace.                                                                                                               |
| **Texto del botón de inicio**  | Texto libre                                   | Etiqueta del botón de la portada. Recurre a **Comenzar** (**Start** en un formulario en inglés).                                                                                             |
| **Sello de confianza**         | Texto libre                                   | Línea pequeña de tranquilidad bajo el subtítulo.                                                                                                                                             |

## Bueno saberlo

* **Otros botones**: la tarjeta **Texto de los botones**, arriba del panel de Diseño, define Atrás, Siguiente y Enviar para todo el formulario. Nunca cambia el botón de la portada, que solo toma el **Texto del botón de inicio**. Mira [Idioma y texto de los botones](/dapta-docs-es/dforms/design/language-and-button-text.md).
* **Diseño de una página**: en un formulario de **Una página** la portada se renderiza como un encabezado sobre las preguntas. No hay botón de inicio, así que **Texto del botón de inicio** no se usa ahí. Mira [Formulario de una sola página](/dapta-docs-es/dforms/builder/one-page-layout.md).
* **Logo en la portada**: la portada puede mostrar un logo distinto del de las preguntas. Defínelo en **URL del logo de la portada**, en la sección **Distribución** del panel de Diseño. Mira [Logos, distribución y transiciones](/dapta-docs-es/dforms/design/logos-layout-transitions.md).
* **Logos de clientes**: una franja de «Confían en nosotros» puede ir en la portada, bajo la sello de confianza. Mira [Marquesina de logos de clientes](/dapta-docs-es/dforms/design/client-logos.md).
* **Tarjeta al compartir**: el titular, el subtítulo y el texto del banner se reutilizan en la imagen que aparece cuando se comparte el enlace. Mira [Tarjeta al compartir](/dapta-docs-es/dforms/design/share-card.md).
* **Analíticas**: cuando hay portada, la primera fila de la tabla de abandono es **Portada / entrada**, así que puedes ver cuánta gente abrió el formulario frente a cuánta pulsó el botón de inicio. Mira [Analíticas](/dapta-docs-es/dforms/results/analytics.md).

## Qué sigue

* [Logos, distribución y transiciones](/dapta-docs-es/dforms/design/logos-layout-transitions.md)
* [Marquesina de logos de clientes](/dapta-docs-es/dforms/design/client-logos.md)
* [Tarjeta al compartir](/dapta-docs-es/dforms/design/share-card.md)
* [Temas, colores y fondo](/dapta-docs-es/dforms/design/themes-colors-background.md)
* [Qué ve quien responde](/dapta-docs-es/dforms/respondent-experience.md)


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.dapta.ai/dapta-docs-es/dforms/design/cover-screen-and-banner.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.