3. Desktop Menu
Build a desktop oriented menu for your Home Screen!
Step 1:
Div, and Size
8.1. Set "sitemenumedia1" Size:
Width:
100 pxHeight:
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:
FillHeight:
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 :
sitemenuName 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:
FillHeight:
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 centerCross:
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 centerCross:
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 pxLeft:
80 pxRight:
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 pxBottom:
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.
Last updated