How to Add the Login Box

You can easily add the login box and customize its look to suit your taste. The log in box will be automatically shown once

your membership site is limited the access to members only. It will not show if you use this template in the funnel.






Step 1: Go to "Sites" then click "Site Templates".





Step 2: Select the template which you want to add the header image. If it's the free default template, make sure that you

have duplicated and customize its copy version.





Step 3: Go to "Layout" and drag the "Page Element" to the editor area.





Step 4: Select "login-box".





Step 5: Select the log in box format.





Step 6: Choose the style of the log in box. "Use Default Style" refers to the format from the system while "Use Current

Style" refers to the format (color, size, padding & margin) that you have already made in the "Advanced" option.





Step 7: To customize its style, go to "Advanced". Select "Login Box" and then "Box Style". Choose "Size" to set up

"Width", "Height", "Padding" & "Margin". Choose "Background" to set up "Background Color", "Background Image",

"Background Opacity" and "Drop Shadow". Choose "Border" to set up the "Border" & "Corner". "Custom CSS" is the

advanced option in case you need to insert any code.





Step 8: Next, "Username/Pwd Label" is to set up the format of username & password label. If you want to use any other

words, you can put it in "Lable". Also, you can set up its "Width", "Padding" or "Margin". Then go to "Text" to set up the

format of the username & password label. You can set up the "Fonts", "Text Shadow" and "Text Effects". And "Custom

CSS" is the advanced option in case you need to insert any code.





Step 9: "Username/Pwd Input Box" is the where your customers fill in the username & password. You can set up the

"Width", "Padding", "Margin" and the "Border" & "Corner". "Custom CSS" is the advanced option in case you need to insert any code.





Step 10: "Remember Me/Forgot Pwd" is the option to keep the password and the "forgot password" link. You can set up

the "Paddins" & "Margin". Also the "Fonts" format as well as the "Text Shadow" & "Text Effects". "Custom CSS" is the

advanced option in case you need to insert any code.





Step 11: "Button Style" is where to set up the "Log in" button. You can set up the size (Width, Height and Margin) of the

button portion. Next, set up the background of the buttom. You can use select the color, image, opacity and the drop

shadow. After that, you can enter the log in wording of your own at "Label" and select its "Font", "Text Shadow" and "Text

Effects". Also, you can set up the "Border" and "Corner". "Custom CSS" is the advanced option in case you need to

insert any code.





Step 12: "Login Link" refers to the upper part of the portion where the "Login" & "Close" exist. You are able to adjust its

size (Width, Height, Padding & Margin). For background, you are able to use the background color or make an image as the

background. "Opacity" & "Drop Shadow" are optional. You can also change the font format and add the "Text Shadow"

and "Text Effects". Settings up the border and corner if you want. Also, "Custom CSS" is the advanced option in case you

need to insert any code.





Step 13: "Login Link Arrow" is the arrow to expand or close the log in box. Set up the "Arrow Size", "Padding" & "Arrow

Color". Also, you can set up its effect: Text Shadow & Text Effects.