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.

k

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

Last updated