Style Settings 02

In this post, we'll be adjusting the style settings for your About Page, Blog Page, and Shop Page. Whenever you add a new content block style, you'll need to make sure to update the Style Settings for this block style so it matches the rest of your site. Here's a handy trick to make this process easier. First, navigate to your Style Settings menu. Next, click on the block that you'd like to adjust the style settings of. This will pull up the style settings for only that section of your site and you can change the settings accordingly.

First, we'll adjust the style settings for this top image on your About Page. As we did in the first Style Settings tutorial, you'll simply replace the existing style settings on your site with the style settings in this post.

IMAGE BLOCK: CARD

  • Dynamic Font Sizing: Unchecked
  • Content Position: Center
  • Text Alignment: Left
  • Image Width: 60%
  • Title Font: 
    • IM Fell English
    • Weight: 400
    • Style: Normal
    • Size: 26px
    • Letter Spacing: 0em
    • Text Transform: None
    • Line Height: 1.3em
  • Title Color: #555555
  • Subtitle Font: 
    • Georgia
    • Weight: 400
    • Style: Normal
    • Size: 15px
    • Letter Spacing: 0em
    • Text Transform: None
    • Line Height: 1.6em
  • Subtitle Color: #555555
  • Inline Link Color: #555555
  • Title Separation: 3%
  • Card Background Color: #f3f3f3
  • Card Padding: 15%
  • Card Separation: 0%
  • Image Overlay Color: hsla(0, 0%, 0%, 0)
  • Title Background Color: hsla(0, 0%, 0%, 0)
  • Button Font: 
    • Montserrat
    • Weight: 400
    • Style: Normal
    • Size: 9px
    • Letter Spacing: 0.47em
    • Text Transform: Uppercase
    • Line Height: 1.1em
  • Button Font Color: #555555

Make sure to click save before moving on. 

Next we'll move over to your Blog Page and adjust the Style Settings here. Navigate back to your Pages menu and click on the Blog page. Then, navigate back to the Setting Editor section and click on the blog feed on your site. This will bring up the Style Settings for your blog page. Now you can replace the existing style settings on your site with the style settings in this post.

BLOG: METADATA:

  • Primary: Category
  • Secondary: None

BLOG: LIST

  • Style: Grid
  • Posts Per Max: 3
  • Spacing: 80px
  • Alignment: Center
  • Item Spacing: 17px
  • Show Image: Checked
  • Image Aspect Ratio: 1:1 Square
  • Show Title: Checked
  • Show Excerpt: Checked
  • Read More Link: Hide
  • Metadata: Below Content

BLOG: TYPOGRAPHY & COLORS

  • List Title Font
    • Georgia
    • Weight: 400
    • Style: Normal
    • Size: 17px
    • Letter Spacing: 0em
    • Text Transform: None
    • Line Height: 1.3em
  • Title Color: #555555
  • Meta Font
    • Georgia
    • Weight: 400
    • Style: Italic
    • Size: 10px
    • Letter Spacing: 0.15em
    • Text Transform: Lowercase
  • Meta Color: #555555
  • Excerpt Font:
    • Georgia
    • Weight: 400
    • Style: Normal
    • Size: 12px
    • Letter Spacing: 0.06em
    • Text Transform: None
    • Line Height: 1.6em
  • Excerpt Color: #555555
  • Read More Link Font
    • Montserrat
    • Weight: 700
    • Style: Normal
    • Size: 9px
    • Letter Spacing: 0.47em
    • Text Transform: Uppercase
  • Read More Link Color: #555555

Make sure to click save before moving on. 

After replacing the Style Settings for your Blog Feed, click "Design" on the top left corner. Next click on one of your Blog Posts and then click on the screen to adjust the Style Settings for your Individual Blog Page using the Style Settings in this Post. 

BLOG: ITEM

  • Alignment: Center
  • Item Spacing: 32px
  • Metadata: Above title
  • Share Icons: Below Content
  • Show Pagination Arrows: Unchecked
  • Show Pagination Label: Unchecked
  • Show Pagination Title: Checked
  • Pagination Meta: Category

BLOG: TYPOGRAPHY & COLORS

  • List Title Font
    • Georgia
    • Weight: 400
    • Style: Normal
    • Size: 17px
    • Letter Spacing: 0em
    • Text Transform: None
    • Line Height: 1.3em
  • Item Title Font
    • Georgia
    • Weight: 400
    • Style: Normal
    • Size: 19px
    • Letter Spacing: 0em
    • Text Transform: None
    • Line Height: 1.5em
  • Title Color: #555555
  • Meta Font
    • Georgia
    • Weight: 400
    • Style: Italic
    • Size: 10px
    • Letter Spacing: 0.15em
    • Text Transform: Lowercase
  • Meta Color: #555555
  • Pagination Label Font
    • Montserrat
    • Weight: 700
    • Style: Normal
    • Size: 9px
    • Letter Spacing: 0.47em
    • Text Transform: Uppercase
  • Pagination Label Color: #555555

SHARE BUTTONS:

  • Style: Icon Only
  • Size: 15px
  • Spacing: 10px
  • Icons: Standard Color: Unchecked
  • Icons: Custom Color: rgba(29,29,29,0.2)

Make sure to click Save before moving on. 

Once you're done, navigate back to your Pages Menu and click on the Shop Page in your Not Linked section. After clicking on the Shop Page, click Pages on the top left so you can see your Shop Product Page. Just as you did with the Blog Feed, click on the screen of your Shop Page and replace the style settings with the settings in this post. Make sure to save your settings after finishing. 

PRODUCTS: LAYOUT

  • Items Per Row: 3
  • Item Spacing: 15px
  • Image Aspect Ratio: 1:1 Square
  • Item Hover Behavior: Show Alternate Image

PRODUCT: DETAILS

  • Position: Under
  • Alignment: Center
  • Spacing: 50px
  • Show Title
  • Title Font
    • Montserrat
    • Weight: 700
    • Style: Normal
    • Size: 9px
    • Letter Spacing: 0.47em
    • Text Transform: Uppercase
    • Line Height: 1.4em
  • Title Color: #555555
  • Title Spacing: 1.2em
  • Show Price: Checked
  • Price Font: 
    • Georgia
    • Weight: 400
    • Style: Normal
    • Size: 12px
    • Letter Spacing: 0.1em
    • Text Transform: Uppercase
    • Line Height: 1.4em
  • Price Color: #555555
  • Sale Price Color: #555555
  • Price Spacing: 0.5em

PRODUCTS: SORT + FILTER

  • Display: Hide

Once you're done, click "Design" and click on one of your Products. Navigate back to your Style Editor and adjust the style settings by replacing it with the style settings in this post. Make sure to click save before moving on. 

PRODUCTS: LAYOUT

  • Spacing: 50px
  • Top Padding: 0px
  • Nav Display: None

PRODUCTS: GALLERY

  • Position: Left
  • Design: Slideshow
  • Width: 60%
  • Aspect Ratio: 1:1 Square
  • Thumbnail Alignment: Left
  • Thumbnail Width: 50px
  • Thumbnail Spacing: 10px

PRODUCT: DETAILS

  • Alignment: Left
  • Spacing: 25px
  • Show Title: Checked
  • Title Font
    • Georgia
    • Weight: 400
    • Style: Normal
    • Size: 20px
    • Letter Spacing: 0em
    • Text Transform: None
    • Line Height: 1.2em
    • Title Color: #555555
    • Show Price: Checked
  • Price Font
    • Georgia
    • Weight: 400
    • Style: Normal
    • Size: 13px
    • Letter Spacing: 0em
    • Text Transform: None
  • Price Color: #555555
  • Sale Price Color: #555555
  • Show Excerpt: Checked
  • Excerpt Position: Below Price
  • Excerpt Font
    • Georgia
    • Weight: 400
    • Style: Normal
    • Size: 15px
    • Letter Spacing: 0.06em
    • Text Transform: None
    • Line Height: 1.8em
  • Excerpt Color: #555555
  • Excerpt Link Color: #555555
  • Show Share Buttons: Checked

PRODUCTS: OPTIONS

Show Quantity: Checked

PRODUCTS: ADD TO CART BUTTON

  • Show Button: Checked
  • Style: Outline
  • Shape: Square
  • Padding: Small
  • Color: #5555555
  • Font
    • Montserrat
    • Weight: 700
    • Style: Normal
    • Size: 9px
    • Letter Spacing: 0.47em
    • Text Transform: Uppercase

PRODUCTS: IMAGE ZOOM

  • Enable Image Zoom: Unchecked

SHARE BUTTONS

  • Style: Icon Only
  • Size: 15px
  • Spacing: 10px
  • Icons: Standard Color: Unchecked
  • Icons: Custom Color: rgba(29,29,29,0.2)

After you've gone through this tutorial, your site should look like our demo site. 

In this next post, you'll start customizing your site and writing your content.