Card's Info

Step 7:

Div, Text, and Size

7

7. Video

7. GIF

7.1. Create new child -Div- inside of the Screen: "cardinfo"

New Div name: cardinfodiv1

7.1. Written steps

-Inside the Element Tree-

A. [Click] the Div 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 "Home":

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

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

-Inside the Properties Panel-

C. [Click] the current name of the Div 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.

7.2. Create new child -Texts- inside of the Div: "cardinfo"

New Text 1 name: cardinfotext1

New Text 2 name: cardinfotext2

7.2. Written steps

-Inside the Element Tree-

A. [Click] the Icon 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 "searchmenudiv5":

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

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

-Inside the Icon's Properties Panel-

C. [Click] the current name of the Icon 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.

7.3. Create new child -Div- inside of the Screen: "cardinfo"

New Div name: cardinfodiv2

7.3. Written steps

-Inside the Element Tree-

A. [Click] the Div 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 "Home":

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

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

-Inside the Properties Panel-

C. [Click] the current name of the Div 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.

7.4. Set -Div's- Size of: "cardinfo"

Width: Fill

Height: Wrap

7.4. Written steps

-Inside the Div's Properties Panel-

A. [Click] the Fill button, inside the Width 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.

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

• The vertical size of the Div will become its child's maximum combined size.

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

Step 8:

Text, Div, Icon, and Size

8.

8. Video

8. GIF

8.1. Create new child -Text- inside of the Div: "cardinfodiv1"

New Text name: cardinfodiv1text1

2.1. Written steps

-Inside the Element Tree-

A. [Click] the Icon 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 "searchmenudiv5":

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

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

-Inside the Icon's Properties Panel-

C. [Click] the current name of the Icon 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.

8.2. Create new child -Div- inside of the Screen: "cardinfodiv1"

New Div name: cardinfodiv1div

1.1. Written steps

-Inside the Element Tree-

A. [Click] the Div 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 "Home":

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

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

-Inside the Properties Panel-

C. [Click] the current name of the Div 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.

8.3. Create new child -Icon- inside of the Div: "cardinfodiv1div"

New Icon Name: cardinfodiv1icon1

8.3. Written steps

-Inside the Element Tree-

A. [Click] the Icon 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 "searchmenudiv5":

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

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

-Inside the Icon's Properties Panel-

C. [Click] the current name of the Icon 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.

8.4. Create new child -Texts- inside of the Div: "cardinfodiv1div"

New Text name: cardinfodiv1text2

8.4. Written steps

-Inside the Element Tree-

A. [Click] the Icon 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 "searchmenudiv5":

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

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

-Inside the Icon's Properties Panel-

C. [Click] the current name of the Icon 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.

8.5. Set -Div's- Size of: "cardinfodiv1div"

Width: Wrap

Height: Wrap

8.5. Written steps

-Inside the Div's Properties Panel-

A. [Click] the Wrap button, inside the Height section:

• The vertical size of the Div will become its child's maximum combined size.

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

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

• The vertical size of the Div will become its child's maximum combined size.

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

8.6. Set -Div's- Size of: "cardinfodiv1"

Width: Wrap

Height: Wrap

8.6. Written steps

-Inside the Div's Properties Panel-

A. [Click] the Wrap button, inside the Height section:

• The vertical size of the Div will become its child's maximum combined size.

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

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

• The vertical size of the Div will become its child's maximum combined size.

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

Step 9:

Text, Div, Icon, and Size

9

9. Video

9. GIF

9.1. Set Text of: "cardinfodiv1text1"

Selected Text: Milford, Pennsylvania

9.1. Written steps

-Inside the Icon's Properties Panel-

[Click] the Icon container and [click] the Icon:

• You can use the Icon name to find it through the SearchBar.

• You can also find it through each Material category's dropdown.

9.2. Set Text of: "cardinfodiv1text2"

Selected Text: night

9.2. Written steps

-Inside the Icon's Properties Panel-

[Click] the Icon container and [click] the Icon:

• You can use the Icon name to find it through the SearchBar.

• You can also find it through each Material category's dropdown.

9.3. Set -Text- Size of: "cardinfodiv1text1", and "cardinfodiv1text2"

16

9.3. Written steps

-Inside the Icon's Properties Panel-

[Click] the Icon Size container and [type] the new value:

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

9.4. Set Icon of: "cardinfodiv1icon1"

Selected Icon: star

9.4. Written steps

-Inside the Icon's Properties Panel-

[Click] the Icon container and [click] the Icon:

• You can use the Icon name to find it through the SearchBar.

• You can also find it through each Material category's dropdown.

9.5. Set -Icon- Size of: "cardinfodiv1icon1"

16

9.5. Written steps

-Inside the Icon's Properties Panel-

[Click] the Icon Size container and [type] the new value:

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

Step 10:

Text, Div, Icon, and Size

10

10. Video

10. GIF

10.1. Set Text of: "cardinfotext1"

Selected Text: 61 miles away

10.1. Written steps

-Inside the Icon's Properties Panel-

[Click] the Icon container and [click] the Icon:

• You can use the Icon name to find it through the SearchBar.

• You can also find it through each Material category's dropdown.

10.2. Set -Text's- Margin of: "cardinfotext1"

Bottom: 2 px

10.2. Written steps

-Inside the Properties Panel-

[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.

10.3. Set Text of: "cardinfotext2"

Selected Text: Jan 22 - 28

10.3. Written steps

-Inside the Icon's Properties Panel-

[Click] the Icon container and [click] the Icon:

• You can use the Icon name to find it through the SearchBar.

• You can also find it through each Material category's dropdown.

10.4. Set -Text's- Margin of: "cardinfotext2"

Bottom: 5 px

10.4. Written steps

-Inside the Properties Panel-

[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.

10.5. Set -Text- Size of: "cardinfotext1", and "cardinfotext2"

14

10.5. Written steps

-Inside the Icon's Properties Panel-

[Click] the Icon Size container and [type] the new value:

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

10.6. Set -Div's- Font Color of: "cardinfotext1", and "cardinfotext2"

717171

10.6. Written steps

-Inside the Div's Properties Panel-

A. [Click] the Background toggle and [click] Fill:

• Fill allows you to select either a material color or a gradient as background.

B. [Click] Background color and [Type] the desired color:

• You can type a 6 characters HEX code without the initial #.

Step 11:

Text, Div, Icon, and Size

11

11. Video

11. GIF

11.1. Create new child -Texts- inside of the Div: "cardinfodiv2"

New Text 1 name: cardinfodiv2text1

New Text 2 name: cardinfodiv2text2

2.1. Written steps

-Inside the Element Tree-

A. [Click] the Icon 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 "searchmenudiv5":

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

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

-Inside the Icon's Properties Panel-

C. [Click] the current name of the Icon 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.

11.2. Set -Div's- Size of: "cardinfodiv2"

Width: Wrap

Height: Wrap

11.3. Written steps

-Inside the Div's Properties Panel-

A. [Click] the Wrap button, inside the Height section:

• The vertical size of the Div will become its child's maximum combined size.

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

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

• The vertical size of the Div will become its child's maximum combined size.

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

11.3. Set Text of: "cardinfodiv2text1"

Selected Text: $350

11.3. Written steps

-Inside the Icon's Properties Panel-

[Click] the Icon container and [click] the Icon:

• You can use the Icon name to find it through the SearchBar.

• You can also find it through each Material category's dropdown.

11.4. Set Text of: "cardinfodiv2text2"

Selected Text: night

11.4. Written steps

-Inside the Icon's Properties Panel-

[Click] the Icon container and [click] the Icon:

• You can use the Icon name to find it through the SearchBar.

• You can also find it through each Material category's dropdown.

Step 12:

Background Color, Radius, and Padding

12

12. GIF

12. Video

12.1. Set -Text- Size of: "cardinfodiv2text1"

16

12.1. Written steps

-Inside the Icon's Properties Panel-

[Click] the Icon Size container and [type] the new value:

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

12.2. Set -Text- Font Style of: "cardinfodiv2text1"

[B] Bold

12.2. Written steps

-Inside the Properties Panel-

[Click] the B button, inside the Font Style section:

• You can only select Bold, Italic or Normal, one at the time.

• If changed before, the Bold toggle needs to be set to neutral and then back to Bold.

12.3. Set -Text- Size of: "cardinfodiv2text2"

14

12.3. Written steps

-Inside the Icon's Properties Panel-

[Click] the Icon Size container and [type] the new value:

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

12.4. Set -Text's- Margin of: "cardinfodiv2text2"

Left: 5

12.4. Written steps

-Inside the Properties Panel-

[Click] the Margin Left 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.

Save.

Save

GIF

Video

Click the Save button.