3.2. Site Menu | Style

Build a desktop oriented menu for your Home Screen!

Step 8:

Size, and Margin

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

Previous3.1. Site Menu | Elements Next3.3. Search | Elements

Last updated 1 year ago

Step 8:

Size, and Margin

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