Vous avez passé des heures à créer du contenu premium pour votre site WordPress. Mais lorsque les visiteurs accèdent à vos pages protégées par mot de passe, ils sont souvent accueillis par un formulaire par défaut peu attrayant et démodé.
Cela peut amener des clients potentiels à partir car la page ne reflète pas votre marque ou ne renforce pas la confiance.
Nous comprenons. C'est l'un de ces petits détails de WordPress qui peuvent avoir un impact discret sur votre entreprise.
D'après notre expérience dans la gestion de sites d'adhésion, même de simples personnalisations de la page de mot de passe peuvent améliorer l'expérience utilisateur et aider aux conversions.
C'est pourquoi nous avons rassemblé ce guide. Apprenons à personnaliser une page protégée par mot de passe dans WordPress qui soit attrayante, corresponde à votre marque et maintienne l'engagement des visiteurs. 🧑💻

📝 Points clés à retenir. Nous vous montrerons deux façons de protéger une page WordPress par mot de passe :
- Méthode 1 (CSS Hero) : Styliser le formulaire de mot de passe WordPress par défaut.
- Méthode 2 (SeedProd) : Créer une page de mot de passe personnalisée et de marque.
Pourquoi personnaliser les pages protégées par mot de passe dans WordPress ?
Dans WordPress, une page protégée par mot de passe est une fonctionnalité de sécurité qui restreint la visibilité de certains contenus. Elle nécessite que les utilisateurs saisissent une clé secrète avant que l'accès ne soit accordé.
Mais le design par défaut semble souvent démodé et peu professionnel. Et comme une image de marque cohérente est prouvée pour renforcer la confiance des utilisateurs, un formulaire générique peut nuire à votre engagement.
Si vous souhaitez créer un article ou une page sur votre blog WordPress qui ne doit être visible que par des clients ou des membres sélectionnés, vous pouvez le verrouiller en utilisant la fonctionnalité de protection par mot de passe.
De même, si vous créez un nouveau site Web WordPress et que vous ne souhaitez pas que tout le monde le voie, l'utilisation d'une page protégée par mot de passe est judicieuse.
Cependant, le design par défaut de la page protégée par mot de passe est très basique et peu attrayant. Voici un aperçu de ce à quoi elle ressemble :

La personnalisation de la page protégée par mot de passe vous permet de modifier sa conception et sa mise en page. Cela rendra votre page plus attrayante et vous pourrez l'adapter à votre marque pour un aspect plus professionnel et une meilleure expérience utilisateur.
Dans les sections suivantes, nous vous montrerons comment activer la protection par mot de passe dans WordPress. Nous partagerons également différentes façons de personnaliser une page spécifique, votre site entier et différentes sections.
Voici un aperçu rapide de tous les sujets que nous allons aborder :
- Comment protéger une page par mot de passe dans WordPress
- Méthode 1 : Personnaliser la conception par défaut de la page protégée par mot de passe à l'aide de CSS Hero
- Method 2: Customize a Specific Password-Protected Page Using SeedProd
- Bonus Tips: More Custom Password-Protected Page Use Cases
- FAQ : Personnalisation des pages protégées par mot de passe dans WordPress
- Guides supplémentaires sur la protection de contenu et la sécurité du site
Prêt à relooker la conception de votre page protégée par mot de passe ? Commençons !
Comment protéger une page par mot de passe dans WordPress
Avant de vous montrer comment personnaliser une page WordPress, vous devez savoir que WordPress dispose de paramètres intégrés pour protéger vos pages et vos articles par mot de passe.
Tout ce que vous avez à faire est de modifier une page ou d'en ajouter une nouvelle.
Une fois dans l'éditeur de contenu WordPress, cliquez sur l'option « Public » sous « Statut et visibilité » dans le panneau des paramètres de droite.

Ensuite, vous verrez différentes options de « Visibilité de l'article ».
Sélectionnez simplement l'option « Protégé par mot de passe » et entrez un mot de passe pour votre page.

Maintenant, cliquez sur « Mettre à jour » ou « Publier ».
Vous pouvez maintenant visiter votre site Web et voir la page protégée par mot de passe en action.

Voyons maintenant comment vous pouvez personnaliser votre page protégée par mot de passe par défaut.
Méthode 1 : Personnaliser la conception par défaut de la page protégée par mot de passe à l'aide de CSS Hero
Lorsque vous activez la protection par mot de passe depuis votre éditeur de contenu WordPress, la page utilise le thème de votre site pour le style.
Pour personnaliser la page, vous pouvez simplement utiliser un outil comme CSS Hero. Cela vous permet de styliser le formulaire WordPress par défaut pour qu'il corresponde à votre thème, plutôt que de créer une nouvelle page à partir de zéro.
Nous l'avons testé de manière approfondie, et vous pouvez découvrir tout cela dans notre avis sur CSS Hero.
Tout d'abord, vous aurez besoin d'un compte CSS Hero. Sur le site web de CSS Hero, vous pouvez cliquer sur « Obtenir maintenant », choisir un plan qui correspond à vos besoins et terminer le processus d'inscription.

Une fois terminé, connectez-vous à votre compte CSS Hero pour accéder au fichier zip de votre plugin et à votre clé de licence. Vous pourrez ensuite télécharger le fichier et conserver la clé de licence en lieu sûr, comme un gestionnaire de mots de passe.
Maintenant, vous pouvez installer et activer le plugin CSS Hero.
Dans votre tableau de bord d'administration WordPress, allez dans Plugins » Ajouter un plugin.

Ensuite, cliquons sur le bouton « Télécharger un plugin » pour ouvrir l'outil de téléchargement de fichiers.
Cliquez sur le bouton « Choisir un fichier » pour télécharger votre fichier zip CSS Hero et cliquez sur « Installer maintenant ».

Après l'installation, n'oubliez pas de cliquer sur le bouton « Activer » pour l'activer sur votre site WordPress. Pour plus de détails, veuillez consulter notre guide sur comment installer un plugin WordPress.
Après l'activation, l'option CSS Hero sera ajoutée à la barre d'administration WordPress en haut. Allez-y et cliquez sur l'option « Personnaliser avec CSS Hero ».

Cela lancera le constructeur visuel CSS Hero, où vous pourrez modifier et personnaliser votre page.
Pour commencer, vous devez vous assurer que vous visualisez le formulaire de mot de passe. Si vous êtes connecté, vous pourriez voir le contenu de la page à la place. Vous pouvez utiliser les outils de CSS Hero pour passer en mode « Déconnecté », ou simplement cliquer sur les éléments du formulaire de mot de passe s'ils sont visibles.

Ensuite, vous pouvez modifier les couleurs d'arrière-plan, ajouter une image d'arrière-plan, utiliser une police différente, modifier l'espacement, et plus encore depuis le panneau de gauche.
Par exemple, allons dans l'onglet « Arrière-plan » et ajoutons une couleur d'arrière-plan dégradée. Nous allons également changer la couleur de la boîte où les utilisateurs doivent saisir le mot de passe et la couleur du bouton « Entrer ».

En outre, vous pouvez ajouter une bordure autour du titre principal de la page en allant dans l'onglet Bordures.
Choisissez simplement une largeur de bordure, une couleur, un style et toute autre modification que vous souhaitez.

Une fois que vous avez terminé la personnalisation, n'oubliez pas de cliquer sur le bouton « Enregistrer et publier » en bas.
Vous pouvez maintenant visiter votre site web pour voir la page protégée par mot de passe par défaut personnalisée.

Le principal inconvénient de l'utilisation de CSS Hero est qu'il n'offre pas la flexibilité et les options de personnalisation avancées qu'un constructeur de pages de destination propose.
For instance, you can’t add elements like contact forms, social media buttons, opt-in forms, or countdown timers.
With that in mind, let’s see how you can use a landing page builder to customize specific password-protected pages in WordPress.
Method 2: Customize a Specific Password-Protected Page Using SeedProd
Customizing a specific password-protected page is easiest with SeedProd, the best website and page builder for WordPress.
We have used SeedProd ourselves to build custom landing pages and even entire themes, and we absolutely love it. If you want to learn more about what it can do, take a look at our detailed SeedProd review.
Pour commencer, vous pouvez vous rendre sur le site Web de SeedProd pour créer un compte. Cliquez simplement sur le bouton « Obtenir SeedProd maintenant », choisissez un plan et suivez les instructions à l'écran pour terminer l'inscription.

📝 Remarque : Pour ce tutoriel, nous utiliserons la version SeedProd Pro. Bien que SeedProd Lite vous permette de verrouiller votre site en entier avec une page « Bientôt disponible », vous aurez besoin de la version Pro pour utiliser les contrôles d'accès requis pour protéger par mot de passe des pages spécifiques.
Lors de l'inscription, vous obtiendrez votre propre tableau de bord SeedProd. Ici, vous pouvez trouver le fichier zip de votre plugin et votre clé de licence.
Maintenant, installons et activons le plugin SeedProd.
Dans votre zone d'administration WordPress, allez dans Plugins » Ajouter un nouveau plugin. Ensuite, vous pouvez utiliser la barre de recherche pour trouver rapidement le plugin et cliquer sur 'Installer maintenant' dans le résultat de la recherche.

N'oubliez pas de cliquer sur le bouton 'Activer' pour terminer le processus. Si vous avez besoin d'aide, veuillez consulter notre guide sur comment installer un plugin WordPress.
Lors de l'activation, vous verrez l'écran d'accueil de SeedProd dans votre tableau de bord WordPress.
À partir de là, vous devrez saisir la clé de licence et cliquer sur le bouton « Vérifier la clé » pour activer SeedProd Pro. Votre clé de licence se trouve dans votre espace compte SeedProd.

Après cela, allons sur SeedProd » Pages de destination depuis votre tableau de bord WordPress et ajoutons une nouvelle page de destination personnalisée protégée par mot de passe.
Plus tard dans cet article, nous vous montrerons comment choisir les pages qui seront protégées par mot de passe. Vous pouvez protéger l'ensemble de votre site par mot de passe ou seulement des pages spécifiques.
Nous utiliserons une page 'Bientôt disponible' comme exemple. Nous l'utilisons comme un 'gardien' ou une superposition qui intercepte les visiteurs sur des pages spécifiques. Mais ces techniques de personnalisation fonctionnent pour tout contenu protégé par mot de passe sur votre site WordPress.
Pour commencer, cliquez simplement sur le bouton « Configurer une page « Prochainement » ».

📝 Remarque : Si vous utilisez cette méthode, vous devez vous assurer que la visibilité WordPress pour cette page spécifique est définie sur 'Public' (pas protégé par mot de passe), sinon vos utilisateurs pourraient avoir à saisir deux mots de passe différents.
Sur l'écran suivant, SeedProd vous présentera différents modèles de page afin que vous puissiez les personnaliser rapidement.
Survolez n'importe quel modèle que vous souhaitez utiliser et cliquez sur le bouton de coche orange.

Après avoir sélectionné un modèle, SeedProd ouvrira une fenêtre contextuelle intitulée « Entrez les détails de votre nouvelle page ».
Il vous suffit de sélectionner un nom de page et un slug d'URL, puis de cliquer simplement sur le bouton « Enregistrer et commencer à modifier la page ».

Cela lancera le constructeur de pages par glisser-déposer de SeedProd.
Ici, vous pouvez personnaliser votre page de destination protégée par mot de passe et ajouter différents éléments tels que du texte, des images, des boutons, etc.
SeedProd propose également des blocs avancés tels qu'un formulaire d'inscription, un formulaire de contact, un compte à rebours, une barre de progression, des options de partage social, et plus encore.
Pour ajouter un élément, faites glisser n'importe quel bloc du menu de gauche et déposez-le sur le modèle à droite. Ensuite, personnalisez l'élément en cliquant dessus et en ajustant les options qui apparaissent.

C'est aussi ainsi que SeedProd vous permet d'ajouter un formulaire de mot de passe à l'avant de votre page pour protéger votre contenu.
Tout d'abord, vous pouvez ajouter un bloc « HTML personnalisé » dans le constructeur SeedProd. Faites simplement glisser et déposez le bloc HTML personnalisé sur le modèle.

Ensuite, vous pouvez cliquer sur le bloc « HTML personnalisé ».
À partir de là, vous voudrez entrer le [seed_bypass_form]shortcode dans le champ 'Code personnalisé'. Ce shortcode spécifique est ce qui rend la boîte de saisie de mot de passe et le bouton de soumission que le visiteur verra.

N'oubliez pas de cliquer sur le bouton « Enregistrer » une fois que vous avez terminé. Et voilà !
Désormais, SeedProd s'intègre également à différents services de marketing par e-mail.
Vous pouvez ajouter un formulaire de contact à votre page de destination et connecter un outil de marketing par e-mail pour créer votre liste d'e-mails et rester en contact avec les utilisateurs.
Allez simplement dans l'onglet « Connecter » du constructeur de pages de destination et sélectionnez votre service de marketing par e-mail.

Pour plus de détails, consultez notre guide sur comment configurer une belle page 'Bientôt disponible' avec SeedProd.
Configuration de la protection par mot de passe pour des pages spécifiques dans SeedProd
Après avoir créé une page « Prochainement » personnalisée qui utilise le shortcode [seed_bypass_form], l'étape suivante consiste à configurer la protection par mot de passe sur des pages spécifiques à l'aide de SeedProd.
Pour commencer, vous pouvez aller dans l'onglet « Paramètres de la page » du constructeur SeedProd et cliquer sur les paramètres « Contrôle d'accès ».
Ensuite, entrez simplement le mot de passe souhaité dans le champ intitulé « URL de contournement ». Même si cela s'appelle une « URL », ce texte fonctionne comme le mot de passe dont les visiteurs ont besoin pour voir le contenu.

Vous pouvez également partager un lien direct avec cette phrase, comme votresite.com/page/?bypass=secret, afin que les clients puissent ouvrir la page sans taper le mot de passe.
SeedProd vous permet d'exclure des URL spécifiques de vos sites, telles que l'administration, la connexion, le tableau de bord et le compte. Cela garantit que les propriétaires de sites ne seront pas exclus de leurs sites.
Maintenant, vous devrez choisir quelles URL seront protégées par mot de passe.
Faites simplement défiler vers le bas jusqu'à la section « Inclure/Exclure les URL » sous les paramètres « Contrôle d'accès ». Après cela, sélectionnez l'option « Inclure les URL » puis entrez les pages spécifiques que vous souhaitez restreindre.

Lorsque vous avez terminé, cliquez simplement sur le bouton « Enregistrer » en haut.
Ensuite, vous pouvez aller dans les paramètres « Général » sous l'onglet « Paramètres de la page » et changer le statut de la page de « Brouillon » à « Publier ». Cela enregistre et publie votre modèle de conception, mais la protection ne sera pas active tant que vous n'aurez pas activé le « Mode Bientôt disponible » à la dernière étape.

À partir de là, vous pouvez fermer le constructeur de pages de destination et vous rendre sur SeedProd » Pages de destination depuis votre panneau d'administration WordPress.
Ensuite, cliquons sur le bouton sous « Mode Bientôt disponible » pour activer votre page personnalisée protégée par mot de passe.

C'est tout !
Vous avez créé avec succès une page de destination personnalisée protégée par mot de passe qui n'apparaîtra que sur des pages spécifiques dans WordPress.
Visitez simplement ces pages sur votre site Web pour voir la page personnalisée protégée par mot de passe en action.

Conseils bonus : plus d'utilisations de pages personnalisées protégées par mot de passe
Vous voulez explorer d'autres façons de protéger par mot de passe votre site WordPress ? Voici 2 astuces pour améliorer la protection par mot de passe de votre page.
Astuce 1 : Créez une page personnalisée protégée par mot de passe pour l'ensemble du site Web
En utilisant SeedProd, vous pouvez également afficher votre page protégée par mot de passe sur chaque page de votre site Web. De cette façon, les utilisateurs devront entrer un mot de passe pour accéder à n'importe lequel de vos contenus.
Tout d'abord, vous pouvez aller dans SeedProd » Pages de destination depuis votre tableau de bord WordPress. Ensuite, cliquez sur le bouton « Modifier la page » dans le panneau « Mode hors ligne ».

Ensuite, vous voudrez accéder à l'onglet « Paramètres de la page » en haut et aller dans les paramètres « Contrôle d'accès ».
Après cela, vous pouvez faire défiler jusqu'à la section « Inclure/Exclure les URL » et sélectionner l'option « Afficher sur l'ensemble du site Web ».

Une fois que vous avez apporté les modifications, cliquez sur le bouton « Enregistrer » en haut. SeedProd affichera alors la page personnalisée protégée par mot de passe sur l'ensemble de votre site Web.
Astuce 2 : Créez une section protégée par adhésion dans WordPress
Vous pouvez également restreindre différentes sections du site Web en fonction des niveaux d'adhésion.
Contrairement aux méthodes précédentes, qui utilisent un mot de passe partagé unique que tout le monde peut partager avec d'autres, cette méthode exige que les utilisateurs s'inscrivent et se connectent avec leurs propres comptes uniques. Cela offre une sécurité et un contrôle beaucoup plus élevés.
La meilleure façon de restreindre différentes parties de votre site Web est d'utiliser MemberPress, le meilleur plugin d'adhésion WordPress. Il vous permet de créer plusieurs niveaux d'adhésion pour protéger votre contenu par mot de passe.
Nous l'utilisons même pour notre site d'adhésion vidéo, nous pouvons donc garantir à quel point il est excellent. Vous pouvez obtenir plus d'informations sur l'outil dans notre critique complète de MemberPress.

MemberPress vous permet désormais de définir différentes règles pour que les utilisateurs ne puissent accéder au contenu qu'en fonction de leur niveau d'adhésion. Pour plus de détails, veuillez consulter notre guide sur la création d'un site d'adhésion WordPress.
Pour commencer, vous devrez d'abord ajouter des adhésions à votre site Web. Allez simplement dans MemberPress » Memberships depuis votre tableau de bord WordPress et cliquez sur le bouton « Ajouter ».

Après cela, vous pouvez entrer un nom pour votre niveau d'adhésion, ajouter une description et définir un prix.
Vous pouvez également changer le type de facturation de ponctuel à récurrent, ainsi que modifier l'adhésion pour qu'elle soit à vie ou expire après une certaine période. Vous pouvez également offrir un essai gratuit.

N'oubliez pas de cliquer sur le bouton « Publier » lorsque vous avez terminé.
Ensuite, vous pouvez aller dans MemberPress » Rules depuis votre tableau de bord WordPress et cliquer sur le bouton « Ajouter ».

À partir d'ici, vous pouvez cliquer sur le menu déroulant sous l'option « Contenu protégé ».
MemberPress offre de nombreuses options pour protéger votre contenu, qu'il s'agisse d'une seule page ou de toutes vos pages WordPress. Pour ce tutoriel, nous allons protéger par mot de passe une seule page.
Alors, choisissons l'option « Une seule page » dans le menu déroulant et entrons le titre de la page.

Ensuite, vous devrez configurer les conditions d'accès et déterminer qui peut voir la page restreinte. MemberPress vous permet de protéger le contenu en fonction du niveau d'adhésion, du rôle d'utilisateur WordPress, des capacités et des membres individuels.
Définissons « Adhésion » sur « Premium » à partir des menus déroulants pour ce tutoriel. De cette façon, seuls les membres premium pourront accéder à la page. Vous pouvez ajouter d'autres conditions et autoriser plus d'un niveau d'adhésion à consulter la page.
Lorsque vous avez terminé, n'oubliez pas de cliquer sur le bouton « Enregistrer la règle ».
Vous pouvez ensuite visiter votre site Web pour voir la page protégée par mot de passe en action. Les membres devront maintenant se connecter à leurs comptes pour afficher le contenu de la page.

Vous voulez en faire plus ? Voici des cas d'utilisation intéressants que vous pouvez réaliser avec MemberPress :
- Configuration de mots de passe pour vos vidéos ou offre d'adhésions de groupe pour les équipes d'entreprise.
- Créer un mot de passe pour donner aux abonnés l'accès à une newsletter payante et plus encore.
- Ajouter un mot de passe pour vos formulaires WordPress.
FAQ : Personnalisation des pages protégées par mot de passe dans WordPress
Vous avez encore des questions sur la personnalisation des pages protégées par mot de passe dans WordPress ? Voici quelques questions courantes que nous recevons – ainsi que des réponses rapides et claires pour vous aider.
Quelle est la différence entre une page protégée par mot de passe et une page privée ?
Une page protégée par mot de passe peut être consultée par toute personne possédant le mot de passe correct. Une page privée n'est visible que par les utilisateurs connectés sur votre site, tels que les administrateurs et les éditeurs.
La personnalisation de la page de mot de passe ralentira-t-elle mon site ?
Si vous utilisez un plugin bien codé comme SeedProd, cela ne devrait pas avoir d'impact notable sur la vitesse de votre site. SeedProd est optimisé pour la performance.
Cependant, soyez attentif à l'ajout d'images volumineuses non optimisées ou de scripts complexes, qui peuvent affecter les temps de chargement. Suivez toujours les meilleures pratiques pour l'optimisation des images pour le web.
Les moteurs de recherche peuvent-ils indexer mon contenu protégé par mot de passe ?
Non, les moteurs de recherche ne peuvent pas indexer le contenu protégé par le mot de passe. Cependant, veuillez noter que le « Titre de la page » peut toujours être visible dans les résultats de recherche, souvent avec un préfixe « Protégé : ». Assurez-vous de ne pas mettre d'informations sensibles directement dans le titre de la page.
Puis-je utiliser le même mot de passe pour plusieurs pages ?
Oui, vous pouvez utiliser le même mot de passe pour plusieurs pages différentes dans WordPress. Cependant, pour une meilleure sécurité et gestion, un plugin comme MemberPress est une bien meilleure solution pour contrôler l'accès à différents groupes de contenu.
Guides supplémentaires sur la protection de contenu et la sécurité du site
Nous espérons que cet article vous a aidé à apprendre comment personnaliser une page protégée par mot de passe dans WordPress. Si vous souhaitez explorer d'autres moyens de sécuriser votre site Web, ces guides pourraient vous être utiles :
- Comment masquer les articles protégés par mot de passe dans la boucle WordPress
- Comment afficher l'extrait d'un article protégé par mot de passe dans WordPress
- Façons de protéger le contenu dans WordPress
- Comment créer un paywall dans WordPress (avec options de prévisualisation)
- Meilleurs plugins de protection de contenu 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.


Jiří Vaněk
J'ai plusieurs articles protégés par un mot de passe pour les utilisateurs payants de Patreon, et je dois admettre que mon design n'est pas très bon. Votre guide avec SeedProd a attiré mon attention car je l'utilise déjà, et voir à quel point une telle page peut être belle dans vos captures d'écran me rend un peu embarrassé de ne pas l'avoir fait plus tôt. Merci pour ce guide précieux, car cela me dérangeait que la page protégée par mot de passe ne corresponde pas au design de mon site Web et ne soit pas du tout esthétique.
Support WPBeginner
Glad our guide was helpful
Admin
Maurice
Bonjour,
Lorsque je suis les instructions pour une page protégée par mot de passe… et que je me déconnecte.
Ensuite, j'ouvre dans un autre navigateur le lien URL vers cette page, je saisis le mot de passe mais une connexion Administrateur apparaît également ? Je ne peux donc pas partager ces pages…
Comment cela se peut-il ?
Merci.
Support WPBeginner
Nous vous recommandons de vérifier que votre site n'est pas en mode « bientôt disponible » ou qu'il ne s'agit pas d'un site d'adhésion qui obligerait un utilisateur à consulter le contenu, car c'est la raison la plus courante de ce problème.
Admin