Creating a stunning WordPress Login Page with Community Builder Theme
Flexibility and speed are the forte of the Community Builder theme for WordPress and BuddyPress. Today, I will show you the various ways to create an amazing login page for your WordPress/BuddyPress website.
Requirements:-
- A working install of WordPress/BuddyPress
- Community Builder Theme for WordPress & BuddyPress
- Internet connection
- And some imagination!
If you have looked at the default Community Builder login page, it is mild. The goal is to let site admins personalize it easily as they want. This tutorial is aimed at helping that cause.
Step 1:- Visit Dashboard->Appearance->Customize
You will see the Community Builder panels listed there. If you are not familiar, please do check our documentation.
Step 2:- Navigate to Styling Panel->Login Page
You will see the Login Page section at the bottom of the styling panel. Opening the section will present you with all the options for login page customization. If you want to explore all these options, please see our documentation about the login page customization.
Step 3:- Planning
We are only going to use the following customization options in this tutorial:-
- Mask color
- Background Image
- Login Box background-color
- Text color
- Link color
You are welcome to explore and experiment with the other options.
Ok, That's enough, let us start with the actual
Step 4:- Customization
We will need an image for the background. I prefer pixabay.com or pexels.com. In this tutorial, I will use an image from pexels.com. Please download the large-size image from the link. Let us upload it as the background. Here is a screenshot:-
Now, let us get back to our login page customize screen. Let us upload the image we just downloaded as the background image. Here is how it looks:-
And here is our login page.
Oops, that looks bad. The problem is we just uploaded an image but the text/link colors do not have proper contrast with the background. Also, The background is a little bit bright.
Let us fix that now:-
Let us change the opacity of the background. We will use .45 opacity as shown in the screenshot below:-
Now, we will make our login box translucent. Let us just change the opacity of the login box background to .25 as shown below
You may play with other colors and transparency here. Just try it 🙂
The last thing remaining is the color of the text/link. For now, let us just set all these to #fff(white) from the settings
- Site Name -> Link Color
- Login Page->Link Color
- Login Page->Text Color
Here is what we get.
And here are a few more styles that I did quickly.
There are thousands of possibilities if you play with all the options that we have for the login page. You can customize the logo, font, color, background, mask color, and a lot more, for all most all the elements on the page. Have a great time building social communities with BuddyPress and the Community Builder theme.