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

Une chose que nous disons toujours à nos lecteurs est de toujours prévisualiser 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 désagréables pour vos visiteurs, comme 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 Web WordPress avant sa mise en ligne afin que vous puissiez être sûr que votre site a l'apparence et fonctionne exactement comme vous le souhaitez. 🧑‍💻

Voici un bref aperçu 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ê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 bon d'activer le mode « Bientôt disponible » pendant que vous travaillez sur votre site.

Cela vous permet d'afficher une page professionnelle « Bientôt disponible » à vos visiteurs. Vous pourrez toujours vous connecter à la zone d'administration de WordPress et travailler sur votre site Web, mais vos visiteurs ne pourront pas le voir.

Le meilleur, c'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 créer 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 lors de la rédaction de tutoriels pour nos lecteurs.

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

Pour commencer, vous devrez créer un compte SeedProd. Sur le site Web SeedProd, cliquez sur le bouton « Obtenir SeedProd maintenant », choisissez un plan et terminez le processus de paiement.

Une fois cela fait, vous aurez votre propre tableau de bord de compte SeedProd, où vous pourrez trouver votre fichier zip et votre clé de licence SeedProd Pro.

Ensuite, vous devez installer et activer le plugin SeedProd.

Depuis votre panneau d'administration WordPress, allons dans Plugins » Ajouter un nouveau plugin.

Ensuite, utilisez la barre de recherche pour trouver rapidement le plugin.

Dans le résultat de recherche, cliquez simplement sur le bouton « Installer maintenant », puis sur « Activer » pour l'activer sur votre site.

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 de là, cliquez simplement sur le bouton « Configurer une page « Bientôt disponible » ».

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.

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é de concevoir la page, passez à l'onglet « Connecter » en haut. À partir 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 commutateur sous la boîte de la page « Bientôt disponible » pour la régler sur « Actif ». Cela garantit que tous vos visiteurs verront votre nouvelle page « Bientôt disponible » au lieu de votre site Web réel.

Vous pouvez maintenant vous déconnecter de la zone d'administration WordPress ou visiter votre site Web dans une fenêtre de navigation privée/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 moyens simples de permettre aux clients de prévisualiser les modifications avant leur 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 d'ici, vous pouvez créer une URL de contournement et choisir la durée pendant laquelle l'URL doit rester active. 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. Cela leur permet de voir votre progression sans que vous ayez à créer un compte utilisateur pour eux.

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. Il est caché du public, vous permettant de tester et de prévisualiser les 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é par WordPress.org. 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. De là, cliquez 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 avez confirmé que le plugin Bluehost est installé et actif, 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 appliquer les modifications en direct.

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, cela ne vous donnera peut-être pas une idée claire de l'apparence d'un article ou d'une page sur votre site avec vos en-têtes, barres latérales et autres éléments de mise en 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 d'aperçu Bureau, Tablette et Mobile. Nous vous recommandons de toujours vérifier l'aperçu Mobile pour vous assurer que votre contenu s'affiche correctement sur les petits écrans.

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.

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

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 personnalisateur de thème.

Ici, vous verrez un aperçu en direct du thème en utilisant 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 n'êtes pas sûr de leur apparence sur votre site en direct ?

WordPress offre plusieurs façons de prévisualiser les modifications de votre thème avant de les appliquer.

Pour la plupart des thèmes WordPress, vous pouvez prévisualiser vos modifications en utilisant le personnalisateur de thème. Allez simplement sur 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 en direct.

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.

Cependant, notez que le personnaliseur de thème n'est pas disponible pour les thèmes de blocs WordPress.

Si vous utilisez un thème de blocs, vous pouvez lancer l'éditeur en visitant le menu Apparence » Éditeur.

L'éditeur de site complet vous permet de modifier votre thème WordPress en utilisant des 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.

Gardez simplement à l'esprit que l'éditeur de site applique les modifications directement à votre conception.

Contrairement au personnaliseur de thème, il n'y a pas de bouton « Enregistrer le brouillon », vos modifications seront donc en direct sur votre site dès que vous cliquerez sur le bouton Enregistrer (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, sans écrire de code ?

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 visuelle 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 une collection 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 comprend 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 l'apparence de votre thème sur 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 et 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 à forte conversion 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 construire 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 passent souvent inaperçus lors des revues manuelles. Cela inclut les décalages de mise en page, les problèmes de polices, les discordances 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.

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

FAQ : Prévisualiser un site WordPress avant sa mise en ligne

Voyons quelques réponses rapides aux questions courantes que les lecteurs posent souvent sur les tests ou la création d'un site en privé.

Comment tester un thème WordPress sans le mettre en ligne ?

Le moyen le plus simple est d'utiliser un site de staging. La plupart des hébergeurs WordPress proposent un staging en un clic, vous pouvez donc installer des thèmes, personnaliser des mises en page et prévisualiser les modifications sans affecter votre site en direct.

Comment travailler sur un site WordPress sans le mettre en ligne ?

Vous avez plusieurs options : utiliser un site de staging pour construire, éditer et tester en privé, créer un site local sur votre ordinateur, ou mettre votre site en mode maintenance avec un plugin afin que les visiteurs ne voient pas les pages inachevées pendant que vous travaillez.

Combien de temps faut-il pour qu'un site WordPress soit en ligne ?

Si votre domaine est déjà connecté à votre compte d'hébergement, un site peut être en ligne presque instantanément. Si vous mettez à jour le DNS ou changez d'hébergeur, cela peut prendre quelques heures (jusqu'à 24-48 heures) pour que les modifications se propagent entièrement dans le monde entier.

Peut-on lancer un site web WordPress en 2 heures ?

Oui, c'est possible, surtout si vous utilisez un thème prêt à l'emploi ou un modèle de démarrage. Vous pouvez configurer l'hébergement, installer WordPress, choisir un thème et publier un site de base en quelques heures. Cela peut prendre plus de temps si vous souhaitez des conceptions personnalisées, des fonctionnalités avancées ou plusieurs pages.

Prochaines étapes pour améliorer la gestion de votre site WordPress

Nous espérons que cet article vous a aidé à apprendre comment prévisualiser votre site web WordPress avant de le mettre en ligne.

Vous voudrez peut-être aussi consulter nos guides d'experts sur :

• Les types de publications personnalisées WordPress les plus utiles
• Comment retirer une page WordPress de la publication (méthodes simples)
• Comment ajouter ou supprimer des capacités aux rôles d'utilisateur dans WordPress
• Comment créer un plan de reprise après sinistre pour WordPress
• Guide ultime de la maintenance WordPress

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.