Home Header

Build the Header of your Home Screen!

Screens

1. Video

1. GIF

1. Change "Screen" name:

New name: home

1.1. Written steps

-Inside the Properties Panel-

[Click] the current name of the Screen and type the new one:

• The name is located at the top of the panel, above of the Style toggle.

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

Div, and Size

Home Header

1. Video

1. GIF

1. New Div:

New Div name: homeheader

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.

2. New child Divs, inside "homeheader":

New Div 1 name: homebanner

New Div 2 name:: horizontaldivider

New Div 3 name:: homemenu

New Div 4 name:: homenavbar

1.2. Written steps

Apply this steps for each of the new Divs.

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

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

3. Set "homeheader" Size:

Width: Fill

Height: Wrap

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