Tips for Homepage staging on Flatsome

Tips for Homepage Staging (Flatsome)

☆ These are compulsory elements!! ☆

1. Header

1.1. Customize > Header > Logo & Site Identity
a) Logo image
b) Logo image – light version
c) Favicon / site Icon

1.2. Customize > Header > Main Menu
a) Navigation size & spacing
b) Nav colour, hover, icons colour & hover

2. Style

2.1. Customize > Style > Colour
a) Primary colour & secondary colour
b) Base & headline colour
c) links + widget colour and hover colour

☆ Set the primary colour as your mockup’s button colour ☆

2.2. Customize > Style > Global Styles > Button radius

2.3 Customize > Style > Typography
a) Headlines & base (body) – font family & variant (weight)
b) Navigation – font family & variat (usually same as base)

2.4 Customize > Style > Custom CSS
a) Set font sizes, text transform and line height etc. here
b) Find css here (Point 1)

3. Layout

3.1. Customize > Layout (1200px ~ 1250px)

4. Footer

4.1. Customize > Footer: Main Footer (Custom)
a) If using ux builder to design, set as custom footer block

4.2. Customize > Footer: Main Footer (Non-custom)
a) Enable either Footer 1 or 2
b) Columns, colour, background colour/image
c) Add in elements in Widgets (Customize > Widgets)

4.3. Customize > Footer: Absolute Footer
a) Align, background colour & copyright text (Find here , Point 4.3)

5. Menu

5.1. Create Main Menu
a) Set menu name
b) Add in custom links, using # for url placeholder

6. Additional CSS

6.1. Customize > Additional CSS: Find CSS here

7. Overview Checklist

a) Logo & site identity
b) Header (Main, Top & Bottom)
c) Colours
d) Button radius
e) Typography
f) Custom CSS (Font Sizes)
g) Layout
h) Footer & Absolute Footer
i) Menu
j) Additional CSS (Optional)