Password Protected Pages in Divi

On many Home-Start sites, and some of the regional charity websites I have included one or more password based pages. You can add these yourself, it is controlled in the editing view of the page or post on the right handside where it refers to Visibility. You have the following available:

  • Public
  • Public (and stick to the front page)
  • Password Protected 
  • Private

Items are normally set up as Public. If you use Public and stick to the front page, check what it does first. It may not work as you expect it to work because it relates to the template. 

Password protected pages in Divi

There is an annoying problem with password protected pages in Divi, if you try to enter one the first time you will see small writing on the left and a button on the right. On a wide screen these look totally disconnected, and not obvious. If you have a non Divi based website, you are unaffected. 

Self Help

If your website is based on the Divi template, you can use this CSS code to fix the problem on your site and make it more user friendly.  It is not difficult to do. 

Download the text file below, open it and copy the contents out of the file in your editor.

I make no claim that this is my own work, and unfortunately, I do not know who the original author was to thank them. 

Where to put the code. 

Log into your Divi based site, look in the menu on the left for Divi which will be towards the bottom of the column. Click on it and you will see a page called Divi Theme Options. Be careful what you touch on this page. But don’t be shy!

Scroll down to the bottom and you will find a section there called Custom CSS and a large grey box.  It may already have some code in it. If it does carefully position your cursor below the code and do not overwrite what is there. What you want to do is add it after any existing code. 

Paste it into the box as in this example (note in my example the lines 1 thru 3 contain some code in already, in my example I pasted it from line 5 onwards. Ignore the alert symbol by the padding command, it does not matter in this case. 

Screen shot of added code

When you have added the code click on Save Changes, then wait to see a green tick. 

Then view your website, locate your password protected page and click on the link for it. Probably best to do this with a unique browser, otherwise the chances are you will enter the page because the password is set in a cookie in your browser. 

What this code will do is this in the image below. It puts the password dialogue in the centre of your screen rather than from one edge to the other edge which is confusing on a wide screen display. 

Screen shot of password protect warning in a Divi site

Stuck or broken something?

Drop me a line and I will do it for you.