# Personnaliser les mises en page et les pages du microsite

Les microsites sont l’un des principaux points de contact des participants pour votre programme de parrainage. Cet article d’aide explique comment utiliser le *éditeur de microsite* pour personnaliser votre microsite existant en un espace qui reflète votre marque et offre une expérience engageante à vos utilisateurs finaux.

Si vous n’avez pas [configuré](https://help.impact.com/brand/fr/que-souhaitez-vous-apprendre/advocate-program/manage-advocate-participant-experiences/microsite-experiences/set-up-a-microsite) un microsite encore, vous devrez d’abord le faire.

1. Dans le menu de navigation à gauche, sélectionnez ![](https://57104473-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-230534471fef5f40808e921e41ee44e4a06ded03%2Fe6cb9548999afdc1ed3ce4942e4cb5b45b5cecbd323267aac2a7cd1915fccc09.svg?alt=media) **\[Engage] → Contenu**.
2. Sur la *Microsite* , sélectionnez **Modifier le contenu**.
   * Cette action ouvre l’éditeur de microsite et affiche le *Microsite* volet latéral.
3. Utilisez l’éditeur de microsite pour mettre à jour votre identité visuelle ou ajouter du nouveau contenu, comme des mises en page et des pages.

   <div data-with-frame="true"><figure><img src="https://57104473-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" %}
**Avertissement :** L’éditeur de microsite n’enregistre pas automatiquement vos modifications. Enregistrez fréquemment pour vous assurer de ne pas perdre votre travail.
{% endhint %}

{% stepper %}
{% step %}
**Étape 1 : Changez l’identité visuelle de votre microsite (Optionnel)**

{% tabs %}
{% tab title="Couleurs et police" %}
Votre mise en page de base inclut un composant conteneur de marque qui contrôle la police et les couleurs de marque de votre microsite. Les couleurs de marque sont appliquées à différentes parties du microsite, notamment les couleurs de mise en évidence et les couleurs des boutons.

1. Dans la *Microsite* volet latéral, sélectionnez le **Mise en page de base**.
2. À gauche, sous *Mise en page actuelle*, sélectionnez **Calques**.
3. Sélectionnez le **Conteneur de marque**.
4. À droite, dans le *Conteneur de marque* menu, modifiez la **couleur de la marque** et **police de la marque**.

   <div data-with-frame="true"><figure><img src="https://57104473-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. Sélectionner **Enregistrer** dans le coin supérieur droit.
   {% endtab %}

{% tab title="En-tête du site" %}
Vous pouvez ajouter une image d’en-tête cliquable qui redirige vos participants vers une page que vous désignez. Configurez-la dans la mise en page de base.

1. Dans la *Microsite* volet latéral, sélectionnez le **Mise en page de base**.
2. À gauche, sous *Mise en page actuelle* ou *Page actuelle*, sélectionnez **Calques**.
3. À droite, dans le *Contenu de l’en-tête du cadre du microsite* menu, fournissez une image et ajustez sa hauteur et sa largeur selon vos souhaits.
4. Définissez le chemin de redirection. C’est l’endroit vers lequel vos participants seront redirigés lorsqu’ils cliqueront sur l’image.
5. Sélectionner **Enregistrer**.
   {% endtab %}
   {% endtabs %}
   {% endstep %}

{% step %}
**Étape 2 : Créez une mise en page ou une page**

{% tabs %}
{% tab title="Ajouter une page" %}

1. Dans la *Microsite* volet latéral, sélectionnez **Microsite**.
   * Cette action ouvre la vue de structure de votre microsite, qui affiche toutes les mises en page et pages.
2. Sélectionnez le **Ajouter une page** bouton.
3. Optionnellement, utilisez le **Liste de mise en page héritée** menu déroulant pour sélectionner la mise en page que vous souhaitez définir comme mise en page parente.

   <div data-gb-custom-block data-tag="hint" data-style="info" class="hint hint-info"><p><strong>Exemple :</strong> Si vous souhaitez ajouter une page d’atterrissage à votre site que n’importe qui peut voir, indépendamment du fait qu’il soit un participant connecté, vous pouvez imbriquer une nouvelle page dans la mise en page de base.</p></div>
4. Saisissez le **Titre de la page** ou nom de la mise en page.
5. Optionnellement, ajustez le **Clé de la page** pour votre page. Une clé de page est générée automatiquement en fonction du titre de la page, mais vous pouvez la modifier si vous le souhaitez.
6. Saisissez le **URL** pour votre page.
   * Ajoutez une barre oblique avant le nom que vous souhaitez utiliser et utilisez des tirets en cas d’URL composée de plusieurs mots, par ex., `/company-info`.
7. Dans la **Utilisateurs autorisés** dans le menu déroulant, sélectionnez le groupe d’utilisateurs qui peut accéder à la page.
   * **Public :** Visible par n’importe qui.
   * **Vérifié :** Participants connectés uniquement.
   * **Non vérifié :** Participants connectés qui n’ont pas vérifié leurs adresses e-mail.
8. Dans la **Redirection pour utilisateurs non autorisés** dans le menu déroulant, sélectionnez la page vers laquelle vous souhaitez que les participants non autorisés soient envoyés.
9. Sélectionner **Ajouter**.
10. Dans le coin supérieur droit de la page, sélectionnez **Enregistrer**.
    {% endtab %}

{% tab title="Ajouter une mise en page" %}

1. Dans la *Microsite* volet latéral, sélectionnez **Microsite**.
   * Cette action ouvre la vue de structure de votre microsite, qui affiche toutes les mises en page et pages.
2. Sélectionner **Ajouter une mise en page**.
3. Optionnellement, utilisez le **Liste de mise en page héritée** menu déroulant pour sélectionner la mise en page que vous souhaitez définir comme mise en page parente. Cela est principalement utile pour l’organisation du site.
4. Saisissez le **Nom de la mise en page** pour votre mise en page.
5. Optionnellement, ajustez le **Clé de la mise en page** pour votre mise en page. Une clé de mise en page est générée automatiquement en fonction du titre de la page, mais vous pouvez la modifier si vous le souhaitez.
6. Sélectionner **Ajouter**.
7. Dans le coin supérieur droit de la page, sélectionnez **Enregistrer**.
   {% endtab %}
   {% endtabs %}
   {% endstep %}

{% step %}
**Étape 3 : Appliquez un modèle**

Vous pouvez appliquer un modèle à votre nouvelle mise en page ou page si vous ne souhaitez pas partir de zéro.

1. Dans la *Microsite* volet latéral, utilisez la vue de structure pour sélectionner la mise en page ou la page pour laquelle vous souhaitez utiliser le modèle.
2. À gauche, sous *Mise en page actuelle* ou *Page actuelle*, sélectionnez **Modèles**.
3. Parcourez les modèles disponibles, puis sélectionnez **Appliquer le modèle** sur la carte du modèle que vous souhaitez utiliser.

   <div data-with-frame="true"><figure><img src="https://57104473-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. Dans le coin supérieur droit de la page, sélectionnez **Enregistrer**.
   {% endstep %}

{% step %}
**Étape 4 : Modifiez la barre latérale du microsite**

Cela est recommandé si vous voulez que les participants connectés puissent accéder à une page depuis le menu de navigation de la barre latérale du microsite. Ces étapes vous montreront comment procéder, mais vous pouvez les adapter si vous souhaitez ajouter un élément de barre latérale à une autre mise en page.

1. Dans la *Microsite* volet latéral, sélectionnez **mise en page Connecté** depuis la vue de structure.
   * Sélectionner ![](https://57104473-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-90673bb8db696bdefe7b207cfc07c46caf1d43f1%2Fce7a994978f06dd84cc6a31b890071502b4831990afd8fdd73f73c6d2e203660.png?alt=media) **\[Icône de sortie]** pour fermer le volet latéral et accéder à la zone d’édition.
2. À droite, dans le *Ajouter* menu, développez la *Composants du microsite* catégorie, puis sélectionnez **Élément de la barre latérale**.

   <div data-with-frame="true"><figure><img src="https://57104473-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. Dans la zone d’édition, sélectionnez une position valide pour ajouter le *élément de la barre latérale* composant. Les positions disponibles sont indiquées par un **Ajouter au contenu de la barre latérale** message.
   * Sur les écrans plus petits, sélectionnez le ![](https://57104473-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-71ccc0ed9e3023e12691656e4a063341060fe3bd%2F69bc484dc36b22c013f4fde7e0360a7ae9b8d39164beff2b6fabc9ea6d0efb1d.svg?alt=media) **\[Menu hamburger]** pour accéder au **Ajouter au contenu de la barre latérale** bouton.
4. À droite, dans le *Modifier* menu, sélectionnez une **Icône** et **Étiquette** pour représenter la page.
5. Dans la **Chemin de navigation** dans le menu déroulant, sélectionnez le chemin d’URL de la page vers laquelle les utilisateurs doivent être dirigés.
6. Dans le coin supérieur droit de la page, sélectionnez **Enregistrer**.
   {% endstep %}

{% step %}
**Étape 5 : Aperçu et enregistrement**

{% tabs %}
{% tab title="Aperçu de votre microsite" %}
Vous pouvez prévisualiser l’apparence du microsite pour vos participants.

1. Dans la barre de menu supérieure, basculez entre ![](https://57104473-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-9a50309ee9d0e10094bf68c9b9ae1999dbec4f48%2F7cf9c6c1f6544aa358de22e77201e216647a70ab22c854c02334f51f45892424.svg?alt=media) **\[Bureau]**, ![](https://57104473-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-02123f07d293035e9e37f19e086187c0e90e7dd0%2F1b889798dd233ebb71c2adcc44be0e2887772538ce7c6357d7ef1ea246c0e564.svg?alt=media) **\[Tablette]** ou ![](https://57104473-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-04b329f4eb244c77b35e32d9988afc78f428a88f%2Fe05ee6fbf869c562df0a7fbc8a38b177082975c06ddf6adcda9d4c00bd0e43ac.svg?alt=media) **\[Mobile]** pour voir comment le microsite apparaîtra sur chaque appareil.
2. Pour entrer en aperçu, sélectionnez ![](https://57104473-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-190c6a03e6a68d67509d00452b10fd803bee5c87%2F57c7cba09bd1b97dd75b7c245e517c8d1ca0469d7c57bdc13ee6e427b75a860a.svg?alt=media) **\[Afficher]** dans la barre de menu supérieure.
3. Pour revenir à l’interface d’édition, sélectionnez ![](https://57104473-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-60e9ace573178da411cb3be9c6f3b0f4b7e5b524%2F4094fadf599e544cfc618c18eb22087defdb9be38a580cd0041a242a88294e1e.svg?alt=media) **\[Modifier]** dans la barre de menu supérieure.
   {% endtab %}

{% tab title="Enregistrez votre microsite" %}
L’éditeur de microsite n’enregistre pas automatiquement vos modifications. Enregistrez fréquemment pour vous assurer de ne pas perdre votre travail.

1. Après avoir effectué toutes les modifications pertinentes, sélectionnez **Enregistrer** dans le coin supérieur droit.
2. Une fois enregistré, les modifications apparaîtront instantanément dans la version en ligne de votre microsite.
   {% endtab %}
   {% endtabs %}
   {% endstep %}
   {% endstepper %}

Consultez notre article sur [Composants de widgets et de microsites expliqués](https://help.impact.com/brand/fr/que-souhaitez-vous-apprendre/advocate-program/manage-advocate-participant-experiences/widget-and-microsite-components-explained) pour en savoir plus sur les aspects composants des microsites et des widgets.