# Personalizar diseños y páginas del micrositio

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

Si no ha [configurado](https://help.impact.com/brand/es/sobre-que-te-gustaria-aprender/advocate-program/manage-advocate-participant-experiences/microsite-experiences/set-up-a-microsite) un micrositio aún, entonces necesitará hacerlo primero.

1. Desde el menú de navegación izquierdo, seleccione ![](https://3147719151-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 el *Micrositio* seleccione **Editar contenido**.
   * Esta acción abre el editor de micrositios y muestra el *Micrositio* panel deslizante.
3. Use el editor de micrositios para actualizar su imagen de marca o agregar contenido nuevo, como diseños y páginas.

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

{% hint style="warning" %}
**Advertencia:** El editor de micrositios no guarda automáticamente sus cambios. Guarde con frecuencia para asegurarse de no perder su trabajo.
{% endhint %}

{% stepper %}
{% step %}
**Paso 1: Cambie la imagen de marca de su micrositio (Opcional)**

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

1. En la *Micrositio* panel deslizante, seleccione el **Diseño Base**.
2. A la izquierda, bajo *Diseño Actual*, seleccione **Capas**.
3. Seleccione el **Contenedor de Marca**.
4. A la derecha, en el *Contenedor de Marca* menú, edite el **color de la marca** y **fuente de la marca**.

   <div data-with-frame="true"><figure><img src="https://3147719151-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. Seleccione **Guardar** en la esquina superior derecha.
   {% endtab %}

{% tab title="Encabezado del sitio" %}
Puede agregar una imagen de encabezado clicable que redirija a sus participantes a una página que usted designe. Configúrelo en el diseño Base.

1. En la *Micrositio* panel deslizante, seleccione el **Diseño Base**.
2. A la izquierda, bajo *Diseño Actual* o *Página actual*, seleccione **Capas**.
3. A la derecha, en el *Contenido del Encabezado del Marco del Micrositio* menú, proporcione una imagen y ajuste su altura y ancho según desee.
4. Establezca la ruta de redirección. Aquí es donde sus participantes serán redirigidos al hacer clic en la imagen.
5. Seleccione **Guardar**.
   {% endtab %}
   {% endtabs %}
   {% endstep %}

{% step %}
**Paso 2: Cree un diseño o página**

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

1. En la *Micrositio* panel deslizante, seleccione **Micrositio**.
   * Esta acción abre la vista de estructura de su micrositio, que muestra todos los diseños y páginas.
2. Seleccione el **Agregar Página** botón.
3. Opcionalmente, use el **Diseño heredado** menú desplegable para seleccionar el diseño que desea que actúe como diseño padre.

   <div data-gb-custom-block data-tag="hint" data-style="info" class="hint hint-info"><p><strong>Ejemplo:</strong> Si desea agregar una página de destino a su sitio que cualquiera pueda ver independientemente de si es un participante con sesión iniciada, puede anidar una nueva página dentro del diseño base.</p></div>
4. Ingrese el **Título de la página** o nombre del diseño.
5. Opcionalmente, ajuste el **Clave de la página** para su página. Una clave de página se genera automáticamente en función del título de la página, pero puede cambiarla si lo desea.
6. Ingrese el **URL** para su página.
   * Agregue una barra inclinada antes del nombre que desea usar y use guiones en el caso de una URL de varias palabras, p. ej., `/company-info`.
7. Desde el **Usuarios permitidos** menú desplegable, seleccione el grupo de usuarios que puede acceder a la página.
   * **Público:** Visible por cualquiera.
   * **Verificados:** Solo participantes con sesión iniciada.
   * **No verificados:** Participantes con sesión iniciada que no han verificado sus direcciones de correo electrónico.
8. Desde el **Redireccionamiento para usuarios no permitidos** menú desplegable, seleccione la página a la que desea enviar a los participantes no permitidos.
9. Seleccione **Agregar**.
10. En la esquina superior derecha de la página, seleccione **Guardar**.
    {% endtab %}

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

1. En la *Micrositio* panel deslizante, seleccione **Micrositio**.
   * Esta acción abre la vista de estructura de su micrositio, que muestra todos los diseños y páginas.
2. Seleccione **Agregar Diseño**.
3. Opcionalmente, use el **Diseño heredado** menú desplegable para seleccionar el diseño que desea que funcione como diseño padre. Esto es principalmente útil para fines de organización del sitio.
4. Ingrese el **Nombre del diseño** para su diseño.
5. Opcionalmente, ajuste el **Clave del diseño** para su diseño. Una clave de diseño se genera automáticamente en función del título de la página, pero puede cambiarla si lo desea.
6. Seleccione **Agregar**.
7. En la esquina superior derecha de la página, seleccione **Guardar**.
   {% endtab %}
   {% endtabs %}
   {% endstep %}

{% step %}
**Paso 3: Aplique una plantilla**

Puede aplicar una plantilla a su nuevo diseño o página si no desea comenzar desde cero.

1. Desde el *Micrositio* panel deslizante, use la vista de estructura para seleccionar el diseño o la página para la que desea usar la plantilla.
2. A la izquierda, debajo de *Diseño Actual* o *Página actual*, seleccione **Plantillas**.
3. Busque las plantillas disponibles y luego seleccione **Aplicar plantilla** en la tarjeta de la plantilla que desea usar.

   <div data-with-frame="true"><figure><img src="https://3147719151-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-a0bfe48f82a572dff145227f203272771f6b739a%2F259af004a6a8f554bcfff90975d56b1ec1ec45ce65356cd232fdd4a091cf8c48.jpg?alt=media" alt="" width="310"><figcaption></figcaption></figure></div>
4. En la esquina superior derecha de la página, seleccione **Guardar**.
   {% endstep %}

{% step %}
**Paso 4: Edite la barra lateral del micrositio**

Se recomienda esto si desea 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 le mostrarán cómo hacerlo, pero puede adaptarlos si desea agregar un elemento de la barra lateral a otro diseño.

1. Desde el *Micrositio* panel deslizante, seleccione **diseño de sesión iniciada** desde la vista de estructura.
   * Seleccione ![](https://3147719151-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ú, expanda la *Componentes del Micrositio* categoría, luego seleccione **Elemento de la barra lateral**.

   <div data-with-frame="true"><figure><img src="https://3147719151-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, seleccione una posición válida para agregar el *elemento de la barra lateral* componente. Las posiciones disponibles están designadas por un **Agregar al contenido de la barra lateral** mensaje.
   * En pantallas más pequeñas, seleccione el ![](https://3147719151-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 al **Agregar al contenido de la barra lateral** botón.
4. A la derecha, dentro del *Editar* menú, seleccione un **Icono** y **Etiqueta** para representar la página.
5. Desde el **Ruta de navegación** menú desplegable, seleccione 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, seleccione **Guardar**.
   {% endstep %}

{% step %}
**Paso 5: Vista previa y guardar**

{% tabs %}
{% tab title="Vea una vista previa de su micrositio" %}
Puede previsualizar cómo aparecerá el micrositio a sus participantes.

1. En la barra de menú superior, cambie entre ![](https://3147719151-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-9a50309ee9d0e10094bf68c9b9ae1999dbec4f48%2F7cf9c6c1f6544aa358de22e77201e216647a70ab22c854c02334f51f45892424.svg?alt=media) **\[Escritorio]**, ![](https://3147719151-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://3147719151-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 aparecerá el micrositio en cada dispositivo.
2. Para entrar en vista previa, seleccione ![](https://3147719151-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-190c6a03e6a68d67509d00452b10fd803bee5c87%2F57c7cba09bd1b97dd75b7c245e517c8d1ca0469d7c57bdc13ee6e427b75a860a.svg?alt=media) **\[Ver]** desde la barra de menú superior.
3. Para volver a la interfaz de edición, seleccione ![](https://3147719151-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-60e9ace573178da411cb3be9c6f3b0f4b7e5b524%2F4094fadf599e544cfc618c18eb22087defdb9be38a580cd0041a242a88294e1e.svg?alt=media) **\[Editar]** desde la barra de menú superior.
   {% endtab %}

{% tab title="Guarde su micrositio" %}
El editor de micrositios no guarda automáticamente sus cambios. Guarde con frecuencia para asegurarse de no perder su trabajo.

1. Después de realizar todos los cambios relevantes, seleccione **Guardar** en la parte superior derecha.
2. Una vez guardados, los cambios aparecerán instantáneamente en la versión en vivo de su micrositio.
   {% endtab %}
   {% endtabs %}
   {% endstep %}
   {% endstepper %}

Visite nuestro artículo sobre [Widget y Componentes de Micrositio Explicados](https://help.impact.com/brand/es/sobre-que-te-gustaria-aprender/advocate-program/manage-advocate-participant-experiences/widget-and-microsite-components-explained) para más información sobre los aspectos de componentes de Micrositios y Widgets.