How to Customize a Password Protected Page in WordPress

Do you want to create a custom password-protected page on your website?

You can hide content and restrict access to certain pages using WordPress password protection. However, the default login and password-entry layout is plain and not appealing.

In this article, we’ll show you how to customize password-protected pages in WordPress.

How to Customize password protected page in WordPress

Why Customize Password Protected Pages in WordPress?

If you want to create a page or a post on your WordPress blog that should only be visible to selected clients or members, then you can use the password protection feature to lock the content.

Similarly, if you’re creating a new WordPress website and don’t want everyone to view it, then using a password-protected page makes sense.

However, the default password-protected page design is very basic and not attractive. Here’s a preview of what it looks like:

A basic password protected page

Customizing the password-protected page allows you to change its design and layout the way you want. It helps make your page more engaging, and you can match it to your brand for a more professional look and better user experience.

That said, we’ll show you how to enable password protection in WordPress and different ways to customize a specific page, your entire site, and different sections.

You can click the links below to jump ahead to your preferred section:

How to Password Protect a Page in WordPress

Before we show you how to customize a WordPress page, you should know that WordPress comes with built-in settings to password-protect your pages and posts.

All you have to do is edit a page or add a new one. Once you’re in the WordPress content editor, go ahead and click the ‘Public’ option under ‘Status & visibility’ in the settings panel on your right.

Change visibility settings in content editor

Next, you’ll see different Post Visibility options.

Simply select the ‘Password Protected’ option and enter a password for your page.

Select password protected option

Now, go ahead and click ‘Update’ or ‘Publish,’ and the live page will be protected by a password.

You can now visit your website and see the page in action.

Password protected page preview using content editor

Now, let’s see how you can customize your default password-protected page.

Customize Default Password Protected Design Using CSS Hero

When you enable password protection from your WordPress content editor, the page uses your site’s theme for styling.

To customize the page, you can simply use a tool like CSS Hero. It lets you edit the design and layout of your page without editing code.

First, you’ll need to install and activate the CSS Hero plugin. For more details, please see our guide on how to install a WordPress plugin.

Upon activation, the CSS hero option will be added to the WordPress admin bar at the top. Go ahead and click the ‘Customize with CSS Hero’ option.

Customize with CSS hero

This will launch the CSS Hero visual builder, where you can edit and customize your page.

To start, simply click on any element on the page.

Click an element to start editing

Next, you can change the background colors, add a background image, use a different font, edit spacing, and more from the panel on your left.

For example, let’s add a background color with a gradient effect by going to the ‘Background’ tab. We’ll also change the color of the box where users need to type in the password, as well as the color of the ‘Enter’ button.

Change the background color

Besides that, you can add a border around the main heading on the page by going to the Borders tab.

Simply choose a border width, color, style, and any other changes you like.

Edit the borders and save your changes

When you’ve made the change, don’t forget to click the ‘Save & Publish’ button at the bottom.

You can now visit your website to see the customized default password-protected page.

Preview of customized password protected page with CSS hero

The drawback of using CSS Hero is that you don’t get the flexibility and advanced customization options that a landing page builder offers.

For instance, you can’t add elements like contact forms, social media buttons, optin forms, countdown timers, and more using CSS Hero.

That said, let’s see how you can use a landing page builder to customize specific pages in WordPress.

Customize a Specific Password Protected Page Using SeedProd

The easiest way of customizing a specific password-protected page is by using SeedProd. It’s the best WordPress website and page builder.

For this tutorial, we’ll use the SeedProd Pro version because it includes premium templates and more customization features. You can also use the SeedProd Lite version for free and create a coming soon page.

First, you’ll need to install and activate the SeedProd plugin. If you need help, then please see our guide on how to install a WordPress plugin.

Upon activation, you’ll be taken to SeedProd’s welcome screen in your WordPress dashboard. Next, you’ll need to enter the license key and click the ‘Verify Key’ button. You can find the license key in your SeedProd account area.

Enter SeedProd license key

After that, head to SeedProd » Landing Pages from your WordPress dashboard and add a new custom password-protected landing page.

Later in this article, we’ll show you how to choose which pages are password-protected. You can password-protect your entire site or only specific pages.

For this tutorial, we’ll create a coming soon page for a website launch with password protection. However, you can customize your design easily if you only use it to password-protect specific pages.

To start, simply click the ‘Set up a Coming Soon Page’ button.

Create a new coming soon page

On the next screen, SeedProd will show you different page templates, so you can quickly customize them.

Go ahead and hover over any template you want to use and click the orange checkmark button.

Choose a template

After selecting a template, SeedProd will open a popup window titled ‘Enter your new page details.’

You just need to select a page name and URL slug, and then simply click the ‘Save and Start Editing the Page’ button.

Enter a page template name

This will launch the SeedProd drag-and-drop page builder.

Here you can customize your password-protected landing page and add different elements like text, images, buttons, and more. SeedProd offers advanced blocks like optin form, contact form, countdown timer, progress bar, social sharing options, and more.

To add an element, you can simply drag any block from the menu on your left and drop it onto the template to the right. Then you can customize the element simply by clicking on it and adjusting the options that appear.

Add blocks to your template

This is also how SeedProd lets you add a password form on the front end of your page to protect your content.

First, you can add a ‘Custom HTML’ block in the SeedProd builder. Simply drag and drop the Custom HTML block onto the template.

Add custom HTML block

Next, you can click on the Custom HTML block.

From here, enter the [seed_bypass_form] shortcode in the ‘Custom Code’ field. That’s it! Don’t forget to click the ‘Save’ button when you’re done.

Enter shortcode

SeedProd also integrates with different email marketing services. You can add a contact form to your landing page and connect an email marketing tool to build your email list and stay in touch with users.

Simply go to the ‘Connect’ tab in the landing page builder and select your email marketing service.

Connect email marketing service

Setting Up Password Protection For Specific Pages in SeedProd

After creating a custom coming soon page that uses [seed_bypass_form] shortcode, the next step is to set up password protection on specific pages using SeedProd.

To start, you’ll need to go to the ‘Page Settings’ tab in the SeedProd builder and then click on ‘Access Control’ settings.

After that, you can enter a password in the ‘Bypass URL’ field that people can use to access your restricted content.

Access control settings

Do note that the text you write in the ‘Bypass URL’ field will act as the password and also a link that clients and team members can use to detour the password protection and access the page.

SeedProd lets you exclude specific URLs from your sites like admin, login, dashboard, and account. This ensures that site owners don’t get locked out of their sites.

Now, you’ll need to choose which URLs will be password-protected.

Simply scroll down to the ‘Include/Exclude URLs’ section under the ‘Access Control’ settings. After that, select the ‘Include URLs’ option and then enter the specific pages you’d like to restrict.

Include pages to password protect

When you’re done, simply click the ‘Save’ button at the top.

Next, you can go to the ‘General’ settings under the ‘Page Settings’ tab and change the Page Status from ‘Draft’ to ‘Publish’.

Publish your landing page

After that, you can close the landing page builder and head to SeedProd » Landing Pages from your WordPress admin panel.

From here, click the toggle under ‘Coming Soon Mode’ to activate your custom password-protected page.

Activate coming soon page

That’s all! You’ve successfully created a custom password-protected landing page that will only appear on specific pages in WordPress.

Simply visit those pages on your website to see the customized password-protected page in action.

Custom password protected page preview

Create Custom Password Protected Page for Entire Website

Using SeedProd, you can also display your password-protected page on every page of your website. This way, users will need to enter a password to gain access to any of your content.

First, you can go to SeedProd » Landing Pages from your WordPress dashboard. Then, click the ‘Edit Page’ button in the ‘Coming Soon Mode’ panel.

Edit coming soon page

Next, you can head to the ‘Page Settings’ tab at the top and go to ‘Access Control’ settings.

After that, scroll down to the ‘Include/Exclude URLs’ section and select the ‘Show on the Entire Website’ option.

Show on entire website option

Once you’ve made the changes, go ahead and click the ‘Save’ button at the top.

SeedProd will show the custom password-protected page on your entire website.

Create Custom Password Protected Sections in WordPress

You can also password-protect different website sections in WordPress from different sets of users. This is useful if you’re running a membership website and want to control access to your content, plugins, apps, and other downloadable files.

The best way to restrict different parts of your website is by using MemberPress. It’s the best WordPress membership plugin that lets you create multiple membership levels to password-protect your content.

You can use MemberPress to set up different rules, so users can only access content based on their membership level. For more details, please see our guide on creating a WordPress membership site.

To start, you’ll first need to add memberships to your website. Simply go to MemberPress » Memberships from your WordPress dashboard and click the ‘Add New’ button.

Add new membership plan

After that, you can enter a name for your membership level, add a description, and set a price.

You can also change the billing type from one-time to recurring, as well as edit the membership to be lifetime or expire after a certain time period.

Add a membership level

Don’t forget to click the ‘Publish’ button when you’re done.

Next, you can go to MemberPress » Rules from your WordPress dashboard and click the ‘Add New’ button.

Add new membership rule

From here, you can click the dropdown menu under the ‘Protected Content’ option. MemberPress offers lots of options to protect your content, whether that is a single page or all of your WordPress pages.

For this tutorial, we’ll password-protect a single page. Simply choose the ‘A Single Page’ option from the dropdown menu and enter the title of the page.

Set up rules for password protection

Next, you’ll need to set up the Access Conditions and configure who can view the restricted page. MemberPress lets you protect content based on membership level, WordPress user role, capability, and individual members.

Let’s set ‘Membership’ is ‘Premium’ from the dropdown menus for this tutorial. This way, only premium members will be able to access the page. You can add more conditions and allow more than 1 membership level to view the page.

When you’re done, don’t forget to click the ‘Save Rule’ button.

You can then visit your website to see the password-protected page in action. Members will have to sign in to their account to view the contents of the page.

View membership password protected page

You can set up passwords for your videos, or you can offer group memberships for corporate teams. Additionally, you can create a password to give subscribers access to a paid newsletter and more.

We also have a guide on how to password-protect your forms in WordPress.

We hope this article helped you learn how to customize a password-protected page in WordPress. You may also want to see our guide on how to create a completely custom WordPress theme without writing any code, or our comparison of the best WordPress SEO plugins.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Customize a Password Protected Page in WordPress first appeared on WPBeginner.

How to Create Beautiful Coming Soon Pages in WordPress with SeedProd

Do you want to create a beautiful coming soon page for your WordPress site?

All websites need a pre-launch coming soon page. It allows you to build anticipation, create hype, and spread the word even before the launch of your main website.

In this article, we will show you how to quickly and easily create beautiful coming soon pages in WordPress.

Creating coming soon pages for a WordPress website

Why Create Coming Soon Pages in WordPress?

Coming soon pages are not just a placeholder for your website. They can be an effective lead generation tool for your business even before the site launch.

Here are a few ways that we have used coming soon pages:

  1. Gauge User Interest – If you are unsure about an idea, then coming soon pages can help you asses user interest in the project.
  2. Build Hype – Coming Soon pages can also be used to build anticipation and create hype. Give product information and offer users incentives for sharing.
  3. Capture Leads – Start building your email list and ask users to follow your social profiles. This allows you to have likes and followers as social proof even before you launch the site.

To create a coming soon page in WordPress, you would need to get the best WordPress hosting and install WordPress.

For more detailed instructions, you can also follow our step by step guide on how to make a website.

Example of what we will Create

Following are a few examples of effective coming soon page designs.

Coming soon page with countdown timer, email form, and social buttons

Coming soon page with fullscreen background image, lead signup form, and countdown timer

Coming soon page preview with email sign up form and social buttons

How to Create a Beautiful Coming Soon Page

First, you need to install and activate the SeedProd plugin. For more details, see our step by step guide on how to install a WordPress plugin.

SeedProd is the best WordPress page builder plugin on the market. It allows you to build any type of landing page including Coming Soon page to limit access to your site and turn the pre-launch page into a lead magnet.

Note: There is a free version of SeedProd available as well that you can use, but for this tutorial we’ll show the Pro version since it has more features.

Upon activation, you need to visit SeedProd » Settings page to enter your license key. You can find this information under your account on the SeedProd website.

Enter your SeedProd license key

Next, you need to visit SeedProd » Pages page and then click on the ‘Set up a Coming Soon Page’ button.

Set up a coming soon page

On the next screen, you will be asked to choose a template. SeedProd comes with several professionally designed coming soon page templates to choose from. Simply click on a template to select it.

Choose a page template

This will launch the SeedProd page builder interface. You’ll see a live preview of your selected template where you can simply point and click to select and edit any item.

SeedProd page builder interface

You can also add new blocks to your page from the left column. Let’s add a countdown timer that tells users when your site will be launched.

Simply drag the ‘Countdown’ block and drop it on the page preview where you want it to be displayed.

Add a block

After that, point and click on the countdown block, and you will see its properties in the left column.

Editing a block in SeedProd

Feel free to edit the page as much as you need. Try adding different blocks, changing text colors, add your business logo, and more.

Connect Your Email Marketing Service

Once you are finished with the design, you can switch to the ‘Connect’ tab. This is where you can connect your email sign up form to your email marketing service provider.

Connect your email marketing service

SeedProd supports all top email marketing platforms. For the sake of this tutorial, we’ll be connecting our coming soon page to Constant Contact. Simply click to select it and then click on the ‘Connect New Account’ button.

Connecting your email account

Next, you’ll need to provide an API Key and a name for this connection. Simply click on the ‘Connect to Constant Contact’ button to continue.

Getting the API key

This will open up a popup where you’ll need to log into your Constant Contact account. After that, click on the Allow button to give SeedProd access to your Contact Contact account.

Allow access

Next, it will show you the API key which you need to copy and paste into SeedProd and click ‘Connect’ button.

SeedProd will then fetch your email lists. You’ll need to choose the email list you want to use and then click on the ‘Save Integration Details’ button.

Publishing Your Coming Soon Page

Once you are finished with the page design and integrations, you are now ready to publish your coming soon page.

First, you need to click on the Save button and then select ‘Publish’ to save your coming soon page and make it publicly available.

Publish your coming soon page

SeedProd will now publish your page, and you can exit the page builder by clicking on the close button.

Next, you need to turn on the ‘Coming Soon’ mode to make sure that people visiting your website see the coming soon page only.

Simply go to SeedProd » Pages page and then switch the toggle under ‘Coming Soon Mode’ to active.

Turn on coming soon mode

SeedProd will now turn on the coming soon mode for all your website. You can still login and work on your website but other non-logged in users will only see the coming soon page you created.

Coming soon page preview

Advanced Settings for Coming Soon Page

SeedProd allows you control how your coming soon page is displayed. You can access those advanced settings by visiting the SeedProd » Pages page and clicking on the ‘Edit Page’ button under the Coming Soon Mode box.

Edit coming soon page

This will launch the page builder interface where you need to switch to the ‘Page Settings’ tab. Under the General settings you can provide a title for your page, select isolation mode, or change the page template start with a new one.

General page settings

By default, the plugin will start showing your coming soon page to all non-logged in users. However, SeedProd gives you full control on who can access your website while it is under coming soon mode.

This comes in handy in certain situations. For instance:

  • You only want to allow a client to view the site when logged in
  • You want to make some URLs publicly accessible
  • Allow user with specific IP address to view the website.

For advanced access rules, click on the ‘Access Control’ menu to select who can access your website when its under coming soon mode.

Control who can access your website under coming soon mode

You can also switch to the SEO tab to provide an SEO title, description, a featured image to be used when your link is shared on social media websites, and more. You can also choose to tell search engines not to index that page.

If you have popular SEO plugins like All in One SEO installed, then SeedProd works seamlessly with them as well.

SEO settings for your coming soon page

Lastly, you can switch to the Scripts tab where you can add any third-party scripts that you may need to add. For instance, you may want to add Google Analytics code, Facebook pixel, or other tracking code here.

Add third-party scripts to your coming soon page

Don’t forget to click on the Save button at the top to save your advanced page settings.

Switching off The Coming Soon Page

Once you are ready to publish your website, SeedProd makes it super easy to turn off the coming soon mode.

Simply visit SeedProd » Pages page and switch off the ‘Active’ toggle under the Coming Soon Mode box.

Turn off coming soon mode in WordPress

Creating a Maintenance Mode Page in WordPress

Some site owners may want to display a maintenance mode page instead of a coming soon page. A maintenance mode page is helpful if your site is undergoing maintenance, and you want to let your users know that you will be back soon.

SeedProd’s Coming Soon Pro plugin also lets you create beautiful maintenance pages in WordPress.

Simply go to SeedProd » Pages page and click on the ‘Set up a Maintenance Mode Page’ button.

Set up a maintenance mode button

The rest of the process is the same as creating a coming soon page. You will get full access control and you can easily turn off maintenance mode when you are done.

We hope this article helped you learn how to create beautiful coming soon pages in WordPress. You may also want to see our ultimate guide on how to increase your blog traffic, and our comparison of the best business phone services to improve your workflow.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Create Beautiful Coming Soon Pages in WordPress with SeedProd appeared first on WPBeginner.

Coming Soon vs Maintenance Mode: What’s the Difference (Explained)

Recently, a reader asked us if there is a difference between coming soon mode and maintenance mode?

The answer is: Yes. They are both used for different purposes and search engines treat coming soon mode differently from maintenance mode.

In this article, we’ll explain the difference between coming soon vs maintenance mode, so you can choose the best option for your needs.

Understanding the difference between coming soon mode and maintenance mode

What is Coming Soon Mode vs. Maintenance Mode, and Why Does It Matter?

Coming soon mode is used when your website has not yet been launched. Maintenance mode is used when your website is temporarily offline for maintenance.

It’s easy to get these 2 modes confused. Several WordPress plugins such as SeedProd’s Coming Soon and Maintenance Mode Plugin let you put your site into either coming soon mode or maintenance mode. You may not be sure about the difference.

It’s extremely important to use each mode correctly. Because if you choose the wrong option, then it can harm your WordPress site’s SEO rankings.

When to Use a Coming Soon Page

You should use a coming soon page after you have registered a domain name, but before you have finished creating your website.

A coming soon page lets you gather interest on your site before you launch it. Plus, it lets Google start sending you visitors.

It’s best practice to have an email newsletter form on your coming soon page. This allows people to sign up and get an email when your site goes live.

SeedProd lets you create great-looking coming soon pages with just a few clicks. Let’s take a look at how to create a coming soon page like this:

The Coming Soon page live on our demo website

How to Create a Coming Soon Page

To create a coming soon page, you first need to install and activate the SeedProd plugin. For more details, see our step by step guide on how to install a WordPress plugin.

We’re using the Pro version for our tutorial, but you can also use the free version of SeedProd.

Upon activation, you should be prompted for your license key. You will find this in your account area on the SeedProd website. Simply enter it on your WordPress site and click the ‘Check License’ button:

Enter your SeedProd license. You can find this in your Account area on the SeedProd site.

After that, go to the Settings » Coming Soon page and click the ‘Edit Coming Soon/Maintenance Page’ button:

Editing the coming soon/maintenance page in SeedProd

Then, simply pick a template for your coming soon page. There are over 50 different coming soon templates ones to choose from:

Choosing a template for your coming soon page in SeedProd

You will now be taken into SeedProd’s coming soon page editor. Go ahead and change anything you want using the tabs in the left-hand sidebar.

The SeedProd 'Kitchen Pattern' template

For instance, you can click on the Countdown tab to enable a timer. You will need to specify an end date for the timer:

Enabling the coming soon countdown in SeedProd

If you would like to integrate your coming soon form with your email marketing service, then simply click on the ‘Email Form Settings’ tab. Next, select your email marketing service from the ‘Save Subscribers To’ dropdown:

Choose your email service from the dropdown in the SeedProd coming soon page builder

You then need to follow the on-screen instructions to connect your coming soon page with your email list.

Go ahead and make any other changes you want. Once you’re happy with your coming soon page, click the ‘Save’ button at the top of the screen. Next, click the ‘Back to Settings’ link:

Save your coming soon page then click the 'Back to Settings' link

Now, simply click the ‘Enable Coming Soon Mode’ button then the ‘Save All Changes’ button.

Enable coming soon mode in SeedProd

Your coming soon page is now live. To view it, log out of your website and visit any page:

The Coming Soon page live on our demo website

When to Use Maintenance Mode

You should use maintenance mode if you need to briefly take your site offline for changes or updates.

For instance, you might want to use maintenance mode while changing WordPress themes. This ensures that your site still functions correctly and looks good with the new theme.

Another good time to use maintenance mode is if you’re adding an online store to your site. You can leave your website online but put your store into maintenance mode.

Maintenance mode lets search engines know that your site is currently down. It does this by returning the header code 503. That way, your site’s SEO won’t be affected by the downtime.

It’s good practice to let users know that your site will be back soon, too. You can do this by putting a message on your maintenance page. You might want to add an email form so they can get an email alert once your site is back up.

Tip: When you update plugins, themes, or core WordPress, your site will automatically go into maintenance mode for a few seconds. If your site gets stuck in this mode, we have instructions on fixing the WordPress maintenance mode error.

How to Put Your Site in Maintenance Mode

To put your site in maintenance mode, first install and activate the SeedProd plugin.

Next, follow the instructions above for creating a coming soon page above to create your maintenance mode page.

When you are ready to put your site into maintenance mode, simply go to the Settings » Coming Soon Pro page in your WordPress admin. Then, select the ‘Enable Maintenance Mode’ option and click the ‘Save All Changes’ button.

Enabling maintenance mode in SeedProd

Remember, maintenance mode should only be used when your site is down for maintenance. If you have not yet launched your site, use coming soon mode instead.

We hope this article helped you understand how to choose coming soon vs maintenance mode. You may also want to check out our guide on the must have WordPress plugins for your website and our guide on how to install Google Analytics in WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post Coming Soon vs Maintenance Mode: What’s the Difference (Explained) appeared first on WPBeginner.