Comment prévisualiser votre site WordPress avant sa mise en ligne

Une chose que nous disons toujours à nos lecteurs : prévisualisez toujours avant de publier. Au fil des ans, nous avons créé et mis à jour des milliers de pages et d'articles WordPress, et la prévisualisation du contenu avant sa mise en ligne est devenue une partie essentielle de notre processus éditorial.

Sauter cette étape peut entraîner des surprises pour vos visiteurs : des mises en page cassées, des images manquantes ou des fautes de frappe. Nous l'avons vécu nous-mêmes, mais vraiment, ces problèmes sont faciles à éviter.

Dans cet article, nous vous présenterons des moyens efficaces de prévisualiser votre site WordPress avant sa mise en ligne. Ainsi, vous pourrez être sûr que votre site a l'apparence et fonctionne exactement comme vous le souhaitez. 🧑‍💻

Voici un aperçu rapide des sujets que nous aborderons dans ce guide. N'hésitez pas à utiliser les liens ci-dessous pour accéder à des sections spécifiques :

• Prévisualiser le site WordPress avant le lancement avec le mode « Bientôt disponible »
• Permettre aux clients de prévisualiser le site WordPress avant la mise en ligne
• Créer un site de staging WordPress pour prévisualiser les modifications
• Prévisualiser les articles et les pages WordPress avant de publier
• Prévisualiser un thème WordPress avant de le changer
• Prévisualiser les personnalisations du thème WordPress
• Prévisualiser votre thème WordPress personnalisé
• Prévisualiser les pages de destination WordPress avant le lancement
• Astuce bonus 🌟 : Détecter les problèmes de conception avec les tests de régression visuelle

Prêt ? Commençons.

Prévisualiser le site WordPress avant le lancement avec le mode « Bientôt disponible »

Si vous créez un nouveau site web WordPress, il est toujours recommandé d'activer le mode « Bientôt disponible » pendant que vous travaillez sur votre site.

Cela vous permet d'afficher une page « Bientôt disponible » appropriée aux visiteurs du site. Vous pourrez toujours vous connecter à l'espace d'administration WordPress et travailler sur votre site web, mais vos visiteurs ne pourront pas le voir.

Le meilleur avantage est que vous pourrez prévisualiser votre site web et effectuer tous les tests nécessaires avant de le mettre en ligne.

Pour ce faire, vous aurez besoin de SeedProd. C'est le meilleur constructeur de sites web WordPress du marché et il vous permet d'afficher facilement une belle page « Bientôt disponible ».

Certaines de nos marques partenaires utilisent SeedProd pour construire leurs sites web. Nous avons vu de première main à quel point cela a bien fonctionné pour eux, et nous avons utilisé l'outil à de nombreuses reprises lorsque nous écrivions des tutoriels pour nos lecteurs.

Si vous souhaitez en savoir plus sur le plugin, consultez notre avis détaillé sur SeedProd.

Tout d'abord, vous devez installer et activer le plugin SeedProd. Pour plus de détails, consultez notre guide étape par étape sur comment installer un plugin WordPress.

Après l'activation, visitez la page SeedProd » Paramètres pour saisir votre clé de licence. Vous trouverez ces informations dans votre compte sur le site web de SeedProd.

Ensuite, accédez à l'écran SeedProd » Pages de destination depuis la zone d'administration WordPress.

À partir d'ici, cliquez simplement sur le bouton « Configurer une page de lancement ».

Après cela, le plugin vous demandera de choisir un modèle pour votre page de lancement.

SeedProd est livré avec plusieurs beaux modèles de lancement qui sont conçus par des professionnels pour augmenter les conversions.

Après avoir choisi un modèle, l'interface du constructeur de pages de SeedProd s'ouvrira à l'écran.

Le constructeur de pages est un outil de conception intuitif. Vous pouvez simplement pointer et cliquer pour modifier n'importe quel élément ou faire glisser et déposer de nouveaux éléments dans votre mise en page depuis la colonne de gauche.

Vous pouvez également ajouter un formulaire d'inscription par e-mail et des boutons de médias sociaux à votre page de lancement afin que vos utilisateurs puissent suivre votre marque avant même le lancement.

Une fois que vous avez terminé la conception de la page, passez à l'onglet Connexion en haut. De là, vous pouvez intégrer votre service de marketing par e-mail pour développer votre liste et informer les gens lorsque votre site sera mis en ligne.

Pour des instructions plus détaillées, vous pouvez consulter notre tutoriel sur comment créer de belles pages 'Bientôt disponible' dans WordPress avec SeedProd.

Une fois que vous avez terminé, cliquez sur le bouton 'Enregistrer' pour stocker vos modifications.

Ensuite, sélectionnez 'Publier' pour rendre votre page 'Bientôt disponible' prête à l'emploi. Ne vous inquiétez pas, elle n'est pas encore active sur votre site Web. Nous le ferons à l'étape suivante.

Vous pouvez maintenant fermer l'interface du constructeur de page, ce qui vous ramènera à l'écran SeedProd » Pages de destination.

Ici, cliquez sur le curseur sous la boîte de la page 'Bientôt disponible' pour la mettre sur 'Actif'. Cela garantira que tous les visiteurs de votre site Web verront votre nouvelle page 'Bientôt disponible' au lieu de votre site Web réel.

Vous pouvez maintenant vous déconnecter de l'espace d'administration WordPress ou visiter votre site Web en mode Incognito.

Vous verrez votre page 'Bientôt disponible' en direct sur votre site Web.

Vous pouvez toujours vous connecter à votre tableau de bord WordPress et continuer à travailler sur votre site Web.

Vous pourrez également prévisualiser votre site Web en direct lorsque vous êtes connecté.

Une fois que vous avez terminé de travailler sur votre site, vous pouvez simplement aller à l'écran SeedProd » Pages de destination pour désactiver votre page 'Bientôt disponible'.

Ici, cliquez sur le curseur 'Actif' pour le remettre sur inactif.

Permettre aux clients de prévisualiser le site WordPress avant la mise en ligne

Si vous travaillez sur des sites web clients, il existe plusieurs façons de permettre facilement aux clients de prévisualiser les modifications sur un site WordPress avant la mise en ligne.

Cependant, la méthode la plus simple consiste à utiliser une page « Bientôt disponible » créée avec SeedProd, comme nous venons de le montrer ci-dessus.

Une fois que vous avez activé le mode « Bientôt disponible », vous devez cliquer sur le bouton « Modifier la page ».

Cela lancera le constructeur de pages sur votre écran, où vous devrez passer à l'onglet « Paramètres de la page ».

Ensuite, cliquez sur la section « Contrôle d'accès ».

À partir de là, vous pouvez créer une URL de contournement et choisir la durée d'expiration de l'URL. N'oubliez pas d'enregistrer vos modifications.

Vos clients peuvent maintenant utiliser l'URL secrète pour contourner la page « Bientôt disponible » et prévisualiser le site web.

Si votre site web est déjà en ligne et que vous souhaitez partager des modifications avec vos clients avant la mise en ligne, nous aborderons cela dans l'étape suivante.

Créer un site de staging WordPress pour prévisualiser les modifications

Il est de pratique courante parmi les professionnels du web de créer un site web de staging afin de pouvoir tester et prévisualiser toutes les modifications avant de les appliquer à un site en direct.

Un site web de staging est un clone privé de votre site web. Il est caché du grand public, ce qui vous donne l'avantage de tester et de prévisualiser vos modifications sur votre serveur en direct.

De nombreuses sociétés d'hébergement WordPress parmi les meilleures proposent un site de staging en 1 clic. Vous pouvez simplement cliquer sur un bouton pour créer un site de staging et synchroniser facilement les modifications que vous apportez avec votre site en direct.

Pour cet article, nous allons vous montrer comment créer un site de staging sur Bluehost.

Bluehost est l'une des plus grandes sociétés d'hébergement au monde et un fournisseur d'hébergement WordPress officiellement recommandé. Ils offrent une fonctionnalité de site de staging en 1 clic à tous leurs clients WordPress.

Tout d'abord, vous devez vous assurer que le plugin Bluehost est installé et activé sur votre site Web. S'il est déjà activé, vous verrez un élément de menu Bluehost en haut du menu d'administration WordPress.

Si vous ne voyez pas le menu Bluehost, vous pouvez vous connecter au panneau de contrôle de votre compte d'hébergement Bluehost et cliquer sur le bouton « Sites Web ».

Après cela, cliquez sur « Paramètres » sur votre site Web.

Dans la zone de gestion du site, passez à l'onglet « Plugins ».

Ensuite, activez le plugin Bluehost.

Une fois que vous vous êtes assuré que le plugin Bluehost est installé, vous êtes prêt à créer votre site de staging.

Depuis la zone d'administration de WordPress, cliquez sur la page du plugin Bluehost et passez à l'onglet « Staging ».

Après cela, cliquez sur « Créer un site de staging ».

Le plugin générera alors votre site Web de staging.

Une fois terminé, vous pouvez cliquer sur « Pas en cours d'édition » pour passer au site de staging et commencer à y travailler.

Vous pouvez maintenant travailler sur votre site Web de staging et voir vos modifications dans un aperçu en direct.

Une fois basculé, vous verrez une notification rouge « Environnement de staging » dans la barre d'administration de WordPress.

Ceci est pour vous aider à faire la différence avec votre site en direct.

Une fois que vous avez terminé de prévisualiser vos modifications sur le site Web de staging, vous pouvez retourner à la page du plugin Bluehost et naviguer vers l'onglet « Staging ».

À partir de là, sélectionnez « Déployer toutes les modifications » et cliquez sur le bouton d'actualisation pour rendre les modifications publiques.

Pour plus de détails et d'instructions pour d'autres environnements d'hébergement, consultez notre guide détaillé sur la façon de créer un site de staging pour WordPress.

Prévisualiser les articles et les pages WordPress avant de publier

WordPress utilise un éditeur de blocs intuitif qui utilise automatiquement le style de votre thème pour afficher un aperçu en direct de vos articles et pages.

Cependant, il peut ne pas vous donner une idée claire de l'apparence d'un article ou d'une page sur votre site Web avec vos en-têtes, barres latérales et tout le reste de la page.

Heureusement, l'éditeur de blocs vous permet également de prévisualiser un article ou une page sans le publier.

Cliquez simplement sur le bouton « Aperçu » dans le coin supérieur droit.

Vous pouvez choisir entre les options de prévisualisation Ordinateur, Tablette et Mobile, mais celles-ci ne vous montreront la prévisualisation qu'à l'intérieur de l'éditeur de contenu.

Après avoir choisi un type d'appareil, cliquez sur l'option « Aperçu dans un nouvel onglet » pour afficher la prévisualisation complète sur votre site Web.

WordPress vous montrera alors un aperçu de votre article ou de votre page avant sa mise en ligne.

Si vous souhaitez accorder à quelqu'un d'autre un accès exclusif pour prévisualiser l'un de vos articles non publiés, consultez notre guide sur comment autoriser les aperçus publics d'articles non publiés dans WordPress.

Prévisualiser un thème WordPress avant de le changer

Normalement, si vous activez un thème WordPress, il est immédiatement mis en ligne sur votre site Web.

Si vous n'utilisez pas de site Web de staging, vos utilisateurs verront le nouveau thème sans aucune personnalisation.

Ne serait-il pas agréable de pouvoir prévisualiser un thème WordPress avant de l'activer sur votre site Web ?

Heureusement, WordPress vous permet de prévisualiser un thème avant de l'activer.

Installez simplement le thème WordPress que vous souhaitez prévisualiser. Pour plus de détails, consultez notre guide sur comment installer un thème WordPress.

Après avoir installé le thème, cliquez sur le lien « Aperçu en direct ».

Alternativement, vous pouvez également visiter la page Apparence » Thèmes et passer votre souris sur un thème installé.

Vous verrez un bouton pour lancer l'aperçu en direct.

WordPress lancera alors le personnaliseur de thème.

Ici, vous verrez un aperçu en direct du thème avec votre contenu actuel.

Le personnaliseur de thème utilisera votre contenu existant et votre menu de navigation. Vous pouvez essayer différents paramètres de thème depuis le panneau de gauche.

Vous pouvez quitter le personnaliseur de thème sans activer le thème. Cependant, cela n'enregistrera pas vos personnalisations.

Si vous êtes satisfait de l'apparence du thème, vous pouvez alors l'activer en cliquant sur le bouton « Activer et publier » en haut du menu.

Besoin d'aide pour changer de thème ? Consultez notre tutoriel sur la façon de changer correctement votre thème WordPress.

Prévisualiser les personnalisations du thème WordPress

Vous souhaitez apporter des modifications à votre thème WordPress mais vous ne savez pas à quoi elles ressembleront sur votre site en direct ?

WordPress offre différentes manières de prévisualiser votre thème WordPress avant d'appliquer ces modifications.

Pour la plupart des thèmes WordPress, vous pouvez prévisualiser vos modifications en utilisant le personnaliseur de thème. Accédez simplement à la page Apparence » Personnaliser pour le lancer.

À partir de là, vous pouvez essayer différentes options de thème, modifier les menus, personnaliser les widgets, ajouter du CSS personnalisé, et plus encore.

Cela vous permet de prévisualiser les modifications du thème sans les appliquer réellement à votre site Web.

Une fois que vous êtes satisfait des modifications que vous avez apportées, vous pouvez cliquer sur le bouton « Publier » pour appliquer ces modifications. Facultativement, vous pouvez également cliquer sur l'icône d'engrenage pour enregistrer vos modifications sous forme de brouillon, planifier vos modifications et partager un lien de prévisualisation avec les clients.

Or, cette méthode peut ne pas être disponible pour les thèmes de blocs WordPress utilisant l'éditeur complet de site.

Dans ce cas, vous pouvez lancer l'éditeur en visitant le menu Apparence » Éditeur.

L'éditeur complet de site vous permet de modifier votre thème WordPress à l'aide de blocs. Vous pouvez modifier des fichiers de modèle individuels avec un aperçu en direct de votre site Web.

Pour plus de détails, vous pouvez consulter notre guide complet sur l'édition complète de site WordPress.

Cependant, contrairement au personnalisateur de thème, vous ne pourrez pas enregistrer vos modifications sous forme de brouillon. Ces modifications seront publiées lorsque vous enregistrerez vos modifications ou seront perdues si vous quittez sans enregistrer.

Prévisualiser votre thème WordPress personnalisé

Voulez-vous créer un thème WordPress entièrement personnalisé avec un aperçu en direct ?

SeedProd est le meilleur constructeur de thèmes WordPress qui vous permet de créer un thème WordPress personnalisé à l'aide d'une interface glisser-déposer avec un aperçu en direct.

Tout d'abord, vous devez installer et activer le plugin SeedProd. Pour plus de détails, consultez notre guide étape par étape sur comment installer un plugin WordPress.

Après l'activation, visitez la page SeedProd » Paramètres pour saisir votre clé de licence. Vous trouverez ces informations dans votre compte sur le site web de SeedProd.

Ensuite, vous devez visiter la page SeedProd » Constructeur de thèmes.

À partir de là, cliquez sur le bouton « Thèmes ».

Cela ouvrira une fenêtre contextuelle où vous pourrez choisir un thème à utiliser comme point de départ.

SeedProd est livré avec un tas de magnifiques thèmes et modèles que vous pouvez personnaliser.

Cliquez simplement pour sélectionner un thème, et SeedProd générera tous les fichiers de modèle de thème pour vous.

Vous pouvez maintenant cliquer sur l'un de ces fichiers de thème pour les modifier dans le constructeur de thème.

SeedProd est livré avec un constructeur intuitif par glisser-déposer qui utilise des blocs et des sections pour créer de superbes mises en page.

Vous pouvez ajouter des blocs à votre conception depuis la colonne de gauche. À votre droite, vous verrez un aperçu en direct et modifiable de votre modèle de thème.

SeedProd offre également une prise en charge complète de WooCommerce.

Cela signifie que vous pouvez concevoir et prévisualiser votre boutique en ligne, y compris les pages de produits, les pages de paiement, et plus encore.

Vous voulez prévisualiser votre thème pour les appareils mobiles ?

Cliquez simplement sur l'icône mobile dans la barre inférieure, et SeedProd affichera l'aperçu mobile de votre thème.

Une fois que vous avez terminé de modifier votre thème, vous pouvez cliquer sur le bouton « Enregistrer » en haut à droite et quitter le constructeur. Vous pouvez ensuite modifier d'autres modèles si nécessaire.

Lorsque vous êtes prêt à déployer votre thème personnalisé, activez simplement le bouton « Activer le thème SeedProd » sur la page du constructeur de thème.

Votre thème personnalisé sera maintenant mis en ligne. Cela signifie qu'il remplacera votre thème WordPress existant.

Pour en savoir plus sur le constructeur de thèmes personnalisés SeedProd, consultez notre tutoriel sur comment créer un thème WordPress personnalisé sans écrire de code.

Prévisualiser les pages de destination WordPress avant le lancement

Les pages de destination sont des pages spécialisées utilisées dans les campagnes marketing. Ces pages sont hautement optimisées pour les conversions et les ventes.

Certains thèmes WordPress sont livrés avec des modèles de pages de destination que vous pouvez personnaliser à l'aide de l'éditeur de blocs.

Cependant, si vous avez besoin de plus d'options de conception, vous aurez besoin de SeedProd. C'est le meilleur constructeur de pages de destination WordPress et il vous permet de créer facilement de belles pages de destination pour votre site Web.

SeedProd est livré avec des dizaines de modèles de pages de destination conçus par des professionnels pour vous aider à démarrer. De plus, vos pages de destination seront aussi belles sur toutes les tailles d'écran.

Tout d'abord, vous devez installer et activer le plugin SeedProd. Après l'activation, vous devez visiter la page SeedProd » Paramètres pour saisir votre clé de licence.

Vous trouverez ces informations dans votre compte sur le site Web de SeedProd.

Ensuite, accédez à l'écran SeedProd » Landing Pages depuis la barre latérale d'administration de WordPress.

Pour commencer à concevoir votre page, cliquez sur le bouton « Ajouter une nouvelle page de destination ».

Ensuite, vous devez choisir un modèle.

Il existe plusieurs modèles hautement optimisés que vous pouvez utiliser comme point de départ, ou vous pouvez commencer avec un modèle vierge.

Cela ouvrira une fenêtre contextuelle où vous devrez entrer un nom pour votre page de destination et choisir un slug d'URL.

Cliquez ensuite sur le bouton « Enregistrer et commencer à modifier la page » pour continuer.

Cela lancera l'interface du constructeur de page.

C'est un outil de conception par glisser-déposer où vous pouvez concevoir votre page avec un aperçu en direct.

Une fois que vous avez terminé de modifier votre page de destination, vous pouvez cliquer sur le bouton « Enregistrer » et sélectionner « Publier » pour la rendre visible sur votre site web.

Pour en savoir plus, consultez notre tutoriel sur comment créer des pages de destination dans WordPress.

Astuce bonus 🌟 : Détectez les problèmes de conception avec les tests de régression visuelle

Vous souhaitez aller plus loin dans la gestion de votre site ? Les tests de régression visuelle vous aident à comparer automatiquement des captures d'écran de votre site web avant et après les modifications.

C'est l'un des meilleurs moyens de détecter les problèmes de conception qui échappent souvent à l'œil humain. Cela inclut les changements de mise en page, les problèmes de police, les incohérences de couleurs ou les problèmes d'espacement qui n'apparaissent que sur certaines pages ou tailles d'écran.

Par exemple, même quelque chose d'aussi petit qu'une mise à jour de plugin peut involontairement casser le style d'un formulaire de contact ou décaler des éléments.

Les outils de régression visuelle mettent en évidence ces différences côte à côte, afin que vous puissiez les repérer et les corriger avant que vos visiteurs ne les remarquent.

La façon la plus simple de commencer est d'utiliser le plugin VRTs pour WordPress. Il vous permet d'exécuter des tests de comparaison visuelle sur des pages ou des modèles spécifiques directement depuis votre tableau de bord — aucun codage requis.

Vous pouvez même l'utiliser sur un site de staging pour tester en toute sécurité les mises à jour avant de les publier. Pour plus de détails, veuillez consulter notre guide complet sur comment effectuer des tests de régression visuelle.

We hope this article helped you learn how to preview your WordPress website before going live. You may also want to see our expert tips for creating a WordPress disaster recovery plan and our ultimate guide to WordPress maintenance.

Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.