# Editor de micrositio explicado

El editor de micrositios te da control sobre lo que verán los participantes de tu programa Advocate al permitirte personalizar diseños, páginas, contenido y elementos de marca como fuentes y colores.

Este artículo de ayuda explica la interfaz del editor y proporciona información general sobre cómo se estructuran los micrositios, incluidos los diseños, las páginas y los componentes. Obtén más información sobre [configurar un micrositio](https://help.impact.com/brand/es/sobre-que-te-gustaria-aprender/advocate-program/manage-advocate-participant-experiences/microsite-experiences/set-up-a-microsite) y [personalizar la marca y el contenido](https://help.impact.com/brand/es/sobre-que-te-gustaria-aprender/advocate-program/manage-advocate-participant-experiences/microsite-experiences/customize-microsite-layouts-and-pages) de sus diseños y páginas.

#### Abrir el editor de micrositios

1. En el menú de navegación izquierdo, selecciona ![](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 la *tarjeta Microsite* selecciona **Editar contenido**.

#### Interfaz del editor

El editor de micrositios consta de una barra de menú superior, el lienzo de edición, el panel desplegable del micrositio y el menú de componentes.

<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-6147ebf2ae47ca4606bdd34277af56999a671280%2Fc61b460557871deb1aecbb27a3518982408cf45b72156fca43f3e46dbc54f913.png?alt=media" alt=""><figcaption></figcaption></figure></div>

{% tabs %}
{% tab title="Barra de menú superior" %}
La barra de menú en la parte superior de la página es donde puedes deshacer acciones, ver el código HTML y previsualizar el micrositio terminado. Usa los íconos de escritorio, tableta o móvil para ver cómo aparecerá tu micrositio en dispositivos con diferentes tamaños de pantalla.
{% endtab %}

{% tab title="Lienzo" %}
El lienzo muestra el contenido actual de tu micrositio. Puedes seleccionar componentes individuales para editarlos, o agregar nuevos y ver de un vistazo cómo se mostrarán a tus participantes. Estos componentes están listados a la izquierda dentro de la sección desplegable del micrositio.

* Selecciona **Capas** para ver una vista detallada de todos los componentes en tu página o diseño
* Selecciona **Plantillas** para ver las plantillas disponibles para las páginas de tu micrositio.
* Verás un tercer menú dependiente del contexto basado en la página, diseño, widget o correo electrónico seleccionado

  <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-3de3488148e89adc893ddbf2940d67dedea36a75%2F6564954dd5c2ac36c28fe92e6602750c13ebe01d18f84f6781593d1ec66448f5.jpg?alt=media" alt="" width="122"><figcaption></figcaption></figure></div>

{% endtab %}

{% tab title="Panel desplegable del micrositio" %}
El panel desplegable del micrositio es un panel plegable a la izquierda del lienzo. Visualiza la estructura de herencia de tus diseños y páginas como un árbol. Selecciona diseños o páginas individuales para ver el contenido y hacer ajustes. Aquí también puedes agregar más páginas y diseños.

Para un estilizado aún más a nivel de marca, selecciona la opción Estilo del Micrositio. Consulta [Personaliza Widgets y Micrositios con el Editor de Contenido](https://help.impact.com/brand/es/sobre-que-te-gustaria-aprender/advocate-program/manage-advocate-participant-experiences/customize-widgets-and-microsites-with-the-content-editor) para más información sobre las opciones de estilo disponibles para ti.
{% endtab %}

{% tab title="Menú de componentes" %}
El menú de componentes es un panel a la derecha del lienzo. Usa la *Agregar* pestaña para insertar nuevos componentes en el lienzo y la *Editar* pestaña para hacer ajustes a lo que ya está allí.
{% endtab %}
{% endtabs %}

#### Estructura del micrositio

Hay algunos bloques de construcción que son importantes de entender mientras personalizas tu micrositio: diseños, páginas y componentes.

<details>

<summary>Diseños</summary>

Los diseños actúan como “marcos” para tu micrositio. Son donde puedes colocar componentes que quieres que aparezcan de forma pervasiva en el micrositio, como encabezados e imágenes de banner.

Los diseños y las páginas están vinculados mediante una estructura de herencia. Tanto las páginas como los diseños pueden heredar un diseño. Las páginas y los diseños que tienen un diseño heredado verán su contenido envuelto por el contenido del diseño heredado.

{% hint style="info" %}
**Ejemplo:** Si tu diseño base contiene una imagen de encabezado, cualquier página que herede el diseño base mostrará la misma imagen de encabezado en la misma ubicación.
{% endhint %}

Si utilizaste la configuración automática para crear tu micrositio, entonces tu sitio tiene tres diseños por defecto.

**Diseño base**

El diseño base es donde puedes colocar contenido que quieres que aparezca independientemente de en qué página se encuentre un participante y si está autenticado en tu sitio. Es donde puedes agregar un encabezado o pie de página que quieras que aparezca en todo el sitio. El diseño base también contiene el contenedor de marca, que gestiona los colores y las fuentes en todo el sitio.

Tanto el *Diseño para usuarios autenticados* como el *Diseño para usuarios no autenticados* heredan el *Diseño base*.

<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%2F3NHdmPGgjMudnsCGd1Yy%2Fimage.png?alt=media&#x26;token=54feac69-8c46-48be-9f14-32209f3c2539" alt="" width="312"><figcaption></figcaption></figure></div>

**Diseño para usuarios autenticados**

El *Diseño para usuarios autenticados* es donde puedes agregar componentes que verán todos tus participantes autenticados, independientemente de en qué página se encuentren. Por ejemplo, el menú de navegación lateral de tu micrositio se crea mediante un componente en el diseño. Debido a que se agrega al diseño, cualquier página que herede ese diseño incluirá esa 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%2FRFRn1J9JxD4iYpmKIAv0%2Flogged-in-layout.jpg?alt=media&#x26;token=4815b054-264d-46e5-bcc8-88ed3ea5a624" alt="" width="310"><figcaption></figcaption></figure></div>

**Diseño para usuarios no autenticados**

El *Diseño para usuarios no autenticados* es donde puedes personalizar lo que verá cualquier participante que actualmente no esté autenticado.

<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%2Fzmg9mkIeow7cpu0katqi%2Flogged-out-layout.jpg?alt=media&#x26;token=9bbd561b-237e-43f1-833b-d1076bf9e857" alt="" width="291"><figcaption></figcaption></figure></div>

</details>

<details>

<summary>Páginas</summary>

Las páginas son donde construyes el contenido de tu sitio, como explicaciones del programa, información sobre referidos y compartición, y texto/imágenes. Selecciona una página individual dentro de uno de tus diseños para abrirla y editar su contenido.

<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-0a6c026b6fbf6429ea9a8ff3ee2db4f6acfc84fd%2F87f7c50502733db94119262cc22612ef67923c5fc190d8c29938be0f4fd5a34f.jpg?alt=media" alt="" width="318"><figcaption></figcaption></figure></div>

La visibilidad también puede configurarse a nivel de página, lo que te permite restringir el acceso a la página a una de las siguientes opciones:

* <mark style="color:$éxito;">**Verificado**</mark>: Solo participantes autenticados.
* <mark style="color:$peligro;">**No verificado**</mark>: Participantes autenticados que no han verificado su dirección de correo electrónico.
* **Público**: Visible para cualquier persona.

Si utilizaste la configuración automática para crear tu micrositio, entonces tu sitio viene equipado con varias páginas que heredan el *Diseño para usuarios autenticados* como el *Diseño para usuarios autenticados*.

**Páginas del diseño para usuarios autenticados:**

* Actividad
* Panel de control
* Editar perfil
* Enviar cliente potencial
* Impuestos y efectivo

**Páginas del diseño para usuarios no autenticados:**

* Verificación de correo electrónico
* Olvidó la contraseña
* Iniciar sesión
* Cerrar sesión
* Página no encontrada
* Registrarse
* Restablecer contraseña
* Verificar correo electrónico

</details>

<details>

<summary>Componentes</summary>

Los componentes son elementos individuales que puedes agregar a tus páginas y diseños para personalizar aún más la experiencia del micrositio de tus participantes, como imágenes destacadas o un feed de referidos.

Los componentes están agrupados en el menú de componentes. Consulta [Componentes de widgets y micrositios explicados](https://help.impact.com/brand/es/sobre-que-te-gustaria-aprender/advocate-program/manage-advocate-participant-experiences) para obtener una lista completa de los grupos de componentes y los componentes individuales.

<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-75004e7777739ce86600fd0a716eedbd7aa6c52d%2Ff413cd8a60e0c449e8d8a0e0ea0821173134ae92203976190fe299ac2ac079c6.jpg?alt=media" alt="" width="229"><figcaption></figcaption></figure></div>

</details>
