Layouts

Layouts in login screens help to arrange and organize different elements like input fields, buttons, logos, and messages. 

They determine the visual structure and flow of the login interface, thereby influencing user experience and usability significantly.

Super Admin can drag and drop the preferred layout type from the list of layouts on the canvas of the Login Screen.

Types of Layout

The Layouts available under the Login Screen are summarized in the following table.

SL No	Layout type	Percentage
1	Figure: Single column	100%
2	Fig: Two columns in 1:1 ratio	50% - 50%
3	Fig: Two columns in 1:4 ratio	20% - 80% or  80% - 20%
4	Fig: Two columns in 3:2 ratio	60% - 40%
5	Fig: Two columns in 3:1 ratio	75% - 25%  or  25% - 75%
6	Figure: Three columns in 1:2:1 ratio	25% - 50% - 25%
7	Fig: Three columns in 1:1:1 ratio	33% - 33% - 33%
8	Fig: Four columns in 1:1:1:1 ratio	25% - 25% - 25% - 25%
9	Fig: Four columns in 1:1:1:1:1 ratio	20% - 20% - 20% - 20% - 20%
10	Fig: Four columns in 1:1:1:1:1:1 ratio	16% -16% -16% - 16% -16% - 16%

Configure Layout

This section contains the list of steps using which Super Admin can configure the layouts from the Login screen.

To configure the Layout, perform the following steps:

1. Navigate to Authentication Details > Customize Login Screen.
   
   
2. Click Web to configure the Login Screen for a web browser to access a website or web application. Under the Layout tab, you can view a list of layouts that can be dragged and dropped anywhere on the screen. Figure: Web Layout
   
   
3. Click Mobile to configure the Login Screen for a mobile browser that adapts to various screen sizes of mobile or tablet devices. 
   Figure: Mobile layout
   
   
4. Drag and drop the Layout to the screen.
   Figure: Drag and drop Layouts (container label 100% and 25% in four equal halves)
   
   
5. You can configure, clone or delete the Layout by using the respective icons on the top right corner of the layout.
   Figure: Configuring the layout
   
   
6. Click Settings to configure the properties of the container. The screenshot appears as shown:
   Figure: Configuring the properties
   
   
7. Type the name in the Container Name textbox in the Properties pop-up window. Click Save.
   Figure: Container Name
   Here Container Name is specified as the main container.
    
   
8. Navigate to the Appearance tab for applying background to the Layout. A pop-up window appears as shown below:Figure: Appearance
   
   The table below contains the list of fields and their descriptions that are available under the Appearance section:
   Field Description
   

Background
Background	Give an appropriate background to the Properties. Figure: Background Type
Transparent	If you select Transparent, then you can add transparency to the Background. The screen appears as shown below: Figure: Transparency Use a slider to define the percentage of transparency. For example, here Transparency is kept at 70 %.
Solid	If you select Solid, then you can select the color of the Background. The screen appears as shown below: Figure: Solid Background
Image	If you select Image, then you can upload the image to Background. Upload the image by browsing from the device. The screen appears as shown below: Figure: Image upload The screen appears as shown:Figure: Uploaded image
Border
Border	Style the border by the selecting desired Border type. Figure: Border
Side	You can select the sides for which the border has to be applied from the side dropdown. Figure: Side
Width	Select the thickness of the divider by selecting the appropriate option from the Width dropdown. Figure: Width
Color	You can give the desired color for the border. You can click the default color cube to load the color palette and select the desired RGB from the color tile. Figure: Color Figure: Color palette
Radius	Select the border Radius by selecting the desired radius from the Radius Slider. Figure: Radius If Radius is zero, then the corners will be sharp, if the radius is increased then the corners will become rounded.
Padding
Padding	You can add auto padding to the Top, Right, Bottom and Left by enabling the Padding switch in the Appearance popup. The screen appears as: Figure: Enable auto padding If you disable the Padding switch, you can adjust the Top, Right, Bottom and Left padding of the container as per needed! Figure: Disable auto padding
Widget Alignment	Select the type of Alignment for the widget. Figure: Alignment

The customized Layout of the Login Screen appears as shown below.

 Figure: Customized layout

To configure templates under Login Screen, see Templates.