Improving your homepage

In this tutorial, we're going to make your home page look like this:

Also, the main banner image will randomly switch between two images!

Adding the banner

Creating a Data² Drive

To upload and use an image we will use the Data² Drive. To add a Data² Drive:

1. Double-click on the Builder background.
2. In the menu that appears, select Media in the left tab.
3. Click on Drive.
4. If necessary, resize and reposition your Drive.
5. Rename your Drive.

Uploading an image to the Data² Drive

Since I really like coffee, I'm going to use this image as the homepage banner. Drag your image into Drive to upload it.

Using the image in the Block

First, select the Block with the Homepage text that was created earlier. Then look for the Fill parameter, select Image, select the Drive that was created and the image that is there.

In the image options, put the following settings:

• Size: Cover
• Position X: Center
• Position Y: Bottom
• Repeat: No Repeat

Double-click the Block to delete the Homepage text and adjust the Block size if necessary.

Adding a text

Use the Block Tool (shortcut: B) to draw a Block which will be used to place a callout text on top of the image.

Double click on Block and write the text you want, in this case, I decided to write The best coffee. Increase the font size by changing the Text Size parameter to 48. Disable Fill by clicking on the circle next to its title.

In Text Format, center the text vertically by clicking on the third button in the second row. Set the Font Weight parameter to Bold and Text Transform to UPPERCASE. Then place your Block with the text.

Block dimensions for different screen sizes

If your resolution is not the same as the Artboard, there is a very obvious problem with our banner: its size.

Banner on artboard:

Banner on preview:

To solve this, let's understand the Position parameter constraints.

Select the banner block with the image, look for the Position parameter and click on Grow Horizontally and Grow Vertically. Preview your Artboard and see how it turned out.

Each line outside the square is a constraint, and indicates that if that constraint is activated, the distance for that direction will be maintained.

To better understand how constraints work, select the Block with the link to the customer administration page, and click on two restrictions: top and left.

In the video above, the Block maintains a fixed distance from the top and left of the screen, that is, as the screen increases in size (by zooming out), the Block moves upwards because even though the total height screen has grown, the distance to the top remains.

Placing a conditional banner

A very powerful feature of Data² is being able to change the type of parameters. What this means in practice is that many things that could only be solved with code, can be solved with Data².

Let's turn the banner image into a conditional value, for that:

• Copy the current value of Fill by clicking on the ... button, and in the menu that pops up, click on Copy param to clipboard
• Then click on the button with f() and change the type to If.
• Click on Fill to navigate, and in the Then parameter, paste the previous Fill, opening the menu and clicking on Paste param from clipboard. In this step, the browser may ask for your permission to access what was copied, approve it so that you can successfully paste the parameter.
• In the Else parameter, click on f() and select Fill.
• Put a color as background.
• Now click on Compare, add an item by clicking on Add Item.
• Click on f() and change the type of this item to Boolean.
• When changing the toggle button value, the backgrounds will alternate!

What is a conditional value?
A value that is attached to a clause, and has different values depending on whether the clause is true or false is a conditional value. For example, the shelf life of a food is a conditional value of the current date and the shelf life:

`If` the current date is before the expiry date, `Then` you can eat it, `Else` it's expired and you shouldn't have it.

Now, let's put this image in the Color place, and use a random number to switch between these two backgrounds.

• Click Fill to navigate.
• In the Else parameter, click on Image.
• Select the Drive, click to select the file, and drag your image to the Drive.
• When finished sending, select that image.
• Configure image options:
  • Size: Cover
  • Position X: Center
  • Position Y: Center
  • Repeat: No Repeat
• Click on Compare, on the item whose type was Boolean, click on the f() button to change the type to EqualOrGreaterThan.
• Click on the first item to navigate.
• In the Subject parameter, click on the f() and select MathRandom. This type returns a random number between 0 and 1.
• In the Comparison Subject parameter, put 0.5.

This means that every time you enter the homepage, the user will se a different banner that will alternate with the same ratio!