3.4. Search | Style

Build a desktop oriented menu for your Home Screen!

Step 15:

Font Size, and Font Style

15.

15. Video

15. GIF

15.1. Set "searchmenudiv1text1, searchmenudiv2text1, searchmenudiv3text1, and searchmenudiv4text1" Font Size:

12

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

15.2. Set "searchmenudiv1text1, searchmenudiv2text1, searchmenudiv3text1, and searchmenudiv4text1" Font Style:

[B] Bold

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

15.3. Set "searchmenudiv1text2, searchmenudiv2text2, searchmenudiv3text2, and searchmenudiv4text2" Font Size:

14

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

Step 16:

Margin

16.

You will:

16. GIF

16. Video

16.1. Set "searchmenudiv1" Margin:

Left: 28

Right: 64

16.1. Written steps

-Inside the Properties Panel-

A. [Click] the Margin 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.

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

16.2. Set "searchmenudiv2" Margin:

Left: 64

Right: 48

16.2. Written steps

-Inside the Properties Panel-

A. [Click] the Margin 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.

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

16.3. Set "searchmenudiv3" Margin:

Left: 48

Right: 48

16.3. Written steps

-Inside the Properties Panel-

A. [Click] the Margin 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.

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

16.4. Set "searchmenudiv4" Margin:

Left: 48

Right: 64

16.4. Written steps

-Inside the Properties Panel-

A. [Click] the Margin 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.

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

16.5. Set "searchmenudiv3" Margin:

Left: 60

16.5. Written steps

-Inside the Properties Panel-

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

Step 17:

Background Color, Radius, and Padding

17.

17. GIF

17. Video

17.1. Set "searchmenudiv5" Background Color to:

FF385C

17.1. Written steps

-Inside the Properties Panel-

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

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

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

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

17.2. Set "searchmenudiv5" Radius to:

25

17.2. Written steps

-Inside the Properties Panel-

[Click] the Radius container, and [type] the new value:

• The Radius applies to all four sides of a Div.

• You can also change the size value using the up and down arrows.

• The default Unit is in Pixels.

17.3. Set "searchmenudiv5" Padding:

Top: 8

Bottom: 8

Left: 8

Right: 8

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

17.4. Set "searchmenudiv5ticon1" Icon Size:

28

17.4. Written steps

-Inside the Properties Panel-

[Click] the Icon Size container and [type] the new value:

• You can also change the size value using the up and down arrows.

17.5. Set "searchmenudiv5ticon1" Icon Color:

E0E0E0

17.5. Written steps

-Inside the Properties Panel-

[Click] Icon Color and [Type] the color:

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

• You can select either a material color or a gradient.

l

Step 18:

Border Color, Width, Radius, Shadow Blur, and Shadow Color

18.

18. Video

18. GIF

18.1. Set "searchmenu" Border Color:

E0E0E0

18.1. Written steps

-Inside the Properties Panel-

[Click] Border Color and [Type] the color:

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

• You can select either a material color or a gradient.

18.2. Set "searchmenu" Border Width:

1

18.2. Written steps

-Inside the Properties Panel-

[Click] the Width container, inside the Borders section, and [type] the new value:

• The Border Width applies to all four sides of a Div.

• You can also change the size value using the up and down arrows.

• The default Unit is in Pixels.

18.3. Set "searchmenu" Radius:

50

18.3. Written steps

-Inside the Properties Panel-

[Click] the Radius container, and [type] the new value:

• The Radius applies to all four sides of a Div.

• You can also change the size value using the up and down arrows.

• The default Unit is in Pixels.

18.4. Set "searchmenu" Shadow Blur:

5

18.4. Written steps

-Inside the Properties Panel-

[Click] the Blur container, and [type] the new value:

• Shadows can only be applied to a Div with a Fill or Image background.

• The Shadow applies to all four sides of a Div.

• You can also change the size value using the up and down arrows.

18.5. Set "searchmenu" Shadow Color:

E0E0E0

18.5. Written steps

-Inside the Properties Panel-

[Click] Shadow Color and [Type] the color:

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

• You can only select a material color.

18.6. Set "searchmenu" Padding:

Top: 10

Bottom: 10

Left: 10

Right: 10

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