Comment personnaliser les pages protégées par mot de passe dans WordPress 

As a writer, I’ve always used WordPress’s password protection feature to lock pages with sensitive information I’m working on. It’s a useful way to keep drafts and confidential content away from the public. But I’ve often struggled with making that password-protected page look good.

The default password-protected page isn’t very appealing—it looks plain and might not leave the best impression if visitors stumble upon it. It doesn’t match the style or professionalism of your website, and that can be jarring.

It got me thinking about how you can make those pages more user-friendly and aligned with your site’s branding.

In this guide, I’ll share the solution I found to customize the appearance of your password-protected WordPress pages without writing any code. This way, you can keep your site’s look consistent and make sure that even the protected pages offer a positive experience for your visitors.

Why Customize a Password Protected Page in WordPress?

If you want to create exclusive content on your WordPress site for members or clients, WordPress’s password protection feature is useful. It lets you easily protect a WordPress page or your entire website.

Protecting your whole site can help in situations like launching a new website and wanting to keep it under wraps until it’s ready. Or perhaps you’re doing major renovations and only want authorized users to see the work in progress.

More commonly, though, you’ll probably just want to password-protect individual pages for exclusive content like premium tutorials, online courses, or member-only downloads.

The default design for a password protected page is pretty simple. It’s just a plain box asking for a password:

Customizing this page can make a big difference. By changing the appearance of password-protected pages, you can:

• Create a more engaging experience for your visitors.
• Maintain a consistent and professional brand identity.
• Make it easy for users to enter the password.

So, let’s explore how to enable password protection and customize the default page for specific pages, different sections, or your entire website.

First, let me show you how to password protect a page in WordPress.

You now know how to password protect your WordPress page. After saving your changes, you can visit your site and see the password protected page working:

Now, let’s see how to customize WordPress password-protected pages:

Method 1. Customize Specific Password Protected Pages

Let’s explore how to customize specific password-protected pages. Making these pages look professional and match the rest of your site creates a better experience for your visitors and reinforces your brand.

I like to use SeedProd for customizing individual password-protected pages. It’s a WordPress website builder with a visual editor that makes design easy.

It also includes Access Controls, which are helpful for restricting access to certain pages. This makes it so that only authorized people can see your content. You can then use SeedProd’s customization options to style the page.

Here’s how to customize your password-protected page with SeedProd:

Alternatively, you can follow these written instructions:

First, get started with SeedProd here. Then follow these instructions for installing the SeedProd page builder plugin.

Ensuite, créez une page d'atterrissage " coming soon" ou "mode maintenance". Il s'agit de pages spéciales dont l'accès est contrôlé et qui permettent de restreindre l'accès à votre site web.

To do that, click the SeedProd icon from your WordPress admin. This takes you to the SeedProd dashboard, where you can add new pages and edit them in the customizer.

Cliquez ensuite sur le bouton Créer une page Coming Soon.

Vous trouverez ensuite plusieurs modèles personnalisés à utiliser comme point de départ pour la conception de votre page.

Pour notre exemple, nous utiliserons le modèle Swipe coming soon. Pour lancer le modèle, passez votre souris sur la vignette et cliquez sur l'icône de la coche.

Your coming soon page template will appear in the drag-and-drop page builder. Here, you can begin to customize the password protected page to suit your brand.

Le constructeur de pages de SeedProd est semblable au personnalisateur de WordPress en ce sens que vous pouvez apporter des modifications en temps réel.

It also has WordPress blocks. These blocks make it easy to customize the password-protected page without prior design experience.

Vous pouvez choisir parmi les blocs standard tels que les titres, les boutons, les images, les vidéos, les séparateurs, etc.

Vous pouvez également utiliser des blocs de page d'atterrissage pour augmenter le nombre de prospects et de conversions, par exemple :

• Offres d'achat - Ajoutez une offre d'achat RafflePress à votre page avec le bloc d'offres d'achat prêt à l'emploi.
• Formulaires de contact - Ajoutez des formulaires de contact créés avec WPForms à votre page d'atterrissage.
• Formulaires d'optin - Augmentez le nombre de prospects grâce à des formulaires d'inscription dotés de modèles et de styles personnalisés.
• Comptes à rebours - Créez un sentiment d'urgence avec des comptes à rebours en direct.
• Boutons sociaux - Augmentez le nombre de vos abonnés aux médias sociaux grâce aux profils sociaux et aux boutons de partage.
• Et bien d'autres choses encore.

Vous pouvez ajouter ces fonctionnalités à votre page en les faisant glisser de la gauche vers l'aperçu de votre page en direct, à droite.

Cliquez ensuite sur n'importe quel élément pour en modifier le contenu. Vous pouvez également choisir un modèle de bloc personnalisé et apporter des modifications avancées.

Vous pouvez inclure un champ de saisie de mot de passe sur votre page. Les utilisateurs doivent saisir un mot de passe avant de cliquer sur Envoyer pour accéder à votre contenu protégé.

Pour ce faire, faites glisser le bloc HTML personnalisé dans votre éditeur de pages en ligne.

Cliquez ensuite sur le bloc pour en modifier le contenu. Collez ensuite ce shortcode seed_bypass_form dans l'éditeur de contenu avec des crochets de chaque côté.

You won’t see the password input field until you preview your live page. Then, the system will ask users to “please enter your password.”

Set Up Password Protection on Specific Pages

After customizing your page with the bypass form shortcode, you’ll want to set up password protection for specific pages of your WordPress site.

To do this, click the Page Settings tab at the top of the builder and select the Access Controls heading. Next, add a password in the ‘Bypass URL’ field. This acts as a password for your page, and also a link clients and team members can use to get past the password protection and access the page.

You can also exclude pages from password protections, such as your dashboard, admin, and login, so you don’t get locked out of your site.

Now, you need to decide which pages will be password protected. This could be pages with members-only content, lead magnets, or even an unfinished landing page.

Simply find the ‘Include URLs’ heading and add the WordPress password protected page you want to restrict in the text box. For example, you can add specific landing pages and posts, or even use this feature for password protected categories.

Une fois que vous êtes satisfait des personnalisations apportées à votre page WordPress protégée, il est temps de la publier.

Pour publier une page protégée par un mot de passe, cliquez sur la flèche vers le bas située à côté du bouton Enregistrer, puis cliquez sur Publier.

Une fenêtre contextuelle s'affiche pour vous indiquer que votre page est publiée. Vous pouvez alors cliquer sur le bouton Voir la page en direct pour prévisualiser vos modifications.

Pour rendre votre page active, retournez sur votre tableau de bord SeedProd. Dans la section Coming Soon Mode, faites passer la case Inactive à Active.

Votre page personnalisée protégée par un mot de passe est maintenant en ligne !

Si vous souhaitez modifier à nouveau votre page, cliquez sur le bouton Editer la page dans SeedProd. Vous pourrez alors modifier à nouveau le message, le contenu et le style de votre page.

Method 2. Customize Default Password-Protected WordPress Page

When you password protect a WordPress page from the WordPress editor, your page inherits the styling from your WordPress theme.

To customize it, you can use a visual editor plugin like CSS Hero. It lets you edit the CSS of any page without editing the code.

First, get CSS Hero here and install the plugin on your website. Then, navigate to your password-protected page in WordPress.

Dans la barre d'administration de WordPress, en haut de votre page, cliquez sur l'option Personnaliser avec CSS Hero.

Il s'agit d'un éditeur visuel simple qui permet d'éditer et de personnaliser votre page WordPress.

With CSS Hero, you can customize various elements of your password-protected page, including:

• Typography: Change font styles, sizes, and colors for the page title, form labels, and other text elements.
• Form Elements: Modify the appearance of the password input field, including its border, background color, and placeholder text.
• Button Design: Customize the submit button with different colors, hover effects, rounded corners, or even add icons.
• Layout Adjustments: Alter the positioning and spacing of elements, add padding or margins, and adjust the overall layout of the form.
• Background Effects: Beyond simple colors, you can add gradients, patterns, or even background images to the entire page or specific sections.
• Responsive Design: Make sure your customizations look good on all devices by adjusting styles for different screen sizes.

Cliquez sur l'en-tête pour ouvrir le panneau d'options à gauche. Vous pouvez ensuite choisir une couleur à l'aide de l'outil de sélection des couleurs.

Click your page’s background. You can change it by choosing a color or gradient from the list, or you can add your own background image.

L'inconvénient de l'utilisation de CSS Hero est que vous ne pouvez pas ajouter des éléments tels que des formulaires de contact, des formulaires d'inscription et des boutons sociaux. Pour ces éléments, nous suggérons d'utiliser la méthode SeedProd ci-dessous.

Continuez à personnaliser votre page, en cliquant sur différents éléments et en ajoutant des couleurs et des polices personnalisées.

Lorsque vous êtes satisfait de votre conception, cliquez sur le bouton Enregistrer et publier. Cliquez ensuite sur l'icône Quitter dans le coin supérieur droit de votre écran.

Vous accéderez ainsi à votre nouvelle page verrouillée, avec son formulaire de mot de passe.

Method 3. Show a Custom Protected Page on Your Entire Website

You can also use SeedProd to customize and show a password protected page on every page of your website. That way, users will need to enter a password to access any of your content.

The steps to password protect your WordPress website are the same as above. Go to SeedProd » Landing Pages, and in the Coming Soon panel, click Edit Page.

From there, click the Page Settings tab and find the Access Controls heading. Here, scroll to the ‘Include/Exclude URLs’ area and click the ‘Show on the Entire Website’ radio button.

Once you’ve saved the changes, your custom password page will appear on every page of your entire site.

Questions fréquemment posées

Et voilà !

Plus de conseils sur la protection par mot de passe de WordPress

You now know how to customize password-protected pages in WordPress.

Bien que la personnalisation des pages protégées dans WordPress puisse sembler intimidante, ce n'est pas une fatalité. En utilisant les méthodes ci-dessus, vous pouvez créer de superbes pages verrouillées sans écrire une seule ligne de code.

Vous n'avez pas besoin d'éditer votre fichier PHP ou de modifier manuellement les fichiers de votre thème. Avec le constructeur de pages pratique de SeedProd, vous n'aurez pas à repartir de zéro et pourrez inclure des éléments essentiels de génération de leads tels que des formulaires d'opt-in pour développer votre activité.

Qu'attendez-vous donc ?

Pour plus de conseils sur la protection par mot de passe de votre site WordPress, veuillez consulter ces guides d'experts :

• Comment protéger un site WordPress par un mot de passe : Le guide ultime
• Comment protéger une page WordPress par un mot de passe (étape par étape)
• Comment protéger par mot de passe un site WordPress en cours de développement
• Comment sécuriser votre site WordPress contre les pirates (17 conseils d'experts)

Merci de votre lecture ! Nous aimerions connaître votre avis, alors n'hésitez pas à laisser un commentaire pour nous faire part de vos questions et de vos réactions.

Vous pouvez également nous suivre sur YouTube, X (anciennement Twitter) et Facebook pour obtenir d'autres contenus utiles au développement de votre entreprise.