If you need to create an area of your website for registered users only, the login module will save you plenty of time! It’s very easy to create a login form where your users can sign in.
Just go to the page designer, to start editing the page where you wish to locate the login module. Modules can be added inside rows, so be sure to create a row first where you want the module to appear. Then, add a new module by clicking on the gray plus sign. Choose the module from the list. If you prefer to find the module automatically, it’s also possible to type “login” in the search bar on top.
You will define what the module will include inside the contents tab.
Define the title that will appear within the module, above the login form. Type also the text that will show within the login box, below the title, or just leave it blank if you don’t want this description.
Decide if the user should be redirected to the current page.
If you want that the module opens a new URL when someone clicks on it, paste that link here and decide if the link will open in the same window or tab.
Add a background color, gradient, image or video to your module. You can also disable the use of background color altogether.
You can modify the module’s label for easier identification.
Customize the design
To customize your design, use the following options.
Customize the background color, text color, shadows, and borders of the two login boxes that correspond to the username and password input fields.
Control how your text is displayed in terms of alignment and text shadow.
Define the font, color, alignment, line height, and other settings for the title of the module.
You can also adjust the font settings for the body text.
Style your button here.
Adjust the width of the module.
Customize margins and padding sizes.
Define the border’s corner, style, color and width for your module.
Here you can enable box shadow.
Adjust the hue of the module as a whole.
Give an animation style to the module, like fading or sliding when it appears.
Using this tab you are able to insert CSS code, select device visibility, and manage transitions. Check this guide to know more about how to use these settings.
Let’s introduce the following options on our login module.
Form Field Background Color: #bfbfbf
Text Color: #bfbfbf
Fields rounded Corners: 8px
Fields Box shadow: first option
Title Text Color: #0972a3
Title Font Size: 40px
Title Text Alignment: center
Body Text Color: #bfbfbf
Body Font Size: 20px
Body Font Alignment: center
Use Custom Styles for Button: YES
Button Text Color: #000000
Button border Color: #000000
Button icon: star icon
Only Show Icon On Hover for Button: NO
Border Color: #bfbfbf
Border Width: 1px
Border rounded Corners: 8px
Custom Padding: 50px Top, 50px Right, 50px Bottom, 50px Left
And this is how it looks!