> For the complete documentation index, see [llms.txt](https://help.impact.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.impact.com/brand/es/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/microsite-experiences/customize-microsite-layouts-and-pages.md).

# Personalizar diseños y páginas de micrositios

Los micrositios son uno de los puntos de contacto clave para los participantes de tu programa de referidos. Este artículo de ayuda explica cómo usar el *editor de micrositios* para personalizar tu micrositio existente y convertirlo en un espacio que refleje tu marca y brinde una experiencia atractiva para tus usuarios finales.

Si aún no has [configurado un micrositio](/brand/es/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/microsite-experiences/set-up-a-microsite.md) todavía, primero tendrás que hacerlo.

1. En el menú de navegación de la izquierda, selecciona ![](https://4048883401-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-230534471fef5f40808e921e41ee44e4a06ded03%2Fe6cb9548999afdc1ed3ce4942e4cb5b45b5cecbd323267aac2a7cd1915fccc09.svg?alt=media) **\[Engage] → Contenido**.
2. En la *tarjeta de Microsite* selecciona **Editar contenido**.
   * Esta acción abre el editor de micrositios y muestra el *tarjeta de Microsite* panel deslizante.
3. Usa el editor de micrositios para actualizar tu marca o agregar contenido nuevo, como diseños y páginas.

<div data-with-frame="true"><figure><img src="https://4048883401-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fu8WZu3QIIhdEbGgIEptB%2FScreenshot%202026-05-18%20at%2010.44.26.png?alt=media&#x26;token=45c65550-6e83-4e79-8372-ec2793c4c913" alt="" width="563"><figcaption></figcaption></figure></div>

{% hint style="warning" %}
**Advertencia:** El editor de micrositios no guarda automáticamente tus cambios. Guarda con frecuencia para asegurarte de no perder tu trabajo.
{% endhint %}

{% stepper %}
{% step %}

## **Paso 1: Cambia la marca de tu micrositio (Opcional)**

{% tabs %}
{% tab title="Colores y fuente" %}
Tu diseño Base incluye un componente contenedor de marca que controla la fuente y los colores de marca de tu micrositio. Los colores de marca se aplican a varias partes del micrositio, incluidos los colores de resaltado y los colores de los botones.

1. En el *tarjeta de Microsite* panel deslizante, selecciona el **Diseño base**.
2. A la izquierda, debajo de *Diseño actual*, selecciona **Capas**.
3. Selecciona el **Contenedor de marca**.
4. A la derecha, en el *Contenedor de marca* menú, edita el **color de marca** y **fuente de marca**.

<div data-with-frame="true"><figure><img src="https://4048883401-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-f58dfdd168765b914fd22b232cabd8030450c27f%2F6f54642b7524983137442de4c4ecc2a20984c511b5e26423a5edadc0060f9a45.png?alt=media" alt="" width="223"><figcaption></figcaption></figure></div>

5. Selecciona **Guardar** en la esquina superior derecha.
   {% endtab %}

{% tab title="Encabezado del sitio" %}
Puedes agregar una imagen de encabezado en la que se pueda hacer clic y que redirija a tus participantes a una página que tú designes. Configúrala en el diseño Base.

1. En el *tarjeta de Microsite* panel deslizante, selecciona el **Diseño base**.
2. A la izquierda, debajo de *Diseño actual* o *Página actual*, selecciona **Capas**.
3. A la derecha, en el *Contenido del encabezado del marco del micrositio* menú, proporciona una imagen y ajusta su altura y ancho como desees.
4. Establece la ruta de redirección. Aquí es donde se redirigirá a tus participantes al hacer clic en la imagen.
5. Selecciona **Guardar**.
   {% endtab %}
   {% endtabs %}
   {% endstep %}

{% step %}

## **Paso 2: Crea un diseño o una página**

{% tabs %}
{% tab title="Agregar una página" %}

1. En el *tarjeta de Microsite* panel deslizante, selecciona **tarjeta de Microsite**.
   * Esta acción abre la vista de estructura de tu micrositio, que muestra todos los diseños y páginas.
2. Selecciona el **Agregar página** botón.
3. Opcionalmente, usa la **lista desplegable Diseño heredado** para seleccionar el diseño que deseas que actúe como diseño padre.

{% hint style="info" %}
**Ejemplo:** Si quieres agregar una página de destino a tu sitio que cualquiera pueda ver, independientemente de si es un participante con sesión iniciada, puedes anidar una nueva página dentro del diseño base.
{% endhint %}

4. Introduce el **título de la página** o el nombre del diseño.
5. Opcionalmente, ajusta la **clave de la página** para tu página. Se genera automáticamente una clave de página en función del título de la página, pero puedes cambiarla si lo deseas.
6. Introduce el **URL** para tu página.
   * Añade una barra inclinada antes del nombre que quieras usar y utiliza guiones en el caso de una URL con varias palabras, por ejemplo, `/empresa-info`.
7. En la **lista desplegable de usuarios permitidos** selecciona el grupo de usuarios que puede acceder a la página.
   * **Público:** Visible para cualquiera.
   * **Verificado:** Solo participantes con sesión iniciada.
   * **No verificado:** Participantes con sesión iniciada que no han verificado sus direcciones de correo electrónico.
8. En la **Redirección para usuarios no permitidos** lista desplegable, selecciona la página a la que quieres que se envíe a los participantes no permitidos.
9. Selecciona **Agregar**.
10. En la esquina superior derecha de la página, selecciona **Guardar**.
    {% endtab %}

{% tab title="Agregar un diseño" %}

1. En el *tarjeta de Microsite* panel deslizante, selecciona **tarjeta de Microsite**.
   * Esta acción abre la vista de estructura de tu micrositio, que muestra todos los diseños y páginas.
2. Selecciona **Agregar diseño**.
3. Opcionalmente, usa la **lista desplegable Diseño heredado** lista desplegable para seleccionar el diseño que deseas que actúe como diseño padre. Esto es especialmente útil para fines de organización del sitio.
4. Introduce el **Nombre del diseño** para tu diseño.
5. Opcionalmente, ajusta la **Clave del diseño** para tu diseño. Se genera automáticamente una clave de diseño en función del título de la página, pero puedes cambiarla si lo deseas.
6. Selecciona **Agregar**.
7. En la esquina superior derecha de la página, selecciona **Guardar**.
   {% endtab %}
   {% endtabs %}
   {% endstep %}

{% step %}

## **Paso 3: Aplica una plantilla**

Puedes aplicar una plantilla a tu nuevo diseño o página si no quieres empezar desde cero.

1. En la *tarjeta de Microsite* panel deslizante, usa la vista de estructura para seleccionar el diseño o la página para la que quieres usar la plantilla.
2. A la izquierda, debajo de *Diseño actual* o *Página actual*, selecciona **Plantillas**.
3. Explora las plantillas disponibles y luego selecciona **Aplicar plantilla** en la tarjeta de la plantilla que quieras usar.

<div data-with-frame="true"><figure><img src="https://4048883401-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2FmANLKNh0KRWXP8G7Abj6%2FScreenshot%202026-05-18%20at%2010.40.44.png?alt=media&#x26;token=6fec0d57-89af-4cbc-8e23-2fe243a13882" alt="" width="267"><figcaption></figcaption></figure></div>

4. En la esquina superior derecha de la página, selecciona **Guardar**.
   {% endstep %}

{% step %}

## **Paso 4: Edita la barra lateral del micrositio**

Esto se recomienda si quieres que los participantes con sesión iniciada puedan acceder a una página desde el menú de navegación de la barra lateral del micrositio. Estos pasos te mostrarán cómo hacerlo, pero puedes adaptarlos si quieres agregar un elemento de barra lateral a otro diseño.

1. En la *tarjeta de Microsite* panel deslizante, selecciona **Diseño de usuario conectado** desde la vista de estructura.
   * Selecciona ![](https://4048883401-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-90673bb8db696bdefe7b207cfc07c46caf1d43f1%2Fce7a994978f06dd84cc6a31b890071502b4831990afd8fdd73f73c6d2e203660.png?alt=media) **\[icono de salida]** para cerrar el panel deslizante y acceder al lienzo de edición.
2. A la derecha, dentro del *Agregar* menú, despliega la categoría *Componentes de micrositio* y luego selecciona **Elemento de barra lateral**.

<div data-with-frame="true"><figure><img src="https://4048883401-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-87da46ebfa6e69752ed1c574a17d0036746d311d%2F125bfdb46d75238f2772523663950b1311a17055d85a39bca25033bc56a45d5e.jpg?alt=media" alt=""><figcaption></figcaption></figure></div>

3. Dentro del lienzo de edición, arrastra el *elemento de barra lateral* componente a una posición válida. Las posiciones disponibles se indican con un **Agregar al contenido de la barra lateral** mensaje.
   * En pantallas más pequeñas, selecciona el ![](https://4048883401-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-71ccc0ed9e3023e12691656e4a063341060fe3bd%2F69bc484dc36b22c013f4fde7e0360a7ae9b8d39164beff2b6fabc9ea6d0efb1d.svg?alt=media) **\[menú hamburguesa]** para acceder a **Agregar al contenido de la barra lateral** botón.
4. A la derecha, dentro del *Editar* menú, selecciona un **Icono** y **Etiqueta** para representar la página.
5. En la **Ruta de navegación** lista desplegable, selecciona la ruta URL de la página a la que se debe dirigir a los usuarios.
6. En la esquina superior derecha de la página, selecciona **Guardar**.
   {% endstep %}

{% step %}

## **Paso 5: Previsualiza y guarda**

{% tabs %}
{% tab title="Previsualiza tu micrositio" %}
Puedes previsualizar cómo se verá el micrositio para tus participantes.

1. En la barra de menú superior, alterna entre ![](https://4048883401-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-9a50309ee9d0e10094bf68c9b9ae1999dbec4f48%2F7cf9c6c1f6544aa358de22e77201e216647a70ab22c854c02334f51f45892424.svg?alt=media) **\[Escritorio]**, ![](https://4048883401-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-02123f07d293035e9e37f19e086187c0e90e7dd0%2F1b889798dd233ebb71c2adcc44be0e2887772538ce7c6357d7ef1ea246c0e564.svg?alt=media) **\[Tableta]** o ![](https://4048883401-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-04b329f4eb244c77b35e32d9988afc78f428a88f%2Fe05ee6fbf869c562df0a7fbc8a38b177082975c06ddf6adcda9d4c00bd0e43ac.svg?alt=media) **\[Móvil]** para ver cómo se verá el micrositio en cada dispositivo.
2. Para entrar en la vista previa, selecciona ![](https://4048883401-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-190c6a03e6a68d67509d00452b10fd803bee5c87%2F57c7cba09bd1b97dd75b7c245e517c8d1ca0469d7c57bdc13ee6e427b75a860a.svg?alt=media) **\[Ver]** en la barra de menú superior.
3. Para volver a la interfaz de edición, selecciona ![](https://4048883401-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-60e9ace573178da411cb3be9c6f3b0f4b7e5b524%2F4094fadf599e544cfc618c18eb22087defdb9be38a580cd0041a242a88294e1e.svg?alt=media) **\[Editar]** en la barra de menú superior.
   {% endtab %}

{% tab title="Guarda tu micrositio" %}
El editor de micrositios no guarda automáticamente tus cambios. Guarda con frecuencia para asegurarte de no perder tu trabajo.

1. Después de realizar todos los cambios pertinentes, selecciona **Guardar** en la parte superior derecha.
2. Una vez guardados, los cambios aparecerán al instante en la versión en vivo de tu micrositio.
   {% endtab %}
   {% endtabs %}
   {% endstep %}
   {% endstepper %}

Visita nuestro artículo sobre [Explicación de los componentes de widgets y micrositios](/brand/es/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/widget-and-microsite-components-explained.md) para obtener más información sobre los aspectos de componentes de Microsites y Widgets.


---

# 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://help.impact.com/brand/es/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/microsite-experiences/customize-microsite-layouts-and-pages.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.
