3. Desktop Menu

Build a desktop oriented menu for your Home Screen!

Step 1:

Div, and Size

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.

1.1. New child Div, inside "homemenu":

Name: homemenudesktop

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 "homemenu":

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

1.2. Set "homemenu" Size:

Width: Fill

Height: Wrap

1.2. Written steps

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

1.3. New child Divs, inside "homemenudesktop":

Name 1 : sitemenu

Name 2: searchmenu

1.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 "homemenudesktop":

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

1.4. Set "homemenudesktop" Size:

Width: Fill

Height: Wrap

1.4. Written steps

-Inside the 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 2:

Alignment, and Padding

2.1. Set "homemenu" Alignment:

Main: Axis center

Cross: Axis center

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

2.2. Set "homemenudesktop" Alignment:

Main: Axis center

Cross: Axis center

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

2.3. Set "homemenu" Padding:

Bottom: 18 px

Left: 80 px

Right: 80 px

2.3. Written steps

-Inside the Properties Panel-

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

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

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

2.4. Set "sitemenu" Padding:

Top: 10 px

Bottom: 10 px

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

Previous2. DividerNext3.1. Site Menu | Elements

Last updated