1. Banner

Build your Home Screen Banner!

Step 1:

Text

1.1. New child Text, inside "homebanner":

Name: dividertext1

1.1. Written steps

-Inside the Element Tree-

A. [Click] the Text 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 "homebanner":

The new element will appear as a child of the Screen.
The Text will be created with the default name "Text #".

-Inside the Properties Panel-

C. [Click] the current name of the Text 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 "dividertext1" Text:

Learn about Guest Favorites, the most loved homes on Airbnb

1.2. Written steps

-Inside the Properties Panel-

[Click] the Text container and [type]:

You will have to erase the default text: Type...
You can also copy and paste text from other sources.
You can use any type of characters.
You cannot create a line break with the [enter] key.
You can create line breaks by adjusting the Text Width.

Step 2:

Size, Alignment, and Padding

2.1. Set "homebanner" Width Size:

Width: Fill
Height: Wrap

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

2.2. Set "homebanner" 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 "homebanner" Padding:

Top: 22 px
Bottom: 22 px
Left: 80 px
Right: 80 px

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

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

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

Step 3:

Background Color, Font Size, and Font Style

3.1. Set "homebanner" Background Color:

F5F5F5

3.1. Written steps

-Inside the Properties Panel-

A. [Click] the Background toggle and [click] Fill:

Fill allows you to either select a material color or a gradient as the background.

B. [Click] Background color and [type] the desired color:

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

3.2. Set "dividertext1" Font Size:

16

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

3.3. Set "dividertext1" Font Style:

[B] Bold

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

PreviousHome Header Next2. Divider

Last updated 1 year ago

Step 1:

Text

1.1. New child Text, inside "homebanner":

Name: dividertext1

1.1. Written steps

-Inside the Element Tree-

A. [Click] the Text 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 "homebanner":

The new element will appear as a child of the Screen.
The Text will be created with the default name "Text #".

-Inside the Properties Panel-

C. [Click] the current name of the Text 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 "dividertext1" Text:

Learn about Guest Favorites, the most loved homes on Airbnb

1.2. Written steps

-Inside the Properties Panel-

[Click] the Text container and [type]:

You will have to erase the default text: Type...
You can also copy and paste text from other sources.
You can use any type of characters.
You cannot create a line break with the [enter] key.
You can create line breaks by adjusting the Text Width.

Step 2:

Size, Alignment, and Padding

2.1. Set "homebanner" Width Size:

Width: Fill
Height: Wrap

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

2.2. Set "homebanner" 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 "homebanner" Padding:

Top: 22 px
Bottom: 22 px
Left: 80 px
Right: 80 px

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

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

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

Step 3:

Background Color, Font Size, and Font Style

3.1. Set "homebanner" Background Color:

F5F5F5

3.1. Written steps

-Inside the Properties Panel-

A. [Click] the Background toggle and [click] Fill:

Fill allows you to either select a material color or a gradient as the background.

B. [Click] Background color and [type] the desired color:

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

3.2. Set "dividertext1" Font Size:

16

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

3.3. Set "dividertext1" Font Style:

[B] Bold

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