> For the complete documentation index, see [llms.txt](https://support.charlla.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://support.charlla.io/es/userguide/widget/designsettings.md).

# Diseño

{% hint style="info" %}
Personaliza el diseño para que tu widget luzca lo mejor posible.\
Ajusta al detalle desde la adaptación a ordenador y móvil hasta el tamaño, la posición y el redondeo de las esquinas.
{% endhint %}

### Widget Multi-Shop Player

<figure><img src="https://4156510226-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FagkqDgeI4qHjnpImeTdo%2Fuploads%2FO3ujdGA3VS73MDTtauGM%2Fdesignsettings-1-es.jpg?alt=media" alt=""><figcaption></figcaption></figure>

1. En la **pestaña Diseño > Disposición en ordenador**, elige Lista, Cuadrícula o Carrusel. El diseño elegido se muestra al momento en la vista previa de la derecha.
2. Introduce la altura del widget. Puedes indicar entre 640 px y 800 px.
3. Activa o desactiva los botones que aparecen en el widget Multi-Shop Player. Los botones desactivados no se muestran en el widget.

### Widget flotante

<figure><img src="https://4156510226-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FagkqDgeI4qHjnpImeTdo%2Fuploads%2FGX2SbiBpqoV9yAmPCU2G%2Fdesignsettings-2-es.png?alt=media" alt=""><figcaption></figcaption></figure>

1. En **Tamaño y forma**, define el tamaño con el que aparece el widget flotante al principio en ordenador. Al hacer clic en el botón se alterna entre Mínimo y Mediano, y el usuario también puede cambiar el tamaño.
2. En **Forma de las esquinas**, elige esquinas redondeadas o rectas para el widget flotante.
3. En **Posición**, elige en qué lado de la pantalla aparece el widget. Ajusta los márgenes laterales e inferior para afinar su posición.
4. En **Mostrar botones**, activa o desactiva los botones que aparecen en el widget flotante.

<figure><img src="https://4156510226-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FagkqDgeI4qHjnpImeTdo%2Fuploads%2FNZTphYLUEQyOVpRk2gIr%2Fdesignsettings-3-es.png?alt=media" alt=""><figcaption></figcaption></figure>

5. En móvil solo puedes elegir en qué lado de la pantalla aparece el widget flotante. **La posición del widget puede ser distinta en ordenador y en móvil.**

### Widget de carrusel

<figure><img src="https://4156510226-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FagkqDgeI4qHjnpImeTdo%2Fuploads%2FyUQ4pJimhM5y2SzsOJfv%2Fdesignsettings-4-es.png?alt=media" alt=""><figcaption></figcaption></figure>

1. En **Ajustes del banner de producto > Posición**, elige si el banner de producto aparece dentro o fuera del área del vídeo o de la imagen del producto.
2. En **Ajustes del banner de producto > Disposición del banner**, elige el diseño Estándar o Tarjeta. Te recomendamos Tarjeta si tienes tres o más banners de producto.
3. En **Tamaño y forma > Forma de las esquinas del reproductor**, define el redondeo de las esquinas del vídeo o de la imagen del producto, desde rectas hasta varios niveles de redondeo.
4. En **Tamaño y forma > Color de la descripción del vídeo**, elige el color del texto de la descripción del vídeo que se muestra en el widget.
5. En **Tamaño y forma > Ancho máximo**, define el ancho total máximo del widget de carrusel. Introduce un valor entre 768 px y 1440 px.

<figure><img src="https://4156510226-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FagkqDgeI4qHjnpImeTdo%2Fuploads%2FTqqgIH7DVESRSd9X9QRP%2Fdesignsettings-5-es.png?alt=media" alt=""><figcaption></figcaption></figure>

6. Los ajustes para móvil del widget de carrusel se basan automáticamente en los de ordenador.\
   Eso sí, en móvil el banner de producto siempre aparece fuera, sea cual sea el ajuste de ordenador.

### Widget Spotlight

<figure><img src="https://4156510226-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FagkqDgeI4qHjnpImeTdo%2Fuploads%2Fi8XjhuBrmtoC4VCqyNXb%2Fdesignsettings-6-es.png?alt=media" alt=""><figcaption></figcaption></figure>

1. En **Ajustes del banner de producto > Disposición**, elige el diseño de lista o de carrusel para el banner de producto.
2. En **Tamaño y forma > Forma de las esquinas**, define el redondeo de las esquinas del vídeo o de la imagen del producto, desde rectas hasta varios niveles de redondeo.
3. En **Tamaño y forma > Posición de los botones del carrusel**, coloca los botones anterior/siguiente a los lados o en la parte inferior.
   1. Para que el widget se muestre bien, el área donde lo insertes debe tener al menos 640 px de alto con los botones a los lados o 704 px con los botones abajo.
4. En **Tamaño y forma > Ancho máximo**, define el ancho total máximo del widget. Introduce un valor entre 768 px y 2184 px.
5. Si marcas **Ancho completo**, el widget se amplía automáticamente al ancho de la pantalla, sea cual sea el ancho máximo.

<figure><img src="https://4156510226-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FagkqDgeI4qHjnpImeTdo%2Fuploads%2FFshQeEHtVJoLvTv6bQzZ%2Fdesignsettings-7-es.png?alt=media" alt=""><figcaption></figcaption></figure>

6. Los ajustes para móvil del widget se basan automáticamente en los de ordenador.

### Widget Hero Banner (banner superior de la página principal)

<figure><img src="https://4156510226-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FagkqDgeI4qHjnpImeTdo%2Fuploads%2FzXZizJJzYMxUjFC3xbng%2Fdesignsettings-8-es.png?alt=media" alt=""><figcaption></figcaption></figure>

1. En **Tamaño y forma > Altura en ordenador**, elige una proporción de 21:9, 16:9 o pantalla completa, o introduce una altura entre 400 px y 1080 px.
2. En **Visualización del vídeo > Enfoque vertical en ordenador**, elige qué parte del vídeo se muestra cuando es más grande que el banner: Arriba, Centro o Abajo.
3. En **Visualización del vídeo > Efecto de transición**, elige cómo se pasa al siguiente banner cuando hay varios: Deslizar o Fundido. Con Deslizar, los banners se desplazan en horizontal.
4. En **Mostrar botones > Visualización en ordenador**, elige cuándo se ven los botones de control, como reproducir/pausar o sonido: Al pasar el ratón o Siempre. En móvil, los botones se ven siempre.
5. En **Mostrar botones > Reproducir/Pausar**, muestra u oculta el botón para pausar y reanudar el vídeo.
6. En **Mostrar botones > Sonido**, muestra u oculta el botón para silenciar o activar el sonido.
7. En **Mostrar botones > Indicador**, muestra u oculta la marca que indica en qué banner estás. Si lo activas, elige Puntos o Números.
8. En **Mostrar botones > Botones anterior/siguiente**, muestra u oculta las flechas para cambiar de banner manualmente. Si las activas, colócalas Abajo en el centro o A ambos lados. Aunque no las actives, se puede cambiar de banner deslizando o arrastrando.

<figure><img src="https://4156510226-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FagkqDgeI4qHjnpImeTdo%2Fuploads%2F9WWtrT8V8VWL3gJac5S9%2Fdesignsettings-9-es.png?alt=media" alt=""><figcaption></figcaption></figure>

9. En **Diseño > pestaña Móvil**, define por separado los recursos y el diseño para móvil, que se aplican con anchos de pantalla de 1024 px o menos.
10. En **Tamaño y forma > Altura en móvil**, elige una proporción de 4:3, 3:4 o pantalla completa, o introduce una altura personalizada.
11. En **Visualización del vídeo > Enfoque vertical en móvil**, elige qué parte del vídeo se muestra cuando es más grande que el banner: Arriba, Centro o Abajo.


---

# 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://support.charlla.io/es/userguide/widget/designsettings.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.