In addition to the last checkbox selected, for the password and PIN you should also go to the Content format dropdown and select Password.

Now, you will repeat this process for both the Password and PIN fields. Check the This input should not be empty box. Change the Placeholder text to “Username” as well, so the user knows to enter their username in this field. You will now want to change the name Input A to something more easily identifiable. click + drag a rectangle below your label inside your login panel. On the left build panel, under the Input Forms drop down, click on the Input button. Next, we need to add the text fields where the user will enter their username, password, and PIN. You can then right click on the text element and choose center horizontally to align it in the center of the rectangle.

The option chosen in this tutorial was H1 Heading - Dark. Type whatever you would like to be the title of this section, and then click on the Style drop down menu underneath the Start / Edit workflow button. You can now edit the text within the box. On the left building panel under Visual Elements, click on Text and click + drag a smaller rectangle within the rectangle you have already made. Next, we will add some text to the rectangle to give it a label. This tutorial will just change the color of it. You can customize various characteristics of the rectangle shape you created in this edit panel. There will be a red outline indicating the size of the group that has previously been made, and you want to keep your shape within that rectangle.Īt the top of the new edit panel on the right hand side where it says Shape A, rename the panel to something that you will recognize as the Login Panel. Then, click + drag inside of the group you have already created to place the new shape inside of it. Under the Visual Elements drop down, click on the Shape option. Bubble has a Signup / Login Popup element under the Reusable element drop down, however we will be walking through creating one from scratch. Next, to actually build the login screen. This group will hold your items together that you are creating, and make it easier to make decisions for all elements at the same time (such as hiding or showing them at certain times).

Before we start creating the panel itself, in the building panel under the Containers drop down, select Group and click + drag a large rectangle on your blank canvas. Now, on the far left, click back to the design tab.

How to get nexus plugin