Card's Images

Step 5:

Size, Orientation, Scrollable (overflow), Radius, and Margin

5

5. GIF

5. Video

5.1. Set -Div's- Size of: "cardimages"

Width: 280 px

Height: 270 px

5.1. Written steps

-Inside the Properties Panel-

A. [Click] the Width size container and [type] the new value:

• You can also change the size value using the up and down arrows.

• The default Size of a new Div is Fixed, you do not need to change it.

• The default Unit of Fixed size is Pixels, you do not need to change it.

B. [Click] the Height size container and [type] the new value:

• You can also change the size value using the up and down arrows.

• The default Size of a new Div is Fixed, you do not need to change it.

• The default Unit of Fixed size is Pixels, you do not need to change it.

5.2. Set -Div's- Orientation of: "cardimages"

Horizontal

5.2. Written steps

-Inside the Properties Panel-

[Click] the Horizontal button, inside the Orientation section:

• Set the Div's flex-direction to row.

• Maintain Div's Main and Cross axis Alignment.

5.3. Check off -Div's- Scrollable (overflow) of: "cardimages"

Scrollable (overflow): [checked off]

5.3. Written steps

5.4. Set -Div's- Radius of: "cardimages "

15

5.4. Written steps

-Inside the Div's Properties Panel-

[Click] the Radius container, and [type] the new value:

• The Radius applies to all four sides of a Div.

• You can also change the size value using the up and down arrows.

• The default Unit is in Pixels.

5.5. Set -Div's- Margin of: "cardimages"

Bottom: 18

5.5. Written steps

-Inside the Properties Panel-

A. [Click] the Margin Top container and [type] the new value:

• You can also change the size value using the up and down arrows.

• The default Unit is in Pixels, you do not need to change it.

B. [Click] the Margin Bottom container and [type] the new value:

• You can also change the size value using the up and down arrows.

• The default Unit is in Pixels, you do not need to change it.

Step 6:

Div, Size, and Image Source

6

6. GIF

6. Video

6.1. Create new child -Divs- inside of the Div: "cardimages"

New Div 1 name: cardimage1

New Div 2 name: cardimage2

New Div 3 name: cardimage3

New Div 4 name: cardimage4

New Div 5 name: cardimage5

6.1. Written steps

-Inside the Element Tree-

A. [Click] the Text Icon:

• The button is located at the top of the panel, below the Screens.

• The Icon will turn blue, and your pointer will change.

B. Drag your pointer and click "homebanner":

• The new element will appear as a child of the Screen.

• The Text will be created with the default name "Text #".

-Inside the Div's Properties Panel-

C. [Click] the current name of the Text and [type] the new one:

• The new name should be lowercase, without any spaces or special characters.

• The name will be updated in the Element Tree after you have [clicked] away.

6.2. Set -Divs'- Size of: "cardimage1", "cardimage2", "cardimage3", "cardimage4", and "cardimage5"

Width: 280 px

Height: Fill

6.2. Written steps

-Inside the Properties Panel-

A. [Click] the Width size container and [type] the new value:

• You can also change the size value using the up and down arrows.

• The default Size of a new Div is Fixed, you do not need to change it.

• The default Unit of Fixed size is Pixels, you do not need to change it.

B. [Click] the Fill button, inside the Height section:

• The horizontal size of the Div will be the 100% of the screen.

• You cannot use Fill size in the case there is a parent element in Wrap size.

6.3. Set -Div's- Image Source of: "cardimage1"

Assets/Stays/Stay1_Main/Stay1_Main_1.png

6.3. Written steps

-Inside the Div's Properties Panel-

A. [Click] the Background toggle and [click] Image.

B. [Click] the Image Source dropdown and [click] the FilePath:

• The following media formats are allowed: JPG, JPEG, PNG and GIF.

• All the files need to be within the main projects folder.

• Files can be located in different subfolders.

6.4. Set -Div's- Image Source of: "cardimage3"

Assets/Stays/Stay1_Main/Stay1_Main_2.png

6.4. Written steps

-Inside the Div's Properties Panel-

A. [Click] the Background toggle and [click] Image.

B. [Click] the Image Source dropdown and [click] the FilePath:

• The following media formats are allowed: JPG, JPEG, PNG and GIF.

• All the files need to be within the main projects folder.

• Files can be located in different subfolders.

6.5. Set -Div's- Image Source of: "cardimage3"

Assets/Stays/Stay1_Main/Stay1_Main_3.png

6.5. Written steps

-Inside the Div's Properties Panel-

A. [Click] the Background toggle and [click] Image.

B. [Click] the Image Source dropdown and [click] the FilePath:

• The following media formats are allowed: JPG, JPEG, PNG and GIF.

• All the files need to be within the main projects folder.

• Files can be located in different subfolders.

6.6. Set -Div's- Image Source of: "cardimage4"

Assets/Stays/Stay1_Main/Stay1_Main_4.png

6.6. Written steps

-Inside the Div's Properties Panel-

A. [Click] the Background toggle and [click] Image.

B. [Click] the Image Source dropdown and [click] the FilePath:

• The following media formats are allowed: JPG, JPEG, PNG and GIF.

• All the files need to be within the main projects folder.

• Files can be located in different subfolders.

6.7. Set -Div's- Image Source of: "cardimage5"

Assets/Stays/Stay1_Main/Stay1_Main_5.png

6.7. Written steps

-Inside the Div's Properties Panel-

A. [Click] the Background toggle and [click] Image.

B. [Click] the Image Source dropdown and [click] the FilePath:

• The following media formats are allowed: JPG, JPEG, PNG and GIF.

• All the files need to be within the main projects folder.

• Files can be located in different subfolders.

Save.

Save

GIF

Video

Click the Save button.