3.2. Site Menu | Style

Build a desktop oriented menu for your Home Screen!

Step 8:

Size, and Margin

8.

8. Video

8. GIF

8.1. Set "sitemenumedia1" Size:

Width: 100 px

Height: 30 px

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

8.2. Set "menuusers" Alignment:

Main: Axis center

Cross: Axis center

8.2. Written steps

-Inside the Properties Panel-

A. [Click] the Main Axis center button, inside the Alignment section:

• In the Top-Down first row of buttons, choose the Left-to-right second one.

• The items are packed to each other toward the center.

B. [Click] the Cross Axis center button, inside the Alignment section:

• In the Top-Down second row of buttons, choose the Left-to-right second one.

• The items are packed to each other toward the center.

8.3. Set "sitemenutext1" Font Style:

[B] Bold

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

8.4. Set "sitemenutext1, sitemenutext2, sitemenutext3" Font Size:

16

8.4. Written steps

-Inside the Properties Panel-

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

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

8.5. Set "sitemenutext1, sitemenutext2 and sitemenutext3" Margin:

Left: 16 px

Right: 16 px

8.5. Written steps

-Inside the Properties Panel-

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

B. [Click] the Margin Right 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 9:

Border Color, Width, Radius, Padding, and Margin

9.

9. Video

8. GIF

9.1. Set "sitemenudiv1" Border Color:

E0E0E0

9.1. Written steps

-Inside the Properties Panel-

[Click] Border Color and [Type] the color:

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

• You can select either a material color or a gradient.

9.2. Set "sitemenudiv1" Border Width:

1

9.2. Written steps

-Inside the Properties Panel-

[Click] the Width container, inside the Borders section, and [type] the new value:

• The Border Width 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.

9.3. Set "sitemenudiv1" Radius:

25

9.3. Written steps

-Inside the 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.

9.4. Set "sitemenudiv1" Padding:

Top: 10 px

Bottom: 10 px

9.4. Written steps

-Inside the Properties Panel-

A. [Click] the Padding 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 Padding 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.

9.5. Set "sitemenudiv1" Margin:

Left: 8 px

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

Step 10:

Margin, Font Size, and Icon Size

10.

10. Video

9. GIF

10.1. Set "sitemenutext4" Font Size:

14

10.1. Written steps

-Inside the Properties Panel-

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

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

10.2. Set "sitemenuicon1, sitemenuicon2, sitemenuicon3" Icon Size:

24

10.2 Written steps

-Inside the 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.3. Set "sitemenutext4, sitemenuicon1" Margin:

Left: 10

Right: 10

10.3. Written steps

-Inside the Properties Panel-

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

B. [Click] the Margin Right 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.4. Set "sitemenuicon2" Margin:

Left: 10

Right: 4

10.4. Written steps

-Inside the Properties Panel-

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

B. [Click] the Margin Right 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 "sitemenuicon3" Margin:

Left: 4

Right: 10

10.5. Written steps

-Inside the Properties Panel-

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

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