Si vous publiez des modifications de WordPress sans les prévisualiser, vous prenez un risque important. Une mise en page défectueuse ou une coquille oubliée peut instantanément nuire à la perception de votre site par les internautes.
Je prévois toujours les mises à jour avant de les mettre en ligne, qu'il s'agisse d'un petit changement de texte ou d'une refonte complète du thème. Cela ne prend qu'une minute et m'a permis d'éviter des erreurs plus souvent qu'à mon tour.
Dans ce guide, je vous montrerai les moyens les plus rapides de prévisualiser votre site WordPress afin que vous puissiez le lancer en toute confiance.
- 1. Prévisualiser WordPress avant son lancement avec le mode Coming Soon
- 2. Permettre aux clients de prévisualiser leur site avant de le mettre en ligne
- 3. Prévisualiser les articles et les pages avec l'éditeur de WordPress
- 4. Prévisualiser un thème WordPress avec Live Preview
- 5. Prévisualisation des personnalisations avec Live Customizer
- 6. Prévisualiser les pages d'atterrissage de WordPress avec SeedProd
- 7. Prévisualiser votre thème WordPress avec SeedProd
- 8. Prévisualiser le travail de développement à l'aide d'environnements de mise en scène
1. Prévisualiser WordPress avant son lancement avec le mode Coming Soon
Si vous construisez un nouveau site, activez une page "coming soon" pour que les visiteurs puissent voir un espace réservé pendant que vous travaillez. Vous pouvez toujours vous connecter, prévisualiser les modifications et tout tester avant la mise en ligne.
Pour le faire facilement, utilisez SeedProd. C'est le meilleur constructeur de site web WordPress qui vous permet de créer une belle page "coming soon" et de garder votre vrai site privé jusqu'à son lancement.
Tout d'abord, installez et activez SeedProd sur votre site WordPress. Si vous utilisez la version Pro, entrez votre clé de licence sous SeedProd " Settings.
Ensuite, allez dans SeedProd " Landing Pages et cliquez sur Set up a Coming Soon page.
À partir de là, choisissez un modèle qui vous plaît, puis personnalisez-le avec votre logo, votre message et d'autres éléments tels qu'un formulaire d'inscription par courriel ou des liens sociaux.
Vous pouvez également connecter votre fournisseur de messagerie sous l'onglet Connecter afin de commencer à collecter des abonnés avant le lancement.
Enregistrez et publiez votre page "Coming Soon", puis, de retour sur l'écran " Landing Pages ", basculez le mode "Coming Soon" sur " Active".
A partir de maintenant, les visiteurs verront votre page "coming soon". Les administrateurs connectés voient le site réel et peuvent prévisualiser les changements sur desktop et mobile.
Lorsque vous êtes prêt à lancer votre site, retournez simplement à SeedProd et désactivez le bouton. Votre site sera mis en ligne instantanément.
Si vous avez besoin de plus de détails, voici le guide complet sur la façon de créer une page "coming soon" dans WordPress avec SeedProd.
2. Permettre aux clients de prévisualiser leur site avant de le mettre en ligne
Si vous construisez un site web pour un client, vous aurez besoin d'un moyen simple de partager les progrès réalisés sans rendre le site public trop tôt.
Certains plans d'hébergement incluent des liens d'essai, mais pas tous. C'est pourquoi l'option la plus simple est d'utiliser SeedProd. En plus de cacher votre site en cours derrière une page "coming soon", il vous offre des contrôles d'accès puissants pour partager des aperçus privés.
Par exemple, vous pouvez créer une page "coming soon" de marque pour les visiteurs, puis envoyer à votre client un lien de contournement secret pour qu'il puisse consulter le site complet pendant que vous continuez à apporter des modifications.
Voici comment mettre en place des aperçus de clients dans SeedProd.
Tout d'abord, suivez les instructions ci-dessus pour créer une page "coming soon".
Ensuite, cliquez sur l'onglet Paramètres de la page en haut de la page dans l'éditeur.
Cliquez maintenant sur l'intitulé Contrôle d'accès pour voir les différentes façons d'autoriser les clients à prévisualiser le site web.
La façon la plus simple de le faire est d'utiliser l'option URL de contournement . Vous pouvez saisir une phrase dans cette zone et donner à vos clients une URL secrète qui contourne votre page "coming soon".
Ils peuvent ainsi visualiser l'évolution de leur site avant de le dévoiler au public.
3. Prévisualiser les articles et les pages avec l'éditeur de WordPress
WordPress possède des tonnes de fonctionnalités utiles qui échappent facilement à l'utilisateur moyen, même si elles se trouvent sous ses yeux. L'une d'entre elles est la prévisualisation du site.
Lorsque vous créez ou mettez à jour un nouvel article ou une nouvelle page dans WordPress, ne vous dirigez pas directement vers le bouton Publier. Sélectionnez plutôt le lien Aperçu en haut de l'éditeur de WordPress.
En cliquant sur ce lien, vous pouvez prévisualiser votre contenu WordPress sur :
- Bureau
- Tablette
- Mobile
Vous pouvez même prévisualiser votre site WordPress dans un nouvel onglet du navigateur.
Si vous n'êtes pas satisfait de vos modifications, vous pouvez cliquer sur le bouton Annuler de la barre d'outils.
Vous pouvez également cliquer sur l'option Révisions dans le panneau de droite pour comparer différentes versions de votre contenu.
À partir de là, vous pouvez restaurer une version précédente et cliquer sur publier.
Ces options WordPress sont inestimables une fois que l'on sait où elles se trouvent. Mais, comme nous l'avons mentionné précédemment, elles ne sont pas toujours évidentes.
4. Prévisualiser un thème WordPress avec Live Preview
Parfois, ce n'est pas le contenu que vous souhaitez modifier dans WordPress, mais l'ensemble de votre thème WordPress. Il se peut que votre thème actuel soit obsolète ou que vous souhaitiez donner un nouveau look à votre site web.
Quelle que soit la raison, vous aurez besoin d'un moyen de prévisualiser votre nouveau thème WordPress avant de l'activer sur votre site. Sinon, il sera difficile de savoir si le design est adapté à votre contenu spécifique et aux paramètres de WordPress et s'il fonctionne correctement.
Pour prévisualiser un thème dans WordPress, naviguez vers Apparence " Thèmes dans votre zone d'administration WordPress. Vous verrez alors tous les thèmes que vous avez actuellement installés.
Pour voir à quoi ressemblerait un thème différent, passez votre souris sur la vignette du thème et cliquez sur le bouton " Live Preview".
WordPress ouvrira alors un aperçu de votre site web tel qu'il apparaîtra avec le nouveau thème.
À partir de là, vous pouvez consulter les différents paramètres du thème (nous y reviendrons plus tard) et cliquer sur le bouton Activer & Publier pour rendre le thème actif sur votre site web.
Si l'aperçu ne vous convient pas, vous pouvez toujours cliquer sur le bouton Modifier dans le panneau de gauche.
Cela vous permet de choisir un thème différent à prévisualiser parmi tous les thèmes installés sur votre site web.
Vous pouvez également cliquer sur l'option WordPress.org pour voir les centaines de thèmes WordPress gratuits disponibles dans le référentiel de thèmes de WordPress.
Dans ce panneau, vous pouvez installer n'importe quel thème et suivre les étapes ci-dessus pour le prévisualiser sur votre site web.
5. Prévisualisation des personnalisations avec Live Customizer
Supposons que vous soyez satisfait de votre thème WordPress, mais que vous souhaitiez apporter quelques modifications pour rendre votre site plus convivial. Vous souhaitez peut-être ajouter des widgets à votre barre latérale ou n'afficher que les articles de votre blog sur votre page d'accueil.
En général, vous devez modifier manuellement ces paramètres en allant dans Réglages " Lecture depuis votre tableau de bord WordPress.
Ou Appearance " Widgets pour ajouter des widgets à votre barre latérale.
Mais il existe un moyen plus simple de modifier ces paramètres et de voir un aperçu de vos changements en temps réel. Il s'agit du Customizer de WordPress.
Vous pouvez accéder au Customizer depuis n'importe quel endroit de votre site WordPress. Si vous êtes sur la page d'accueil de votre site, cliquez sur Personnaliser dans la barre d'outils supérieure.
Et si vous êtes dans le backend de votre site web, vous pouvez naviguer vers Apparence " Personnaliser.
Après avoir cliqué sur l'option Personnaliser, la version actuelle de votre site web s'ouvre sur un nouvel écran.
Dans le panneau de gauche se trouvent tous les paramètres de votre site web, y compris :
- Identité du site
- Apparence
- En-tête
- Menus
- Widgets
- Paramètres de la page d'accueil
- CSS supplémentaire
- Et plus encore
Sur la droite se trouve un aperçu en direct de votre site web. Vous pouvez voir en temps réel toutes les modifications que vous apportez aux paramètres de votre site sur votre aperçu.
Par exemple, pour ajouter un nouveau widget à votre site, cliquez sur l'en-tête Widgets et choisissez une barre latérale à laquelle ajouter votre widget.
Cliquez ensuite sur le bouton Ajouter un widget pour choisir parmi les widgets disponibles sur votre site.
Après avoir cliqué pour choisir un widget, celui-ci apparaît instantanément dans votre panneau des widgets et dans l'aperçu de votre site web.
L'ensemble de ce processus vous permet de personnaliser et de prévisualiser votre site WordPress avant de publier les modifications et de le mettre en ligne. N'oubliez pas de cliquer sur Publier lorsque vous êtes satisfait de l'apparence de votre site.
6. Prévisualiser les pages d'atterrissage de WordPress avec SeedProd
De nombreux propriétaires de sites web souhaitent augmenter le nombre de prospects et de ventes de leur entreprise. La meilleure façon d'y parvenir est d'adopter une stratégie de marketing numérique efficace et de créer des pages d'atterrissage à fort potentiel de conversion.
Pourtant, de nombreux plugins de pages d'atterrissage n'offrent pas de moyen simple de prévisualiser vos créations avant de les mettre en ligne. S'ils le font, ils ne proposent pas de fonctionnalités essentielles telles que la prévisualisation mobile et l'édition en direct.
Si vous souhaitez créer des pages d'atterrissage réussies dans WordPress et voir facilement une démo instantanée, nous vous suggérons d'utiliser SeedProd.
Avec des tonnes de modèles de pages d'atterrissage polyvalents, vous pouvez commencer rapidement. Et vous pouvez personnaliser chaque élément de la page pour obtenir un maximum de prospects pour votre entreprise.
Suivez ce guide pour apprendre à créer une page d'atterrissage avec SeedProd.
Une fois que vous avez terminé la conception de votre page d'atterrissage, cliquez sur l'icône Aperçu mobile en bas de l'écran.
Cela ouvre une démo en direct de votre page d'atterrissage sur mobile. À partir de là, vous pouvez prévisualiser la version mobile de votre page d'atterrissage et apporter des modifications jusqu'à ce qu'elle soit conforme à vos attentes.
Pour revenir à l'aperçu du bureau, il suffit de cliquer sur la même icône.
Vous pouvez également prévisualiser l'ensemble de votre page d'atterrissage dans un nouvel onglet du navigateur. Cliquez d'abord sur le bouton vert Enregistrer pour enregistrer vos dernières modifications, puis cliquez sur le bouton Prévisualiser.
L'aperçu de votre page d'atterrissage s'ouvre maintenant dans un nouvel onglet pour que vous puissiez voir à quoi elle ressemble.
7. Prévisualiser votre thème WordPress avec SeedProd
Outre la création de pages d'atterrissage, SeedProd comprend également un puissant générateur de thèmes WordPress. Il utilise la même fonctionnalité de glisser-déposer que le constructeur de pages, ce qui vous permet de créer des thèmes WordPress personnalisés sans avoir à écrire de code ou à embaucher un développeur.
Cela signifie également que vous n'aurez pas besoin de télécharger et d'installer des fichiers de thème WordPress séparés : vous pouvez faire tout cela avec un plan SeedProd Pro.
Avec SeedProd, vous pouvez créer tous les éléments qui composent la mise en page d'un thème WordPress. Il suffit de choisir un modèle de thème prédéfini dans la bibliothèque.
Vous pouvez ensuite modifier les conditions d'affichage et les éléments du thème en fonction des besoins de votre site web.
À partir de là, vous pouvez personnaliser chaque section de votre thème dans l'éditeur visuel, comme vous l'avez fait pour votre page d'atterrissage.
Lorsque vous êtes satisfait du design et de la mise en page de votre thème, vous pouvez le visualiser dans l'outil de prévisualisation des sites Web mobiles et de bureau de SeedProd.
Tout comme pour le constructeur de pages, vous pouvez désactiver la visibilité de différents éléments pour les mises en page mobiles et de bureau.
8. Prévisualiser le travail de développement à l'aide d'environnements de mise en scène
Les méthodes ci-dessus sont un excellent moyen de prévisualiser les modifications mineures apportées à votre site WordPress. Mais si vous prévoyez des mises à jour importantes, ou si vous travaillez sur un projet de développement pour un client, vous aurez besoin de quelque chose d'un peu plus avancé.
Dans ce cas, nous suggérons d'utiliser un site de transit, également appelé site de développement.
Un site de démonstration est un clone du site web sur lequel vous travaillez. Il vous permet de tester les nouvelles modifications dans un environnement sécurisé avant de les publier sur votre site de production (site réel).
De nombreux hébergeurs proposent des environnements d'essai et de production dans le cadre de leurs offres d'hébergement. L'option la plus populaire est Bluehost.
Bluehost est le meilleur hébergeur WordPress géré sur le marché et est officiellement recommandé par WordPress.org. Il offre une grande variété de plans d'hébergement pour les débutants et les moyennes et grandes entreprises avec un support client 24/7.
Tous les plans d'hébergement WordPress gérés par Bluehost offrent également des environnements de test intégrés, afin que vous puissiez tester de nouvelles fonctionnalités avant de les intégrer à votre site web. Consultez cet article sur Bluehost pour savoir en détail pourquoi ils sont le meilleur choix pour les sites WordPress en pleine croissance.
Voyons maintenant comment mettre en place un environnement de test avec Bluehost.
Tout d'abord, connectez-vous à la zone d'administration de votre site WordPress et naviguez vers Bluehost " Staging. Vous accédez alors à un écran expliquant ce qu'est un site de test et à l'URL de votre site de production.
Pour créer votre environnement de test, cliquez sur le bouton Créer un site de test.
Bluehost prépare ensuite votre environnement de test pour votre site web. Une fois la préparation terminée, un écran s'affiche avec l'option de visiter votre site d'essai ou de production.
Cliquez sur l'option Staging Site pour accéder à la zone d'administration de votre site WordPress de démonstration. Vous verrez un bouton rouge en haut de la barre d'administration pour indiquer que vous travaillez dans un environnement de mise à l'essai.
Vous pouvez maintenant travailler sur votre site web sans craindre qu'il n'affecte votre site en ligne.
Lorsque vous êtes prêt à publier vos modifications sur votre site web, cliquez sur la flèche vers le bas située à côté du bouton Déployer toutes les modifications.
Vous verrez trois options de déploiement :
- Déployer tous les changements
- Déploiement de fichiers uniquement
- Déployer la base de données
Si vous n'êtes pas sûr, cliquez sur le bouton Déployer toutes les modifications pour envoyer toutes les modifications de votre environnement de mise à l'essai vers votre site WordPress en ligne.
FAQ sur la prévisualisation de WordPress avant sa mise en ligne
J'espère que cet article vous a aidé à apprendre comment prévisualiser votre site WordPress avant de le mettre en ligne. Vous aimerez peut-être aussi ce guide sur les problèmes les plus courants de WordPress et comment les résoudre.
Si vous avez aimé cet article, n'hésitez pas à nous suivre sur YouTube, Twitter et Facebook pour découvrir d'autres contenus utiles au développement de votre entreprise.
