Style Settings

Now it's time to start adjust your style settings and watching your site take shape. To do this, navigate back to your Home Menu, and then click Design. Next, click "Style Editor".

Next, you'll go through all of the style settings and replace the existing settings with the settings outlined in this post. We recommend opening your site in a separate window to make it easy for you to cross reference and copy and paste between this tutorial page and your site. 

**Important! Make sure to click "save" after adjusting your style settings!**

SOCIAL ICONS

  • Size: 13px
  • Style: Solid
  • Color: #555555


SITE

  • Design: Full Background
  • Width: 1800px
  • Side Padding: 80px
  • Icons: Hairline


SITE: BORDER

  • Show Border: Checked
  • Width: 120px
  • Color: #f3f3f3
     

SITE: LOADING

  • Enable Ajax Loading: Checked
  • Show Loading Bar: Unchecked


HEADER: TOP

  • Background: hsl(178, 0%, 90%)
  • Padding: 25px
  • Right Layout: Horizontal


HEADER: BOTTOM

  • Padding: 38px
  • Right Layout: Horizontal


HEADER: LAYOUT

  • Element Spacing (Horizontal): 48px
  • Element Spacing (Vertical): 2px
  • Branding Position: Bottom Left
  • Primary Nav Position: Bottom Right
  • Secondary Nav Position: Top Right
  • Social Position: Bottom Right
  • Search Position: Hide
  • Cart Position: Top Right


HEADER: BRANDING

  • Font
    • IM Fell English
    • Weight: 300
    • Style: Normal
    • Size: 28px
    • Letter Spacing: 0.3em
    • Text Transform: Uppercase
    • Line Height: 1em
  • Color: #555555

HEADER: PRIMARY NAVIGATION

  • Link Spacing: 2.1em
  • Style: Spotlight
  • Font:
    • Montserrat
    • Weight: 700
    • Style: Normal
    • Size: 9px
    • Letter Spacing: 0.48em
    • Text Transform: Uppercase
  • Color: #555555
  • Folder Color: #555555
  • Folder Text Color: #ffffff

HEADER SECONDARY NAVIGATION:

  • Inherit Primary Navigation Styles: Unchecked
  • Link Spacing: 0.618em
  • Style: Active
  • Font:
    • Georgia
    • Weight: 400
    • Style: Italic
    • Size: 11px
    • Letter Spacing: 0.15em
    • Text Transform: Lowercase
  • Color: #555555
  • Active Color: #555555
  • Folder Color: #ffffff
  • Folder Text Color: #555555

HEADER: CART

  • Style: Cart
  • Font:
    • Lato
    • Weight: 700
    • Style: Normal
    • Size: 9px
    • Letter Spacing: 0em
    • Text Transform: Uppercase
  • Color: #555555
  • Quantity Color: 555555
  • Quantity Text Color: #ffffff

MAIN

  • Color: #ffffff
  • Content Inset: 3

MAIN: OVERLAY

  • Enable Parallax: Unchecked
  • Overlay Color: Unchecked

INDEX NAVIGATION:

  • Style: None

INDEX: PAGE

  • Padding: 50px
  • Padding (Overlay Pages) 67px
  • Apply Minimum Height: None

INDEX: SCROLL INDICATOR

  • Option: None

INDEX: GALLERY

  • Layout: Slideshow
  • Spacing: 0px
  • Apply Spacing on Sides: Unchecked
  • Apply Spacing on Top/Bottom: Unchecked
  • Aspect Ratio: 47
  • Hover Style: Plain
  • Image Overlay: rgba(0,0,0,0)

INDEX: SLIDESHOW GALLERY

  • Next/Previous Controls: Small Arrows
  • Controls Offset: 31px
  • Controls Padding: 17px
  • Controls Weight: Medium
  • Controls Color: #ffffff
  • Controls Background Color: hsla(0, 1%, 47%, 0)
  • Indicators: None
  • Autoplay: Checked
  • Autoplay Duration (Seconds): 5
  • Transitions: Fade
  • Transition Duration (Milliseconds): 500

INDEX: GALLERY CONTENT

  • Content Position: Top Left
  • Content Offset (Top): 79px
  • Content Offset (Left): 0px
  • Content Max Width: 100%
  • Content Padding: 25px
  • Content Text Alignment: Center
  • Content Background: #ffffff
  • Title Font:
    • Montserrat
    • Weight: 700
    • Style: Normal
    • Size: 9px
    • Letter Spacing: 0.47em
    • Text Transform: Uppercase
    • Line Height: 1em
  • Title Color: #555555
  • Body Font:
    • Georgia
    • Weight: 400
    • Style: Normal
    • Size: 12px
    • Letter Spacing: 0.1em
    • Text Transform: None
    • Line Height: 1,6em
  • Body Color: #555555

CONTENT: FONTS

  • Body Text
    • Georgia
    • Weight: 400
    • Style: Normal
    • Size: 15px
    • Letter Spacing: 0em
    • Text Transform: None
    • Line Height: 1.8em
  • Heading 1
    • IM Fell English
    • Weight: 400
    • Style: Normal
    • Size: 52px
    • Letter Spacing: 0em
    • Text Transform: None
    • Line Height: 1.2em
  • Heading 2
    • Georgia
    • Weight: 400
    • Style: Normal
    • Size: 14px
    • Letter Spacing: 0em
    • Text Transform: None
    • Line Height: 1.7em
  • Heading 3
    • Montserrat
    • Weight: 700
    • Style: Normal
    • Size: 9px
    • Letter Spacing: 0.47em
    • Text Transform: Uppercase
    • Line Height: 1.7em

CONTENT: COLORS

  • Body Text: #555555
  • Heading 1: #555555
  • Heading 2: #555555
  • Heading 3: #555555
  • Links: #555555
  • Body Text (Overlay): #555555
  • Heading 1 (Overlay): #555555
  • Heading 2 (Overlay): #555555

FOOTER

  • Show Footer: Checked
  • Layout: Stacked
  • Padding: 48px
  • Alignment: Center
  • Background Color: #ffffff

FOOTER: BUSINESS

Show Business Info: Unchecked

Show Business Hours: Unchecked

FOOTER CONTENT: COLORS

  • Body Text: #555555
  • Heading 3: #555555
  • Links: #555555
  • Lines: #555555

MOBILE: 

Mobile Breakpoint: 640px

MOBILE: TOP

  • Fixed Mobile Top: Unchecked
  • Top Background: #ffffff

MOBILE: BRANDING

  • Position: Top Left
  • Logo Width: 80px
  • Font: 
    • IM Fell English
    • Weight: 400
    • Style: Normal
    • Size: 20px
    • Letter Spacing: 0.17em
    • Text Transform: Uppercase
    • Line Height: 1em
  • Color: #555555

MOBILE: MENU ICON

  • Menu Icon Position: Top Right
  • Menu Icon: Hamburger
  • Menu Icon Color: #555555

MOBILE: SEARCH ICON

  • Position: Hide

MOBILE: CART

  • Position: Top Right
  • Style: Text
  • Font:
    • Montserrat
    • Weight: 700
    • Style: Normal
    • Size: 9px
    • Letter Spacing: 0.47em
    • Text Transform: Uppercase
    • Line Height: 1.7em
  • Color: #555555

MOBILE MENU: GENERAL

  • Side: Left
  • Backdrop Color: #ffffff
  • Show Close Button: Checked
  • Close Background Color: #ffffff
  • Close Icon Color: #555555
  • Menu Color: #ffffff
  • Indicator Color: #555555

MOBILE MENU: PRIMARY

  • Font
    • Montserrat
    • Weight: 700
    • Style: Normal
    • Size: 9px
    • Letter Spacing: 0.47em
    • Text Transform: Uppercase
    • Line Height: 1.7em
  • Text Color: #555555
  • Convert Primary Nav to Buttons: Unchecked

MOBILE MENU: SECONDARY

  • Inherit Primary Nav Styles: Unchecked
  • Font:
    • Georgia
    • Weight: 400
    • Style: Italic
    • Size: 10px
    • Letter Spacing: 0.15em
    • Text Transform: Lowercase
    • Line Height: 1.7em
  • Text Color: #555555
  • Convert Secondary Nav to Buttons: Unchecked

NEWSLETTER BLOCK:

  • Style: Custom
  • Background Color: #ffffff
  • Padding: 34px
  • Heading Color: #555555
  • Text Color: #555555
  • Button Color: #555555
  • Button Text Color: #ffffff
  • Alternate Background Color: rgba(0,0,0,0)
  • Alternate Padding: 25px
  • Alternate Heading Color: #555555
  • Alternate Text Color: #555555
  • Alternate Button Color: #555555
  • Alternate Button Text Color: #ffffff

BUTTON BLOCK (SMALL)

  • Style: Solid
  • Shape: Square
  • Button Color: #f3f3f3
  • Text Color: #555555
  • Font
    • Montserrat
    • Weight: 700
    • Style: Normal
    • Size: 9px
    • Letter Spacing: 1em
    • Text Transform: Uppercase

BUTTON BLOCK (MEDIUM)

  • Style: Solid
  • Shape: Square
  • Button Color: #f3f3f3
  • Text Color: #555555
  • Font
    • Montserrat
    • Weight: 700
    • Style: Normal
    • Size: 9px
    • Letter Spacing: 1em
    • Text Transform: Uppercase

IMAGE BLOCK: STACK

  • Dynamic Font Sizing: Unchecked
  • Text Alignment: Center
  • Title Font: 
    • Georgia
    • Weight: 400
    • Style: Normal
    • Size: 15px
    • Letter Spacing: 0em
    • Text Transform: None
    • Line Height: 1.2em
  • Title Color: #555555
  • Subtitle Font: 
    • Georgia
    • Weight: 400
    • Style: Normal
    • Size: 15px
    • Letter Spacing: 0em
    • Text Transform: None
    • Line Height: 1.2em
  • Subtitle color: #555555
  • Inline Link Color: #555555
  • Title Separation: 5%
  • Card Background: #f3f3f3
  • Card Padding: 38px
  • Card Separation: 0%
  • Image Overlay Color: 
  • Button Font
    • Montserrat
    • Weight: 700
    • Style: Normal
    • Size: 11px
    • Letter Spacing: 0.47em
    • Text Transform: Uppercase
    • Line Height: 1.1em
  • Button Font Color: #555555
  • Button Background Color: #ffffff
  • Button Border Color: #ffffff
  • Button Border Width: 2px
  • Button Padding: 1.1em
  • Button Rounding: 0em
  • Button Separation: 4%

BUTTONS: 

  • Style: solid
  • Shape: Square

After going through this tutorial, your style settings should be adjusted and your homepage should look like our demo site. In the next post, we'll add content to your FAQs and Contact page.