What is the Custom App Login Page?

The custom app login page lets you enhance your brand and your user experience by making it more in line with your company, organization, or use case.

This is just one of the many ways that you can make the app your own!

With it, you can:

  • Add a custom logo
  • Adjust the colors to match your brand
  • Add a custom background
  • Adjust the verbiage to say what you want it to
  • Adjust the login button’s height, width, and corner radius
  • Turn on and off social login (on Professional plans and above)

How to access the Custom App Login Page:

Simply go to Design >> User Login

What are the different sections of the User Login tab, and how do you use them?

We’ll go through the User Login tab section by section so that you know how to make an awesome looking login screen!

First we’ll go through the options found in the Graphics section:

Logo

The Logo section allows you to upload your custom logo which will appear above the “Email” and “Password” fields.

Here’s how you can add your logo to the login screen:

Step 1: Click on the image upload button
Click on the gray image upload button:

This will open up the Media Library where you can add an image already uploaded to the Media Library, or you can upload a file from your computer.

Step 2: (optional) Adjust the image’s scale in the login screen

We provide a slider that allows you to adjust the scale of your logo as it’s displayed in the login screen.

Custom Background

The Custom Background section allows you to upload your own custom background or apply a custom colored gradient to the login screen. Let’s go through both options:

Custom Background Image

If you want to use your own image as the background for your login screen, read on to find out how to do this!

Step 1: Click on the image upload button
Click on the gray image upload button:

This will open up the Media Library where you can add an image already uploaded to the Media Library, or you can upload a file from your computer.

Note: We recommend that you upload two images that either a jpg or a png. One that’s 750px x 1043px for phones, and one that’s 1536px x 2048px for tablets.

Step 2: (optional) Adjust the background image’s opacity
We provide a slider that allows you to adjust the opacity of your background image in the login screen.

Background Color

If you want to use a single background color or a two color gradient as the background for your login screen, read on to find out how to do this!

Step 1: Select “On” under “Background Color”
First you will need to enable the background color option

Step 2: Select the color(s) that you want to use
Click on the box next to “Background Color” to begin selecting the color(s) that you’d like to use in the background of the login screen.

This will bring up the color selection box where you have a number of options!

You can use a single color by selecting “Solid” for “Color Type”:

Or you can create a gradient between two colors by selecting “Gadient” for “Color Type”:

Note: You have the ability to change how much of the screen each color takes up, the opacity of each color, as well as the option to choose from a number of different gradient types.

You can either use our color picker, or if you know the hex code of the color you want to use, you can type it into this field:

Pro Tip: You can combine the background image and color to produce some amazing results!

Did you know that you can combine the background image and background color that you created to make some really stunning results? All you need to do is enable the background color and adjust the opacity of the background image.

How to Adjust the Input Fields

The “Input Fields” section allows you to adjust the look of the “Email” and “Password” input fields.

How you can change the look of the input fields

You can change the color of the text in the  “Email” and “Password” input fields by clicking on the color picker next to “Text”

Click on this box to change the color of the “Email” and “Password” text in the input fields:

You can change the color of the line that displays under the “Email” and “Password” fields by clicking on the color picker next to “Border Color”

Click on this box to change the color of the line that shows under the  “Email” and “Password” input fields:

You can change the color of the icons that display inside the “Email” and “Password” fields by clicking on the color picker next to “Icons”

Click on this box to change the color of the icons that display inside to the  “Email” and “Password” input fields:

We also give you the option to hide these icons. Simply select “Off” to hide these icons here:

Note: For all three options, you can either use our color picker, or if you know the hex code of the color you want to use, you can type it into this field:

How to Adjust the Button & Text

The “Button & Text” section allows you to adjust the look of the “Login” button as well as the links and text in the login screen. Here’s how you can change the look of those elements in the login screen:

You can change the color of the “Login” button’s text by clicking on the color picker next to “Button Text”

Click on this box to change the color of the text in the “Login” button:

You can change the color of the text that displays under the “Login” button by clicking on the color picker next to “Text”

Click on this box to change the color of the text that displays under the “Login” button:

You can change the color of the “Login” button by clicking on the color picker next to “Buttons”

Click on this box to change the color of the “Login” button:

You can change the color of the “Forgot Password” and “Register” links by clicking on the color picker next to “Links”

Click on this box to change the color of the links found within the Login screen:

You can also change the size and shape of the “Login” button in this section

We give you the freedom to change the size and shape of the “Login” button in the login screen! To do this, all you need to do is adjust the three sliders found in this section:

The Button Corner Radius slider makes the edges of the button more or less rounded. If you would like to make the button look like an oval, then move the slider all the way to the right. If you would like it to be a rectangle, move it all the way to the left.

The Button Width and Button Height allow you to adjust how wide and tall you want your login button to be.

You could even turn your login button into a circle!

How to Change your Custom Login Page's Settings

Login Settings

Here you can enable or disable the ability to login or register an account with a Twitter and Facebook profile.

Note: This option is only available on our Professional level and above plans.

Domain Settings

Here you can set up your own domain for your users. This comes in handy and makes it easier for your users for internal apps when they all have the same email domain. For example, if all of your users have emails ending in “@yourdomain.com” you can type that domain into this box. This will allow your users such as “cool.guy@yourdomain.com” to login with just “cool.guy” since your domain will be automatically attached to the end of their username in-app.

If your user types in their full email address, or an email address with a different email domain, that will overwrite the default domain that was set up. So, if you have “@yourdomain.com” set up as your default domain and someone registers as "cool.guy@gmail.com", they will be registered as cool.guy@gmail.com

Also, if they type in their email address with the default domain included, out system won’t attach the default domain to the end of their email address. So if the user “cool.guy@yourdomain.com” registers with the full email address, they will be registered as that, not “cool.guy@yourdomain.com@yourdomain.com”.

Note: This option is only available on our Professional-level and above plans.

Language Settings

The Language Settings allows you to edit phrases and messages found in the login screen.

Related Articles

In addition to this article, we recommend checking out the following related articles so that you have a better insight into how to use the system to its fullest advantage:

Still have questions? No problem! Reach out to us and we’d be happy to help :)

Did this answer your question?