Need to control who sees certain content on your website?
WordPress lets you password-protect pages, an essential feature for managing pre-launch content, creating membership areas, protecting sensitive information, or even setting up a maintenance mode page. A customized, on-brand protected page makes a much better impression on your visitors.
But what’s the simplest way to customize these pages?
In this guide, I’ll show you how to customize the appearance of your password-protected WordPress pages without writing any code.
Methods to Customize Password Protected Pages in WordPress:
Why Customize a Password Protected Page in WordPress?
If you want to create exclusive content on your WordPress site that only members or clients can access, WordPress’s password protection feature is a handy tool. It allows you to protect a WordPress page or even your entire website easily.
However, the default design for a password protected page is quite basic. It’s just a plain box asking for a password:
This is where customization can help. By tailoring the look and feel of password protected pages, you can:
- Create a more engaging experience for your visitors.
- Keep a consistent and professional brand identity.
- Guide users seamlessly towards entering the password or taking desired actions.
With this in mind, I’ll show you how to enable password protection and ways to customize the default page, specific pages, different sections, and your entire website.
Before diving into the customization methods, let’s first look at how to password protect a page in WordPress.
Como proteger uma página do WordPress com senha
You can password protect WordPress pages using the default WordPress visibility settings by following these steps:
- Abra a página ou postagem que você deseja proteger
- Na meta-caixa Publicar, clique na opção Visibilidade
- Selecione Password Protected (Protegido por senha) no menu suspenso
- Digite a senha que deseja que os usuários digitem para acessar o conteúdo protegido
- Clique no botão azul Publish (Publicar) para salvar suas alterações
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 in action:
Now, let’s see how to customize WordPress password-protected pages.
1. Customize the Default Password-Protected WordPress Page with CSS Hero
When password protect your 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.
Na barra de administração do WordPress, na parte superior de sua página, clique na opção Personalizar com CSS Hero.
Isso revela um editor visual simples de apontar e clicar para editar e personalizar sua página do 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: Ensure your customizations look good on all devices by adjusting styles for different screen sizes.
Clique no cabeçalho para abrir o painel de opções à esquerda. Em seguida, você pode escolher uma cor na ferramenta de seleção de cores.
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.
A desvantagem de usar o CSS Hero é que não é possível adicionar elementos como formulários de contato, formulários de inscrição e botões sociais. Para esses, sugerimos usar o método SeedProd abaixo.
Continue personalizando sua página, clicando em diferentes elementos e adicionando cores e fontes personalizadas.
Quando estiver satisfeito com seu design, clique no botão Save and Publish (Salvar e publicar ). Em seguida, clique no ícone Sair no canto superior direito da tela.
Isso o levará ao design da página bloqueada recém-editada, com seu formulário de senha.
2. Customize Specific Password Protect WordPress Page with SeedProd
Customizing a specific password protected page is much easier with SeedProd. It’s the best WordPress website builder plugin with a front-end visual editor.
For this guide, we’re using SeedProd Pro because it includes Access Controls that let you restrict access to pages you password protect. This ensures only the people you want can see the pages you’re working on. You can then use its advanced customization options to change the page design.
SeedProd offers extensive customization options for your password-protected pages:
- Templates and Layouts: Choose from pre-designed templates or create your own custom layout using the drag-and-drop interface.
- Typography: Access a wide range of fonts and typographic controls for all text elements on your page.
- Color Schemes: Apply custom color palettes to your entire page or individual elements.
- Form Customization: Design custom password input fields and submit buttons with various styles and effects.
- Advanced Design Options: Add custom backgrounds, overlays, borders, and even animations to your page elements.
- Responsive Controls: Adjust your design for different devices to ensure a consistent look across all screen sizes.
For a full walk-through, please see the video tutorial below:
Alternatively, you can follow these written instructions:
First, get started with SeedProd here. Then follow these instructions for installing the SeedProd page builder plugin.
Em seguida, crie uma página de destino em breve ou em modo de manutenção. Essas são páginas especiais com controle de acesso para restringir seu site.
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.
Depois disso, clique no botão Set Up a Coming Soon Page (Configurar uma página em breve ).
Em seguida, você verá vários modelos personalizados para usar como ponto de partida para o design de sua página.
Para o nosso exemplo, usaremos o modelo Swipe coming soon. Para iniciar o modelo, passe o mouse sobre a miniatura e clique no ícone de tique.
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.
O construtor de páginas do SeedProd é como o personalizador do WordPress, pois você pode fazer alterações em tempo real.
It also has WordPress blocks. These blocks make it easy to customize the password-protected page without prior design experience.
Você pode escolher entre blocos padrão, como cabeçalhos, botões, imagens, vídeos, divisores, etc.
Ou você pode usar blocos de página de destino para gerar mais leads e conversões, como, por exemplo:
- Brindes - Adicione um brinde do RafflePress à sua página com o bloco de brindes pronto para uso.
- Formulários de contato - Adicione formulários de contato criados com o WPForms à sua página de destino.
- Optin Forms - Aumente os leads com formulários de inscrição que vêm com modelos e estilos personalizados
- Temporizadores de contagem regressiva - Crie um senso de urgência com contagens regressivas ao vivo.
- Botões sociais - Aumente seus seguidores nas mídias sociais com perfis sociais e botões de compartilhamento.
- E muito mais.
Você pode adicionar esses recursos à sua página arrastando-os da esquerda para a visualização da página ao vivo, à direita.
Em seguida, clique em qualquer elemento para editar o conteúdo. Você também pode escolher um modelo de bloco personalizado e adicionar alterações avançadas.
Você pode incluir um campo de entrada de senha em sua página. Os usuários precisam digitar uma senha antes de clicar em Enviar para acessar o conteúdo protegido.
Para fazer isso, arraste o bloco HTML personalizado para o editor de página ativa.
Em seguida, clique no bloco para editar o conteúdo. Agora cole esse shortcode seed_bypass_form no editor de conteúdo com colchetes em ambos os lados.
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.
Quando você estiver satisfeito com as personalizações da sua página protegida do WordPress, é hora de publicá-la.
Para publicar uma página protegida por senha, clique na seta para baixo ao lado do botão Salvar e, em seguida, clique em Publicar.
Você verá um pop-up de caixa de luz informando que sua página foi publicada. Em seguida, você pode clicar no botão See Live Page para visualizar suas alterações.
Para tornar sua página ativa, volte ao painel do SeedProd. Na seção Coming Soon Mode (Modo em breve), alterne o botão Inativo para Ativo.
Sua página personalizada protegida por senha já está no ar!
Se você quiser alterar sua página novamente, clique no botão Edit Page (Editar página) no SeedProd. Em seguida, você poderá alterar a mensagem, o conteúdo e o estilo da página novamente.
Bonus: Create a Custom Password Protected Page for 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.
Best Practices for Secure Password Protected Pages
Ensuring the security of password-protected pages is crucial for maintaining the integrity of your content and protecting sensitive information. Here are some best practices to follow:
1. Use Strong Passwords
A strong password is the first line of defense for protected pages. Ensure that your passwords are:
- At least 12 characters long
- A mix of upper and lower case letters, numbers, and special characters
- Not easily guessable (avoid using common words or phrases)
2. Regularly Update Passwords
Update your passwords periodically to enhance security. Regular updates reduce the risk of unauthorized access if a password is compromised.
3. Limit Access to Passwords
Restrict who has access to the passwords for your protected pages. Only share passwords with trusted individuals and avoid sending them via unsecured channels.
4. Enable Two-Factor Authentication (2FA)
Where possible, enable two-factor authentication for an added layer of security. 2FA requires users to provide a second form of verification, such as a code sent to their phone, in addition to the password.
5. Monitor Access Logs
Regularly check access logs to monitor who is accessing your protected pages. Look for any unusual activity that could indicate a security breach.
6. Use SSL Certificates
Ensure your website is protected with an SSL certificate. SSL encrypts the data transferred between your website and its visitors, adding an extra layer of security.
7. Keep WordPress and Plugins Updated
Regularly update WordPress and any installed plugins to their latest versions. Updates often include security patches that protect against vulnerabilities.
8. Customize Your Login Page
Consider customizing your WordPress login page to make it harder for attackers to target.
You can change the URL of the login page or add a security question to the protected form.
9. Backup Your Website
Regular backups are essential. In case of a security breach, you can restore your website to a previous state. Use a reliable backup plugin or service to automate this process.
Perguntas frequentes
1. Use senhas fortes e exclusivas (combinação de letras, números e símbolos).
2. Limite as tentativas de login para evitar ataques de força bruta.
3. Considere a autenticação de dois fatores para aumentar a segurança.
4. Mantenha o WordPress, os temas e os plug-ins atualizados para corrigir vulnerabilidades.
Aí está!
Mais dicas de proteção por senha para WordPress
You now know how to customize password-protected pages in WordPress.
Embora a personalização de páginas protegidas no WordPress possa parecer assustadora, ela não precisa ser assim. Usando os métodos acima, você pode criar páginas bloqueadas incríveis sem escrever uma única linha de código.
Não é necessário editar o arquivo PHP nem alterar nenhum dos arquivos do tema manualmente. Com o prático construtor de páginas do SeedProd, você não precisará começar do zero e poderá incluir elementos essenciais de geração de leads, como formulários opt-in, para expandir seus negócios.
Então, o que está esperando?
Para obter ainda mais dicas sobre como proteger seu site WordPress com senha, consulte estes guias especializados:
- Como proteger um site WordPress com senha: O guia definitivo
- Como proteger uma página do WordPress com senha (passo a passo)
- Como proteger um site WordPress com senha durante o desenvolvimento
- Como proteger seu site WordPress contra hackers (17 dicas de especialistas)
Obrigado pela leitura! Gostaríamos muito de ouvir sua opinião, portanto, fique à vontade para deixar um comentário com perguntas e feedback.
Você também pode nos seguir no YouTube, no X (antigo Twitter) e no Facebook para obter mais conteúdo útil para expandir seus negócios.
