Wander – Image sizes, colors, fonts & custom classes

Image sizes
  • First featured image: 1820x1100px
  • Second featured image: 600x800px
  • Above blog newsletter area image: 1043x668px
  • Category showcase image: 230x300px
  • Shop banner image: 1900x673px
  • Product image: 735x854px
  • Blog advertisement area image: 1820x1100px
Colors for demo 1
  • Black: #182329
  • Blue: #C6D2E0
  • Gray: #E6ECF2
  • Light gray: #F2F5F8
Colors for demo 2
  • Black: #595553
  • Green: #636857
  • Brown: #AE6F55
  • Beige: #E5E2DE
  • Light beige: #F2F0EE
Fonts
  • Navigation & body font: Open Sans
  • Site title & headlines: Cormorant
  • Icon fonts: Fontawesome and Ionicon
Custom classes

We created some custom classes to give different styles to some WordPress blocks.

To make a vertical line with “spacer” block, write the below class to Block Settings > Advanced > Additional CSS Class

vertical-line

You can display a diagonal line on “image” block by writing the below classes to Block Settings > Advanced > Additional CSS Class

left-top-line
left-bottom-line
right-top-line
right-bottom-line

To give background color to “columns” block, write the below class to Block Settings > Advanced > Additional CSS Class

column-background

To decrease the size of any “title” block, write the below class to Block Settings > Advanced > Additional CSS Class

less-margin

To add a white background color for “cover” image block’s text and make it uppercase, write the below class to Block Settings > Advanced > Additional CSS Class

featured-page

To lower a title over on to background colored column block, write the below class to any “title” block’s Block > Settings > Advanced > Additional CSS Class

lowered-title