Page Designer Modules

  1. Home
  2. Support
  3. Page Designer Modules
  4. Login Module with the Website Page Designer

Login Module with the Website Page Designer

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.

Define contents

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.

Admin label

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.

Title Text

Define the font, color, alignment, line height, and other settings for the title of the module.

Body Text

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.

Box Shadow

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.

Advanced settings

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.

Use Case

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!

Something missing? Contact us
Was this article helpful to you? Yes No

How can we help?