---
title: "Site web : cas pratiques"
description: "Votre site Vivlab pas à pas : pages, domaine, ancien site et Google, audience, chat, e-mails, traduction et charte graphique."
url: https://docs.vivlab.com/guides/website
---

# Site web

Choisissez votre situation.

| Votre situation                     | Cas                                                                                         |
| ----------------------------------- | ------------------------------------------------------------------------------------------- |
| Votre site est vide                 | [Premières pages avec l'Assistant Vivlab](#creer-vos-premieres-pages-avec-assistant-vivlab) |
| Une page prête que personne ne voit | [Publier, définir l'accueil](#publier-une-page-et-en-faire-l-accueil)                       |
| Domaine acheté chez OVH, GoDaddy…   | [Brancher un domaine](#brancher-un-domaine-achete-ailleurs)                                 |
| Pas encore de domaine               | [Acheter un domaine](#acheter-votre-domaine-depuis-vivlab)                                  |
| Vous remplacez un ancien site       | [Garder votre référencement](#quitter-un-ancien-site-sans-perdre-google)                    |
| Personne ne vous trouve sur Google  | [Être mieux vu sur Google](#etre-mieux-vu-sur-google)                                       |
| Mesurer visites et publicités       | [Analytics et pixel Meta](#installer-google-analytics-et-le-pixel-meta)                     |
| Bandeau de cookies obligatoire      | [Bandeau de cookies](#afficher-un-bandeau-de-cookies)                                       |
| Discuter en direct avec vos clients | [Chat en ligne](#ajouter-un-chat-en-ligne)                                                  |
| Des inscrits à votre newsletter     | [Pop-up d'inscription](#collecter-des-e-mails-avec-un-pop-up)                               |
| Recevoir des demandes de devis      | [Formulaire de contact](#recevoir-les-messages-d-un-formulaire-de-contact)                  |
| Des clients étrangers               | [Traduire le site](#traduire-le-site-en-anglais)                                            |
| Nouvelle charte graphique           | [Couleurs, polices, logo](#changer-les-couleurs-les-polices-et-le-logo)                     |
| Une page d'erreur sans issue        | [Page 404](#personnaliser-la-page-404)                                                      |

## Créer vos premières pages avec l'Assistant Vivlab {#creer-vos-premieres-pages-avec-assistant-vivlab}

**Exemple** : une fleuriste veut un accueil, une page « Nos bouquets » et une page contact.

<DocsSteps>

1. Dans **Site web > Pages**, cliquez sur **Créer une page**, puis **Générer avec l’assistant Vivlab**.
2. Écrivez : « Fleuriste à Lyon, bouquets de saison et mariages. Crée un accueil, une page Nos bouquets et une page Contact avec formulaire, ton chaleureux. » Joignez deux photos de la boutique.
3. Patientez 2 à 3 minutes, onglet ouvert, puis demandez vos retouches (« titre de l'accueil : Fleurs de saison, livrées à Lyon »).
4. Cliquez sur **Enregistrer**, gardez les trois pages cochées dans **Enregistrer les pages** et validez.

</DocsSteps>

**Résultat** : trois pages inactives, aux couleurs du thème ; la première s'ouvre dans l'éditeur. Sinon, partez d'un modèle (**Utiliser un modèle**, filtre par activité, **Utiliser ce modèle**) ou collez l'adresse d'une ancienne page dans la discussion pour la reproduire.

Pour aller plus loin : [Pages](https://docs.vivlab.com/sections/pages.md#creer-une-page-avec-assistant-vivlab).

## Publier une page et en faire l'accueil

**Exemple** : la page « Accueil » générée doit s'afficher sur `fleurs-lyon.fr`.

<DocsSteps>

1. Dans l'éditeur, cliquez dans une zone vide (panneau **Page**) et activez **Rendre la page visible** et **Définir comme page d'accueil**.
2. Cliquez sur **Actualiser la page**, vérifiez l'aperçu ordinateur et mobile, cliquez sur **Continuer**, puis sur **Publier**.
3. Faites de même pour les autres pages (sans l'accueil), puis ajoutez-les au menu avec l'élément [Navigation](https://docs.vivlab.com/editor/menu/navigation.md) de la barre du haut.

</DocsSteps>

**Résultat** : l'accueil s'affiche à l'adresse principale, le reste via le menu. Pour retirer une page : désactivez **Rendre la page visible**, puis **Dépublier**. Sans abonnement, le site se limite à une page web sur l'adresse en vivlabsite.com.

Pour aller plus loin : [Pages](https://docs.vivlab.com/sections/pages.md#mettre-une-page-en-ligne).

## Brancher un domaine acheté ailleurs

**Exemple** : `fleurs-lyon.fr` acheté chez OVH, en gardant `contact@fleurs-lyon.fr`.

<DocsSteps>

1. Dans **Site web > Nom de domaine**, cliquez sur **Ajouter un nom de domaine**, **Connecter un domaine existant**, **Continuer**, saisissez `fleurs-lyon.fr` (sans `www`) et validez avec **Ajouter un nom de domaine**.
2. Dans la **zone DNS** du domaine chez OVH (ou GoDaddy, IONOS…), ajoutez un `A` (nom `@`, valeur `15.188.109.135`) et un `CNAME` (nom `www`, valeur `fleurs-lyon.fr`).
3. Supprimez les `AAAA` sur `@` et `www` et les autres `A` ou `CNAME` marqués **À supprimer**. Ne touchez pas aux `MX` (votre messagerie).
4. Sur Vivlab, cliquez sur **Suivant** et attendez **Votre nom de domaine est connecté.**

</DocsSteps>

**Résultat** : sous 10 à 15 minutes en général (48 h au plus), le site s'affiche en HTTPS sur `fleurs-lyon.fr` et `www.fleurs-lyon.fr`. Vos e-mails restent chez OVH.

Pour aller plus loin : [Nom de domaine](https://docs.vivlab.com/sections/domains.md#enregistrements-dns-a-configurer).

## Acheter votre domaine depuis Vivlab

**Exemple** : vous voulez `atelier-ceramique.fr`, réglé pour 2 ans.

<DocsSteps>

1. Dans **Site web > Nom de domaine**, cliquez sur **Ajouter un nom de domaine**, **Acheter un nouveau domaine**, puis **Continuer**.
2. Recherchez `atelier-ceramique.fr`, cliquez dessus s'il est **Disponible** (sinon dans **Autres domaines disponibles**), puis **Suivant**.
3. Renseignez le **Propriétaire** (vous ou votre société), choisissez une **Durée d'enregistrement** de 2 ans, vérifiez la carte, cochez la confirmation et cliquez sur **Acheter le domaine**.

</DocsSteps>

**Résultat** : quelques minutes après le paiement, le domaine est branché et sécurisé, sans réglage DNS. Il se renouvelle automatiquement, après un e-mail d'avertissement environ 90 jours avant.

Pour aller plus loin : [Nom de domaine](https://docs.vivlab.com/sections/domains.md#acheter-un-nom-de-domaine).

## Quitter un ancien site sans perdre Google

**Exemple** : l'ancien WordPress de `fleurs-lyon.fr` avait `/bouquets-mariage/` et `/contact.html`, bien placées sur Google, qui deviennent `/mariages` et `/contact`.

<DocsSteps>

1. Recréez vos pages (l'[Assistant Vivlab](https://docs.vivlab.com/sections/pages.md#creer-une-page-avec-assistant-vivlab) reproduit une ancienne page dont vous collez l'adresse).
2. Listez les anciennes adresses visitées (Search Console ou sitemap de l'ancien site).
3. Dans **Site web > Redirections**, ajoutez une règle **301 · Permanente** par adresse : `/bouquets-mariage/` vers `/mariages`, `/contact.html` vers `/contact`, plus la version sans barre finale (`/bouquets-mariage`) si l'ancien site en utilisait. Enregistrez.
4. Publiez vos pages, [connectez le domaine](#brancher-un-domaine-achete-ailleurs), puis Search Console dans **Paramètres SEO**, et testez quelques anciennes adresses.

</DocsSteps>

**Résultat** : les liens de Google et d'ailleurs arrivent sur vos nouvelles pages, qui reprennent le référencement acquis. Pas de règle générique (`/blog/*`) ni d'import de fichier : une règle par adresse, avec un abonnement actif.

Pour aller plus loin : [Redirections](https://docs.vivlab.com/sections/redirects.md#garder-votre-referencement-en-quittant-un-ancien-site).

## Être mieux vu sur Google

**Exemple** : en ligne depuis un mois, `fleurs-lyon.fr` n'apparaît pas pour « fleuriste Lyon mariage ».

<DocsSteps>

1. Connectez un domaine personnalisé : Google n'indexe pas l'adresse en vivlabsite.com.
2. Dans **Site web > Paramètres SEO**, **Connecter mon compte Google** puis **Configurer automatiquement** (site vérifié, sitemap soumis). Dans **Format du titre des pages**, mettez « Fleurs de Lyon » en **Nom de la marque** et enregistrez.
3. Dans le panneau **Page** de chaque page importante, rédigez **Titre de la page** et **Description SEO de la page** avec vos mots-clés (ou **Générer avec l’assistant Vivlab**), puis publiez.
4. Dans **Audit SEO**, cliquez sur **Lancer l'audit**, puis corrigez d'abord le point **À corriger en priorité** de chaque page.

</DocsSteps>

**Résultat** : Google connaît vos pages. La carte Search Console montre clics et requêtes après quelques jours.

Pour aller plus loin : [Paramètres SEO](https://docs.vivlab.com/sections/seo.md) et [Audit SEO](https://docs.vivlab.com/sections/seo-audit.md).

## Installer Google Analytics et le pixel Meta

**Exemple** : suivre visites et achats de vos publicités Instagram.

<DocsSteps>

1. Copiez l'ID de mesure `G-XXXXXXXXXX` d'un flux **Web** Google Analytics, et l'ID du pixel créé dans le Gestionnaire d'événements Meta (**Connecter des sources de données**, **Web**).
2. Dans **Site web > Extensions marketing**, cliquez sur **Configurer** sur **Google Analytics 4**, collez l'ID et **Valider**. Idem sur **Pixel Facebook**.
3. Cliquez sur **Enregistrer** en haut de la page.

</DocsSteps>

**Résultat** : les deux lignes passent à **Actif** ; un bandeau de cookies s'affiche et les outils se chargent après **OK pour moi**. Test du pixel : acceptez les cookies sur votre site, puis regardez l'onglet **Événements de test** de Meta.

Pour aller plus loin : [Extensions marketing](https://docs.vivlab.com/sections/plugins.md#google-analytics-4).

## Afficher un bandeau de cookies

**Exemple** : accord des visiteurs avant tout suivi publicitaire. Rien à activer : le bandeau s'affiche dès que Google Analytics 4, Google Tag Manager ou le pixel Facebook est actif dans les [Extensions marketing](https://docs.vivlab.com/sections/plugins.md#bandeau-de-cookies).

<DocsSteps>

1. Configurez vos outils de suivi dans **Extensions marketing**, plutôt que dans **Codes**.
2. Ouvrez le site en navigation privée pour le voir.

</DocsSteps>

**Résultat** : le bandeau propose **Non merci** et **OK pour moi** ; les trois outils attendent l'accord. Son texte est fixe, en français. Les scripts de **Codes** n'en dépendent pas : pour un bandeau personnalisé ou un gestionnaire de consentement complet, installez un service spécialisé avec un [code](https://docs.vivlab.com/sections/codes.md) et gérez-y vos outils.

Pour aller plus loin : [Extensions marketing](https://docs.vivlab.com/sections/plugins.md#bandeau-de-cookies).

## Ajouter un chat en ligne

**Exemple** : la bulle Crisp sur toutes vos pages. Le chat n'a pas de ligne dans les extensions marketing : passez par **Codes**.

<DocsSteps>

1. Dans Crisp (ou Tawk.to, Tidio…), copiez la balise `<script>` d'installation complète.
2. Dans **Site web > Codes**, cliquez sur **Créer un code** et nommez-le « Chat Crisp ».
3. Choisissez le **Type de code** **Javascript** et l'emplacement **Dans la balise head**, collez le code et enregistrez.

</DocsSteps>

**Résultat** : la bulle apparaît partout. Pour la couper un temps, désactivez le code.

Pour aller plus loin : [Codes](https://docs.vivlab.com/sections/codes.md#ajouter-un-widget-de-chat-ou-un-script-tiers).

## Collecter des e-mails avec un pop-up

**Exemple** : -10 % contre une inscription à la newsletter, au plus une fois par semaine et par visiteur.

<DocsSteps>

1. Créez le code dans [Boutique > Coupons](https://docs.vivlab.com/sections/coupons.md).
2. Dans **Site web > Pop-up**, cliquez sur **Créer un pop-up**, **Utiliser un modèle**, catégorie **Newsletter**, **Utiliser ce modèle**. Gardez le [formulaire](https://docs.vivlab.com/editor/menu/form.md) et écrivez « -10 % sur votre première commande ».
3. Dans le panneau **Pop-up** : cibles **Tout le site**, déclencheur **Après un délai** de 10 secondes, fréquence **Tous les X jours** à 7. Cliquez sur **Publier le pop-up**.

</DocsSteps>

**Résultat** : les inscriptions arrivent dans **Site web > Contacts** et par e-mail. Vivlab n'envoie ni newsletter ni code : répondez avec le code, ou exportez les adresses (**Plus d'actions > Exporter en fichier CSV**) vers votre outil d'e-mailing.

Pour aller plus loin : [Pop-up](https://docs.vivlab.com/sections/popups.md#creer-un-pop-up-d-inscription-a-la-newsletter).

## Recevoir les messages d'un formulaire de contact

**Exemple** : des demandes de devis avec nom, téléphone et description des travaux.

<DocsSteps>

1. Dans l'éditeur, ajoutez un élément [Formulaire](https://docs.vivlab.com/editor/menu/form.md) à la page **Contact**.
2. Gardez nom, e-mail, téléphone, ajoutez « Décrivez vos travaux » et publiez.

</DocsSteps>

**Résultat** : chaque demande arrive par e-mail sur l'adresse du compte (répondre écrit au client) et reste dans **Site web > Contacts** avec sa page d'origine ; **Répondre** ouvre un e-mail pré-rempli. Pour couper l'e-mail, gardant les messages, désactivez **Formulaires de votre site** dans le volet [Notifications](https://docs.vivlab.com/sections/preferences.md#formulaires-de-votre-site) de vos paramètres.

Pour aller plus loin : [Contacts](https://docs.vivlab.com/sections/contacts.md).

## Traduire le site en anglais

**Exemple** : une version anglaise, sans traduire le nom « Maison Lillet ».

<DocsSteps>

1. Dans **Site web > Traductions**, cliquez sur **Commencer** et ajoutez « Anglais » dans **Ajouter une langue**.
2. Dans **Terminologies personnalisées**, **Ajouter une terminologie** : « Maison Lillet » dans toutes les colonnes. Enregistrez et confirmez.
3. Dans l'éditeur, ajoutez l'élément **Menu langue** à la barre de navigation et publiez.

</DocsSteps>

**Résultat** : sous 24 heures, pages, produits, articles et e-mails sont traduits sur `/en`, et chaque nouvelle publication l'est à son tour. La traduction est automatique : vous imposez des termes, sans retoucher un texte traduit. Le nombre de langues dépend de votre offre.

Pour aller plus loin : [Traductions](https://docs.vivlab.com/sections/translations.md).

## Changer les couleurs, les polices et le logo

**Exemple** : nouvelle charte en vert sapin `#1F4D3A`, police Playfair pour les titres, nouveau logo.

<DocsSteps>

1. Dans **Site web > Thèmes**, ouvrez **Logo, couleurs et polices**. Dans **Identité**, importez le logo dans **Logo principal** ; dans **Couleurs**, réglez la **Couleur d'accentuation** sur `#1F4D3A`.
2. Toujours dans **Couleurs**, ajoutez `#1F4D3A` à la **Palette de couleurs**, puis dans **Typographie** choisissez Playfair pour **Titre** et **Sous-titre**. Cliquez sur **Enregistrer**.
3. Revenez à la page **Thèmes** et survolez les vignettes pour vérifier vos pages.

</DocsSteps>

**Résultat** : logo, boutons d'action, liens et titres qui suivent le thème changent partout ; les couleurs posées sur un élément précis se modifient dans l'éditeur.

Pour aller plus loin : [Logo, couleurs et polices](https://docs.vivlab.com/sections/themes-brands.md).

## Personnaliser la page 404

**Exemple** : une page d'erreur à votre ton, avec photo et recherche de produits.

<DocsSteps>

1. Dans **Site web > Thèmes**, ouvrez **Page introuvable (404)**, cliquez sur le fond, puis dans **Modèles** sur **Changer** : choisissez **Avec recherche** et confirmez avec **Remplacer**.
2. Remplacez le **Titre** par « Ce bouquet a fané » et le **Texte** par votre message, et ajoutez une image.
3. Cliquez sur **Publier la mise en page**.

</DocsSteps>

**Résultat** : un lien cassé mène à votre page, avec menu, pied de page, retour à l'accueil et recherche dans le catalogue. Pour une ancienne adresse, préférez une [redirection](https://docs.vivlab.com/sections/redirects.md).

Pour aller plus loin : [Pages introuvables](https://docs.vivlab.com/sections/themes-not-found.md), avec un texte propre aux produits, catégories et articles introuvables.